﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿﻿<!-- ============================================================================ -->
<!-- 牌兵布阵 - 扑克牌列阵对决 -->
<!-- ============================================================================ -->
<!-- 文件结构说明: -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【CSS/HTML 部分】 -->
<!--    1. Tailwind CSS 配置 - 自定义颜色、动画、工具类 -->
<!--    3. 全局样式 - 游戏容器、区域布局、通用样式 -->
<!--    4. 经典风格样式 - 红蓝配色、默认外观 -->
<!--    5. 玻璃风格样式 - 毛玻璃效果、透明质感 -->
<!--    6. 金属风格样式 - 金属渐变、立体边框 -->
<!--    7. 匹配光环动画 - 金色光晕、呼吸闪烁效果 -->
<!--    8. HTML结构 - 游戏界面布局、规则面板、设置面板 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JavaScript 部分】 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-1/10】游戏数据配置 -->
<!--    3. 卡牌基础数据 - suits/ranks/values（3最小、2最大，A与K相邻） -->
<!--    4. 游戏配置参数 - GameConfig统一管理可调整参数 -->
<!--    5. 音效配置 · SoundConfig - 游戏音效/UI音效/危机音乐/胜负音乐 -->
<!--    6. AI 配置 · AIConfig - 对手出牌逻辑参数 -->
<!--    7. AI 战术决策引擎 · AIDecisionEngine - AI策略核心 -->
<!--    8. 音效播放引擎 - playSound统一入口 -->
<!--    9. DOM 元素引用 - GameElements.player/opponent/ui -->
<!--   10. 游戏状态 · GameState - 运行时状态 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-2/10】视觉配置系统 -->
<!--   11. 卡面配置 - CardFaceConfig/GlassCardFaceConfig -->
<!--   12. 卡背设计数据 - CardBackConfig -->
<!--   13. 动画配置 · CardAnimationConfig - 9种移动类型配置 -->
<!--   14. 栏目可见性配置 · ColumnVisibilityConfig - 状态栏开关 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-3/10】卡牌渲染系统 -->
<!--   16. 卡牌渲染函数 - getCardFaceHTML/getCardBackElementHTML/createCardElement -->
<!--   17. 游戏缩放工具 - getGameScale/getScaledRect -->
<!--   18. 围牌视觉效果 - 围牌边框高亮 -->
<!--   19. 叫牌系统 - callCardPrompt/callCardSuccessAnimation -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-4/10】UI交互系统 -->
<!--   20. UI工具函数 - updatePlayerDeck/updateOpponentDeck等 -->
<!--   21. 规则/设置面板交互 - 面板切换与控制 -->
<!--   22. 光标/先手/AI策略设置 -->
<!--   23. 战场位置/拼点结果/状态栏 -->
<!--   24. 回合显示系统 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-5/10】游戏状态更新 -->
<!--   25. 游戏状态重置/卡牌管理 - resetGameState/createCards/shuffleArray -->
<!--   26. 回合管理 - startTurn/endTurn -->
<!--   27. 胜负判定 - checkVictory/checkStrategicVictory -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-6/10】卡牌管理系统 -->
<!--   28. 卡牌创建/洗牌 -->
<!--   29. 卡牌放置 - placeCardToRoad/placeCardToNeutral -->
<!--   30. 拼点计算 - calculateRoadPoints -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-7/10】动画效果系统 -->
<!--   31. 火球特效动画 - animateCardWithFireEffect -->
<!--   32. 灰尘轨迹动画 - animateCardWithDustEffect -->
<!--   33. 卡牌移动动画 · animateCardMove - 核心动画函数 -->
<!--   34. 撞牌动画序列 · animateCrashSequence - 7阶段撞牌动画 -->
<!--   35. 粒子系统 · ParticleSystem - 悬停粒子/流星粒子 -->
<!--   36. 能量波特效 · launchEnergyWave -->
<!--   37. 匹配提示 · showMatchTooltip -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-8/10】游戏核心逻辑 -->
<!--   38. 发牌流程 - startGame/dealCards -->
<!--   39. 牌型识别 · identifyCardType -->
<!--   40. 路牌匹配检测 · checkRoadMatchCards -->
<!--   41. 路牌匹配执行 · performRoadMatch -->
<!--   42. AI 匹配执行 · opponentPerformRoadMatch -->
<!--   43. AI 围牌执行 · opponentPerformSurroundMatch -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-9/10】出牌管理系统 -->
<!--   44. AI 出牌系统 · opponentPlayCard -->
<!--   45. 玩家出牌 · handlePlayerHandClick -->
<!--   46. 中立区操作 · performNeutralAction -->
<!--   47. 终止出牌 · handleStopPlaying -->
<!--   48. 重新开始 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  【JS-10/10】事件监听与初始化 -->
<!--   49. 粒子系统初始化 -->
<!--   50. 页面加载事件绑定 -->
<!--   51. 游戏启动流程 -->
<!--  ───────────────────────────────────────────────────────────────────────── -->
<!--  关键函数索引: -->
<!--    animateCardMove:         卡牌移动动画 -->
<!--    animateCrashSequence:    撞牌动画序列 -->
<!--    performRoadMatch:        路牌匹配执行 -->
<!--    checkRoadMatchCards:     路牌匹配检测 -->
<!--    AIDecisionEngine:        AI决策引擎 -->
<!--    getGameScale:            获取游戏缩放比例 -->
<!--    getScaledRect:           获取缩放后的矩形坐标 -->
<!-- ============================================================================ -->
<!DOCTYPE html>
<html lang="zh-CN" data-page-node-id="VMH2JZCxckK1QYf9vB7RUW">
<head data-page-node-id="XCg7LXNUU8wwKlC4SiC7j5">
  <meta charset="UTF-8" data-page-node-id="PuOWrSMJgUUIz0cEJ9khqE">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" data-page-node-id="thXbGfORpyUAdY3zfOYAIQ">
  <meta http-equiv="Pragma" content="no-cache" data-page-node-id="AH1Y9Dt5Y4A0dV7kDxoB8j">
  <meta http-equiv="Expires" content="0" data-page-node-id="AsHmneVhp2I0VdemUBcgbL">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" data-page-node-id="A0oKhbFUQSgRQnFfnwPfHd">
  <title data-i18n="game_title">临阵伐谋 - 扑克牌列阵对决</title>
  <script>
    // ★ 测试多开（2026-9-14）：URL 带 ?u=N 时，本窗口使用独立本地存储命名空间（pbp_uN_ 前缀）
    //   同一浏览器可多开窗口分别登录不同账号测试；不带参数行为完全不变
    (function () {
      try {
        var m = /(?:^|[?&])u=(\d+)/.exec(location.search);
        if (!m) return;
        var NS = 'pbp_u' + m[1] + '_';
        var real = window.localStorage;
        var shim = {
          getItem: function (k) { return real.getItem(NS + k); },
          setItem: function (k, v) { real.setItem(NS + k, String(v)); },
          removeItem: function (k) { real.removeItem(NS + k); },
          key: function (i) {
            var ks = [];
            for (var j = 0; j < real.length; j++) {
              var rk = real.key(j);
              if (rk && rk.indexOf(NS) === 0) ks.push(rk.slice(NS.length));
            }
            return i < ks.length ? ks[i] : null;
          },
          clear: function () {
            var kill = [];
            for (var j = 0; j < real.length; j++) { var rk = real.key(j); if (rk && rk.indexOf(NS) === 0) kill.push(rk); }
            for (var q = 0; q < kill.length; q++) real.removeItem(kill[q]);
          }
        };
        Object.defineProperty(shim, 'length', { get: function () {
          var n = 0;
          for (var j = 0; j < real.length; j++) { var rk = real.key(j); if (rk && rk.indexOf(NS) === 0) n++; }
          return n;
        }});
        var proxy = new Proxy(shim, {
          get: function (t, p) {
            if (p in t) return t[p];
            if (typeof p === 'string') return real.getItem(NS + p);
            return undefined;
          },
          set: function (t, p, v) { if (typeof p === 'string') { real.setItem(NS + p, String(v)); return true; } return false; },
          deleteProperty: function (t, p) { if (typeof p === 'string') real.removeItem(NS + p); return true; }
        });
        Object.defineProperty(window, 'localStorage', { get: function () { return proxy; }, configurable: true });
        window.__pbStorageNS = NS;
        document.title += ' [u' + m[1] + ']';
      } catch (e) { /* 异常时保持默认行为 */ }
    })();
  </script>
  <script src="https://cdn.tailwindcss.com" onerror="window.__tailwindFailed = true"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" onerror="this.remove(); if (window.fontAwesomeFallback) { fontAwesomeFallback(this); } else { window.__fontAwesomeFailed = true; }" data-page-node-id="BViKj8ICmTLINl3l3au3A9">
  <script>
    function fontAwesomeFallback(el) {
      if (el) el.remove();
      window.__fontAwesomeFailed = true;
      var s = document.createElement('style');
      s.textContent = '.fa, .fa-cog, .icon-cog, .fa-times, .icon-times { display: inline-block; font-style: normal; font-family: monospace; font-weight: bold; }'
        /* ★ 2026-10-4 修复（用户实测：FA CDN 失败→齿轮/✕各显示两个）：.icon-cog/.icon-times 的
           span 内已写死字面字符（⚙/✕），::before 再注入即双图标——这两个类不再注入 content，
           仅保留 .fa-* 的降级注入（其 DOM 无字面字符） */
        + ' .fa-cog::before { content: "⚙"; font-family: Arial; font-style: normal; }'
        + ' .fa-times::before { content: "✕"; font-family: Arial; font-style: normal; }'
        + ' .fa-info::before { content: "i"; font-family: Arial; font-style: italic; }'
        + ' .fa-chevron-down::before { content: "▾"; font-family: Arial; }'
        + ' .fa-chevron-up::before { content: "▴"; font-family: Arial; }'
        + ' .fa-play::before { content: "▶"; font-family: Arial; }'
        + ' .fa-refresh::before { content: "↻"; font-family: Arial; }'
        + ' .fa-stop::before { content: "■"; font-family: Arial; }'
        + ' .fa-bell::before { content: "♪"; font-family: Arial; }'
        + ' .fa-volume-up::before { content: "♪"; font-family: Arial; }'
        + ' .fa-volume-down::before { content: "♪"; font-family: Arial; }'
        + ' .fa-bars::before { content: "≡"; font-family: Arial; }'
        + ' .fa-eye::before { content: "👁"; font-family: Arial; }'
        + ' .fa-check::before { content: "✓"; font-family: Arial; }'
        + ' .fa-heart::before { content: "♥"; font-family: Arial; }'
        + ' .fa-star::before { content: "★"; font-family: Arial; }'
        + ' .fa-circle::before { content: "●"; font-family: Arial; }'
        + ' .fa-square::before { content: "■"; font-family: Arial; }'
        + ' .fa-arrow-left::before { content: "←"; font-family: Arial; }'
        + ' .fa-arrow-right::before { content: "→"; font-family: Arial; }';
      document.head.appendChild(s);
    }
    // ★ 2026-9-18 FIX（竞态）：CDN 快速失败（ERR_CONNECTION_CLOSED）时 onerror 会在本脚本
    //   执行前触发 → 当时 fontAwesomeFallback 未定义，只置了 __fontAwesomeFailed 标志。
    //   此处补Apply兜底：若标志已置位，立即应用降级样式
    if (window.__fontAwesomeFailed) fontAwesomeFallback(null);
  </script>


  <script>
    // ----------------------------------------------------------------------------
    // 【HTML样式-1/3】Tailwind CSS 配置
    // ----------------------------------------------------------------------------
    // 自定义颜色主题，用于游戏界面各区域的配色
    //   primary:    我方(蓝色) - 手牌区、路牌区、按钮等
    //   secondary:  对方(红色) - 手牌区、路牌区、按钮等
    //   background: 游戏背景深色
    //   card:       卡牌底色
    //   accent:     强调色(金色) - 拼点栏、胜利提示等
    //   neutral:    中立区(紫色) - 中立牌区域
    //   neutralBg:  中立区背景透明度
    // ----------------------------------------------------------------------------
    // Tailwind CDN 加载失败时使用的 fallback 基本样式
    if (typeof tailwind === 'undefined') {
      var fallbackStyle = document.createElement('style');
      fallbackStyle.textContent = `
        html, body { margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; background: #8B0000; color: #FFFFFF; font-family: system-ui, sans-serif; }
        /* 容器与通用 */
        .container { max-width: 75rem; margin: 0 auto; padding: 0.5rem; }
        .hidden { display: none !important; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
        /* Flex 布局 */
        .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; }
        .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
        .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; }
        .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; }
        /* 定位 */
        .absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; } .sticky { position: sticky; }
        .top-0 { top: 0; } .top-1 { top: 0.25rem; } .top-2 { top: 0.5rem; } .top-4 { top: 1rem; } .top-8 { top: 2rem; } .-top-8 { top: -2rem; }
        .bottom-0 { bottom: 0; } .bottom-1 { bottom: 0.25rem; } .bottom-2 { bottom: 0.5rem; } .bottom-4 { bottom: 1rem; } .bottom-8 { bottom: 2rem; } .-bottom-8 { bottom: -2rem; }
        .left-0 { left: 0; } .left-1 { left: 0.25rem; } .left-2 { left: 0.5rem; } .left-4 { left: 1rem; } .left-8 { left: 2rem; } .-left-8 { left: -2rem; }
        .right-0 { right: 0; } .right-1 { right: 0.25rem; } .right-2 { right: 0.5rem; } .right-4 { right: 1rem; } .right-8 { right: 2rem; } .-right-8 { right: -2rem; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        /* 间距 */
        .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
        .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
        .px-0 { padding-left: 0; padding-right: 0; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .m-0 { margin: 0; } .m-auto { margin: auto; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-4 { margin: 1rem; }
        .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .-mt-4 { margin-top: -1rem; }
        .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; } .-mb-4 { margin-bottom: -1rem; }
        .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .ml-auto { margin-left: auto; }
        .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mr-auto { margin-right: auto; }
        .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; }
        /* 圆角 */
        .rounded { border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-full { border-radius: 9999px; }
        /* 边框 */
        .border { border: 0.0625rem solid #334155; } .border-2 { border: 0.125rem solid #334155; } .border-0 { border: none; }
        .border-red-500 { border-color: #EF4444; } .border-blue-500 { border-color: #3B82F6; } .border-yellow-500 { border-color: #FBBF24; } .border-green-500 { border-color: #10B981; } .border-purple-500 { border-color: #A855F7; } .border-gray-700 { border-color: #374151; }
        /* 文字 */
        .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-normal { font-weight: 400; }
        /* 尺寸 */
        .w-0 { width: 0; } .w-4 { width: 1rem; } .w-8 { width: 2rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-32 { width: 8rem; } .w-40 { width: 10rem; } .w-48 { width: 12rem; } .w-64 { width: 16rem; }
        .w-full { width: 100%; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.33%; } .w-1\/4 { width: 25%; }
        .h-0 { height: 0; } .h-4 { height: 1rem; } .h-8 { height: 2rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-48 { height: 12rem; } .h-64 { height: 16rem; }
        .h-full { height: 100%; } .h-1\/2 { height: 50%; } .min-h-screen { min-height: 100vh; } .h-screen { height: 100vh; }
        .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; }
        .min-h-8 { min-height: 2rem; } .min-h-16 { min-height: 4rem; } .min-h-32 { min-height: 8rem; } .min-w-20 { min-width: 5rem; } .min-w-32 { min-width: 8rem; }
        /* z-index */
        .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; }
        /* 透明度 */
        .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-100 { opacity: 1; }
        /* 颜色与背景 */
        .bg-primary { background: #3B82F6; } .bg-secondary { background: #EF4444; } .bg-background { background: #0F172A; } .bg-card { background: #1E293B; } .bg-neutralBg { background: rgba(168, 85, 247, 0.1); }
        .bg-white { background: #FFFFFF; } .bg-black { background: #000000; } .bg-gray-800 { background: #1F2937; } .bg-gray-900 { background: #111827; }
        .bg-red-500 { background: #EF4444; } .bg-red-600 { background: #DC2626; } .bg-red-800 { background: #991B1B; }
        .bg-blue-500 { background: #3B82F6; } .bg-blue-600 { background: #2563EB; } .bg-blue-800 { background: #1E40AF; }
        .bg-yellow-500 { background: #FBBF24; } .bg-yellow-600 { background: #D97706; }
        .bg-green-500 { background: #10B981; } .bg-green-600 { background: #059669; }
        .bg-purple-500 { background: #A855F7; } .bg-purple-600 { background: #9333EA; }
        .bg-orange-500 { background: #F97316; } .bg-pink-500 { background: #EC4899; }
        .text-accent { color: #FBBF24; } .text-white { color: #FFFFFF; } .text-black { color: #000000; }
        .text-red-500 { color: #EF4444; } .text-red-600 { color: #DC2626; } .text-red-400 { color: #F87171; }
        .text-blue-500 { color: #3B82F6; } .text-blue-400 { color: #60A5FA; }
        .text-yellow-400 { color: #FACC15; } .text-yellow-500 { color: #FBBF24; }
        .text-green-500 { color: #10B981; } .text-purple-500 { color: #A855F7; } .text-orange-500 { color: #F97316; }
        .text-gray-300 { color: #D1D5DB; } .text-gray-400 { color: #9CA3AF; } .text-gray-500 { color: #6B7280; }
        /* 交互 */
        .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-default { cursor: default; }
        /* 阴影 */
        .shadow { box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.3); } .shadow-lg { box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,0.3); } .shadow-xl { box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(0,0,0,0.3); } .shadow-2xl { box-shadow: 0 1.5625rem 3.125rem -0.75rem rgba(0,0,0,0.5); }
        /* Transform 与动画 */
        .scale-50 { transform: scale(0.5); } .scale-75 { transform: scale(0.75); } .scale-90 { transform: scale(0.9); } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .scale-125 { transform: scale(1.25); } .-scale-100 { transform: scale(-1); }
        .rotate-180 { transform: rotate(180deg); } .rotate-90 { transform: rotate(90deg); }
        .transition { transition: all 0.15s ease; } .transition-all { transition: all 0.2s ease; } .transition-transform { transition: transform 0.2s ease; } .transition-opacity { transition: opacity 0.2s ease; }
        .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-visible { overflow: visible; }
        /* 游戏专有样式 */
        .player-neutral-slot { background: rgba(59, 130, 246, 0.15); border: 0.0625rem solid rgba(59, 130, 246, 0.3); padding: 0.25rem; border-radius: 0.25rem; min-height: 2.5rem; overflow: visible; }
        .opponent-neutral-slot { background: rgba(239, 68, 68, 0.15); border: 0.0625rem solid rgba(239, 68, 68, 0.3); padding: 0.25rem; border-radius: 0.25rem; min-height: 2.5rem; overflow: visible; }
        .match-glow { position: relative !important; outline: none !important; border-radius: 0.625rem !important; box-shadow: 0 0 0 0.1875rem #FBBF24, 0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5), 0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3), inset 0 0 0.9375rem rgba(251, 191, 36, 0.25); cursor: pointer !important; z-index: 10 !important; overflow: visible !important; animation: matchGlow 2s ease-in-out infinite !important; border: none !important; transition: none !important; }
        .match-glow:hover, .match-glow-hover { animation: none !important; box-shadow: 0 0 0 0.25rem #FBBF24, 0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85), 0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5), inset 0 0 1.5625rem rgba(255, 215, 0, 0.45) !important; transform: none !important; overflow: visible !important; }
        .ai-surround-glow { position: relative !important; outline: 0.1875rem solid #FBBF24 !important; outline-offset: -0.1875rem !important; animation: aiSurroundGlow 2s ease-in-out infinite !important; cursor: pointer !important; z-index: 10 !important; overflow: visible !important; border: none !important; }
        .neutral-aura { position: relative !important; outline: 3px solid #FBBF24 !important; outline-offset: -3px !important; animation: neutralGlow 2s ease-in-out infinite !important; cursor: pointer !important; z-index: 10 !important; margin-left: -2px !important; overflow: visible !important; border: none !important; }
        .neutral-aura:hover, .neutral-aura-hover { animation: none !important; box-shadow: 0 0 25px 8px rgba(255, 215, 0, 0.85), 0 0 50px 20px rgba(255, 215, 0, 0.5), inset 0 0 25px rgba(255, 215, 0, 0.45) !important; transform: scale(1.05); overflow: visible !important; }
        .neutral-aura.shaking, .neutral-aura.shaking:hover { transform: none !important; animation: none !important; }
        .card-glow { outline: 0.1875rem solid #FBBF24 !important; outline-offset: -0.1875rem !important; box-shadow: 0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5) !important; transform: scale(1.03); animation: cardGlowPulse 1.5s infinite; z-index: 50; border: none !important; }
        @keyframes matchGlow { 0%, 100% { box-shadow: 0 0 0 0.1875rem #FBBF24, 0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5), 0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3), inset 0 0 0.9375rem rgba(251, 191, 36, 0.25); } 50% { box-shadow: 0 0 0 0.25rem #FBBF24, 0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85), 0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5), inset 0 0 1.5625rem rgba(255, 215, 0, 0.45); } }
        @keyframes cardGlowPulse { 0%, 100% { box-shadow: 0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5); } 50% { box-shadow: 0 0 1.5625rem 0.5rem rgba(251, 191, 36, 0.7); } }
      `;
      document.head.appendChild(fallbackStyle);
      console.warn('Tailwind CDN 加载失败，已启用 fallback 样式');
    } else {
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#EF4444',
            background: '#0F172A',
            card: '#1E293B',
            accent: '#FBBF24',
            neutral: '#A855F7',
            neutralBg: 'rgba(168, 85, 247, 0.1)',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* ------------------------------------------------------------------------ */
      /* 【HTML样式-2/3】全局样式 - 基础布局 */
      /* ------------------------------------------------------------------------ */
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        background: #0a0a1a;
      }

      /* 蓝色箭头光标 - SVG data URI，浏览器原生渲染，无延迟，28x28与对方红色光标一致 */
      body {
        cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iNjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzQzVGRCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNjBBNUZBIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMUU0MEFGIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTQgMkwyNCAxM0wxNSAxNUwxMiAyNEw0IDJaIiBmaWxsPSJ1cmwoI2cpIiBzdHJva2U9IiMxRTQwQUYiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+') 4 2, default;
      }

      .game-cursor-hover,
      button,
      [onclick],
      [data-road-slot],
      [data-hand-slot],
      [data-dark-slot],
      [data-revealed-slot],
      .card,
      .card-back {
        cursor: pointer;
      }

      [disabled],
      :disabled,
      .disabled,
      [disabled] *,
      :disabled *,
      .disabled * {
        cursor: not-allowed !important;
      }

      /* 游戏主容器 - 固定1920×1080尺寸，由JS控制位置和缩放 */
      .game-container-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: #0a0a1a;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1;
      }

      .game-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
        overflow: visible;
        /* 多层渐变：顶部暗→中央亮→底部暗，形成凹陷的空间感 */
        background:
          /* 顶部暗化（更浓） */
          linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 8%, transparent 22%, transparent 78%, rgba(0,0,0,0.3) 92%, rgba(0,0,0,0.55) 100%),
          /* 左右两侧暗化（立体包裹） */
          linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.45) 100%),
          /* 边缘暗角（聚光效果） */
          radial-gradient(ellipse 65% 55% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.55) 100%),
          /* 对角线主体渐变（更有层次） */
          linear-gradient(145deg, #151530 0%, #1a1a3e 25%, #16213e 50%, #1a1a3e 75%, #0f2550 100%);
        display: flex;
        flex-direction: column;
        transform-origin: top left;
      }

      /* ====================================================================== */
      /* 【左侧能量槽】32个能量槽单元（16红对方+16蓝己方），垂直排列于左侧     */
      /* 状态: empty(灰色空) / filled(满能量发光) / filling(充能中) / consuming(消耗) */
      /* ====================================================================== */
      .card-counter-panel {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 6px;
        z-index: 100;
        pointer-events: auto;
        cursor: pointer;
        user-select: none;
        background: linear-gradient(180deg,
          rgba(20, 15, 40, 0.85) 0%,
          rgba(30, 25, 55, 0.8) 50%,
          rgba(20, 15, 40, 0.85) 100%);
        border: 1px solid rgba(128, 90, 213, 0.5);
        border-radius: 12px;
        box-shadow:
          0 0 20px rgba(128, 90, 213, 0.2),
          inset 0 0 20px rgba(0, 0, 0, 0.5),
          inset 0 2px 4px rgba(255, 255, 255, 0.05),
          inset 0 -2px 4px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.3s;
      }

      /* 悬停时外壳发光增强 */
      .card-counter-panel:hover {
        box-shadow:
          0 0 30px rgba(128, 90, 213, 0.5),
          0 0 50px rgba(59, 130, 246, 0.2),
          inset 0 0 20px rgba(0, 0, 0, 0.5),
          inset 0 2px 4px rgba(255, 255, 255, 0.1),
          inset 0 -2px 4px rgba(0, 0, 0, 0.3);
        border-color: rgba(168, 130, 230, 0.8);
      }

      /* ====================================================================== */
      /* 【士气值悬停提示】跟随鼠标位置的美化提示条                             */
      /*  - 放在 </body> 之前（id=panel-tooltip），脱离 panel 的 transform    */
      /*  - 由全局 JS 监听 card-counter-panel 的 hover，写入 left/top         */
      /* ====================================================================== */
      #panel-tooltip {
        position: fixed;
        left: 0px;
        top: 0px;
        display: none;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 13px;
        color: #cbd5e1;
        background: linear-gradient(135deg,
          rgba(20, 25, 55, 0.97) 0%,
          rgba(35, 30, 70, 0.97) 50%,
          rgba(20, 25, 55, 0.97) 100%);
        border: 1px solid rgba(168, 130, 230, 0.6);
        border-radius: 8px;
        box-shadow:
          0 6px 18px rgba(0, 0, 0, 0.45),
          0 0 14px rgba(128, 90, 213, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        letter-spacing: 0.5px;
        z-index: 99999;
        pointer-events: none;
        line-height: 1.4;
      }

      #panel-tooltip::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 50%;
        width: 9px;
        height: 9px;
        transform: translateY(-50%) rotate(45deg);
        background: rgba(20, 25, 55, 0.97);
        border-left: 1px solid rgba(168, 130, 230, 0.6);
        border-bottom: 1px solid rgba(168, 130, 230, 0.6);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
      }

      #panel-tooltip.is-hover {
        display: inline-block;
      }

      #panel-tooltip .tip-kw {
        color: #FBBF24;
        font-weight: 700;
        padding: 1px 7px;
        border-radius: 4px;
        background: linear-gradient(145deg, rgba(251, 191, 36, 0.18), rgba(234, 179, 8, 0.08));
        border: 1px solid rgba(251, 191, 36, 0.35);
        margin: 0 2px;
        text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
      }

      /* ========== 能量槽空心方块（28×18，放大尺寸）========== */
      .card-counter-item {
        width: 28px;
        height: 18px;
        border: 1px solid #475569;
        border-radius: 3px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg,
          rgba(40, 40, 55, 0.4) 0%,
          rgba(25, 25, 40, 0.5) 100%);
        box-shadow:
          inset 0 1px 2px rgba(0, 0, 0, 0.4),
          inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
      }

      /* ========== 红蓝中央分界线（作为flex流中的独立元素，精确居中）========== */
      .energy-divider {
        width: 100%;
        height: 19.2px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0;
      }
      .energy-divider::before {
        content: '';
        position: absolute;
        left: 4px;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(239, 68, 68, 0.9) 20%,
          rgba(128, 90, 213, 1) 50%,
          rgba(59, 130, 246, 0.9) 80%,
          transparent 100%);
        box-shadow:
          0 0 10px rgba(128, 90, 213, 0.8),
          0 0 20px rgba(128, 90, 213, 0.4);
        border-radius: 2px;
      }

      /* ========== 累计传播分数方块（顶部对方/底部己方）========== */
      .energy-score-label {
        width: 32px;
        height: 26px;
        border-radius: 4px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        font-family: inherit;
        letter-spacing: 0;
        margin: 4px 0;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }
      /* 顶部白色细高光（玻璃质感）*/
      .energy-score-label::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 2px;
        right: 2px;
        height: 3px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.6) 50%,
          transparent 100%);
        border-radius: 1px;
        pointer-events: none;
      }
      .energy-score-label.red {
        border: 2px solid #ef4444;
        color: #ffb4b4;
        background:
          radial-gradient(ellipse at center top, rgba(255, 100, 100, 0.3) 0%, transparent 70%),
          linear-gradient(180deg,
            rgba(80, 10, 20, 0.6) 0%,
            rgba(120, 30, 40, 0.7) 50%,
            rgba(60, 10, 15, 0.7) 100%);
        box-shadow:
          0 0 8px rgba(239, 68, 68, 0.6),
          0 0 16px rgba(239, 68, 68, 0.3),
          inset 0 0 8px rgba(255, 150, 150, 0.3),
          inset 0 -2px 3px rgba(120, 20, 20, 0.5);
        text-shadow: 0 0 4px rgba(255, 150, 150, 0.8), 0 0 8px rgba(239, 68, 68, 0.5);
      }
      .energy-score-label.blue {
        border: 2px solid #3b82f6;
        color: #b4d0ff;
        background:
          radial-gradient(ellipse at center top, rgba(100, 160, 255, 0.3) 0%, transparent 70%),
          linear-gradient(180deg,
            rgba(10, 30, 80, 0.6) 0%,
            rgba(30, 70, 160, 0.7) 50%,
            rgba(10, 25, 60, 0.7) 100%);
        box-shadow:
          0 0 8px rgba(59, 130, 246, 0.6),
          0 0 16px rgba(59, 130, 246, 0.3),
          inset 0 0 8px rgba(150, 200, 255, 0.3),
          inset 0 -2px 3px rgba(20, 50, 120, 0.5);
        text-shadow: 0 0 4px rgba(180, 210, 255, 0.8), 0 0 8px rgba(59, 130, 246, 0.5);
      }

      /* 能量槽内部核心发光层 - 默认隐藏 */
      .card-counter-item::before {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: 1px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      /* 能量槽顶部高光 - 仅填充后显示 */
      .card-counter-item::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        height: 0;
        background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.4),
          rgba(255, 255, 255, 0));
        border-radius: 1px 1px 0 0;
        transition: height 0.3s;
      }

      /* ========== 红色能量槽（对方）- 填充状态 ========== */
      /* 使用 --fill-pct (0-100) 控制填充度。默认100%完全填充，小于100按比例变暗 */
      .card-counter-item.red.filled {
        border-color: #ff5a5a;
        background:
          linear-gradient(180deg,
            rgba(120, 20, 20, 0.5) 0%,
            rgba(200, 40, 40, 0.75) 40%,
            rgba(255, 80, 80, 0.9) 70%,
            rgba(255, 120, 80, 0.7) 100%);
        box-shadow:
          0 0 4px rgba(239, 68, 68, 0.6),
          0 0 8px rgba(239, 68, 68, 0.3),
          inset 0 0 4px rgba(255, 150, 150, 0.3),
          inset 0 -2px 3px rgba(180, 30, 30, 0.4);
        animation: energy-pulse-red 2.5s ease-in-out infinite;
      }
      /* 部分填充（分数未满 100）：按 fillPct / 100 整体降低不透明度 */
      .card-counter-item.red.filled.partial {
        opacity: calc(var(--fill-pct, 100) / 100);
      }
      .card-counter-item.red.filled::before {
        opacity: 1;
        background: radial-gradient(ellipse at 50% 60%,
          rgba(255, 220, 200, 0.95) 0%,
          rgba(255, 130, 100, 0.6) 40%,
          transparent 70%);
      }
      .card-counter-item.red.filled::after {
        height: 2px;
      }

      /* ========== 蓝色能量槽（己方）- 填充状态 ========== */
      .card-counter-item.blue.filled {
        border-color: #60a5fa;
        background:
          linear-gradient(180deg,
            rgba(20, 40, 100, 0.5) 0%,
            rgba(40, 80, 180, 0.75) 40%,
            rgba(80, 150, 255, 0.9) 70%,
            rgba(120, 180, 255, 0.7) 100%);
        box-shadow:
          0 0 4px rgba(59, 130, 246, 0.6),
          0 0 8px rgba(59, 130, 246, 0.3),
          inset 0 0 4px rgba(180, 210, 255, 0.3),
          inset 0 -2px 3px rgba(30, 60, 150, 0.4);
        animation: energy-pulse-blue 2.5s ease-in-out infinite;
      }
      .card-counter-item.blue.filled.partial {
        opacity: calc(var(--fill-pct, 100) / 100);
      }
      .card-counter-item.blue.filled::before {
        opacity: 1;
        background: radial-gradient(ellipse at 50% 60%,
          rgba(220, 240, 255, 0.95) 0%,
          rgba(130, 180, 255, 0.6) 40%,
          transparent 70%);
      }

      .card-counter-item.blue.filled::after {
        height: 2px;
      }

      /* ========== 充能动画（能量传播） ========== */
      .card-counter-item.filling {
        animation: energy-fill-in 1.2s ease-out forwards;
      }

      @keyframes energy-fill-in {
        0% {
          transform: scale(0.7);
          opacity: 0.3;
          box-shadow:
            0 0 20px rgba(255, 255, 255, 1),
            0 0 40px rgba(255, 255, 255, 0.8),
            0 0 60px currentColor;
        }
        50% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* ========== 消耗动画 ========== */
      .card-counter-item.consuming {
        animation: energy-consume 0.4s ease-in forwards;
      }

      @keyframes energy-consume {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        40% {
          transform: scale(1.3);
          opacity: 1;
          box-shadow:
            0 0 30px currentColor,
            0 0 60px currentColor,
            0 0 80px currentColor;
        }
        100% {
          transform: scale(0.5);
          opacity: 0;
        }
      }

      /* ========== 悬停闪烁（悬停面板时，已填充单元增强闪烁） ========== */
      .card-counter-panel:hover .card-counter-item.red.filled {
        animation: hover-flash-red 1.2s ease-in-out infinite;
      }

      .card-counter-panel:hover .card-counter-item.blue.filled {
        animation: hover-flash-blue 1.2s ease-in-out infinite;
      }

      @keyframes hover-flash-red {
        0%, 100% {
          box-shadow:
            0 0 4px rgba(239, 68, 68, 0.6),
            0 0 10px rgba(239, 68, 68, 0.4),
            inset 0 0 4px rgba(255, 150, 150, 0.3),
            inset 0 -2px 3px rgba(180, 30, 30, 0.4);
        }
        50% {
          box-shadow:
            0 0 8px rgba(255, 100, 100, 1),
            0 0 20px rgba(255, 100, 100, 0.7),
            0 0 30px rgba(255, 180, 100, 0.4),
            inset 0 0 6px rgba(255, 220, 200, 0.7),
            inset 0 -2px 3px rgba(200, 50, 50, 0.5);
        }
      }

      @keyframes hover-flash-blue {
        0%, 100% {
          box-shadow:
            0 0 4px rgba(59, 130, 246, 0.6),
            0 0 10px rgba(59, 130, 246, 0.4),
            inset 0 0 4px rgba(180, 210, 255, 0.3),
            inset 0 -2px 3px rgba(30, 60, 150, 0.4);
        }
        50% {
          box-shadow:
            0 0 8px rgba(100, 180, 255, 1),
            0 0 20px rgba(100, 180, 255, 0.7),
            0 0 30px rgba(180, 220, 255, 0.4),
            inset 0 0 6px rgba(220, 240, 255, 0.7),
            inset 0 -2px 3px rgba(50, 100, 200, 0.5);
        }
      }

      /* ========== 能量槽呼吸动画 ========== */
      @keyframes energy-pulse-red {
        0%, 100% {
          box-shadow:
            0 0 4px rgba(239, 68, 68, 0.5),
            0 0 8px rgba(239, 68, 68, 0.2),
            inset 0 0 4px rgba(255, 150, 150, 0.25),
            inset 0 -2px 3px rgba(180, 30, 30, 0.4);
        }
        50% {
          box-shadow:
            0 0 6px rgba(239, 68, 68, 0.8),
            0 0 14px rgba(255, 100, 100, 0.4),
            inset 0 0 6px rgba(255, 200, 200, 0.4),
            inset 0 -2px 3px rgba(180, 30, 30, 0.4);
        }
      }

      @keyframes energy-pulse-blue {
        0%, 100% {
          box-shadow:
            0 0 4px rgba(59, 130, 246, 0.5),
            0 0 8px rgba(59, 130, 246, 0.2),
            inset 0 0 4px rgba(180, 210, 255, 0.25),
            inset 0 -2px 3px rgba(30, 60, 150, 0.4);
        }
        50% {
          box-shadow:
            0 0 6px rgba(59, 130, 246, 0.8),
            0 0 14px rgba(100, 180, 255, 0.4),
            inset 0 0 6px rgba(200, 230, 255, 0.4),
            inset 0 -2px 3px rgba(30, 60, 150, 0.4);
        }
      }

      /* ====================================================================== */
      /* 【电磁波传播动画】 - 从总分位置向能量槽发射能量波             */
      /* ====================================================================== */
      .energy-wave {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        opacity: 0;
      }

      /* 蓝色电磁波（我方得分→蓝槽） */
      .energy-wave.blue {
        background: radial-gradient(circle,
          rgba(255, 255, 255, 1) 0%,
          rgba(180, 230, 255, 0.95) 20%,
          rgba(100, 180, 255, 0.85) 45%,
          rgba(59, 130, 246, 0.6) 70%,
          rgba(59, 130, 246, 0) 100%);
        box-shadow:
          0 0 8px rgba(100, 180, 255, 1),
          0 0 20px rgba(59, 130, 246, 0.8),
          0 0 35px rgba(59, 130, 246, 0.5),
          0 0 50px rgba(59, 130, 246, 0.3);
      }

      /* 红色电磁波（对方得分→红槽） */
      .energy-wave.red {
        background: radial-gradient(circle,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 200, 180, 0.95) 20%,
          rgba(255, 100, 100, 0.85) 45%,
          rgba(239, 68, 68, 0.6) 70%,
          rgba(239, 68, 68, 0) 100%);
        box-shadow:
          0 0 8px rgba(255, 120, 120, 1),
          0 0 20px rgba(239, 68, 68, 0.8),
          0 0 35px rgba(239, 68, 68, 0.5),
          0 0 50px rgba(239, 68, 68, 0.3);
      }

      /* 电磁波尾迹环 - 同心环向外扩散 */
      .energy-wave::before,
      .energy-wave::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 2px solid;
        opacity: 0;
      }

      .energy-wave::before {
        width: 36px;
        height: 36px;
        animation: wave-ring 1.8s ease-out infinite;
      }

      .energy-wave::after {
        width: 52px;
        height: 52px;
        animation: wave-ring 1.8s ease-out infinite;
        animation-delay: 0.6s;
      }

      .energy-wave.blue::before,
      .energy-wave.blue::after {
        border-color: rgba(100, 180, 255, 0.8);
        box-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
      }

      .energy-wave.red::before,
      .energy-wave.red::after {
        border-color: rgba(255, 120, 120, 0.8);
        box-shadow: 0 0 10px rgba(255, 120, 120, 0.5);
      }

      @keyframes wave-ring {
        0% {
          transform: translate(-50%, -50%) scale(0.3);
          opacity: 0.9;
        }
        100% {
          transform: translate(-50%, -50%) scale(1.6);
          opacity: 0;
        }
      }

      /* 能量到达爆闪效果 */
      .energy-arrive-flash {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9998;
        opacity: 0;
        animation: arrive-flash 1.0s ease-out forwards;
      }

      .energy-arrive-flash.blue {
        background: radial-gradient(circle,
          rgba(255, 255, 255, 1) 0%,
          rgba(180, 230, 255, 0.9) 15%,
          rgba(100, 180, 255, 0.7) 30%,
          rgba(59, 130, 246, 0.4) 50%,
          rgba(59, 130, 246, 0) 80%);
      }

      .energy-arrive-flash.red {
        background: radial-gradient(circle,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 200, 180, 0.9) 15%,
          rgba(255, 100, 100, 0.7) 30%,
          rgba(239, 68, 68, 0.4) 50%,
          rgba(239, 68, 68, 0) 80%);
      }

      @keyframes arrive-flash {
        0% {
          transform: scale(0.2);
          opacity: 1;
        }
        60% {
          transform: scale(1.8);
          opacity: 0.6;
        }
        100% {
          transform: scale(3);
          opacity: 0;
        }
      }

      /* 发射时总分数字的脉冲高亮（先亮至100%透明度，形成闪烁） */
      .score-value-total.energy-pulse {
        animation: score-energy-pulse 0.9s ease-out 2;
        opacity: 1 !important;
      }

      .score-value-total.energy-pulse.blue {
        color: #80b5ff !important;
        text-shadow:
          0 0 8px rgba(180, 220, 255, 1),
          0 0 16px rgba(100, 180, 255, 0.95),
          0 0 32px rgba(59, 130, 246, 0.7),
          0 0 50px rgba(59, 130, 246, 0.4);
      }

      .score-value-total.energy-pulse.red {
        color: #ffb0b0 !important;
        text-shadow:
          0 0 8px rgba(255, 200, 200, 1),
          0 0 16px rgba(255, 120, 120, 0.95),
          0 0 32px rgba(239, 68, 68, 0.7),
          0 0 50px rgba(239, 68, 68, 0.4);
      }

      @keyframes score-energy-pulse {
        0% {
          transform: scale(0.85);
          opacity: 0.4;
          filter: brightness(1.5);
        }
        30% {
          transform: scale(1.3);
          opacity: 1;
          filter: brightness(2.5);
        }
        100% {
          transform: scale(1);
          opacity: 0.7;
          filter: brightness(1);
        }
      }

      /* 第一层背景光效 - 仅边缘的柔和光晕，避免中央线条 */
      .game-container::before {
        content: '';
        position: absolute;
        inset: 0;
        background: transparent;
        pointer-events: none;
        z-index: 0;
      }

      /* 第二层背景光效 - 四角光域/星空点缀（各主题专用） */
      .game-container::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 1;
      }

      .game-container.metal-bg-active::before,
      .game-container.metal-bg-active::after {
        display: none;
      }

      .game-container.metal-bg-active {
        overflow: visible;
      }

      .metal-scale-container {
        position: relative;
        width: 100%;
        height: 100%;
        transform-origin: center center;
        transition: transform 0.3s ease;
      }

      /* ------------------------------------------------------------------------ */
      /* 主菜单样式 */
      /* ------------------------------------------------------------------------ */

      .main-menu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(10, 10, 26, 0.4), rgba(10, 10, 26, 0.4)), url('background/主界面背景.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        overflow: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      .main-menu-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          radial-gradient(ellipse 40% 30% at 20% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
          radial-gradient(ellipse 40% 30% at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
          radial-gradient(ellipse 30% 25% at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
        pointer-events: none;
      }

      .main-menu-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16vh 40px 40px; /* ★ 2026-9-17：顶部加高，菜单整体下移，避开背景图上的英文标题（副标题与其重叠） */
        margin-top: 0; /* ★ 垂直居中：去掉原本上移 18vh 的负边距，整体回归屏幕中央 */
      }

      .menu-title {
        margin-bottom: 30px;
      }

      .title-main {
        display: none;
      }

      .title-subtitle {
        font-size: 1.4rem;
        color: rgba(200, 220, 255, 0.85);
        margin-top: 0;
        letter-spacing: 6px;
        font-weight: 600;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      }

      .menu-buttons {
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: center;
      }

      .menu-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 52px;
        font-size: 1.25rem;
        font-weight: 600;
        border: 1px solid rgba(206, 183, 135, 0.38);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        width: 280px;
        height: 52px;
        box-sizing: border-box;
        /* ★ 水墨古战场风格（2026-9-12）：半透明墨底+淡金描边，融入蓝红双翼背景 */
        background: linear-gradient(135deg, rgba(12, 16, 30, 0.72), rgba(24, 28, 46, 0.58));
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        /* ★ 2026-9-18 FIX（悬停时其他按钮边缘闪现黑线）：保留模糊背景，但将每个按钮
           提升为独立合成层（translateZ(0)）——兄弟按钮重绘时不再牵连本按钮重栅格化，
           消除 backdrop-filter 的 1px 接缝伪影 */
        transform: translateZ(0);
        color: #ece4d0;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      }

      /* 悬停/子菜单展开：边框变粗为身份色光环，更醒目（2026-9-13） */
      .menu-btn::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 8px;
        border: 5px solid var(--btn-accent, rgba(206, 183, 135, 0.85));
        box-shadow: 0 0 20px var(--btn-accent-glow, rgba(206, 183, 135, 0.6)), inset 0 0 12px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: opacity 0.28s ease;
        pointer-events: none;
      }

      .menu-btn:hover::after,
      .menu-btn.submenu-open::after {
        opacity: 1;
      }

      .menu-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: left 0.5s ease;
      }

      .menu-btn:hover::before {
        left: 100%;
      }

      .btn-icon {
        font-size: 1.5rem;
      }

      .btn-text {
        flex: 1;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .btn-badge {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        padding: 3px 10px;
        background: rgba(255,255,255,0.15);
        border-radius: 20px;
        color: rgba(255,255,255,0.6);
      }

      .btn-entertainment {
        --btn-accent: rgba(105, 140, 205, 0.62);
        --btn-accent-glow: rgba(120, 150, 215, 0.35);
        background: linear-gradient(135deg, rgba(14, 20, 38, 0.72), rgba(22, 32, 56, 0.58));
      }

      .btn-entertainment:hover:not(:disabled) {
        transform: translateY(-2px);
        /* ★ 悬停时透明度数值增大：背景更实（2026-9-13，用户口径：透明度=rgba alpha数值） */
        background: linear-gradient(135deg, rgba(14, 20, 38, 0.9), rgba(22, 32, 56, 0.85));
        border-color: rgba(140, 165, 220, 0.75);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(105, 140, 205, 0.25);
      }

      .btn-online {
        --btn-accent: rgba(95, 165, 125, 0.6);
        --btn-accent-glow: rgba(110, 175, 135, 0.32);
        background: linear-gradient(135deg, rgba(12, 20, 26, 0.72), rgba(18, 34, 30, 0.58));
      }

      .btn-online:hover:not(:disabled) {
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(12, 20, 26, 0.9), rgba(18, 34, 30, 0.85));
        border-color: rgba(130, 190, 150, 0.7);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(95, 165, 125, 0.22);
      }

      .btn-practice {
        --btn-accent: rgba(150, 112, 200, 0.6);
        --btn-accent-glow: rgba(165, 125, 210, 0.32);
        background: linear-gradient(135deg, rgba(16, 13, 30, 0.72), rgba(30, 24, 48, 0.58));
      }

      .btn-practice:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(16, 13, 30, 0.9), rgba(30, 24, 48, 0.85));
        border-color: rgba(180, 145, 225, 0.7);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(150, 112, 200, 0.25);
      }

      .btn-tutorial {
        --btn-accent: rgba(210, 135, 72, 0.62);
        --btn-accent-glow: rgba(220, 150, 90, 0.35);
        background: linear-gradient(135deg, rgba(24, 17, 12, 0.72), rgba(40, 28, 18, 0.58));
      }

      .btn-tutorial:hover:not(:disabled) {
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(24, 17, 12, 0.9), rgba(40, 28, 18, 0.85));
        border-color: rgba(230, 165, 105, 0.75);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(210, 135, 72, 0.28);
      }

      /* 快捷键按钮（教程按钮下方 · 半宽 · 金色水墨点缀 2026-9-17） */
      .btn-hotkey {
        --btn-accent: rgba(230, 180, 80, 0.62);
        --btn-accent-glow: rgba(240, 195, 100, 0.35);
        background: linear-gradient(135deg, rgba(26, 20, 10, 0.72), rgba(42, 32, 16, 0.58));
        /* 半宽按钮：覆盖 .menu-btn 的 52px 大内边距，否则文字被 overflow:hidden 裁掉 */
        padding: 16px 12px;
        justify-content: center;
        gap: 8px;
        font-size: 1.1rem;
      }
      .btn-hotkey:hover:not(:disabled) {
        transform: translateY(-2px);
        background: linear-gradient(135deg, rgba(26, 20, 10, 0.9), rgba(42, 32, 16, 0.85));
        border-color: rgba(240, 195, 100, 0.75);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 14px rgba(230, 180, 80, 0.28);
      }

      .practice-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 280px;
        /* ★ 水墨风格（2026-9-12）：与主按钮同基底墨色，紫色降饱和为紫藤点缀 */
        background: linear-gradient(135deg, rgba(16, 13, 30, 0.88), rgba(30, 24, 48, 0.82));
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(206, 183, 135, 0.3);
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 0;
        margin-top: 0;
        z-index: 1000;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease;
      }

      .practice-submenu.open {
        max-height: 320px;
        opacity: 1;
      }

      .practice-submenu-item {
        padding: 16px 48px;
        color: #ece4d0;
        font-size: 1.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: left;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid rgba(206, 183, 135, 0.16);
      }

      .practice-submenu-item:last-child {
        border-bottom: none;
      }

      .practice-submenu-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease;
      }

      .practice-submenu-item:hover::before {
        left: 100%;
      }

      .practice-submenu-item:hover {
        background: rgba(150, 112, 200, 0.16);
        color: #f3ecdb;
      }

      .practice-submenu-item .submenu-icon {
        font-size: 1.5rem;
      }

      .practice-submenu-item .submenu-text {
        flex: 1;
      }

      .tutorial-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 280px;
        /* ★ 水墨风格（2026-9-12）：与主按钮同基底墨色，赭橙点缀 */
        background: linear-gradient(135deg, rgba(24, 17, 12, 0.88), rgba(40, 28, 18, 0.82));
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(206, 183, 135, 0.3);
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 0;
        margin-top: 0;
        z-index: 1000;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease;
      }

      .tutorial-submenu.open {
        max-height: 320px;
        opacity: 1;
      }

      .tutorial-submenu-item {
        padding: 16px 48px;
        color: #ece4d0;
        font-size: 1.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: left;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid rgba(206, 183, 135, 0.16);
      }

      .tutorial-submenu-item:last-child {
        border-bottom: none;
      }

      .tutorial-submenu-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: left 0.5s ease;
      }

      .tutorial-submenu-item:hover::before {
        left: 100%;
      }

      .tutorial-submenu-item:hover {
        background: rgba(210, 135, 72, 0.16);
        color: #f3ecdb;
      }

      .tutorial-submenu-item .submenu-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
      }

      .tutorial-submenu-item .submenu-text {
        flex: 1;
      }

      /* ===== 英文模式主页菜单适配（只作用于 html[lang="en"]，中文布局完全不受影响）===== */
      /* 左内边距与中文完全一致（主52/子48），仅缩小右侧内边距和字号，让长英文文案完整显示且整体不偏左 */
      html[lang="en"] .menu-btn {
        padding: 16px 20px 16px 52px;
      }
      /* ★ 2026-9-19 FIX：快捷键按钮是居中半宽按钮，其自身的 12px 小内边距被上方
         html[lang="en"] .menu-btn 的 52px 左内边距覆盖 → 140px 宽内文字仅剩 ~36px，
         英文 "Hotkeys" 被裁成 "H.."。恢复其小内边距并微加宽，完整显示英文文案 */
      html[lang="en"] .btn-hotkey {
        padding: 16px 12px;
        justify-content: center;
        width: 150px;
      }
      html[lang="en"] .menu-btn .btn-text {
        font-size: 1.05rem;
      }
      html[lang="en"] .practice-submenu-item,
      html[lang="en"] .tutorial-submenu-item,
      html[lang="en"] .online-submenu-item {
        padding: 16px 20px 16px 48px;
      }
      /* 英文子菜单长文案统一缩小，防止超出（Response Operations 等） */
      html[lang="en"] .practice-submenu-item .submenu-text,
      html[lang="en"] .tutorial-submenu-item .submenu-text,
      html[lang="en"] .online-submenu-item .submenu-text {
        font-size: 0.95rem;
        white-space: nowrap;
      }
      html[lang="en"] .tutorial-submenu-item .submenu-text-sm {
        font-size: 0.78rem;
        white-space: nowrap;
      }

      /* ===== 联机模式子菜单 ===== */
      .online-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 280px;
        /* ★ 水墨风格（2026-9-12）：与主按钮同基底墨色，玉绿点缀 */
        background: linear-gradient(135deg, rgba(12, 20, 26, 0.88), rgba(18, 34, 30, 0.82));
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(206, 183, 135, 0.3);
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 0;
        margin-top: 0;
        z-index: 1000;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease;
      }

      .online-submenu.open {
        max-height: 320px;
        opacity: 1;
      }

      /* ===== 排行榜（2026-9-14）：右上角「服务器状态」左侧入口 + 下拉面板，水墨风 ===== */
      .lb-entry {
        position: fixed; display: flex; align-items: center; gap: 5px;
        box-sizing: border-box;  /* ★ JS 会将高度对齐 server-stats-icon（同行视觉统一） */
        padding: 5px 12px; border-radius: 18px; cursor: pointer; z-index: 9998;
        background: linear-gradient(135deg, rgba(12, 20, 26, 0.88), rgba(18, 34, 30, 0.82));
        border: 1px solid rgba(206, 183, 135, 0.35);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;  /* ★ 只过渡颜色，位置必须即时跟随缩放（2026-9-14 修复拖影延迟） */
      }
      .lb-entry:hover { border-color: rgba(206, 183, 135, 0.75); box-shadow: 0 0 12px rgba(206, 183, 135, 0.3); }
      .lb-entry.guest-hidden { display: none !important; }  /* ★ 排行榜属在线内容，游客不显示（2026-9-14） */
      .lb-entry-icon { font-size: 0.95rem; line-height: 1; }
      .lb-entry-text { color: #cebe87; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
      .lb-panel {
        position: fixed; display: none; width: 300px; padding: 10px 12px 12px; z-index: 9998;
        background: linear-gradient(135deg, rgba(12, 20, 26, 0.92), rgba(18, 34, 30, 0.88));
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(206, 183, 135, 0.3); border-radius: 12px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
      }
      .lb-panel.open { display: block; }
      .lb-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
      .lb-title { color: #cebe87; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
      .lb-toggle { position: relative; display: flex; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(206, 183, 135, 0.25); border-radius: 9px; padding: 2px; cursor: pointer; }
      .lb-thumb {
        position: absolute; top: 2px; left: 2px; width: calc(50% - 3px); height: calc(100% - 4px);
        border-radius: 7px; background: linear-gradient(135deg, rgba(206, 183, 135, 0.85), rgba(142, 168, 140, 0.85));
        transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .lb-thumb.right { left: calc(50% + 1px); }
      .lb-opt { position: relative; z-index: 1; padding: 3px 8px; font-size: 0.7rem; color: #94a3b8; transition: color 0.2s; white-space: nowrap; user-select: none; }
      .lb-opt.on { color: #10201a; font-weight: 700; }
      .lb-list { max-height: 268px; overflow-y: auto; overflow-x: hidden; }
      .lb-list::-webkit-scrollbar { width: 4px; }
      .lb-list::-webkit-scrollbar-thumb { background: rgba(206, 183, 135, 0.35); border-radius: 2px; }
      .lb-row {
        display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px;
        background: rgba(255, 255, 255, 0.03); margin-bottom: 3px; cursor: pointer;
        border: 1px solid transparent; transition: all 0.2s ease;
      }
      .lb-row:hover { background: rgba(206, 183, 135, 0.12); }
      /* ★ 2026-9-30 悬停互动特效：金边亮起+光晕+名称发光+头像光晕（.lb-list 前缀抬高特异性，覆盖前三行专属边框）；
         不做行位移（translateX 右移会被 lb-list 的 overflow-x:hidden 裁掉右缘） */
      .lb-list .lb-row:hover {
        background: rgba(206, 183, 135, 0.14);
        border-color: rgba(206, 183, 135, 0.5);
        box-shadow: 0 0 12px rgba(206, 183, 135, 0.25);
      }
      .lb-list .lb-row:hover .lb-name { color: #f5e6b8; text-shadow: 0 0 8px rgba(240, 217, 166, 0.5); }
      .lb-list .lb-row:hover .lb-ava { border-color: rgba(230, 200, 120, 0.7); box-shadow: 0 0 8px rgba(230, 200, 120, 0.4); }
      .lb-row.lb-open { background: rgba(206, 183, 135, 0.08); }
      .lb-rank { width: 24px; text-align: center; font-weight: 800; color: #8a9aa8; font-size: 0.78rem; flex-shrink: 0; }
      .lb-ava {
        width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
        display: flex; align-items: center; justify-content: center; font-size: 0.76rem; flex-shrink: 0; overflow: hidden;
        border: 1px solid rgba(206, 183, 135, 0.25);
      }
      .lb-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
      .lb-name { flex: 1; min-width: 0; color: #ece4d0; font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
      /* ★ 2026-9-30 定稿：平时省略号截断（纯文本层，ellipsis 正常渲染）；悬停隐藏省略号层、
         显示滚动层左右滚动展示全名（--lb-shift 由 JS 按溢出量注入，未溢出行位移恒 0 无动画） */
      .lb-name-ell { white-space: nowrap; }
      .lb-name-txt { white-space: nowrap; display: none; }
      .lb-row:hover .lb-name-ell { display: none; }
      .lb-row:hover .lb-name-txt { display: inline-block; vertical-align: top; }
      /* 滚动动画由 JS（Web Animations API）驱动：渲染时测好溢出量缓存，mouseenter 播放循环，mouseleave 停止 */
      .lb-games { color: #7a8a96; font-size: 0.66rem; flex-shrink: 0; }
      .lb-rate { color: #8fd4a8; font-weight: 700; font-size: 0.78rem; width: 44px; text-align: right; flex-shrink: 0; }
      /* 前三差异化：第一 金冠最突出 / 第二 银牌 / 第三 铜牌 */
      .lb-row.r1 {
        background: linear-gradient(90deg, rgba(230, 200, 120, 0.30), rgba(230, 200, 120, 0.08));
        border: 1px solid rgba(230, 200, 120, 0.7); box-shadow: 0 0 14px rgba(230, 200, 120, 0.35);
        padding: 6px; margin-bottom: 5px;
      }
      .lb-row.r1 .lb-rank { font-size: 1.1rem; width: 28px; }
      .lb-row.r1 .lb-name { color: #f5e6b8; font-weight: 700; font-size: 0.84rem; }
      .lb-row.r1 .lb-rate { color: #f0d080; font-size: 0.86rem; }
      .lb-row.r1 .lb-ava { border-color: rgba(230, 200, 120, 0.8); }
      .lb-row.r2 {
        background: linear-gradient(90deg, rgba(200, 212, 224, 0.20), rgba(200, 212, 224, 0.05));
        border: 1px solid rgba(200, 212, 224, 0.5);
      }
      .lb-row.r2 .lb-name { color: #dbe4ec; font-weight: 600; }
      .lb-row.r2 .lb-rate { color: #c8d4e0; }
      .lb-row.r3 {
        background: linear-gradient(90deg, rgba(205, 127, 50, 0.22), rgba(205, 127, 50, 0.05));
        border: 1px solid rgba(205, 127, 50, 0.55);
      }
      .lb-row.r3 .lb-name { color: #f0b080; font-weight: 600; }
      .lb-row.r3 .lb-rate { color: #e8a060; }
      .lb-detail { margin: 2px 0 6px 30px; }
      .lb-detail .pp-replay-item { background: rgba(0, 0, 0, 0.25); }
      .lb-empty { color: #7a8a96; font-size: 0.72rem; padding: 6px 4px; text-align: center; }

      .online-submenu-item {
        padding: 16px 48px;
        color: #ece4d0;
        font-size: 1.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: left;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid rgba(206, 183, 135, 0.16);
      }

      .online-submenu-item:last-child {
        border-bottom: none;
      }

      .online-submenu-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transition: left 0.5s ease;
      }

      .online-submenu-item:hover::before {
        left: 100%;
      }

      .online-submenu-item:hover {
        background: rgba(95, 165, 125, 0.16);
        color: #f3ecdb;
      }

      /* ===== 左上角人物信息 ===== */
      .player-profile {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        padding: 8px 16px 8px 8px;
        border-radius: 40px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: background 0.3s ease, border-color 0.3s ease;
        z-index: 1001;
      }

      .player-profile:hover {
        background: rgba(0, 0, 0, 0.55);
        border-color: rgba(255, 255, 255, 0.3);
      }

      .profile-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.3);
        background: linear-gradient(135deg, #1e293b, #334155);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.3s ease;
      }

      .player-profile:hover .profile-avatar {
        border-color: rgba(255, 255, 255, 0.6);
      }

      /* ★ 队长外层边框金色（包含头像+姓名+等级） */
      .player-profile.team-leader-border {
        border: 2px solid rgba(255, 215, 0, 0.9) !important;
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
      }
      .player-profile.team-leader-border:hover {
        border-color: rgba(255, 215, 0, 1) !important;
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
      }
      /* ★ 队友是队长时，队友卡片也显示金色边框 */
      .teammate-profile.team-leader-border {
        border: 2px solid rgba(255, 215, 0, 0.9) !important;
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
      }
      .teammate-profile.team-leader-border:hover {
        border-color: rgba(255, 215, 0, 1) !important;
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.6);
      }

      .profile-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }

      .profile-exp-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 16px;
      }

      .exp-level {
        font-size: 0.65rem;
        font-weight: 700;
        color: #fbbf24;
        white-space: nowrap;
        min-width: 20px;
        text-align: center;
      }

      .exp-track {
        position: relative;
        flex: 1;
        height: 10px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        min-width: 50px;
      }

      .exp-fill {
        height: 100%;
        border-radius: 5px;
        background: linear-gradient(90deg, #f59e0b, #fbbf24);
        transition: width 0.6s ease;
        width: 0%;
        position: relative;
      }

      .exp-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
        border-radius: 5px 5px 0 0;
      }

      .profile-nickname {
        color: #e2e8f0;
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s ease;
      }

      .player-profile:hover .profile-nickname {
        color: #60a5fa;
      }

      /* ===== 服务器负载图标（右上角） ===== */
      /* ===== 开发者消息 ✉️（右上角 · 服务器状态左侧 · 2026-9-13） ===== */
      .dev-mail-container {
        position: absolute;
        top: 20px;
        right: 110px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
      .dev-mail-icon {
        position: relative;
        width: 34px; height: 32px; /* 兜底尺寸：JS 会动态对齐 server-stats-icon 高度 */
        display: flex; align-items: center; justify-content: center;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(6px);
        user-select: none;
      }
      /* ★ 信封状态色（2026-9-13）：正常白色；存在【当天】未读消息 → 金色 + 闪烁，次日自动恢复白色 */
      .dev-mail-icon { color: #ffffff; }
      .dev-mail-icon.dev-mail-new { color: #fcd34d; }
      .dev-mail-icon.dev-mail-new .dev-mail-svg { animation: devMailBlink 1.2s ease-in-out infinite; }
      .dev-mail-icon:hover { color: #fde68a; }
      @keyframes devMailBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
      .dev-mail-icon:hover {
        background: rgba(30, 41, 59, 0.85);
        border-color: rgba(250, 204, 21, 0.45);
        transform: translateY(-1px);
      }
      .dev-mail-badge {
        position: absolute; top: -5px; right: -5px;
        min-width: 17px; height: 17px;
        padding: 0 4px;
        display: none; align-items: center; justify-content: center;
        background: #ef4444; color: #fff;
        font-size: 0.65rem; font-weight: 700;
        border-radius: 9px;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
      }
      .dev-mail-panel {
        display: none;
        width: 320px; max-height: 420px;
        margin-top: 8px;
        background: rgba(15, 23, 42, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px;
        flex-direction: column;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
      }
      .dev-mail-panel.active { display: flex; }
      .dev-mail-panel-title {
        color: #fcd34d; font-size: 0.9rem; font-weight: 700;
        padding-bottom: 8px; margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .dev-mail-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
      .dev-mail-empty { color: #94a3b8; font-size: 0.85rem; text-align: center; padding: 16px 0; }
      .dev-mail-item {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px; padding: 8px 10px;
      }
      .dev-mail-item.unread { border-color: rgba(250, 204, 21, 0.45); background: rgba(250, 204, 21, 0.06); }
      .dev-mail-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
      .dev-mail-item-title { color: #f1f5f9; font-size: 0.85rem; font-weight: 700; }
      .dev-mail-item.unread .dev-mail-item-title::before { content: '● '; color: #fcd34d; font-size: 0.6rem; }
      .dev-mail-item-time { color: #64748b; font-size: 0.68rem; flex-shrink: 0; }
      .dev-mail-item-content { color: #cbd5e1; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
      /* ★ 消息管理（2026-9-14）：置顶样式 + 删除/置顶操作按钮 + 管理员密码行 */
      .dev-mail-item.pinned { border-color: rgba(252, 211, 77, 0.55); background: rgba(252, 211, 77, 0.08); }
      .dev-mail-item-ops { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
      .dm-op-btn {
        border: none; background: rgba(255, 255, 255, 0.06); color: #94a3b8;
        border-radius: 5px; padding: 1px 6px; font-size: 0.68rem; cursor: pointer; transition: all 0.15s;
      }
      .dm-op-btn:hover { background: rgba(252, 211, 77, 0.18); color: #fcd34d; }
      .dm-op-btn.pin.on { color: #fcd34d; }
      .dm-op-btn.del.confirm { background: rgba(248, 113, 113, 0.25); color: #f87171; font-weight: 700; }
      .dev-mail-admin { display: flex; justify-content: flex-end; margin-top: 6px; }
      .dev-mail-admin-toggle {
        border: none; background: rgba(255, 255, 255, 0.05); color: #64748b;
        border-radius: 5px; padding: 1px 6px; cursor: pointer; font-size: 0.7rem; transition: color 0.15s;
      }
      .dev-mail-admin-toggle:hover { color: #fcd34d; }
      .dm-admin-row { display: flex; gap: 6px; margin-top: 6px; }
      .dm-admin-row input {
        flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 6px; color: #e2e8f0; font-size: 0.72rem; padding: 4px 8px; outline: none;
      }
      .dm-admin-row input:focus { border-color: rgba(252, 211, 77, 0.5); }
      .dm-admin-row button {
        border: none; border-radius: 6px; background: rgba(96, 165, 250, 0.2); color: #93c5fd;
        padding: 4px 10px; font-size: 0.72rem; cursor: pointer;
      }
      .dm-admin-row button:hover { background: rgba(96, 165, 250, 0.38); }

      .server-stats-container {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
      }

      /* ===== AI 玩家（服务器状态面板内 · 点击展开设置） ===== */
      .ai-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding: 2px 0;
      }
      .ai-row:hover .ss-label { color: #e2e8f0; }
      .ai-row-left { display: flex; align-items: center; gap: 6px; }
      .ai-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
      .ai-status-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
      .ai-status-dot.off { background: #6b7280; }
      .ai-status-text { color: #e2e8f0; font-size: 0.8rem; font-weight: 600; }
      .ai-caret { color: #94a3b8; font-size: 0.65rem; transition: transform 0.2s ease; }
      .ai-caret.open { transform: rotate(180deg); }
      .ai-settings {
        display: none;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .ai-settings.open { display: flex; }
      .ai-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
      .ai-set-label { color: #94a3b8; font-size: 0.75rem; white-space: nowrap; }
      .ai-set-row input[type="number"], .ai-set-row input[type="password"] {
        width: 96px;
        padding: 4px 7px;
        border-radius: 6px;
        font-size: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: #0b1220;
        color: #e2e8f0;
        outline: none;
      }
      .ai-set-row input:focus { border-color: #3b82f6; }
      .ai-error { color: #f87171; font-size: 0.7rem; min-height: 14px; text-align: center; }
      .ai-actions { display: flex; justify-content: flex-end; gap: 8px; }
      .ai-btn { padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.72rem; }
      .ai-btn.ok { background: #3b82f6; color: #fff; font-weight: 600; }
      .ai-btn.ok:hover { background: #2563eb; }
      .ai-btn.cancel { background: #334155; color: #cbd5e1; }
      .ai-hint { color: #64748b; font-size: 0.65rem; line-height: 1.4; text-align: center; }
      /* AI 开关：左右滑动按钮（开启/关闭） */
      .ai-toggle { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; cursor: pointer; }
      .ai-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
      .ai-toggle-track {
        position: absolute; inset: 0; border-radius: 20px;
        background: #334155; border: 1px solid rgba(255, 255, 255, 0.18);
        transition: background 0.2s ease, border-color 0.2s ease;
      }
      .ai-toggle-thumb {
        position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
        border-radius: 50%; background: #94a3b8;
        transition: transform 0.2s ease, background 0.2s ease;
      }
      .ai-toggle input:checked + .ai-toggle-track { background: #16a34a; border-color: #22c55e; }
      .ai-toggle input:checked + .ai-toggle-track .ai-toggle-thumb { transform: translateX(20px); background: #fff; }
      /* AI 记住密码：可点击小方框勾选 */
      .ai-checkbox { position: relative; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
      .ai-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
      .ai-checkbox-box {
        position: absolute; inset: 0; border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.35); background: #0b1220;
        transition: background 0.15s ease, border-color 0.15s ease;
      }
      .ai-checkbox-box::after {
        content: ''; position: absolute; left: 4.5px; top: 1px;
        width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
        transform: rotate(45deg); opacity: 0; transition: opacity 0.15s ease;
      }
      .ai-checkbox input:checked + .ai-checkbox-box { background: #3b82f6; border-color: #3b82f6; }
      .ai-checkbox input:checked + .ai-checkbox-box::after { opacity: 1; }

      .server-stats-icon {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .server-stats-icon:hover {
        background: rgba(0, 0, 0, 0.55);
        border-color: rgba(255, 255, 255, 0.3);
      }
      .server-stats-indicator {
        width: 8px; height: 8px; border-radius: 50%;
        background: #64748b;
        flex-shrink: 0;
        transition: all 0.3s;
      }
      .server-stats-indicator.good { background: #4ade80; box-shadow: 0 0 6px 1px rgba(74,222,128,0.5); }
      .server-stats-indicator.medium { background: #fbbf24; box-shadow: 0 0 6px 1px rgba(251,191,36,0.5); }
      .server-stats-indicator.bad { background: #f87171; box-shadow: 0 0 6px 1px rgba(239,68,68,0.5); }
      .server-stats-text {
        color: #e2e8f0;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
      }
      .server-stats-panel {
        display: none;
        flex-direction: column;
        width: 220px;
        background: linear-gradient(145deg, #1e293b, #0f172a);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
        padding: 14px 16px;
        gap: 8px;
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
        transform-origin: top right;
        transition: all 0.25s ease;
      }
      .server-stats-panel.active {
        display: flex;
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .server-stats-panel-title {
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .server-stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .ss-label { color: #94a3b8; font-size: 0.8rem; }
      .ss-value { color: #e2e8f0; font-size: 0.8rem; font-weight: 600; }

      /* ===== 自定义房间设置面板 ===== */
      .custom-room-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 1920px; height: 1080px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(6px);
        z-index: 10050;
        display: none;
        visibility: visible !important;
        pointer-events: auto !important;
        align-items: center;
        justify-content: center;
        transform-origin: top left;
      }
      .custom-room-overlay.active { display: flex; }
      .custom-room-panel {
        width: 820px;
        max-height: 90vh;
        background: linear-gradient(145deg, #1a1a2e, #16213e);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
        padding: 32px 40px;
        overflow-y: auto;
        animation: cr-pop-in 0.3s ease;
        box-sizing: border-box;
      }
      @keyframes cr-pop-in {
        from { opacity: 0; transform: scale(0.92) translateY(10px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
      .custom-room-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .custom-room-title {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 2px;
      }
      .custom-room-close {
        width: 36px; height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        font-size: 1.15rem;
        cursor: pointer;
        transition: all 0.2s;
        display: flex; align-items: center; justify-content: center;
      }
      .custom-room-close:hover { background: rgba(248, 113, 113, 0.2); color: #f87171; }
      .custom-room-options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
      .cr-option-row {
        display: flex;
        align-items: center;
        gap: 18px;
      }
      .cr-option-label {
        color: #94a3b8;
        font-size: 1rem;
        font-weight: 600;
        width: 68px;
        flex-shrink: 0;
        text-align: right;
      }
      .cr-option-btns { display: flex; gap: 8px; }
      .cr-btn {
        padding: 10px 22px;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        color: #94a3b8;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .cr-btn:hover { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
      .cr-btn.active {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border-color: #60a5fa;
        color: #fff;
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
      }
      .cr-btn.active.red {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        border-color: #f87171;
        box-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
      }
      .cr-btn.active.green {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        border-color: #4ade80;
        box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
      }
      /* VS 选边区域 */
      .cr-vs-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 48px;
        padding: 28px 0 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .cr-vs-text {
        font-size: 1.75rem;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.15);
        letter-spacing: 2px;
      }
      .cr-footer {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-top: 8px;
      }
      .cr-footer-btn {
        padding: 12px 40px;
        border-radius: 11px;
        border: none;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
      }
      .cr-footer-btn.cancel {
        background: rgba(255, 255, 255, 0.06);
        color: #94a3b8;
      }
      .cr-footer-btn.cancel:hover { background: rgba(255, 255, 255, 0.12); color: #cbd5e1; }
      .cr-footer-btn.create {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
      }
      .cr-footer-btn.create:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5); }
      .cr-footer-btn.create:disabled { background: rgba(255, 255, 255, 0.06); color: #475569; cursor: not-allowed; box-shadow: none; }
      /* 玩家槽位 */
      .cr-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
      .cr-side-label {
        font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; margin-top: 2px;
      }
      .cr-side-label.blue { color: #60a5fa; }
      .cr-side-label.red { color: #f87171; }
      /* 先手/后手标识 */
      .cr-turn-indicator {
        font-size: 0.7rem; font-weight: 600; white-space: nowrap;
        padding: 3px 8px; border-radius: 6px; letter-spacing: 1px;
      }
      .cr-turn-indicator.blue { color: #60a5fa; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(96, 165, 250, 0.2); }
      .cr-turn-indicator.red { color: #f87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(248, 113, 113, 0.2); }
      .cr-turn-row { display: flex; align-items: center; gap: 8px; }
      .cr-slot {
        display: flex; flex-direction: column; align-items: center; gap: 4px;
      }
      .cr-join-btn {
        width: 64px; height: 64px;
        border-radius: 50%;
        border: 2px dashed rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.3);
        font-size: 1.8rem;
        cursor: pointer;
        transition: all 0.25s;
        display: flex; align-items: center; justify-content: center;
      }
      .cr-join-btn.blue:hover {
        border-color: #60a5fa; border-style: solid;
        background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
        transform: scale(1.08);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
      }
      .cr-join-btn.red:hover {
        border-color: #f87171; border-style: solid;
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
        transform: scale(1.08);
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
      }
      .cr-player-card {
        width: 90px;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 6px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .cr-player-card.blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(96, 165, 250, 0.3); }
      .cr-player-card.red { background: rgba(239, 68, 68, 0.12); border-color: rgba(248, 113, 113, 0.3); }
      .cr-player-avatar {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
        overflow: hidden;
      }
      .cr-player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
      .cr-player-name {
        color: #e2e8f0; font-size: 0.75rem; font-weight: 600;
        max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .cr-player-level {
        color: #94a3b8; font-size: 0.65rem;
      }
      /* 房主金色边框 */
      .cr-player-card.host {
        border-color: #fbbf24 !important;
        box-shadow: 0 0 8px 1px rgba(251, 191, 36, 0.4) !important;
      }
      .cr-host-badge {
        font-size: 0.6rem;
        color: #fbbf24;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: -2px;
      }
      .cr-ai-badge {
        font-size: 0.55rem;
        color: #c084fc;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: -2px;
        background: rgba(192, 132, 252, 0.15);
        padding: 1px 6px;
        border-radius: 4px;
      }
      .cr-player-card.ai-player {
        border-color: rgba(192, 132, 252, 0.4) !important;
        background: rgba(192, 132, 252, 0.08) !important;
      }
      /* 空位卡片（加号在头像位置，与玩家卡片同尺寸对齐） */
      .cr-player-card.empty {
        cursor: pointer;
        border-style: dashed;
        opacity: 0.5;
        transition: all 0.25s;
      }
      .cr-player-card.empty:hover {
        opacity: 1;
        transform: scale(1.05);
      }
      .cr-player-card.empty.blue:hover {
        border-color: #60a5fa;
        background: rgba(59, 130, 246, 0.15);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
      }
      .cr-player-card.empty.red:hover {
        border-color: #f87171;
        background: rgba(239, 68, 68, 0.15);
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
      }
      .cr-join-avatar {
        color: rgba(255, 255, 255, 0.35);
        font-size: 1.5rem;
        font-weight: 300;
      }

      /* ===== 房间列表面板 ===== */
      .room-list-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 1920px; height: 1080px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(6px);
        z-index: 10050;
        display: none;
        visibility: visible !important;
        pointer-events: auto !important;
        align-items: center;
        justify-content: center;
        transform-origin: top left;
      }
      .room-list-overlay.active { display: flex; }
      .room-list-panel {
        width: 720px;
        max-height: 90vh;
        background: linear-gradient(145deg, #1a1a2e, #16213e);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: cr-pop-in 0.3s ease;
      }
      .room-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .room-list-title { color: #fff; font-size: 1.3rem; font-weight: 700; }
      .room-list-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .room-list-search {
        padding: 8px 14px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        color: #e2e8f0;
        font-size: 0.85rem;
        width: 160px;
        outline: none;
      }
      .room-list-search::placeholder { color: #64748b; }
      .room-list-btn {
        padding: 8px 18px;
        border-radius: 8px;
        border: none;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .room-list-btn.create-room {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #fff;
        box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
      }
      .room-list-btn.create-room:hover {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
      }
      /* ★ 玩家大厅刷新按钮（2026-9-18） */
      .room-list-btn.refresh-room {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #cbd5e1;
      }
      .room-list-btn.refresh-room:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
      }
      .room-list-btn.refresh-room .rl-refresh-icon {
        display: inline-block;
        margin-right: 4px;
      }
      .room-list-btn.refresh-room.refreshing .rl-refresh-icon {
        animation: rlRefreshSpin 0.7s linear;
      }
      @keyframes rlRefreshSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      .room-list-content {
        padding: 16px 28px 24px;
        overflow-y: auto;
        max-height: 60vh;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .room-list-empty {
        text-align: center;
        color: #64748b;
        padding: 40px;
        font-size: 0.95rem;
      }
      .room-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.02);
        transition: all 0.2s;
      }
      .room-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
      .room-item-info { display: flex; flex-direction: column; gap: 4px; }
      .room-item-id { color: #e2e8f0; font-size: 0.95rem; font-weight: 700; }
      .room-item-host { color: #94a3b8; font-size: 0.8rem; }
      .room-item-players {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .room-item-count { color: #94a3b8; font-size: 0.8rem; }
      .room-item-count span { color: #e2e8f0; font-weight: 600; }
      .room-item-join {
        padding: 6px 16px;
        border-radius: 6px;
        border: none;
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
      }
      .room-item-join:hover { box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4); transform: scale(1.05); }
      .room-item-join:disabled {
        background: rgba(255, 255, 255, 0.06);
        color: #475569;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
      .room-item-full { color: #ef4444; font-size: 0.75rem; font-weight: 600; }

      /* ===== 房间内部界面 ===== */
      .room-interior-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 1920px; height: 1080px;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(8px);
        z-index: 10060;
        display: none;
        visibility: visible !important;
        pointer-events: auto !important;
        align-items: center;
        justify-content: center;
        transform-origin: top left;
      }
      .room-interior-overlay.active { display: flex; }
      .room-interior-panel {
        position: relative;
        width: 640px;
        max-height: 90vh;
        background: linear-gradient(145deg, #1a1a2e, #16213e);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        animation: cr-pop-in 0.3s ease;
      }
      .room-interior-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .room-interior-title { color: #fff; font-size: 1.2rem; font-weight: 700; }
      .room-interior-id { color: #64748b; font-size: 0.85rem; }
      .room-interior-sides {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 60px;
        padding: 16px 0;
      }
      .ri-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        min-width: 120px;
      }
      .ri-side-label {
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 2px;
        padding: 4px 16px;
        border-radius: 20px;
        margin-bottom: 4px;
      }
      .ri-side-label.blue { color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }
      .ri-side-label.red { color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3); }
      .ri-player-card {
        width: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 10px 8px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
      }
      .ri-player-card.blue { background: rgba(59, 130, 246, 0.1); border-color: rgba(96, 165, 250, 0.2); }
      .ri-player-card.red { background: rgba(239, 68, 68, 0.1); border-color: rgba(248, 113, 113, 0.2); }
      .ri-player-card.host { border-color: #fbbf24 !important; box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.3); }
      .ri-player-card.ready { border-color: #4ade80 !important; box-shadow: 0 0 6px 1px rgba(74, 222, 128, 0.3); }
      .ri-player-card.empty-seat:hover {
        opacity: 0.7 !important;
        border-color: #60a5fa !important;
        box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.3);
      }
      .ri-player-avatar {
        width: 48px; height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem;
        overflow: hidden;
      }
      .ri-player-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
      .ri-player-name {
        color: #e2e8f0; font-size: 0.8rem; font-weight: 600;
        max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .ri-player-name .ri-level { color: #fbbf24; font-size: 0.7rem; margin-left: 3px; }
      .ri-ready-badge {
        font-size: 0.6rem;
        color: #4ade80;
        font-weight: 700;
        letter-spacing: 1px;
      }
      /* 玩家槽位容器：垂直堆叠（支持4人模式上下两排） */
      #ri-blue-players, #ri-red-players {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
      }
      .ri-footer {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
      }
      .ri-footer-btn {
        padding: 10px 24px;
        border-radius: 10px;
        border: none;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
      }
      .ri-footer-btn.start {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
        box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
      }
      .ri-footer-btn.start:hover { box-shadow: 0 4px 16px rgba(34, 197, 94, 0.5); }
      .ri-footer-btn.ready {
        background: linear-gradient(135deg, #fbbf24, #d97706);
        color: #fff;
        box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
      }
      .ri-footer-btn.ready:hover { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.5); }
      .ri-footer-btn.ready.active {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
      }
      .ri-footer-btn.cancel {
        background: rgba(255, 255, 255, 0.06);
        color: #94a3b8;
      }
      .ri-footer-btn.cancel:hover { background: rgba(255, 255, 255, 0.12); color: #cbd5e1; }
      .ri-footer-btn.invite {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
      }
      .ri-footer-btn.invite:hover { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5); }

      /* ===== 房间邀请面板（定位在房间面板内部，footer下方） ===== */
      .room-invite-panel {
        position: absolute;
        top: calc(100% - 8px);
        left: 50%;
        transform: translateX(-50%) scale(0.9);
        width: 320px; max-height: 300px;
        background: linear-gradient(145deg, #1e293b, #0f172a);
        border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.6); z-index: 10070;
        display: none; flex-direction: column; overflow: hidden;
        opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
      }
      .room-invite-panel.active {
        display: flex; opacity: 1;
        transform: translateX(-50%) scale(1);
      }
      .room-invite-panel-header {
        padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex; align-items: center; justify-content: space-between;
      }
      .room-invite-panel-title { color: #fff; font-size: 1rem; font-weight: 600; }
      .room-invite-panel-close { background: none; border: none; color: #94a3b8; font-size: 1.3rem; cursor: pointer; padding: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s; }
      .room-invite-panel-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
      .room-invite-panel .team-invite-list { flex: 1; overflow-y: auto; padding: 8px 0; }
      .room-invite-panel .team-invite-empty { text-align: center; color: #64748b; padding: 30px 20px; font-size: 0.85rem; }

      /* ===== 组队图标 / 队友头像 ===== */
      .team-icon-container {
        position: absolute;
        left: 185px;
        top: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        z-index: 1001;
      }

      .team-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        background: linear-gradient(135deg, #1e293b, #334155);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
      }

      .team-icon:hover {
        border-color: rgba(255, 255, 255, 0.6);
        transform: scale(1.05);
      }

      .team-plus {
        color: rgba(255, 255, 255, 0.6);
        font-size: 1.2rem;
        font-weight: 300;
        line-height: 1;
      }

      .team-label {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        line-height: 1;
        white-space: nowrap;
      }

      .team-icon.has-teammate {
        border: 2px solid rgba(96, 165, 250, 0.6);
        box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
      }

      .team-icon.has-teammate .team-plus {
        display: none;
      }

      .team-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }

      .team-icon .teammate-name-tooltip {
        position: absolute;
        left: 42px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: #e2e8f0;
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        z-index: 10;
      }

      .team-icon.has-teammate:hover .teammate-name-tooltip {
        opacity: 1;
      }

      /* ===== 队友信息卡片（已组队时显示） ===== */
      .teammate-profile {
        position: relative;
        display: none;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 5px 12px 5px 5px;
        border-radius: 30px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(96, 165, 250, 0.3);
        transition: all 0.3s ease;
      }
      .teammate-profile.active { display: flex; }
      .teammate-profile:hover {
        background: rgba(0, 0, 0, 0.55);
        border-color: rgba(96, 165, 250, 0.5);
      }
      .teammate-avatar-box {
        width: 35px; height: 35px; border-radius: 50%; overflow: hidden;
        flex-shrink: 0; border: 2px solid rgba(96, 165, 250, 0.5);
        background: linear-gradient(135deg, #1e293b, #334155);
        display: flex; align-items: center; justify-content: center;
      }
      .teammate-info-box { display: flex; flex-direction: column; gap: 2px; }
      .teammate-nick-text {
        color: #93c5fd; font-size: 0.8rem; font-weight: 600;
        white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis;
      }
      .teammate-exp-row { display: flex; align-items: center; gap: 4px; height: 12px; }
      .teammate-level-text {
        font-size: 0.55rem; font-weight: 700; color: #fbbf24;
        white-space: nowrap; min-width: 16px; text-align: center;
      }
      .teammate-track-bar {
        position: relative; width: 60px; height: 7px; border-radius: 4px;
        background: rgba(255, 255, 255, 0.1); overflow: hidden;
      }
      .teammate-fill-bar {
        height: 100%; border-radius: 4px;
        background: linear-gradient(90deg, #f59e0b, #fbbf24);
        transition: width 0.6s ease; width: 0%; position: relative;
      }
      .teammate-fill-bar::after {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
        border-radius: 4px 4px 0 0;
      }
      /* 退出队伍弹窗 */
      .teammate-exit-popup {
        position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
        margin-top: 6px; display: none; z-index: 10002;
      }
      .teammate-exit-popup.active { display: block; }
      .teammate-exit-btn {
        background: linear-gradient(135deg, #dc2626, #991b1b);
        color: white; border: 1px solid rgba(239, 68, 68, 0.5);
        padding: 6px 18px; border-radius: 8px; font-size: 0.75rem;
        cursor: pointer; white-space: nowrap; font-weight: 600;
        transition: all 0.2s; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
      }
      .teammate-exit-btn:hover {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        transform: scale(1.05);
      }

      /* ===== 人物信息弹窗 ===== */
      .profile-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: profileModalFadeIn 0.2s ease;
      }

      @keyframes profileModalFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      .profile-modal-content {
        background: linear-gradient(135deg, #1e293b, #0f172a);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 24px 20px;
        width: 400px;
        max-width: 90vw;
        box-sizing: border-box;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: profileModalSlideUp 0.25s ease;
      }

      @keyframes profileModalSlideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }

      .profile-modal-title {
        color: #fbbf24;
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 8px;
        text-align: center;
      }

      .profile-player-id {
        text-align: center;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 16px;
        font-family: 'Courier New', monospace;
        letter-spacing: 0.5px;
      }

      .nickname-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.3);
        color: #e2e8f0;
        font-size: 1.1rem;
        outline: none;
        transition: border-color 0.3s ease;
        box-sizing: border-box;
      }

      .nickname-input:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
      }

      .profile-modal-buttons {
        display: flex;
        gap: 12px;
        margin-top: 20px;
      }

      .profile-modal-btn {
        flex: 1;
        padding: 10px 0;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .profile-modal-cancel {
        background: rgba(255, 255, 255, 0.1);
        color: #94a3b8;
      }

      .profile-modal-cancel:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #e2e8f0;
      }

      .profile-modal-confirm {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
      }

      .profile-modal-confirm:hover {
        background: linear-gradient(135deg, #60a5fa, #3b82f6);
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
      }

      /* ===== 账号登录/注册弹窗（auth-modal） ===== */
      .auth-tabs {
        display: flex; gap: 8px; margin-bottom: 16px;
      }
      .auth-tab {
        flex: 1; padding: 9px 0; border: none; border-radius: 8px;
        background: rgba(255, 255, 255, 0.08); color: #94a3b8;
        font-size: 0.95rem; font-weight: 600; cursor: pointer;
        transition: all 0.2s ease;
      }
      .auth-tab.active {
        background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;
      }
      .auth-form { display: flex; flex-direction: column; gap: 12px; }
      .auth-form .nickname-input { font-size: 1rem; padding: 11px 14px; }
      /* ★ 密码可见性切换按钮（👁️）：显示/隐藏密码明文，防输错 */
      .pwd-wrap { position: relative; }
      .pwd-wrap .nickname-input { padding-right: 42px; }
      .pwd-toggle-btn {
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
        width: 26px; height: 26px; padding: 0;
        background: none; border: none; cursor: pointer;
        color: #94a3b8; display: flex; align-items: center; justify-content: center;
        transition: color 0.15s ease;
      }
      .pwd-toggle-btn:hover { color: #e2e8f0; }
      .pwd-toggle-btn .eye-closed { display: none; }
      .pwd-toggle-btn.showing .eye-open { display: none; }
      .pwd-toggle-btn.showing .eye-closed { display: block; }

      /* ★ 密码强度条（注册表单）：3 段进度 + 文本，弱=红 中=黄 强=绿 */
      .pwd-strength-row {
        display: flex; align-items: center; gap: 10px; margin-top: -6px;
      }
      .pwd-strength-bars {
        display: flex; gap: 4px; flex: 1;
      }
      .pwd-strength-bar {
        height: 4px; flex: 1; border-radius: 2px;
        background: rgba(255, 255, 255, 0.12);
        transition: background 0.25s ease;
      }
      .pwd-strength-bar.on-weak { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
      .pwd-strength-bar.on-mid { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }
      .pwd-strength-bar.on-strong { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
      .pwd-strength-label {
        font-size: 0.72rem; font-weight: 600; flex-shrink: 0; min-width: 2em; text-align: right;
      }
      .pwd-strength-label.lv-weak { color: #f87171; }
      .pwd-strength-label.lv-mid { color: #fbbf24; }
      .pwd-strength-label.lv-strong { color: #4ade80; }

      .auth-captcha-row {
        display: flex; gap: 10px; align-items: center;
      }
      .auth-captcha-row .nickname-input { flex: 1; min-width: 0; }
      .auth-captcha-img {
        width: 120px; height: 40px; border-radius: 6px; cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0;
        background: #f5f0e6; object-fit: cover;
      }
      .auth-captcha-hint { color: rgba(255,255,255,0.4); font-size: 0.72rem; }
      .auth-agree-row {
        display: flex; align-items: flex-start; gap: 8px;
        color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; line-height: 1.5;
      }
      .auth-agree-row input[type="checkbox"] {
        margin-top: 3px; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
        accent-color: #3b82f6;
      }
      .auth-agree-link {
        color: #60a5fa; cursor: pointer; text-decoration: underline;
      }
      .auth-agree-link:hover { color: #93c5fd; }
      .auth-error {
        color: #f87171; font-size: 0.82rem; min-height: 1.2em; line-height: 1.2;
      }
      .auth-btn { width: 100%; padding: 11px 0; }
      .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

      /* ===== 协议全文弹窗（legal-modal） ===== */
      .legal-body {
        color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; line-height: 1.75;
        max-height: 55vh; overflow-y: auto; padding-right: 6px;
        white-space: pre-wrap;
      }
      .legal-body h3 { color: #fbbf24; font-size: 0.92rem; margin: 14px 0 6px; }
      .legal-body p { margin: 6px 0; }

      /* ===== 玩家个人资料弹窗 ===== */
      .pp-header {
        display: flex; align-items: center; gap: 14px;
        margin: 4px 0 16px;
      }
      .pp-avatar {
        width: 56px; height: 56px; border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.25);
        object-fit: cover; background: rgba(0, 0, 0, 0.3); flex-shrink: 0;
      }
      .pp-info { flex: 1; min-width: 0; }
      /* ★ 昵称行：昵称 + 右侧小号「修改昵称」按钮 */
      .pp-nick-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
      .pp-nickname {
        color: #e2e8f0; font-size: 1.1rem; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        flex: 1; min-width: 0;
      }
      .pp-edit-nick-btn {
        flex-shrink: 0;
        padding: 3px 10px; font-size: 0.72rem; border-radius: 6px;
        background: rgba(59, 130, 246, 0.18); color: #93c5fd;
        border: 1px solid rgba(59, 130, 246, 0.45); cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
      }
      .pp-edit-nick-btn:hover { background: rgba(59, 130, 246, 0.35); color: #dbeafe; }
      /* ★ 账号按钮已登录态（退出登录）红系 */
      #pp-auth-btn.pp-logout-danger {
        background: linear-gradient(135deg, #7f1d1d, #b91c1c);
        border-color: #dc2626;
      }
      #pp-auth-btn.pp-logout-danger:hover { background: linear-gradient(135deg, #991b1b, #dc2626); }
      .pp-id {
        color: rgba(255, 255, 255, 0.5); font-size: 0.8rem;
        font-family: 'Courier New', monospace; margin-top: 2px;
      }
      .pp-stats-title {
        color: #94a3b8; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px;
      }
      .pp-stats { display: flex; flex-direction: column; gap: 6px; }
      .pp-stat-row {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px; padding: 8px 12px;
      }
      .pp-stat-mode { color: #cbd5e1; font-size: 0.9rem; font-weight: 600; flex-shrink: 0; }
      .pp-stat-detail { color: #94a3b8; font-size: 0.82rem; flex: 1; text-align: right; }
      .pp-stat-rate { color: #4ade80; font-weight: 700; font-size: 0.95rem; min-width: 52px; text-align: right; }

      /* ===== 对局记录列表（2026-9-11） ===== */
      .pp-stat-row.pp-has-replays { cursor: pointer; user-select: none; }
      .pp-stat-row.pp-has-replays:hover { border-color: rgba(96, 165, 250, 0.45); background: rgba(0, 0, 0, 0.35); }
      .pp-caret { color: #64748b; font-size: 0.7rem; transition: transform 0.15s ease; flex-shrink: 0; margin-left: 4px; display: inline-block; }
      .pp-stat-row.pp-expanded .pp-caret { transform: rotate(90deg); }
      .pp-replay-list {
        display: flex; flex-direction: column; gap: 4px;
        margin: -2px 0 2px; padding: 7px 9px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
      }
      .pp-replay-title { color: #64748b; font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; margin-bottom: 3px; }
      .pp-replay-item {
        display: flex; align-items: center; gap: 6px;
        padding: 4px 7px; border-radius: 6px;
        background: rgba(255, 255, 255, 0.03);
      }
      .pp-replay-item:hover { background: rgba(255, 255, 255, 0.08); }
      .pp-replay-res { font-size: 0.72rem; font-weight: 700; width: 20px; text-align: center; flex-shrink: 0; }
      .pp-replay-res.win { color: #4ade80; }
      .pp-replay-res.lose { color: #f87171; }
      .pp-replay-res.draw { color: #facc15; }
      .pp-replay-meta { color: #94a3b8; font-size: 0.7rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      /* ★ 2026-9-18：悬停电子横幅——行内文字溢出时，悬停自动左右滚动展示全文 */
      .pp-meta-scroll { display: inline-block; white-space: nowrap; }
      /* ★ 2026-9-22 FIX：line2 滚动动画必须作用在内层 .pp-meta-scroll 上，
         line2 自身是 overflow:hidden 窗口——若动画加在窗口上，窗口随内容一起平移，永远遮挡 */
      .pp-replay-item:hover .pp-meta-scroll.pp-marquee-on {
        animation: ppMetaMarquee var(--ppDur, 6s) linear infinite alternate;
      }
      @keyframes ppMetaMarquee {
        from { transform: translateX(0); }
        to { transform: translateX(var(--ppShift, -100%)); }
      }
      .pp-replay-btn {
        border: none; border-radius: 5px; padding: 2px 8px; font-size: 0.68rem;
        cursor: pointer; flex-shrink: 0; transition: all 0.15s ease;
        background: rgba(96, 165, 250, 0.18); color: #93c5fd;
      }
      .pp-replay-btn:hover { background: rgba(96, 165, 250, 0.38); color: #dbeafe; }
      .pp-replay-btn.dl { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
      .pp-replay-btn.dl:hover { background: rgba(148, 163, 184, 0.32); color: #f1f5f9; }
      .pp-replay-btn.star { background: transparent; color: #64748b; font-size: 0.8rem; padding: 2px 4px; }
      .pp-replay-btn.star:hover { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
      .pp-replay-btn.star.on { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }
      .pp-replay-item.pp-starred { background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.35); }
      /* ★ 2026-9-18：双方玩家名称 + 五路全胜标识 */
      .pp-replay-players {
        display: inline-block; color: #94a3b8; font-size: 0.78rem; margin-right: 8px;
      }
      .rp-sweep {
        color: #fbbf24; font-weight: 800; margin-left: 4px; font-size: 0.8rem;
        text-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
      }
      /* ★ 2026-9-18：排行榜明细默认隐藏时间（时间只在悬停浮动条中显示，行内不展开） */
      .lb-detail .lb-time-cell {
        display: inline-block; max-width: 0; overflow: hidden; opacity: 0; vertical-align: bottom;
      }
      /* ★ 2026-9-18：排行榜明细行悬停 = 横向浮动条完整展开（absolute 于缩放面板内，缩放亦对齐） */
      #lb-float-tip {
        position: absolute; z-index: 99999; display: none; pointer-events: auto;
        box-sizing: border-box; align-items: center; gap: 12px;
        white-space: nowrap; max-width: none;
        padding: 5px 12px; border-radius: 8px;
        background: rgba(10, 15, 30, 0.95); border: 1px solid rgba(250, 204, 21, 0.45);
        color: #e2e8f0; font-size: 0.74rem; font-weight: 600;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
      }
      .lb-float-text { white-space: nowrap; }
      .lb-float-play {
        border: none; border-radius: 5px; padding: 2px 10px; font-size: 0.7rem;
        cursor: pointer; background: rgba(96, 165, 250, 0.22); color: #93c5fd; transition: all 0.15s ease;
      }
      .lb-float-play:hover { background: rgba(96, 165, 250, 0.4); color: #dbeafe; }
      .pp-replay-empty, .pp-replay-loading { color: #64748b; font-size: 0.72rem; padding: 3px 4px; }
      /* ★ 2026-9-18：回放头像牌（2v2 四角 / 1v1 上下） */
      #rp-avatar-plaques { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
      .rp-plaque {
        position: absolute; display: flex; align-items: center; gap: 6px;
        padding: 3px 10px 3px 4px; border-radius: 20px;
        background: rgba(10, 15, 30, 0.78); border: 1px solid rgba(206, 183, 135, 0.45);
      }
      .rp-plaque-ava img { width: 26px; height: 26px; border-radius: 50%; display: block; }
      .rp-plaque-ava { font-size: 1.05rem; width: 26px; text-align: center; }
      .rp-plaque-name { color: #ece4d0; font-size: 0.78rem; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .rp-plaque-left-bottom { left: 1.2%; bottom: 1%; }
      .rp-plaque-left-top { left: 1.2%; top: 1%; }
      .rp-plaque-right-bottom { right: 1.2%; bottom: 1%; }
      .rp-plaque-right-top { right: 1.2%; top: 1%; }
      /* ★ 2026-9-18：回放记录两行显示（第一行=玩家名称，第二行=积分/回合/时间） */
      .pp-replay-texts { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
      .pp-replay-line1 { overflow: hidden; white-space: nowrap; color: #cbd5e1; }
      .pp-replay-line1:empty { display: none; }
      .pp-replay-line2 { display: flex; align-items: center; gap: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .lb-seg { white-space: nowrap; }
      /* ★ 2026-9-18：排行榜明细利用整行宽度——积分靠左、回合（+时间）靠右对齐 */
      .lb-detail .pp-replay-line2 { justify-content: space-between; }
      /* ★ 中间金色纹饰线（填补空间） */
      .lb-mid-deco {
        flex: 1; height: 1px; margin: 0 10px; align-self: center;
        background: linear-gradient(90deg, rgba(206,183,135,0.05), rgba(206,183,135,0.32), rgba(206,183,135,0.05));
      }
      /* ★ 滚动条与行内容留出间距 */
      .lb-detail .pp-replay-item { margin-right: 6px; }

      /* ===== 回放播放器（原界面弹出 + 游戏原生动画，2026-9-11） ===== */
      #rp-backdrop {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(4, 7, 18, 0.9);
        z-index: 10100; display: none; pointer-events: auto;
      }
      #rp-backdrop.active { display: block; }
      #replay-player-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: transparent;
        z-index: 10500; display: none;
        flex-direction: column; justify-content: space-between;
        pointer-events: none;
      }
      #replay-player-overlay.active { display: flex; }
      .rp-topbar {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 18px;
        background: rgba(2, 6, 23, 0.88); border-bottom: 1px solid rgba(96, 165, 250, 0.25);
        pointer-events: auto;
      }
      .rp-bottombar {
        display: flex; flex-direction: column; gap: 8px;
        padding: 12px 18px 12px;
        background: rgba(2, 6, 23, 0.94); border-top: 1px solid rgba(96, 165, 250, 0.25);
        pointer-events: auto;
      }
      .rp-spacer { flex: 1; pointer-events: none; }
      .rp-title { color: #facc15; font-size: 1rem; font-weight: 700; flex-shrink: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
      .rp-info { color: #cbd5e1; font-size: 0.82rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
      .rp-close {
        border: 1px solid rgba(248, 113, 113, 0.5); border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0;
        width: 32px; height: 32px; font-size: 1rem; line-height: 1;
        background: rgba(239, 68, 68, 0.18); color: #fca5a5; transition: all 0.15s ease;
      }
      .rp-close:hover { background: rgba(239, 68, 68, 0.38); color: #fee2e2; }
      .rp-action-bar {
        display: flex; align-items: center; gap: 10px;
        background: rgba(2, 6, 23, 0.72); border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px; padding: 8px 14px;
      }
      .rp-step-label { color: #facc15; font-size: 0.82rem; font-weight: 700; flex-shrink: 0; min-width: 56px; text-align: center; }
      .rp-action-desc { color: #e2e8f0; font-size: 0.85rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .rp-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
      .rp-btn {
        border: none; border-radius: 7px; padding: 6px 13px; cursor: pointer;
        background: rgba(255, 255, 255, 0.1); color: #cbd5e1; font-size: 0.8rem; transition: all 0.15s ease;
      }
      .rp-btn:hover { background: rgba(255, 255, 255, 0.2); color: #f1f5f9; }
      .rp-btn.primary { background: rgba(96, 165, 250, 0.3); color: #93c5fd; }
      .rp-btn.primary:hover { background: rgba(96, 165, 250, 0.5); color: #dbeafe; }
      .rp-slider { flex: 1; min-width: 120px; accent-color: #60a5fa; cursor: pointer; }
      .rp-speed {
        border: none; border-radius: 6px; padding: 5px 7px; cursor: pointer;
        background: rgba(255, 255, 255, 0.1); color: #cbd5e1; font-size: 0.78rem; outline: none;
      }
      /* ===== 回放复盘评分 + 波动图（2026-10-02） ===== */
      .rp-review { display: flex; flex-direction: column; gap: 2px; }
      .rp-review-row { display: flex; align-items: center; gap: 10px; }
      .rp-review-canvas { display: block; flex: 1; min-width: 0; height: 140px; cursor: pointer; }
      /* ★ 2026-10-02：连体大按钮组改竖排（左列=上一步/播放/下一步，右列=重播/倍速/末尾） */
      .rp-btn-group {
        display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0;
        border-radius: 10px; overflow: hidden;
        border: 1px solid rgba(96, 165, 250, 0.35);
        background: rgba(2, 6, 23, 0.6);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
      }
      .rp-btn-group .rp-btn {
        border-radius: 0; padding: 9px 14px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        background: transparent; white-space: nowrap; text-align: center;
      }
      .rp-btn-group .rp-btn:last-child { border-bottom: none; }
      .rp-btn-group .rp-btn:hover { background: rgba(96, 165, 250, 0.22); color: #dbeafe; }
      .rp-btn-group .rp-btn.primary { background: rgba(96, 165, 250, 0.3); color: #93c5fd; }
      .rp-btn-group .rp-btn.primary:hover { background: rgba(96, 165, 250, 0.45); color: #dbeafe; }
      .rp-btn-group .rp-speed {
        border-radius: 0; border: none; border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        background: transparent; width: 100%; outline: none; cursor: pointer;
        padding: 8px 10px; color: #cbd5e1; font-size: 0.78rem;
      }
      .rp-review-legend { display: flex; gap: 16px; justify-content: flex-end; font-size: 11px; color: rgba(203,213,225,0.8); line-height: 1.3; }
      .rp-rev-total { white-space: nowrap; }
      .rp-score-badge { margin-left: auto; padding: 2px 11px; border-radius: 11px; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
      .rp-gr-win { background: rgba(64,222,110,0.28); color: #86efac; box-shadow: 0 0 8px rgba(74,222,128,0.35); }
      .rp-gr-best { background: rgba(64,222,110,0.16); color: #86efac; }
      .rp-gr-good { background: rgba(96,165,250,0.18); color: #93c5fd; }
      .rp-gr-avg { background: rgba(255,255,255,0.10); color: rgba(226,232,240,0.7); }
      .rp-gr-mistake { background: rgba(251,146,60,0.20); color: #fdba74; }
      .rp-gr-blunder { background: rgba(248,68,68,0.24); color: #fca5a5; box-shadow: 0 0 8px rgba(248,68,68,0.3); }
      .rp-gr-lose { background: rgba(248,68,68,0.30); color: #fecaca; box-shadow: 0 0 8px rgba(248,68,68,0.4); }
      /* ★ 回放模式：隐藏对局内所有功能按钮与对局时间（开始游戏/退出练习/回合记录/玩法说明/设置齿轮/联机投降/对局时间） */
      body.rp-ui-mode #start-game,
      body.rp-ui-mode #restart-game,
      body.rp-ui-mode #turn-display-btn,
      body.rp-ui-mode #game-rules-btn,
      body.rp-ui-mode #settings-btn,
      body.rp-ui-mode #online-surrender,
      body.rp-ui-mode #match-timer-display { display: none !important; }
      /* ★ 2026-9-26：已移除回放"变化槽位脉冲"线框（rpPulseGlow/.rp-pulse），落位反馈改为 card-road-pop 弹动 */
      /* ===== 游戏结束个人资料弹窗 ===== ★ 完全参照 timeout-vote-overlay 写法 */
      .game-end-modal {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
        background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(4px) !important;
        display: none !important; align-items: center !important; justify-content: center !important;
        z-index: 100002 !important;  /* 高于 timeout vote (100001) 和 surrender (99998) */
        flex-direction: column !important;  /* ★ 提示条在结算卡上方（2026-9-17） */
        gap: 14px !important;
      }
      .game-end-modal.active { display: flex !important; }
      /* ★ 结算弹窗上方提示：点击弹窗外任意处返回对局（2026-9-17） */
      .ge-outside-hint {
        padding: 9px 22px !important;
        background: rgba(15, 23, 42, 0.88) !important;
        border: 1px solid rgba(250, 204, 21, 0.45) !important;
        border-radius: 999px !important;
        color: #fde68a !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
        animation: geHintPulse 2.2s ease-in-out infinite;
      }
      @keyframes geHintPulse { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
      /* ★ 独立内容样式（不依赖 .profile-modal-content 等旧 class） */
      .game-end-content-standalone {
        width: 440px !important; max-width: 92vw !important;
        background: linear-gradient(145deg, #1e293b, #0f172a) !important;
        border: 1px solid rgba(251,191,36,0.4) !important;
        border-radius: 18px !important;
        padding: 22px 22px !important;
        text-align: center !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.65), 0 0 30px rgba(251,191,36,0.15) !important;
        animation: gePopIn 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
        transform-origin: center center !important;
      }
      @keyframes gePopIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
      .ge-badge { font-size: 2.5rem !important; margin-bottom: 2px !important; line-height: 1 !important; }
      .ge-title { font-size: 1.25rem !important; font-weight: 700 !important; color: #fbbf24 !important; margin-bottom: 12px !important; text-shadow: 0 0 20px rgba(251,191,36,0.4) !important; }
      .ge-card { display: flex !important; align-items: center !important; gap: 14px !important; background: rgba(255,255,255,0.06) !important; border-radius: 14px !important; padding: 10px 14px !important; margin-bottom: 12px !important; text-align: left !important; }
      .ge-avatar-wrap { width: 48px !important; height: 48px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid rgba(251,191,36,0.6) !important; flex-shrink: 0 !important; background: #334155 !important; }
      .ge-avatar-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
      .ge-info { flex: 1 !important; min-width: 0 !important; }
      .ge-nickname { color: #f1f5f9 !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
      .ge-level { color: #fbbf24 !important; font-size: 0.8rem !important; font-weight: 600 !important; }
      /* 分段标签 */
      .ge-section-label { color: #94a3b8 !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 1px !important; margin: 8px 0 6px !important; text-align: left !important; padding-left: 4px !important; }
      .ge-stats { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 6px !important; margin-bottom: 4px !important; }
      .ge-stat { background: rgba(59,130,246,0.12) !important; border-radius: 8px !important; padding: 6px 4px !important; text-align: center !important; }
      .ge-stat-val { color: #facc15 !important; font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.1 !important; }
      .ge-stat-val.ge-win { color: #4ade80 !important; }
      .ge-stat-val.ge-lose { color: #f87171 !important; }
      .ge-stat-label { color: #94a3b8 !important; font-size: 0.65rem !important; font-weight: 600 !important; margin-top: 2px !important; }
      .ge-buttons { display: flex !important; justify-content: center !important; margin-top: 12px !important; }
      .ge-btn { padding: 12px 24px !important; border: none !important; border-radius: 10px !important; font-size: 14.4px !important; font-weight: bold !important; cursor: pointer !important; transition: all 0.15s ease !important; }
      .ge-btn-cancel { background: rgba(255,255,255,0.1) !important; color: #94a3b8 !important; }
      .ge-btn-cancel:hover { background: rgba(255,255,255,0.18) !important; color: #e2e8f0 !important; }
      /* ★ 返回主页按钮 =「开始游戏/重新开始」同款金印凹刻立体结构 + 蓝色系（与金色区分，2026-9-30） */
      .ge-btn-confirm {
        background:
          radial-gradient(120% 90% at 50% 0%, rgba(200, 228, 255, 0.45), rgba(200, 228, 255, 0) 55%),
          linear-gradient(160deg, #4d8df6, #2f6ae0 60%, #1f4fc0) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        text-shadow: 0 1px 0 rgba(10, 30, 80, 0.45) !important;
        box-shadow: 0 5px 0 #14307e, 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 238, 255, 0.55) !important;
      }
      .ge-btn-confirm:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 7px 0 #14307e, 0 12px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(96, 165, 250, 0.45), inset 0 1px 0 rgba(220, 238, 255, 0.65) !important;
      }
      .ge-btn-confirm:active {
        transform: translateY(4px) !important;
        box-shadow: 0 1px 0 #14307e, 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 238, 255, 0.55) !important;
      }
      /* ★ flyBtn 落地后的悬停/按下 =「开始游戏」同款交互（定位坐标注入 --fb-x/--fb-y 变量，
         hover/active 用 calc 相对上浮/下沉，与金印凹刻 translateY(-2px)/translateY(4px) 一致） */
      #ge-fly-btn.landed {
        cursor: pointer;
        transform: translate(var(--fb-x, 0px), var(--fb-y, 0px)) !important;
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.3s ease;
      }
      #ge-fly-btn.landed:hover {
        filter: brightness(1.18);
        transform: translate(var(--fb-x, 0px), calc(var(--fb-y, 0px) - 2px)) !important;
        box-shadow:
          0 calc(7px * var(--fb-scale, 1)) 0 #1a3a94,
          0 calc(12px * var(--fb-scale, 1)) calc(22px * var(--fb-scale, 1)) rgba(0, 0, 0, 0.55),
          0 0 calc(16px * var(--fb-scale, 1)) rgba(140, 185, 255, 0.55),
          0 0 calc(5px * var(--fb-scale, 1)) rgba(190, 220, 255, 0.5),
          inset 0 1px 0 rgba(230, 244, 255, 0.8) !important;
      }
      #ge-fly-btn.landed:active {
        filter: brightness(0.94);
        transform: translate(var(--fb-x, 0px), calc(var(--fb-y, 0px) + 4px)) !important;
        box-shadow:
          0 calc(1px * var(--fb-scale, 1)) 0 #14307e,
          0 calc(3px * var(--fb-scale, 1)) calc(8px * var(--fb-scale, 1)) rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(220, 238, 255, 0.55) !important;
      }
      /* 关闭动画 */
      .game-end-modal.closing { animation: geCloseFadeOut 0.25s ease forwards !important; }
      .game-end-modal.closing .game-end-content-standalone { animation: geCloseContent 0.25s ease forwards !important; }
      @keyframes geCloseFadeOut { to { opacity: 0; } }
      @keyframes geCloseContent { to { opacity: 0; transform: scale(0.9); } }

      .avatar-grid {
        display: grid;
        grid-template-columns: repeat(5, 64px);
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
      }

      .avatar-option {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid transparent;
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }

      .avatar-option:hover {
        border-color: rgba(96, 165, 250, 0.5);
        transform: scale(1.08);
      }

      .avatar-option.selected {
        border-color: #60a5fa;
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.5);
      }

      .avatar-upload {
        grid-column: 1 / -1;
        justify-self: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        cursor: pointer;
        border: 3px dashed rgba(255, 255, 255, 0.3);
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.05);
      }

      .avatar-upload:hover {
        border-color: #60a5fa;
        color: #60a5fa;
        transform: scale(1.08);
        background: rgba(96, 165, 250, 0.1);
      }

      .avatar-upload-text {
        font-size: 0.55rem;
        text-align: center;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 10px;
        margin-bottom: 12px;
      }

      .avatar-section-divider {
        grid-column: 1 / -1;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 4px 0;
      }

      /* ===== 头像裁剪弹窗 ===== */
      .crop-container {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
      }

      .crop-viewport {
        position: relative;
        width: 280px;
        height: 280px;
        overflow: hidden;
        background: #0f172a;
        border-radius: 8px;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
      }

      .crop-viewport:active {
        cursor: grabbing;
      }

      .crop-viewport img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: none;
        max-height: none;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .crop-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      

      .crop-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, -50%);
        border: 2px solid #60a5fa;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
        border-radius: 4px;
        pointer-events: none;
      }

      /* 水平十字线 */
      .crop-line-h {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 0;
        border-top: 1px dashed rgba(255, 255, 255, 0.35);
        pointer-events: none;
        transform: translateY(-0.5px);
      }

      /* 垂直十字线 */
      .crop-line-v {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 0;
        border-left: 1px dashed rgba(255, 255, 255, 0.35);
        pointer-events: none;
        transform: translateX(-0.5px);
      }

      .crop-zoom-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding: 0 8px;
      }

      .crop-zoom-label {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        white-space: nowrap;
        flex-shrink: 0;
      }

      .crop-zoom-slider {
        flex: 1;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.15);
        outline: none;
        cursor: pointer;
      }

      .crop-zoom-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #60a5fa;
        cursor: pointer;
        border: 2px solid #1e293b;
        box-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
      }

      .crop-zoom-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #60a5fa;
        cursor: pointer;
        border: 2px solid #1e293b;
        box-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
      }

      .menu-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }

      /* ★ 游客锁定项（2026-9-12）：未登录不可互动的模式灰色显示（联机全部子项 + 人机2v1） */
      .guest-locked, .guest-locked:hover {
        opacity: 0.45;
        filter: grayscale(0.9);
        cursor: not-allowed;
      }

      .menu-version {
        margin-top: 50px;
        color: rgba(156, 163, 175, 0.5);
        font-size: 0.9rem;
        /* ★ 2026-9-20：底部一行并排放置「关闭游戏」小圆钮 + 版本号 */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      /* ★ 2026-9-20 关闭游戏按钮：界面底部独立小圆钮（红色警示配色，区别于金色菜单按钮） */
      .menu-quit-btn {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(248, 113, 113, 0.45);
        background: rgba(30, 10, 10, 0.6);
        color: rgba(252, 165, 165, 0.85);
        cursor: pointer;
        padding: 0;
        line-height: 1;
        transition: all 0.2s ease;
      }
      .menu-quit-btn:hover {
        border-color: rgba(248, 113, 113, 0.9);
        color: #fecaca;
        background: rgba(60, 15, 15, 0.75);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
        transform: translateY(-1px);
      }

      /* ★ 2026-9-20 撞牌全屏震动：碰撞瞬间抖动外层 wrapper。
         ★ 2026-9-20 FIX：回放复用此 wrapper 且内联 scale(0.8)——keyframes 若直接写 transform
         会覆盖缩放导致"震动时界面弹回原尺寸"。改用 --pb-ss-scale 变量保留当前缩放系数
         （触发时由 JS 探测写入：对局=1，回放=0.8），translate 在缩放后应用，幅度自动适配。
         ★ 2026-10-02 FIX：回放棋盘经 rpLayoutBoard 带上 translateY 上移量——keyframes 以
         --pb-ss-ty 变量保留平移（JS 从 matrix f 分量/缩放反解写入），否则震动瞬间棋盘
         跳回未上移位置再弹回 = 画面抖动（用户实测实锤）。 */
      @keyframes pb-screen-shake {
        0%   { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(0, 0); }
        12%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(-7px, 4px); }
        25%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(6px, -5px); }
        38%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(-5px, -3px); }
        50%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(4px, 4px); }
        63%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(-3px, 2px); }
        75%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(2px, -2px); }
        88%  { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(-1px, 1px); }
        100% { transform: scale(var(--pb-ss-scale, 1)) translateY(var(--pb-ss-ty, 0px)) translate(0, 0); }
      }
      .pb-screen-shake {
        animation: pb-screen-shake 0.45s ease-out;
      }

      /* ★ 2026-9-21 援牌/围牌归属变化联动动画：单张牌"缩小-放大-还原"脉冲，
         由起始牌带动，其余卡牌依次延迟播放，形成连锁波浪 */
      @keyframes pb-chain-pulse {
        0%   { transform: scale(1); }
        40%  { transform: scale(0.8); }
        70%  { transform: scale(1.08); }
        100% { transform: scale(1); }
      }
      .pb-chain-pulse {
        animation: pb-chain-pulse 0.32s ease-in-out;
        z-index: 5;
        /* ★ 2026-10-02 用户反馈（回放波浪看不清）：脉冲卡加金色辉光 + 提升缩放可见度——
           回放棋盘视觉缩放后（0.8×wrapper×内部 scale），纯 scale 脉冲幅度仅数像素难察觉 */
        /* ★ 2026-10-03（游戏波浪无光晕的根因）：游戏中立区/路牌卡牌带 .card-hover 的
           transition:all 0.25s，级联上 Transition 声明高于类样式 → 辉光被 0.25s 渐入渐出
           吞掉（回放卡牌无此 transition 所以光晕明显）。禁用过渡让辉光即时满格；
           类移除后恢复悬停过渡，辉光 0.25s 柔和淡出 */
        transition: none !important;
        /* position:relative 使下方 z-index:5 真正生效（静态定位的 z-index 无效），
           脉冲卡浮于相邻牌上方，光晕不被遮 */
        position: relative;
        box-shadow: 0 0 14px 4px rgba(251, 191, 36, 0.8), 0 0 28px 8px rgba(251, 191, 36, 0.4) !important;
        border-radius: 6px;
      }

      /* BGM 音量控制器 - 主页左下角（默认仅显示音乐图标，鼠标悬停时展开滑块与百分比） */
      .bgm-volume-control {
        position: absolute;
        left: 1.5rem;
        bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0;
        /* 2026-9-16：与显示模式按钮统一正方形 44×44（padding 9px + SVG 24×24 内容盒 + 1px 边框） */
        padding: 0.5625rem;
        background: rgba(15, 23, 42, 0.65);
        border: 0.0625rem solid rgba(148, 163, 184, 0.3);
        border-radius: 0.75rem;
        backdrop-filter: blur(8px);
        box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.35);
        z-index: 10001;
        cursor: default;
        overflow: hidden;
        transition: gap 0.3s ease;
      }
      .bgm-volume-control:hover {
        gap: 0.5rem;
      }

      .bgm-volume-icon {
        font-size: 1.1rem;
        color: #94a3b8;
        line-height: 1;
      }

      /* 音符改为内联 SVG（2026-9-15）：🎵 字符在 Chrome(内置Noto紫色) 与 Electron(回退系统Segoe红色)
         渲染颜色不一致；SVG 按浏览器实际渲染的紫色 #7167a4 绘制，两端像素级一致。
         2026-9-16：尺寸 24×24（正方形按钮），音符绘制区 24×17.6 在盒内垂直居中 */
      .bgm-note-svg {
        display: block;
        width: 24px;
        height: 24px;
        fill: #7167a4;
      }

      /* 显示模式按钮：与 BGM 控件完全同构（同 padding/边框/圆角/字号 → 尺寸天然一致），
         悬停向右展开滑块切换全屏/无边框（2026-9-15） */
      #winmode-wrap {
        position: absolute;
        left: 20px;
        bottom: 20px;
        z-index: 10001;
        display: flex;
        align-items: center;
        padding: 0;
        border-radius: 0.75rem;
        background: rgba(15, 23, 42, 0.65);
        border: 0.0625rem solid rgba(148, 163, 184, 0.3);
        backdrop-filter: blur(8px);
        box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.35);
        overflow: hidden;
        cursor: default;
      }
      #winmode-icon {
        flex: none;
        box-sizing: border-box;
        /* 2026-9-16：两按钮统一正方形 44×44（2.625rem=42px 内容盒 + 0.0625rem=1px 边框） */
        width: 2.625rem;
        height: 2.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e2e8f0;
        font-size: 1.45rem;  /* ⛶ 字形本身偏小，放大字号使其与 BGM 音符视觉等大 */
        line-height: 1;
      }
      #winmode-panel {
        width: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        transition: width 0.3s ease;
      }
      #winmode-wrap:hover #winmode-panel { width: 190px; }
      #wm-track { position: relative; display: flex; gap: 6px; padding: 0 6px; }
      #wm-thumb {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 6px;
        width: 86px;
        border-radius: 8px;
        background: #2563eb;
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.15s ease;
        pointer-events: none;
      }
      /* 颜色区分选中状态：蓝色滑块=已应用，灰色滑块=悬停预览（2026-9-15） */
      #wm-thumb.preview { background: #475569; }
      .wm-opt {
        position: relative;
        z-index: 1;
        width: 86px;
        padding: 8px 0;
        text-align: center;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #64748b;
        font-size: 13px;
        cursor: pointer;
        white-space: nowrap;
      }
      .wm-opt:hover { color: #e2e8f0; }
      /* 当前已应用的模式：白字加粗 + 蓝色滑块，与未选中的灰色明显区分（2026-9-15） */
      .wm-opt.active { color: #ffffff; font-weight: 700; }

      .bgm-volume-slider {
        width: 0;
        height: 0.375rem;
        accent-color: #3b82f6;
        cursor: pointer;
        background: transparent;
        padding: 0;
        border: 0;
        opacity: 0;
        overflow: hidden;
        transition: width 0.3s ease, opacity 0.3s ease;
      }
      .bgm-volume-control:hover .bgm-volume-slider {
        width: 6rem;
        opacity: 1;
      }

      .bgm-volume-value {
        color: white;
        font-size: 0.75rem;
        width: 0;
        text-align: right;
        font-weight: 500;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: width 0.3s ease, opacity 0.3s ease;
      }
      .bgm-volume-control:hover .bgm-volume-value {
        width: 2.5rem;
        opacity: 1;
      }

      /* 图鉴入口按钮 - 主页右下角
         定位基准：1920×1080 设计分辨率，由 JS updateScale() 统一应用 zoom 缩放 */
      .menu-codex-btn {
        position: absolute;
        right: 20px;
        bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.45);
        z-index: 10001;
        /* 仅过渡 hover 视觉属性；right/bottom/zoom 由 JS 在缩放时设置，
           不能进入 transition，否则会像图片缩放一样被动画化、慢半拍不同步 */
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }
      .menu-codex-btn:hover {
        transform: translateY(-0.2rem);
        box-shadow: 0 0.5rem 1.5rem rgba(139, 92, 246, 0.65);
        background: linear-gradient(135deg, #6d28d9, #9333ea);
      }
      .menu-codex-btn .btn-icon {
        font-size: 1.3rem;
      }
      .menu-codex-btn .btn-text {
        flex: none;
        text-align: left;
        line-height: 1.15;
        display: flex;
        flex-direction: column;
      }
      .menu-codex-btn .btn-text > span:first-child {
        font-weight: 600;
      }
      .menu-codex-btn .btn-sub {
        font-size: 0.65rem;
        opacity: 0.7;
        font-weight: 400;
      }

      /* ------------------------------------------------------------------------ */
      /* 教程系统样式 */
      /* ------------------------------------------------------------------------ */

      #tutorial-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 10001;
        display: none;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }

      #tutorial-overlay.tutorial-active {
        display: flex;
      }

      .tutorial-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
        background: transparent;
        z-index: 10000;
        pointer-events: none;
        animation: tutorial-fade-in 0.3s ease-out forwards;
      }
      
      @keyframes tutorial-fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .tutorial-hole-highlight {
        position: absolute;
        background: transparent;
        border: 2px solid rgba(251, 191, 36, 0.8);
        border-radius: 8px;
        pointer-events: auto;
        z-index: 10001;
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
        animation: tutorial-highlight-fade-in 0.4s ease-out forwards;
        animation-delay: 0.15s;
        opacity: 0;
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
      }
      
      .fc-tut-hole-static {
        position: absolute;
        background: rgba(251, 191, 36, 0.08);
        border: 2px solid rgba(251, 191, 36, 0.7);
        border-radius: 8px;
        pointer-events: none;
        z-index: 10001;
        animation: tutorial-highlight-fade-in 0.4s ease-out forwards, tutorial-highlight-breathe 2s ease-in-out infinite;
        animation-delay: 0.15s;
        opacity: 0;
      }

      .tutorial-hole-highlight-breathe {
        animation: tutorial-highlight-fade-in 0.4s ease-out forwards, tutorial-highlight-breathe 2s ease-in-out infinite;
        animation-delay: 0.15s;
      }
      
      @keyframes tutorial-highlight-fade-in {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      
      @keyframes tutorial-highlight-breathe {
        0%, 100% {
          border-color: rgba(251, 191, 36, 0.5);
          box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }
        50% {
          border-color: rgba(251, 191, 36, 1);
          box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
        }
      }

      @keyframes tutorial-shake {
        0%, 100% { transform: translateX(0) !important; }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) !important; }
        20%, 40%, 60%, 80% { transform: translateX(5px) !important; }
      }

      .tutorial-card-shake {
        animation: tutorial-shake 0.5s ease-in-out !important;
      }

      .tutorial-card-glow {
        box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.8) !important;
        z-index: 1000 !important;
      }

      .tutorial-effect-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
        border-radius: inherit;
      }

      .tutorial-effect-shake {
        animation: tutorial-shake 0.5s ease-in-out !important;
      }

      .tutorial-effect-glow {
        box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.8);
        border: 3px solid rgba(251, 191, 36, 0.9);
      }

      .tutorial-arrow {
        position: absolute;
        width: 0;
        height: 0;
        pointer-events: none;
        z-index: 10002;
      }

      .tutorial-arrow.down {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 20px solid #fbbf24;
      }

      .tutorial-arrow.up {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid #fbbf24;
      }

      .tutorial-arrow.left {
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 20px solid #fbbf24;
      }

      .tutorial-arrow.right {
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 20px solid #fbbf24;
      }

      .tutorial-panel {
        position: absolute;
        top: 50%;
        left: 50%;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
        border: 2px solid #fbbf24;
        border-radius: 12px;
        padding: 20px 24px;
        color: white;
        font-size: 0.95rem;
        line-height: 1.7;
        max-width: 360px;
        /* ★ 2026-9-30 用户规则：交互步骤面板去掉滚轮翻页，垂直拉长全部显示 */
        max-height: none;
        overflow-y: visible;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        z-index: 10003;
        pointer-events: none;
        animation: tutorial-panel-fade-in 0.4s ease-out forwards;
        animation-delay: 0.1s;
        opacity: 0;
      }
      
      @keyframes tutorial-panel-fade-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* ★ 2026-9-20 教程框顶部退出提示（鼠标右键 / 安卓长按） */
      .tutorial-exit-hint {
        text-align: center;
        font-size: 0.72rem;
        color: rgba(251, 191, 36, 0.65);
        letter-spacing: 0.5px;
        margin: -8px -6px 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(251, 191, 36, 0.25);
      }
      
      .tutorial-panel p {
        margin: 0;
      }
      
      .tutorial-area-item {
        color: #94a3b8;
        transition: all 0.3s ease;
        padding: 4px 8px;
        border-radius: 6px;
      }
      
      .tutorial-area-item.tutorial-highlighted {
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.15);
        font-weight: bold;
        text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
      }

      .tutorial-panel::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fbbf24;
      }

      .tutorial-step-indicator {
        display: inline-block;
        background: #fbbf24;
        color: #1e293b;
        padding: 4px 16px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.85rem;
        margin-bottom: 10px;
        cursor: pointer;
        pointer-events: auto;
        transition: filter 0.2s;
      }
      .tutorial-step-indicator:hover {
        filter: brightness(1.15);
      }
      .tutorial-step-nav-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 6px;
        background: rgba(15, 23, 42, 0.97);
        border: 1px solid rgba(251, 191, 36, 0.3);
        border-radius: 8px;
        padding: 6px;
        z-index: 10001;
        min-width: 240px;
        max-width: 400px;
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      }
      .tutorial-step-nav-dropdown::-webkit-scrollbar {
        width: 4px;
      }
      .tutorial-step-nav-dropdown::-webkit-scrollbar-track {
        background: transparent;
      }
      .tutorial-step-nav-dropdown::-webkit-scrollbar-thumb {
        background: rgba(251, 191, 36, 0.3);
        border-radius: 2px;
      }
      .tutorial-step-nav-item {
        padding: 8px 12px;
        border-radius: 5px;
        font-size: 0.82rem;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .tutorial-step-nav-item:hover {
        background: rgba(251, 191, 36, 0.12);
        color: #fbbf24;
      }
      .tutorial-step-nav-item.active {
        background: rgba(251, 191, 36, 0.2);
        color: #fbbf24;
        font-weight: bold;
      }

      .tutorial-step-indicator-interactive {
        display: inline-block;
        background: #3b82f6;
        color: #ffffff;
        padding: 4px 16px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.85rem;
        margin-bottom: 10px;
      }

      .fc-rule-item {
        padding: 6px 10px;
        border-radius: 6px;
        border-left: 3px solid transparent;
        transition: all 0.4s ease;
      }

      /* 【AI演示】匹配光环旁的醒目提示气泡（2026-9-24） */
      .match-demo-hint {
        position: static;          /* ★ 2026-9-30：壳+核结构——壳（JS 创建）负责 fixed 定位，hint 只做核 */
        margin-left: -50%;         /* ★ 水平居中于壳锚点（替代原 translateX(-50%)，缩放/动画互不干扰） */
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1a1a2e;
        font-weight: bold;
        font-size: 0.88rem;
        padding: 8px 16px;
        border-radius: 22px;
        border: 2px solid #ffffff;
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.85), 0 4px 14px rgba(0, 0, 0, 0.55);
        z-index: 10000;
        pointer-events: none;
        white-space: nowrap;
        animation: matchDemoHintPulse 0.9s ease-in-out infinite;
      }

      @keyframes matchDemoHintPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.09); }
      }

      .fc-rule-item.fc-rule-highlight {
        border-left-color: #fbbf24 !important;
        background: rgba(251, 191, 36, 0.22) !important;
        color: #fef3c7 !important;
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.35) inset, 0 0 8px rgba(251, 191, 36, 0.3) !important;
        font-weight: 600 !important;
        transform: scale(1.02);
        transition: all 0.3s ease;
      }

      .tutorial-confirm-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
        border: 2px solid #fbbf24;
        border-radius: 12px;
        padding: 30px 40px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
        z-index: 20000;
      }

      .tutorial-confirm-title {
        color: #fbbf24;
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .tutorial-confirm-text {
        color: white;
        font-size: 1rem;
        margin-bottom: 25px;
        line-height: 1.6;
      }

      .tutorial-confirm-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
      }

      .tutorial-confirm-btn {
        padding: 10px 30px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
      }

      .tutorial-confirm-btn-confirm {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
      }

      .tutorial-confirm-btn-confirm:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
      }

      .tutorial-confirm-btn-cancel {
        background: linear-gradient(135deg, #475569, #334155);
        color: white;
      }

      .tutorial-confirm-btn-cancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(71, 85, 105, 0.4);
      }

      /* ------------------------------------------------------------------------ */
      /* 背景主题系统 - 动态背景版 */
      /* ------------------------------------------------------------------------ */

      #particle-canvas {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }

      .game-container.bg-theme-starfield {
        will-change: opacity;
      }

      .game-container.bg-theme-magicforest {
        will-change: opacity;
      }

      .game-container.bg-theme-magicforest::after {
        will-change: transform, opacity;
      }

      .star-inner {
        will-change: opacity;
      }

      /* ===== 通用动画定义 ===== */
      /* 星空呼吸 - 星云光晕缓慢明暗 */
      @keyframes starfield-breath {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
      }

      /* 星星闪烁 - 快速脉冲 */
      @keyframes twinkle {
        0%, 100% { opacity: 0.9; }
        30% { opacity: 0.3; }
        60% { opacity: 0.8; }
      }

      /* 星空战场-失败模式：全场星星持续抖动 */
      @keyframes starfield-lose-shake {
        0%   { transform: translate(0, 0); }
        20%  { transform: translate(2px, -2px); }
        40%  { transform: translate(-2px, 1px); }
        60%  { transform: translate(3px, 2px); }
        80%  { transform: translate(-1px, -3px); }
        100% { transform: translate(0, 0); }
      }

      /* 失败模式激活后：所有星星持续抖动
         注意：十字星的 .star-inner 是独立的内层分组，承载动画；外层 <g> 只负责位置，不参与动画。
         小圆点 <circle> 本身没有 transform 属性，可以直接挂动画 */
      .game-container.bg-theme-starfield.starfield-lose-mode #cross-stars .star-inner {
        animation: starfield-lose-shake 0.18s linear infinite !important;
        transform-origin: center center;
      }

      .game-container.bg-theme-starfield.starfield-lose-mode #scattered-stars-white .star-inner,
      .game-container.bg-theme-starfield.starfield-lose-mode #scattered-stars-purple .star-inner {
        animation: starfield-lose-shake 0.18s linear infinite !important;
        transform-origin: center center;
      }

      /* 胜利模式：背景装饰层提到最上层，让流星显示在所有元素之上 */
      .game-container.bg-theme-starfield.starfield-win-mode #bg-decoration {
        z-index: 99999 !important;
      }

      /* 失败模式：背景装饰层提到最上层 */
      .game-container.bg-theme-starfield.starfield-lose-mode #bg-decoration {
        z-index: 99999 !important;
      }

      /* 直接给星星元素添加抖动类（兼容所有情况） */
      .star-lose-shake {
        animation: starfield-lose-shake 0.18s linear infinite !important;
        transform-origin: center center;
      }

      /* 森林呼吸 - 绿色光晕脉动 */
      @keyframes forest-breath {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.75; }
      }

      /* 荧光粒子浮动 - 轻微上下漂移 */
      @keyframes forest-float {
        0%, 100% { transform: translateY(0); opacity: 1; }
        50% { transform: translateY(-8px); opacity: 0.85; }
      }

      /* 科技扫描线流动 - 从上到下 */
      @keyframes tech-scan-flow {
        0% { background-position: 0 0, 0 0; }
        100% { background-position: 0 1000px, 0 0; }
      }

      /* 数据节点脉冲 */
      @keyframes tech-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
      }

      /* ===== 方案1: 星空战场 - 动态深空 ===== */
      .game-container.bg-theme-starfield {
        background:
          /* 边缘暗角 */
          radial-gradient(ellipse 60% 50% at 50% 50%, transparent 35%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.65) 100%),
          /* 顶部/底部暗化 */
          linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 10%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.6) 100%),
          /* 左右侧暗化 */
          linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.45) 100%),
          /* 主体深空渐变 */
          linear-gradient(145deg, #050515 0%, #0f0f2e 20%, #1a1a45 40%, #151538 55%, #1a1a45 70%, #0a0a25 85%, #050510 100%);
        box-shadow:
          inset 0 0 150px rgba(0, 0, 0, 0.6),
          inset 0 0 60px rgba(0, 0, 0, 0.35),
          inset 0 0 30px rgba(128, 90, 213, 0.05);
      }
      /* 星点层 - 缓慢闪烁 */
      .game-container.bg-theme-starfield::before {
        background:
          radial-gradient(3px 3px at 10% 15%, rgba(255,255,255,0.9), transparent 60%),
          radial-gradient(2px 2px at 18% 22%, rgba(200,200,255,0.8), transparent 60%),
          radial-gradient(3px 3px at 25% 8%, rgba(255,255,255,0.7), transparent 60%),
          radial-gradient(2px 2px at 75% 18%, rgba(180,180,255,0.8), transparent 60%),
          radial-gradient(3px 3px at 85% 12%, rgba(255,255,255,0.6), transparent 60%),
          radial-gradient(2px 2px at 92% 22%, rgba(220,220,255,0.7), transparent 60%),
          radial-gradient(3px 3px at 12% 35%, rgba(255,255,255,0.7), transparent 60%),
          radial-gradient(2px 2px at 28% 40%, rgba(180,180,255,0.7), transparent 60%),
          radial-gradient(3px 3px at 72% 42%, rgba(255,255,255,0.5), transparent 60%),
          radial-gradient(2px 2px at 88% 35%, rgba(180,180,255,0.7), transparent 60%),
          radial-gradient(3px 3px at 12% 72%, rgba(255,255,255,0.7), transparent 60%),
          radial-gradient(2px 2px at 28% 80%, rgba(200,200,255,0.7), transparent 60%),
          radial-gradient(3px 3px at 80% 90%, rgba(255,255,255,0.7), transparent 60%),
          radial-gradient(2px 2px at 92% 85%, rgba(200,200,255,0.7), transparent 60%);
        animation: starfield-breath 6s ease-in-out infinite;
      }
      /* 星云光晕层 - 缓慢呼吸 */
      .game-container.bg-theme-starfield::after {
        background:
          radial-gradient(ellipse 45% 35% at 25% 25%, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
          radial-gradient(ellipse 35% 25% at 75% 20%, rgba(128, 90, 213, 0.07) 0%, transparent 60%),
          radial-gradient(ellipse 35% 30% at 20% 75%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
          radial-gradient(ellipse 40% 30% at 78% 78%, rgba(99, 102, 241, 0.07) 0%, transparent 60%),
          linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, transparent 30%);
        animation: starfield-breath 8s ease-in-out infinite;
      }

      /* ===== 方案2: 魔幻森林 - 动态森林 ===== */
      .game-container.bg-theme-magicforest {
        background:
          radial-gradient(ellipse 60% 50% at 50% 50%, transparent 35%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.65) 100%),
          linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 10%, transparent 25%, transparent 75%, rgba(6,78,59,0.3) 90%, rgba(0,40,20,0.55) 100%),
          linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.4) 100%),
          linear-gradient(145deg, #081810 0%, #0f2a1a 20%, #1a3a2a 40%, #1f3a3a 55%, #2a1f3a 70%, #150f25 85%, #0a0815 100%);
        box-shadow:
          inset 0 0 150px rgba(0, 0, 0, 0.6),
          inset 0 0 60px rgba(0, 0, 0, 0.35),
          inset 0 0 30px rgba(34, 197, 94, 0.04);
      }
      /* 森林光晕层 - 呼吸脉动 */
      .game-container.bg-theme-magicforest::before {
        background:
          radial-gradient(ellipse 35% 25% at 15% 22%, rgba(34,197,94,0.07) 0%, transparent 60%),
          radial-gradient(ellipse 35% 25% at 85% 20%, rgba(139,92,246,0.08) 0%, transparent 60%),
          radial-gradient(ellipse 30% 22% at 15% 80%, rgba(139,92,246,0.07) 0%, transparent 60%),
          radial-gradient(ellipse 32% 22% at 85% 82%, rgba(34,197,94,0.07) 0%, transparent 60%);
        animation: forest-breath 5s ease-in-out infinite;
      }
      /* 荧光粒子层 - 浮动闪烁 */
      .game-container.bg-theme-magicforest::after {
        background:
          radial-gradient(4px 4px at 8% 28%, rgba(34,197,94,0.15), transparent 60%),
          radial-gradient(3px 3px at 22% 18%, rgba(168,85,247,0.12), transparent 60%),
          radial-gradient(4px 4px at 88% 30%, rgba(34,197,94,0.15), transparent 60%),
          radial-gradient(3px 3px at 72% 22%, rgba(168,85,247,0.12), transparent 60%),
          radial-gradient(4px 4px at 10% 72%, rgba(168,85,247,0.14), transparent 60%),
          radial-gradient(3px 3px at 25% 85%, rgba(34,197,94,0.10), transparent 60%),
          radial-gradient(4px 4px at 88% 75%, rgba(168,85,247,0.14), transparent 60%),
          radial-gradient(3px 3px at 75% 88%, rgba(34,197,94,0.10), transparent 60%);
        animation: forest-float 4s ease-in-out infinite;
      }

      /* ===== 魔幻森林 - 胜利模式 ===== */
      .game-container.bg-theme-magicforest.magicforest-win-mode {
        overflow: hidden;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-victory-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 99999;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly {
        position: absolute;
        width: 80px;
        height: 60px;
        will-change: transform, opacity;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: butterfly-flap 0.3s ease-in-out infinite alternate;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-wing {
        position: absolute;
        top: 50%;
        width: 50%;
        height: 80%;
        background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(168,85,247,0.9), rgba(251,191,36,0.8));
        border-radius: 50% 50% 45% 45%;
        box-shadow: 
          0 0 15px rgba(34,197,94,0.6),
          0 0 30px rgba(168,85,247,0.4),
          inset 0 -5px 10px rgba(0,0,0,0.2),
          inset 0 5px 10px rgba(255,255,255,0.3);
        transform-origin: center right;
        backface-visibility: hidden;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-wing.left {
        left: 0;
        transform: translateY(-50%) rotateY(0deg);
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-wing.right {
        right: 0;
        transform: translateY(-50%) rotateY(0deg);
        transform-origin: center left;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-body {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 60%;
        background: linear-gradient(to bottom, #fbbf24, #d97706);
        transform: translate(-50%, -50%);
        border-radius: 2px;
        z-index: 2;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-antennas {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 15px;
        z-index: 2;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-antenna {
        position: absolute;
        width: 1px;
        height: 15px;
        background: #d97706;
        top: 0;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-antenna.left {
        left: 7px;
        transform: rotate(-20deg);
        transform-origin: bottom center;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-antenna.right {
        right: 7px;
        transform: rotate(20deg);
        transform-origin: bottom center;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-butterfly-antenna::after {
        content: '';
        position: absolute;
        top: -3px;
        left: -2px;
        width: 5px;
        height: 5px;
        background: #fbbf24;
        border-radius: 50%;
        box-shadow: 0 0 5px #fbbf24;
      }

      .game-container.bg-theme-magicforest.magicforest-win-mode .forest-pollen {
        position: absolute;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, rgba(251,191,36,0.8), rgba(34,197,94,0.6));
        border-radius: 50%;
        pointer-events: none;
        will-change: transform, opacity;
        box-shadow: 0 0 8px rgba(251,191,36,0.5);
      }

      @keyframes butterfly-flap {
        0% { transform: scaleX(0.7); }
        100% { transform: scaleX(1.1); }
      }

      /* ===== 魔幻森林 - 失败模式 ===== */
      .game-container.bg-theme-magicforest.forest-lose-mode {
        overflow: hidden;
      }

      .game-container.bg-theme-magicforest.forest-lose-mode::before {
        animation: forest-lose-flash 0.3s ease-in-out infinite;
      }

      .game-container.bg-theme-magicforest.forest-lose-mode::after {
        animation: forest-lose-flash 0.4s ease-in-out infinite;
      }

      .game-container.bg-theme-magicforest.forest-lose-faded::before {
        animation: none;
        opacity: 0;
      }

      .game-container.bg-theme-magicforest.forest-lose-faded::after {
        animation: none;
        opacity: 0;
      }

      .game-container.bg-theme-magicforest.forest-lose-mode .bg-decoration,
      .game-container.bg-theme-magicforest.forest-lose-faded .bg-decoration {
        transition: opacity 2s ease-out;
      }

      .game-container.bg-theme-magicforest.forest-lose-faded .bg-decoration {
        opacity: 0;
      }

      .game-container.bg-theme-magicforest.forest-lose-faded {
        position: relative;
      }

      .game-container.bg-theme-magicforest.forest-lose-faded::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 99998;
        transition: background 2s ease-in;
      }

      @keyframes forest-lose-flash {
        0%, 100% { opacity: 1; }
        25% { opacity: 0.3; }
        50% { opacity: 0.8; }
        75% { opacity: 0.2; }
      }

      /* ===== 方案3: 机械科技 - 动态科技 ===== */
      .game-container.bg-theme-tech {
        background:
          radial-gradient(ellipse 60% 50% at 50% 50%, transparent 35%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.7) 100%),
          linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 10%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.55) 100%),
          linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.45) 100%),
          linear-gradient(145deg, #050a14 0%, #0a1628 20%, #0d1f2e 40%, #121a2e 55%, #0d1f2e 70%, #0a1628 85%, #050a14 100%);
        box-shadow:
          inset 0 0 150px rgba(0, 0, 0, 0.6),
          inset 0 0 60px rgba(0, 0, 0, 0.35),
          inset 0 0 30px rgba(34, 211, 238, 0.04);
      }
      /* 四角光晕层 - 脉冲呼吸 */
      .game-container.bg-theme-tech::before {
        background:
          radial-gradient(ellipse 32% 22% at 12% 18%, rgba(34,211,238,0.08) 0%, transparent 60%),
          radial-gradient(ellipse 32% 22% at 88% 18%, rgba(59,130,246,0.08) 0%, transparent 60%),
          radial-gradient(ellipse 28% 22% at 15% 82%, rgba(59,130,246,0.07) 0%, transparent 60%),
          radial-gradient(ellipse 28% 22% at 85% 82%, rgba(34,211,238,0.08) 0%, transparent 60%);
        animation: tech-pulse 4s ease-in-out infinite;
      }
      /* 扫描线层 - 持续滚动 */
      .game-container.bg-theme-tech::after {
        background:
          repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 35px,
            rgba(34,211,238,0.025) 35px,
            rgba(34,211,238,0.025) 37px
          ),
          linear-gradient(180deg, rgba(34,211,238,0.04) 0%, transparent 25%);
        /* 扫描线从上到下缓慢流动 */
        background-size: 100% 100%, 100% 100%;
        animation: tech-scan-flow 8s linear infinite;
      }

      /* ===== 机械科技 - 胜利模式 ===== */
      .game-container.bg-theme-tech.tech-win-mode {
        overflow: hidden;
      }

      .game-container.bg-theme-tech.tech-win-mode .tech-victory-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 99999;
      }

      .game-container.bg-theme-tech.tech-win-mode .tech-scan-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.4);
        animation: tech-win-line-flow 3s linear;
      }

      @keyframes tech-win-line-flow {
        0% { top: -10px; opacity: 0; }
        5% { opacity: 1; }
        95% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
      }

      .game-container.bg-theme-tech.tech-win-mode .tech-electron {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 12px #22d3ee, 0 0 24px #22d3ee, 0 0 36px #22d3ee;
      }

      .game-container.bg-theme-tech.tech-win-mode .tech-win-electron {
        will-change: top, opacity, transform;
      }



      /* ===== 机械科技 - 失败模式 ===== */
      .game-container.bg-theme-tech.tech-lose-mode {
        overflow: hidden;
      }

      .game-container.bg-theme-tech.tech-lose-mode .tech-defeat-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 99999;
      }

      .game-container.bg-theme-tech.tech-lose-mode .tech-defeat-scan-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(239, 68, 68, 0.6);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
        animation: tech-lose-line-flow 3s linear;
      }

      @keyframes tech-lose-line-flow {
        0% { top: -10px; opacity: 0; }
        5% { opacity: 1; }
        95% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
      }

      .game-container.bg-theme-tech.tech-lose-mode .tech-defeat-scan-line.shorten {
        animation: tech-defeat-line-shorten 1.5s ease-in forwards;
      }

      @keyframes tech-defeat-line-shorten {
        0% { left: 0; right: 0; opacity: 1; }
        100% { left: 50%; right: 50%; opacity: 0; }
      }

      /* ====================================================================== */
      /* 【主题化牌型栏】左侧状态栏随场景变化的颜色体系                              */
      /*  · 星空战场（默认，HTML inline 定义）：深蓝紫 + 金色 + 蓝/红             */
      /*  · 魔幻森林：深绿紫 + 琥珀金 + 绿/紫                                      */
      /*  · 机械科技：深蓝青 + 青色 + 蓝/橙                                        */
      /* ====================================================================== */

      /* ---- 1) 星空战场（默认与 HTML inline 一致，不需要覆盖，保留原样） ---- */
      /* 已由 inline style 定义：background = #1e1b4b → #312e81, border = rgba(99,102,241,0.35), 等等 */

      /* ---- 2) 魔幻森林 · Magic Forest ---- */
      .game-container.bg-theme-magicforest .rank-panel {
        background: linear-gradient(160deg, #0f2a1a 0%, #1a3a2a 50%, #0a1f1a 100%) !important;
        border-color: rgba(34, 197, 94, 0.45) !important;
        box-shadow:
          0 10px 40px rgba(0, 0, 0, 0.55),
          0 0 20px rgba(34, 197, 94, 0.15),
          0 1px 0 rgba(255, 255, 255, 0.06) inset,
          0 -2px 12px rgba(0, 0, 0, 0.4) inset !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .opponent-title {
        color: #ef4444 !important;                 /* 红色（对方） */
        text-shadow: 0 1px 3px rgba(239, 68, 68, 0.4) !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .player-title {
        color: #3b82f6 !important;                 /* 蓝色（我方） */
        text-shadow: 0 1px 3px rgba(59, 130, 246, 0.4) !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .score-title {
        color: #fbbf24 !important;                 /* 琥珀金（积分栏） */
        text-shadow: 0 1px 3px rgba(251, 191, 36, 0.4) !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .score-row {
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.28)) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .score-row .score-type {
        color: #d1fae5 !important;
        font-weight: 500 !important;
      }
      .game-container.bg-theme-magicforest .rank-panel .score-row .score-score {
        color: #fbbf24 !important;
        font-weight: 700 !important;
        font-size: 13.6px !important;
        text-shadow: 0 0 6px rgba(251,191,36,0.3) !important;
      }
      .game-container.bg-theme-magicforest .rank-panel > div[style*="height: 1px"] {
        background: linear-gradient(90deg, transparent, rgba(34,197,94,0.5), transparent) !important;
        box-shadow: 0 0 8px rgba(34,197,94,0.3) !important;
      }

      /* ---- 3) 机械科技 · Mech Tech ---- */
      .game-container.bg-theme-tech .rank-panel {
        background: linear-gradient(160deg, #0a1628 0%, #121a2e 50%, #050a14 100%) !important;
        border-color: rgba(34, 211, 238, 0.45) !important;
        box-shadow:
          0 10px 40px rgba(0, 0, 0, 0.55),
          0 0 20px rgba(34, 211, 238, 0.15),
          0 1px 0 rgba(255, 255, 255, 0.06) inset,
          0 -2px 12px rgba(0, 0, 0, 0.4) inset !important;
      }
      .game-container.bg-theme-tech .rank-panel .opponent-title {
        color: #ef4444 !important;                 /* 红色（对方） */
        text-shadow: 0 1px 3px rgba(239, 68, 68, 0.4) !important;
      }
      .game-container.bg-theme-tech .rank-panel .player-title {
        color: #3b82f6 !important;                 /* 蓝色（我方） */
        text-shadow: 0 1px 3px rgba(59, 130, 246, 0.4) !important;
      }
      .game-container.bg-theme-tech .rank-panel .score-title {
        color: #22d3ee !important;                 /* 青色（积分栏标题） */
        text-shadow: 0 1px 3px rgba(34, 211, 238, 0.4) !important;
      }
      .game-container.bg-theme-tech .rank-panel .score-row {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(15, 23, 42, 0.28)) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset !important;
      }
      .game-container.bg-theme-tech .rank-panel .score-row .score-type {
        color: #cffafe !important;
        font-weight: 500 !important;
      }
      .game-container.bg-theme-tech .rank-panel .score-row .score-score {
        color: #22d3ee !important;
        font-weight: 700 !important;
        font-size: 13.6px !important;
        text-shadow: 0 0 6px rgba(34,211,238,0.35) !important;
      }
      .game-container.bg-theme-tech .rank-panel > div[style*="height: 1px"] {
        background: linear-gradient(90deg, transparent, rgba(34,211,238,0.55), transparent) !important;
        box-shadow: 0 0 8px rgba(34,211,238,0.35) !important;
      }

      /* ------------------------------------------------------------------------ */
      /* 【HTML样式-2/3】全局样式 - 卡牌相关 */
      /* ------------------------------------------------------------------------ */
      /* 牌型提示灯条呼吸光晕（牌型栏高亮行，updateCardTypeDisplay 内联触发） */
      @keyframes lightStripB { 0%,100% { filter: drop-shadow(0 0 3px rgba(59,130,246,0.35)); } 50% { filter: drop-shadow(0 0 9px rgba(59,130,246,0.65)); } }
      @keyframes lightStripR { 0%,100% { filter: drop-shadow(0 0 3px rgba(239,68,68,0.32)); } 50% { filter: drop-shadow(0 0 9px rgba(239,68,68,0.6)); } }
      @keyframes lightStripP { 0%,100% { filter: drop-shadow(0 0 3px rgba(139,92,246,0.35)); } 50% { filter: drop-shadow(0 0 9px rgba(139,92,246,0.55)); } }

      /* 牌型栏行条：悬停白光 + 高亮行灯内弧光扫过（strip 类由 updateCardTypeDisplay 标记） */
      .score-row { position: relative; overflow: hidden; transition: filter 0.2s ease; }
      .score-row:hover { filter: brightness(1.28) drop-shadow(0 0 6px rgba(255,255,255,0.30)); }
      /* 文字置于灯内弧光之上（弧光::after z-index:1 会盖住静态文字导致发糊，2026-9-30） */
      .score-row .score-type, .score-row .score-score { position: relative; z-index: 2; }

      /* 积分栏牌型示例弹窗：悬停后点击行弹出示例，鼠标离开后消失（2026-10-1） */
      #score-example-pop {
        position: fixed; z-index: 9050; display: none; align-items: center; gap: 5px;
        padding: 7px 10px; border-radius: 8px;
        background: linear-gradient(120deg, rgba(30,27,75,0.97), rgba(10,8,30,0.97));
        border: 1px solid rgba(201,169,110,0.45);
        box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
      }
      #score-example-pop.show { display: flex; }
      #score-example-pop .grp { display: inline-flex; gap: 2px; }
      #score-example-pop .sep { width: 1px; height: 18px; background: rgba(201,169,110,0.35); }
      #score-example-pop .chip {
        min-width: 18px; height: 24px; padding: 0 2px; border-radius: 4px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 700; color: #1e40af;
        background: linear-gradient(180deg, #fdf8ea, #e9d9ae);
        border: 1px solid #b3925a;
        box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
      }

      /* 牌型提示框：玻璃面（无静态反光条；内边距保证文字不贴框） */
      #opponent-card-type-section, #player-card-type-section {
        position: relative; overflow: hidden; border-radius: 8px;
        padding: 0.35rem 0.55rem;
        background: linear-gradient(120deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0.05) 62%, rgba(255,255,255,0.01) 100%);
        border: 1px solid rgba(167, 139, 250, 0.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.25);
      }

      /* 高亮行灯内弧光：我方左→右 / 对方右→左；同型时牌点大的一方独享全行弧光，牌点相同两道弧光正中间相撞 */
      .score-row.strip-me::after, .score-row.strip-opp::after,
      .score-row.strip-same.strip-me-only::after, .score-row.strip-same.strip-opp-only::after,
      .score-row.strip-same.strip-tie::before, .score-row.strip-same.strip-tie::after {
        content: ''; position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 1;
      }
      .score-row.strip-me::after, .score-row.strip-same.strip-me-only::after {
        left: -40%; width: 40%;
        background: linear-gradient(100deg, transparent, rgba(147,197,253,0.28) 45%, rgba(255,255,255,0.38) 50%, rgba(147,197,253,0.28) 55%, transparent);
        animation: stripSweepL2R 2.2s linear infinite;
      }
      .score-row.strip-opp::after, .score-row.strip-same.strip-opp-only::after {
        left: 100%; width: 40%;
        background: linear-gradient(100deg, transparent, rgba(252,165,165,0.28) 45%, rgba(255,255,255,0.38) 50%, rgba(252,165,165,0.28) 55%, transparent);
        animation: stripSweepR2L 2.2s linear infinite;
      }
      .score-row.strip-same.strip-tie::before {
        left: -30%; width: 30%;
        background: linear-gradient(100deg, transparent, rgba(147,197,253,0.30) 45%, rgba(255,255,255,0.40) 50%, rgba(147,197,253,0.30) 55%, transparent);
        animation: stripMeetL 2.2s linear infinite;
      }
      .score-row.strip-same.strip-tie::after {
        left: 100%; width: 30%;
        background: linear-gradient(100deg, transparent, rgba(252,165,165,0.30) 45%, rgba(255,255,255,0.40) 50%, rgba(252,165,165,0.30) 55%, transparent);
        animation: stripMeetR 2.2s linear infinite;
      }
      @keyframes stripSweepL2R { 0% { left: -40%; } 100% { left: 100%; } }
      @keyframes stripSweepR2L { 0% { left: 100%; } 100% { left: -40%; } }
      @keyframes stripMeetL { 0% { left: -30%; opacity: 0.9; filter: brightness(1); } 42% { opacity: 1; filter: brightness(1); } 50% { left: 35%; opacity: 1; filter: brightness(2.2); } 58% { left: 35%; opacity: 0; filter: brightness(2.2); } 58.1% { left: -30%; opacity: 0; } 100% { left: -30%; opacity: 0; } }
      @keyframes stripMeetR { 0% { left: 100%; opacity: 0.9; filter: brightness(1); } 42% { opacity: 1; filter: brightness(1); } 50% { left: 35%; opacity: 1; filter: brightness(2.2); } 58% { left: 35%; opacity: 0; filter: brightness(2.2); } 58.1% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } }

      /* ------------------------------------------------------------------------ */
      /* 卡牌阴影效果 */
      .card-shadow {
        box-shadow: 0 0.375rem 0.9375rem rgba(0, 0, 0, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
      }

      /* 普通卡牌悬停效果 - 上移+放大阴影 */
      .card-hover {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .card-hover:hover:not(.match-glow),
      .card-hover.tip-hover:not(.match-glow) {
        transform: translateY(-0.5rem) !important;
        box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3) !important;
      }

      /* 禁用悬停动画（用于对方牌堆/明牌/路牌） */
      .no-hover-anim.no-hover-anim:hover:not(.match-glow),
      .no-hover-anim.no-hover-anim.tip-hover:not(.match-glow) {
        transform: none !important;
        box-shadow: none !important;
      }

      /* ★ 2026-9-22 最大牌型悬停互动（用户需求三条例）：
         1) 路牌区/中立区取消原有悬停动画（.card-hover 上移+阴影 / 联机 remote-hover 同步），
            排除 .glory-card（它们走下方新效果）——手牌/明牌/暗牌区不受影响
         2) 仅"双方各自场上最大牌型"的卡牌（.glory-card，由 updateGloryCards 打标）
            悬停触发：光泽扫过 + 3D 倾斜（跟随鼠标）
         3) 其他卡牌其余表现不变 */
      .road-slot .card.card-hover:hover:not(.match-glow):not(.glory-card),
      .road-slot .card.card-hover.tip-hover:not(.match-glow):not(.glory-card),
      .road-slot .card-small.card-hover:hover:not(.match-glow):not(.glory-card),
      .road-slot .card-small.card-hover.tip-hover:not(.match-glow):not(.glory-card),
      .player-neutral-slot .card.card-hover:hover:not(.match-glow):not(.glory-card),
      .player-neutral-slot .card.card-hover.tip-hover:not(.match-glow):not(.glory-card),
      .opponent-neutral-slot .card.card-hover:hover:not(.match-glow):not(.glory-card),
      .opponent-neutral-slot .card.card-hover.tip-hover:not(.match-glow):not(.glory-card) {
        transform: none !important;
        box-shadow: none !important;
      }
      .road-slot .card.remote-hover.remote-hover:not(.glory-card),
      .road-slot .card-small.remote-hover.remote-hover:not(.glory-card),
      .player-neutral-slot .card.remote-hover.remote-hover:not(.glory-card),
      .opponent-neutral-slot .card.remote-hover.remote-hover:not(.glory-card) {
        transform: none !important;
        box-shadow: none !important;
      }

      /* 【卡通风格·卡牌悬停Q弹动画】（2026-10-04）card-style-cartoon 作用域 = 功能牌区（手牌/暗牌/明牌）
         悬停=果冻跳（上冲压扁→回落拉长→二次小弹→落位）；离开=果冻落地（JS 挂 ct-fall 类）。
         注：默认悬停用 transform !important 会压过 @keyframes 的 transform——
         因此果冻动画改用独立 translate/scale 属性，与 transform 互不干扰 */
      .game-container.card-style-cartoon .card {
        transform-origin: 50% 100%;
      }
      .game-container.card-style-cartoon .card.card-hover:hover:not(.match-glow):not(.glory-card):not(.no-hover-anim):not(.road-slot *):not(.player-neutral-slot *):not(.opponent-neutral-slot *),
      .game-container.card-style-cartoon .card.card-hover.tip-hover:not(.match-glow):not(.glory-card):not(.no-hover-anim):not(.road-slot *):not(.player-neutral-slot *):not(.opponent-neutral-slot *) {
        transform: none !important;
        /* 悬停时保留果冻厚度（离地压缩态），避免卡牌看起来变扁 */
        box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 3px 0 rgba(67,49,94,.28) !important;
        animation: ctJellyPop .5s ease-out both;
      }
      @keyframes ctJellyPop {
        0%   { translate: 0 0;      scale: 1 1; }
        22%  { translate: 0 -14px;  scale: 1.1 .9; }
        45%  { translate: 0 -6px;   scale: .94 1.1; }
        65%  { translate: 0 -11px;  scale: 1.03 .98; }
        82%  { translate: 0 -8.5px; scale: 1.05 1.02; }
        100% { translate: 0 -9px;   scale: 1.05 1.05; }
      }
      .game-container.card-style-cartoon .card.ct-fall {
        animation: ctJellyFall .42s cubic-bezier(.3,.7,.4,1) both;
      }
      @keyframes ctJellyFall {
        0%   { translate: 0 -9px;   scale: 1.05 1.05; }
        28%  { translate: 0 1.5px;  scale: 1.08 .92; }
        52%  { translate: 0 -3.5px; scale: .97 1.06; }
        74%  { translate: 0 -1px;   scale: 1.02 .99; }
        100% { translate: 0 0;      scale: 1 1; }
      }

      /* 【卡通风格·落场果冻 2026-10-9 用户指令】：打到场上（路牌区）落地动画 =
         与手牌悬停落下（ctJellyFall）逐帧一致，作用于路牌槽（连带槽内卡整体果冻） */
      .game-container.card-style-cartoon .road-slot.ct-land-jelly,
      .game-container.card-style-cartoon .player-road-slot.ct-land-jelly,
      .game-container.card-style-cartoon .opponent-road-slot.ct-land-jelly {
        animation: ctRoadLand .42s cubic-bezier(.3,.7,.4,1) both;
      }
      @keyframes ctRoadLand {
        0%   { translate: 0 -9px;  scale: 1.05 1.05; }
        28%  { translate: 0 1.5px; scale: 1.08 .92; }
        52%  { translate: 0 -3.5px; scale: .97 1.06; }
        74%  { translate: 0 -1px;  scale: 1.02 .99; }
        100% { translate: 0 0;     scale: 1 1; }
      }

      /* 【卡通风格·卡背倾斜动画】（2026-10-04）作用域=我方暗牌+双方牌堆的卡背（.ct-back）
         悬停=以倾斜角度为主的Q弹摆动（左倾→回摆→微倾定住）+ 轻微离地；
         离开=倾斜回落归位（JS mouseout 挂 ct-back-fall，同 ct-fall 机制）。
         同样用独立 rotate/translate/scale 属性，不与默认 transform 悬停冲突 */
      .game-container.card-style-cartoon .dark-card-hover:hover:not(.tutorial-card-fail-shake),
      .game-container.card-style-cartoon .dark-card-hover.tip-hover:not(.tutorial-card-fail-shake) {
        transform: none !important;   /* 暗牌槽位不再整体上移，动效交给卡背本体倾斜 */
        box-shadow: none !important;
      }
      /* 【卡通风格·手牌/明牌卡槽悬停=暗牌卡槽效果】（2026-10-05 用户指令）：
         对齐暗牌槽做法——抵消 .card-hover:hover 的上浮+黑影（槽上 card-hover 类），
         让 classic 金线悬停（与 classic-dark-slot 同款）干净呈现，三区渲染一致 */
      .game-container.card-style-cartoon .player-hand-slot:not(.stone-hand-slot).card-hover:hover:not(.tutorial-card-fail-shake),
      .game-container.card-style-cartoon .player-hand-slot:not(.stone-hand-slot).card-hover.tip-hover:not(.tutorial-card-fail-shake),
      .game-container.card-style-cartoon .player-revealed-slot.card-hover:hover:not(.tutorial-card-fail-shake),
      .game-container.card-style-cartoon .player-revealed-slot.card-hover.tip-hover:not(.tutorial-card-fail-shake) {
        transform: none !important;
        box-shadow: none !important;
      }
      .game-container.card-style-cartoon .player-hand-slot,
      .game-container.card-style-cartoon .player-revealed-slot {
        transition: all .25s cubic-bezier(.4,0,.2,1);
      }
      /* 【卡通风格·明牌槽=俯视板凳】（2026-10-05 用户指令）：每槽=一张俯视小板凳
         （木纹凳面+四角露腿头），卡牌躺在凳面上 */
      /* 【卡通风格·手牌/明牌槽悬停：阴影在上、高光在下】（2026-10-05 用户确认方向）：
         ID 上下文+双写类，特异性 (1,9,0) 压过 classic (1,7,0) 与抵消规则，显式声明内影方向 */
      .game-container.card-style-cartoon #player-hand .player-hand-slot.player-hand-slot:not(.stone-hand-slot).card-hover:hover:not(.tutorial-card-fail-shake):not(.match-glow),
      .game-container.card-style-cartoon #player-hand .player-hand-slot.player-hand-slot:not(.stone-hand-slot).card-hover.tip-hover:not(.tutorial-card-fail-shake):not(.match-glow) {
        transform: translateY(-3px) !important;
        border-color: rgba(240,217,166,.95) !important;
        background:
          radial-gradient(circle 4px at 24% 42%, rgba(55,60,66,.35) 0 100%, transparent 100%),
          radial-gradient(circle 3px at 78% 70%, rgba(55,60,66,.3) 0 100%, transparent 100%),
          radial-gradient(circle 3px at 52% 82%, rgba(255,255,255,.25) 0 100%, transparent 100%),
          linear-gradient(180deg, rgba(255,255,255,.3) 0 2px, rgba(255,255,255,0) 2px),
          linear-gradient(180deg, #b2b9c0 0%, #9aa1a8 100%) !important;
        box-shadow:
          inset 0 2px 4px rgba(255,255,255,.3),
          inset 0 -3px 6px rgba(40,45,50,.4),
          0 8px 0 #5d646b,
          0 12px 0 rgba(30,35,40,.25),
          0 0 14px rgba(219,186,116,.4) !important;
      }
      .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot.player-revealed-slot.card-hover:hover:not(.tutorial-card-fail-shake):not(.match-glow),
      .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot.player-revealed-slot.card-hover.tip-hover:not(.tutorial-card-fail-shake):not(.match-glow) {
        transform: none !important;
        /* 【棚屋版 2026-10-9】删除 border-color/background:transparent——悬停时保持门洞背景。
           【2026-10-9 用户指令】删除旧悬停效果（洞感内影+金光）——悬停视觉改为下方
           空槽"大门内开灯"效果，本规则仅保留抵消全局上浮。 */
        box-shadow: none !important;
      }

      /* ======================================================================
         【卡通风格·暗牌槽=石砌拱架门洞】专属类（2026-10-6 方案二：updateUI cartoon
         分支直发 stone-dark-slot，槽体透明让立面拱门透出；无框无伪元素）
         ====================================================================== */
      .player-dark-slot.stone-dark-slot,
      .opponent-dark-slot.stone-dark-slot {
        /* ★ 2026-10-10 修复（用户报：开局发牌后暗牌 5 张叠成 1 张横向大卡）：
           卡片规则（7563 段）是 position:absolute + inset:-2px，定位上下文靠槽提供——
           此前槽类含 classic-dark-slot（8614 规则带 position:relative），方案二换成
           stone-dark-slot 后定位上下文丢失，卡的包含块变成外层 absolute 的
           #player-dark-cards 容器 → 5 张卡全部铺满容器叠成一张横向大卡。
           补 position:relative 恢复槽级定位（卡 68x100 盖回各门洞）。
           ★ background/box-shadow 带 !important：压过 5456 白底规则排除后仍命中的
             5605/5614 槽位 box-shadow（(1,1,0) 特异性高于本规则 (0,2,0)）。 */
        position: relative;
        background: transparent !important;
        border: none;
        box-shadow: none !important;
        outline: none;
      }
      .player-dark-slot.stone-dark-slot::before,
      .player-dark-slot.stone-dark-slot::after,
      .opponent-dark-slot.stone-dark-slot::before,
      .opponent-dark-slot.stone-dark-slot::after {
        content: none !important;
        display: none !important;
      }
      /* ======================================================================
      /* ======================================================================
         【卡通风格·暗牌区=石砌拱架立面】（2026-10-6 实装，仅 cartoon 作用域，他风格不动）
         立面=预览方案B整幅 SVG（420×136，槽区352×96 居中，上下出血30/10、左右各34）；
         槽位置透明露出拱门，暗牌卡背盖在门洞前；空槽时完整拱门可见
         ====================================================================== */
      /* ★ 2026-10-6 修复（用户报：拱架跑到画面中间/槽位分离）：容器本就是 absolute
         （定位上下文），此前误加 position:relative 把 absolute 改成 relative——
         容器脱离底部定位跑到文档流位置，::before 跟着跑。删掉即可 */
      .game-container.card-style-cartoon #player-dark-cards::before,
      .game-container.card-style-cartoon #opponent-dark-cards::before {
        content: ""; position: absolute; left: -34px; right: -34px; top: -30px; bottom: -10px; z-index: 0;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 136'%3E%3Cdefs%3E%3ClinearGradient id='rockG' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237d6a4e'/%3E%3Cstop offset='1' stop-color='%235f4d36'/%3E%3C/linearGradient%3E%3ClinearGradient id='rockFace' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9bd93'/%3E%3Cstop offset='0.45' stop-color='%23b3946c'/%3E%3Cstop offset='1' stop-color='%238a6f4e'/%3E%3C/linearGradient%3E%3ClinearGradient id='rockFace2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cbae85'/%3E%3Cstop offset='0.45' stop-color='%23a68a63'/%3E%3Cstop offset='1' stop-color='%237d6547'/%3E%3C/linearGradient%3E%3ClinearGradient id='archG' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8a558'/%3E%3Cstop offset='0.5' stop-color='%23c07c38'/%3E%3Cstop offset='1' stop-color='%23935a26'/%3E%3C/linearGradient%3E%3ClinearGradient id='caveIn' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a0d04'/%3E%3Cstop offset='0.45' stop-color='%2330200e'/%3E%3Cstop offset='1' stop-color='%236b4423'/%3E%3C/linearGradient%3E%3CradialGradient id='glowG' cx='0.5' cy='0.5' r='0.5'%3E%3Cstop offset='0' stop-color='%23e6aa5a' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%23e6aa5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='beamG' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e2b878'/%3E%3Cstop offset='0.3' stop-color='%23bd8548'/%3E%3Cstop offset='0.7' stop-color='%238a5c2c'/%3E%3Cstop offset='1' stop-color='%2363411f'/%3E%3C/linearGradient%3E%3CclipPath id='wallClipB'%3E%3Cpath d='M6,55 Q100,38 194,38 Q288,38 382,55 L382,121 L6,121 Z'/%3E%3C/clipPath%3E%3Cg id='rC'%3E%3Cpath d='M4,4 Q12,1 20,1.5 Q28,1.2 29.8,4.2 Q32.2,9 30,13.8 Q27,17.6 16.5,17.7 Q7,17.6 2.8,13.6 Q0.2,8.5 4,4 Z' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='15.5' cy='4' rx='9' ry='2.6' fill='rgba(244,220,176,0.4)'/%3E%3Cpath d='M4.2,12.6 Q16,18.4 27.8,12.6 Q16,15.6 4.2,12.6 Z' fill='rgba(58,44,28,0.5)'/%3E%3C/g%3E%3Cg id='rCv'%3E%3Cpath d='M3.5,4.5 Q11,1.4 19,1.8 Q27.5,1.4 30,4.6 Q32.4,9.2 29.6,14 Q26,17.8 15.5,17.6 Q6.5,17.4 2.5,13.2 Q-0.2,9 3.5,4.5 Z' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='17' cy='4.2' rx='8.5' ry='2.5' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M4,12.8 Q15.5,18.6 29.4,12.4 Q16,15.4 4,12.8 Z' fill='rgba(58,44,28,0.5)'/%3E%3C/g%3E%3Cg id='peb'%3E%3Cpath d='M2,3 Q5,0.5 9,0.8 Q14,0.5 15.5,3.5 Q17,7 15,10 Q12,12.5 8,12.4 Q3.5,12.2 1.5,9.5 Q0,6.5 2,3 Z' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='8' cy='3' rx='4.4' ry='1.6' fill='rgba(244,220,176,0.4)'/%3E%3C/g%3E%3Cg id='crB'%3E%3Cpath d='M4,26 Q1,12 9,5 Q18,0.5 27,1 Q38,0.5 44,7 Q48.5,14 44,26 Q27,29 4,26 Z' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='24' cy='7' rx='13' ry='4' fill='rgba(244,220,176,0.42)'/%3E%3C/g%3E%3Cg id='crB2'%3E%3Cpath d='M4,26 Q0.5,13 8,5.5 Q17,1 28,1.5 Q39,1 45,8 Q49,15 44.5,26 Q27,29.5 4,26 Z' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='25' cy='7.4' rx='12.5' ry='3.8' fill='rgba(244,220,176,0.38)'/%3E%3C/g%3E%3Cg id='gateB'%3E%3Cpath d='M-17,74 A17,17 0 0 1 17,74 L17,121 L-17,121 Z' fill='url(%23caveIn)'/%3E%3Cpath d='M-17,114 L17,114 L17,121 L-17,121 Z' fill='%23a5793f'/%3E%3Cpath d='M-17,114.8 L17,114.8' stroke='rgba(255,220,160,0.35)' stroke-width='1.5'/%3E%3Cellipse cx='0' cy='111' rx='13' ry='4.5' fill='url(%23glowG)'/%3E%3Cpath fill-rule='evenodd' d='M-28,74 A28,28 0 0 1 28,74 L28,121 L-28,121 Z M-17,74 A17,17 0 0 1 17,74 L17,121 L-17,121 Z' fill='url(%23archG)'/%3E%3Cpath d='M-28,74 A28,28 0 0 1 28,74 L28,121 L-28,121 Z' fill='none' stroke='%235f4022' stroke-width='2.5'/%3E%3Cpath d='M-17,74 A17,17 0 0 1 17,74 L17,121 L-17,121 Z' fill='none' stroke='%236b4018' stroke-width='2.2'/%3E%3Cg stroke='%238f5a2c' stroke-width='2'%3E%3Cpath d='M12,62 L19.8,54.2'/%3E%3Cpath d='M-12,62 L-19.8,54.2'/%3E%3C/g%3E%3Cg stroke='rgba(120,70,25,0.3)' stroke-width='1'%3E%3Cpath d='M-22.5,80 L-22.5,116'/%3E%3Cpath d='M22.5,80 L22.5,116'/%3E%3C/g%3E%3Cpath d='M-16.4,54.5 A25.5,25.5 0 0 1 -4.4,48.9' fill='none' stroke='rgba(255,230,180,0.55)' stroke-width='2.5'/%3E%3C/g%3E%3Cg id='crow'%3E%3Crect x='0' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='31' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.38)'/%3E%3Crect x='56' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='87' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.35)'/%3E%3Crect x='112' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='143' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.38)'/%3E%3Crect x='168' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='199' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.35)'/%3E%3Crect x='224' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='255' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.38)'/%3E%3Crect x='280' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='311' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.35)'/%3E%3Crect x='336' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='367' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.38)'/%3E%3Crect x='392' y='0' width='62' height='15' rx='7.5' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='1.8'/%3E%3Cellipse cx='423' cy='3.2' rx='24' ry='2.4' fill='rgba(244,220,176,0.35)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(16,0)'%3E%3Cuse href='%23crB' x='-4' y='18'/%3E%3Cuse href='%23crB2' x='40' y='11'/%3E%3Cuse href='%23crB' x='84' y='7'/%3E%3Cuse href='%23crB2' x='128' y='4'/%3E%3Cuse href='%23crB' x='172' y='3'/%3E%3Cuse href='%23crB2' x='216' y='4'/%3E%3Cuse href='%23crB' x='260' y='6'/%3E%3Cuse href='%23crB2' x='304' y='11'/%3E%3Cuse href='%23crB' x='340' y='19'/%3E%3Cpath d='M6,55 Q100,38 194,38 Q288,38 382,55 L382,121 L6,121 Z' fill='url(%23rockG)' stroke='%234a3826' stroke-width='2.5'/%3E%3Cg clip-path='url(%23wallClipB)'%3E%3Cuse href='%23rC' x='0' y='38.0'/%3E%3Cuse href='%23rCv' x='33' y='39.5'/%3E%3Cuse href='%23rC' x='58' y='37.0'/%3E%3Cuse href='%23rCv' x='95' y='38.8'/%3E%3Cuse href='%23rC' x='117' y='39.2'/%3E%3Cuse href='%23rCv' x='152' y='36.5'/%3E%3Cuse href='%23rC' x='176' y='38.5'/%3E%3Cuse href='%23rCv' x='216' y='38.9'/%3E%3Cuse href='%23rC' x='241' y='38.0'/%3E%3Cuse href='%23rCv' x='268' y='39.5'/%3E%3Cuse href='%23rC' x='304' y='37.3'/%3E%3Cuse href='%23rCv' x='330' y='38.4'/%3E%3Cuse href='%23rC' x='363' y='38.8'/%3E%3Cuse href='%23rC' x='-15' y='52.0'/%3E%3Cuse href='%23rCv' x='18' y='53.5'/%3E%3Cuse href='%23rC' x='43' y='51.0'/%3E%3Cuse href='%23rCv' x='80' y='52.8'/%3E%3Cuse href='%23rC' x='102' y='53.2'/%3E%3Cuse href='%23rCv' x='137' y='50.5'/%3E%3Cuse href='%23rC' x='161' y='52.5'/%3E%3Cuse href='%23rCv' x='201' y='52.9'/%3E%3Cuse href='%23rC' x='226' y='52.0'/%3E%3Cuse href='%23rCv' x='253' y='53.5'/%3E%3Cuse href='%23rC' x='289' y='51.3'/%3E%3Cuse href='%23rCv' x='315' y='52.4'/%3E%3Cuse href='%23rC' x='348' y='52.8'/%3E%3Cuse href='%23crow' x='0' y='40'/%3E%3Cuse href='%23crow' x='-28' y='54.5'/%3E%3Cuse href='%23crow' x='0' y='69'/%3E%3Cuse href='%23crow' x='-28' y='83.5'/%3E%3Cuse href='%23crow' x='0' y='98'/%3E%3Cuse href='%23crow' x='-28' y='112.5'/%3E%3C/g%3E%3Crect x='2' y='40' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='43' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,50 Q19,55.4 32,50 Q19,52.8 6,50 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='2' y='54' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='57' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,64 Q19,69.4 32,64 Q19,66.8 6,64 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='2' y='68' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='71' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,78 Q19,83.4 32,78 Q19,80.8 6,78 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='2' y='82' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='85' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,92 Q19,97.4 32,92 Q19,94.8 6,92 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='2' y='96' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='99' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,106 Q19,111.4 32,106 Q19,108.8 6,106 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='2' y='110' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='19' cy='113' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M6,120 Q19,125.4 32,120 Q19,122.8 6,120 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='40' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='43' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,50 Q369,55.4 382,50 Q369,52.8 356,50 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='54' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='57' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,64 Q369,69.4 382,64 Q369,66.8 356,64 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='68' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='71' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,78 Q369,83.4 382,78 Q369,80.8 356,78 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='82' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='85' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,92 Q369,97.4 382,92 Q369,94.8 356,92 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='96' width='34' height='14' rx='6' fill='url(%23rockFace)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='99' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,106 Q369,111.4 382,106 Q369,108.8 356,106 Z' fill='rgba(58,44,28,0.5)'/%3E%3Crect x='352' y='110' width='34' height='14' rx='6' fill='url(%23rockFace2)' stroke='%234a3826' stroke-width='2'/%3E%3Cellipse cx='369' cy='113' rx='12' ry='2.6' fill='rgba(244,220,176,0.38)'/%3E%3Cpath d='M356,120 Q369,125.4 382,120 Q369,122.8 356,120 Z' fill='rgba(58,44,28,0.5)'/%3E%3Cpath d='M0,42 Q97,25 194,25 Q291,25 388,42 L388,56 Q291,39 194,39 Q97,39 0,56 Z' fill='url(%23beamG)' stroke='%235f4022' stroke-width='1.8'/%3E%3Cpath d='M2,43.5 Q97,26.5 194,26.5 Q291,26.5 386,43.5' fill='none' stroke='rgba(255,232,180,0.4)' stroke-width='2'/%3E%3Cg fill='none' stroke='rgba(95,55,22,0.4)' stroke-width='1.3'%3E%3Cpath d='M60,36 q4,-2 8,0'/%3E%3Cpath d='M100,33 q5,-2 10,0'/%3E%3Cpath d='M150,30 q4,-2 8,0'/%3E%3Cpath d='M240,30 q4,-2 8,0'/%3E%3Cpath d='M290,33 q5,-2 10,0'/%3E%3Cpath d='M330,36 q4,-2 8,0'/%3E%3C/g%3E%3Cpath d='M1.5,44 L1.5,54.5' stroke='rgba(80,52,24,0.5)' stroke-width='1.2'/%3E%3Cpath d='M386.5,44 L386.5,54.5' stroke='rgba(80,52,24,0.5)' stroke-width='1.2'/%3E%3Cpath d='M74,32.5 L74,44.5' stroke='%234a2a10' stroke-width='2'/%3E%3Cpath d='M76,32.5 L76,44.5' stroke='rgba(255,242,214,0.5)' stroke-width='1'/%3E%3Cpath d='M157,27 L157,39' stroke='%234a2a10' stroke-width='2'/%3E%3Cpath d='M159,27 L159,39' stroke='rgba(255,242,214,0.5)' stroke-width='1'/%3E%3Cpath d='M240,27 L240,39' stroke='%234a2a10' stroke-width='2'/%3E%3Cpath d='M242,27 L242,39' stroke='rgba(255,242,214,0.5)' stroke-width='1'/%3E%3Cpath d='M318,32.5 L318,44.5' stroke='%234a2a10' stroke-width='2'/%3E%3Cpath d='M320,32.5 L320,44.5' stroke='rgba(255,242,214,0.5)' stroke-width='1'/%3E%3Cuse href='%23gateB' x='50' y='0'/%3E%3Cuse href='%23gateB' x='122' y='0'/%3E%3Cuse href='%23gateB' x='194' y='0'/%3E%3Cuse href='%23gateB' x='266' y='0'/%3E%3Cuse href='%23gateB' x='338' y='0'/%3E%3Crect x='-14' y='121' width='416' height='13' rx='3' fill='url(%23beamG)' stroke='%235f4022' stroke-width='1.5'/%3E%3Crect x='-15' y='121.6' width='416' height='4' rx='2' fill='rgba(233,180,110,0.5)'/%3E%3Cellipse cx='30' cy='128.5' rx='13' ry='2.8' fill='rgba(90,55,25,0.3)'/%3E%3Cellipse cx='150' cy='129' rx='15' ry='2.8' fill='rgba(90,55,25,0.28)'/%3E%3Cellipse cx='270' cy='128.5' rx='13' ry='2.8' fill='rgba(90,55,25,0.3)'/%3E%3Cellipse cx='370' cy='129' rx='12' ry='2.8' fill='rgba(90,55,25,0.28)'/%3E%3Cpath d='M42,121.5 L42,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M44,121.5 L44,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Cpath d='M102,121.5 L102,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M104,121.5 L104,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Cpath d='M162,121.5 L162,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M164,121.5 L164,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Cpath d='M222,121.5 L222,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M224,121.5 L224,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Cpath d='M282,121.5 L282,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M284,121.5 L284,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Cpath d='M342,121.5 L342,133' stroke='%23332515' stroke-width='2'/%3E%3Cpath d='M344,121.5 L344,133' stroke='rgba(255,242,214,0.35)' stroke-width='1'/%3E%3Crect x='-13' y='131' width='414' height='2.5' rx='1' fill='%23332515'/%3E%3C/g%3E%3C/svg%3E") center bottom / 420px 136px no-repeat;
      }
      /* ★ 2026-10-6 回滚（用户纠正）：暗牌槽悬停原有逻辑=空槽触发槽位悬停动画、
         有牌只触发卡牌悬停效果（classic 规则自带 :not(:has(.card...)) 排除）——
         此前误加的悬停全压制破坏了该逻辑，已撤。空槽悬停动画照常 */
      .game-container.card-style-cartoon #player-deck,
      .game-container.card-style-cartoon #opponent-deck {
        overflow: visible;            /* 牌堆容器放开裁剪，倾斜摆动不被切角 */
      }
      /* ======================================================================
         【卡通风格·牌堆=城堡门楼】实装（2026-10-14 预览定稿：空槽冒烟飞牌版）
         SVG 门楼实体注入（主墙身/城齿/红门双扇/石券口/横梁/木柱/台基）；
         空槽关门、悬停双门转入门轨；有牌门常开 + 门洞卡背堆 + 横梁数量木牌 +
         悬停屋顶冒烟 + 木牌抖动。仅 cartoon 作用域，其他风格不动。
         ====================================================================== */
      .game-container.card-style-cartoon .pb-gate-deck {
        overflow: visible;
        border-radius: 0;
        background: none;
      }
      /* 门楼 SVG 铺满槽位（viewBox 200×300 = 2:3，与 64×96 同比例无变形） */
      .game-container.card-style-cartoon .pb-gate-svg {
        position: absolute; inset: 0; width: 100%; height: 100%; display: block;
      }
      /* 双扇门：绕门轨竖轴（viewBox 30%/70%）收进侧墙，末帧平移被固定门洞裁剪 */
      .game-container.card-style-cartoon .pb-door-l,
      .game-container.card-style-cartoon .pb-door-r {
        transition: transform .45s ease;
      }
      .game-container.card-style-cartoon .pb-door-l { transform-origin: 30% 0%; }
      .game-container.card-style-cartoon .pb-door-r { transform-origin: 70% 0%; }
      .game-container.card-style-cartoon .pb-gate-has .pb-door-l,
      .game-container.card-style-cartoon .pb-gate-empty:hover .pb-door-l {
        transform: translateX(-4px) scaleX(.1);
      }
      .game-container.card-style-cartoon .pb-gate-has .pb-door-r,
      .game-container.card-style-cartoon .pb-gate-empty:hover .pb-door-r {
        transform: translateX(4px) scaleX(.1);
      }
      /* 数量木牌：钉在横梁 y≈43%（棕木渐变 + 双铜钉 + 奶白数字） */
      .game-container.card-style-cartoon .pb-gate-tag {
        position: absolute; left: 50%; top: 43%; translate: -50% -50%;
        z-index: 3; display: flex; align-items: center; justify-content: center;
        min-width: 26px; height: 17px; padding: 0 5px;
        background: linear-gradient(180deg, #7a5028, #56351b);
        border: 2px solid #3f2a12; border-radius: 4px;
        color: #ffefd0; font-size: 11px; font-weight: bold;
        box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,220,160,.35);
        transform-origin: 50% -4px;
        pointer-events: none;
      }
      .game-container.card-style-cartoon .pb-gate-tag::before,
      .game-container.card-style-cartoon .pb-gate-tag::after {
        content: ''; position: absolute; top: -4px; width: 3px; height: 5px; border-radius: 1px;
        background: radial-gradient(circle at 40% 35%, #f2d089, #8a6a3a);
      }
      .game-container.card-style-cartoon .pb-gate-tag::before { left: 4px; }
      .game-container.card-style-cartoon .pb-gate-tag::after { right: 4px; }
      /* 悬停木牌抖动（rotate 只写 transform，居中由独立 translate 属性负责互不干扰） */
      @keyframes pbGateTagShake {
        0%,100% { transform: rotate(0deg); }
        20%     { transform: rotate(-7deg); }
        45%     { transform: rotate(6deg); }
        70%     { transform: rotate(-3.5deg); }
        88%     { transform: rotate(1.5deg); }
      }
      .game-container.card-style-cartoon .pb-gate-has:hover .pb-gate-tag { animation: pbGateTagShake .5s ease-in-out; }
      /* 门洞卡背堆（果冻卡背等比缩小，em 基准 = 卡宽 17.28px = 64/120×预览 32.4） */
      .game-container.card-style-cartoon .pb-gate-stack {
        position: absolute; left: 50%; bottom: 19%; translate: -50% 0;
        height: 27%; aspect-ratio: 2 / 3; font-size: 17.28px;
        border: .039em solid #43315e; border-radius: .219em;
        background:
          radial-gradient(circle .054em at 20% 18%, rgba(255,255,255,.5) 0 45%, transparent 50%),
          radial-gradient(circle .054em at 80% 18%, rgba(255,255,255,.5) 0 45%, transparent 50%),
          radial-gradient(circle .054em at 20% 82%, rgba(255,255,255,.5) 0 45%, transparent 50%),
          radial-gradient(circle .054em at 80% 82%, rgba(255,255,255,.5) 0 45%, transparent 50%),
          radial-gradient(circle .033em at 50% 14%, rgba(255,255,255,.4) 0 45%, transparent 50%),
          radial-gradient(circle .033em at 50% 86%, rgba(255,255,255,.4) 0 45%, transparent 50%),
          linear-gradient(180deg, #b07ae8 0%, #9a5ade 55%, #7e46c9 100%);
        box-shadow: inset 0 .043em 0 rgba(255,255,255,.65),
                    inset 0 -.087em 0 rgba(67,49,94,.08),
                    0 .076em 0 rgba(67,49,94,.28);
        pointer-events: none;
        z-index: 2;
      }
      .game-container.card-style-cartoon .pb-gate-stack::before {
        content: ""; position: absolute; inset: .065em; border-radius: .108em;
        border: .027em dashed rgba(255,255,255,.55);
      }
      .game-container.card-style-cartoon .pb-gate-stack::after {
        content: "★"; position: absolute; left: 50%; top: 50%;
        translate: -50% -52%; font-size: .47em; line-height: 1; color: #fff;
        text-shadow: 0 .062em 0 rgba(67,49,94,.45);
      }
      /* 屋顶冒烟（粒子 JS 动态生成） */
      .game-container.card-style-cartoon .pb-gate-smoke {
        position: absolute; left: 50%; top: 22%; width: 0; height: 0;
        pointer-events: none; overflow: visible; z-index: 4;
      }
      .game-container.card-style-cartoon .pb-gate-smoke .pb-sp {
        position: absolute; left: 0; top: 0; border-radius: 50%;
        background: radial-gradient(circle at 42% 38%,
          rgba(255,255,255,.85) 0%, rgba(248,248,248,.55) 30%,
          rgba(232,232,232,.18) 62%, rgba(228,228,228,0) 82%);
        filter: blur(.5px);
        opacity: 0;
        animation: pbGateSpUp var(--dur) ease-out forwards;
      }
      @keyframes pbGateSpUp {
        0%   { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
        16%  { opacity: .6; }
        55%  { opacity: .42; }
        100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - 34px)) scale(2.9); opacity: 0; }
      }
      /* 门楼下禁用旧悬停上浮（deck-container.card-hover 全局规则；新交互=冒烟+开门） */
      .game-container.card-style-cartoon .pb-gate-deck.card-hover:hover {
        transform: none !important;
        box-shadow: none !important;
      }
      .game-container.card-style-cartoon .player-dark-slot .ct-back:hover,
      .game-container.card-style-cartoon #player-deck .ct-back:hover,
      .game-container.card-style-cartoon #opponent-deck .ct-back:hover {
        animation: ctBackTilt .5s cubic-bezier(.3,1.6,.5,1) both;
      }
      @keyframes ctBackTilt {
        0%   { rotate: 0deg;    translate: 0 0;    scale: 1 1; }
        30%  { rotate: -6deg;   translate: 0 -3px; scale: 1.05 .97; }
        55%  { rotate: 4deg;    translate: 0 -2px; scale: .97 1.05; }
        78%  { rotate: -2.5deg; translate: 0 -3px; scale: 1.03 1.03; }
        100% { rotate: -1.5deg; translate: 0 -2px; scale: 1.04 1.04; }
      }
      .game-container.card-style-cartoon .ct-back.ct-back-fall {
        animation: ctBackTiltFall .45s cubic-bezier(.3,.7,.4,1) both;
      }
      @keyframes ctBackTiltFall {
        0%   { rotate: -1.5deg; translate: 0 -2px; scale: 1.04 1.04; }
        30%  { rotate: 3deg;    translate: 0 1px;  scale: 1.06 .92; }
        60%  { rotate: -1.5deg; translate: 0 -1px; scale: .98 1.04; }
        100% { rotate: 0deg;    translate: 0 0;    scale: 1 1; }
      }

      /* 【卡通风格·对方功能牌悬停】（2026-10-07 用户定稿交互）：
         悬停=上升放大到 1.08 并保持（forwards 定住，悬停未离开一直放大显示）；
         离开=JS mouseout 委托挂 ct-opp-fall 播剩余段（回缩 0.9 → 惯性回稳 1），
         animationend 摘除类。独立 scale 属性：对方明牌的 no-hover-anim（transform:none）不影响 */
      .game-container.card-style-cartoon .opponent-hand-slot .card:hover,
      .game-container.card-style-cartoon .opponent-dark-slot .card:hover,
      .game-container.card-style-cartoon .opponent-revealed-slot .card:hover {
        animation: ctOppHoverUp .2s ease-out both;
      }
      @keyframes ctOppHoverUp {
        0%   { scale: 1; }
        100% { scale: 1.08; }
      }
      .game-container.card-style-cartoon .card.ct-opp-fall {
        animation: ctOppFall .4s cubic-bezier(.3,.8,.4,1) both;
      }
      @keyframes ctOppFall {
        0%   { scale: 1.08; }
        45%  { scale: .9; }
        78%  { scale: 1.02; }
        100% { scale: 1; }
      }
      /* ★ 对方明牌悬停阴影保持（2026-10-04 用户反馈：底下半透明阴影不要收缩）——
         no-hover-anim:hover 的 box-shadow:none !important 会抹掉卡通果冻底影，此处恢复原生阴影 */
      .game-container.card-style-cartoon .opponent-revealed-slot .no-hover-anim.no-hover-anim:hover:not(.match-glow),
      .game-container.card-style-cartoon .opponent-revealed-slot .no-hover-anim.no-hover-anim.tip-hover:not(.match-glow) {
        box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28) !important;
      }

      /* 【卡通风格·发牌/出牌抛物线飞行】（2026-10-04 二次实现）：改为 Web Animations API 逐帧
         真抛物线（水平匀速+垂直恒定加速度，16点线性采样=速度连续渐变无拐点），
         --dx/--dy/--arc/--rot 旧 CSS 关键帧方案已废弃移除；尾迹 createCartoonDealTrail 同公式跟随 */

      /* 【卡通风格·发牌落地惯性】（2026-10-04 用户铁律：所有动画都要带惯性）
         落地压扁+歪头 → 拉回 → 阻尼摆动两次 → 平静；650ms 后由 JS 摘除 ct-deal-land 类 */
      .game-container.card-style-cartoon .ct-deal-land {
        animation: ctDealLand .8s cubic-bezier(.3,.8,.4,1) both;
      }
      @keyframes ctDealLand {
        0%   { scale: 1.06 .9;  translate: 0 2px;  rotate: 0deg; }
        18%  { scale: .96 1.05; translate: 0 -2px; rotate: 6deg; }
        40%  { scale: 1.01 .99; rotate: -3.5deg; }
        62%  { rotate: 1.8deg; }
        82%  { rotate: -.7deg; }
        100% { scale: 1 1;      translate: 0 0;    rotate: 0deg; }
      }

      /* 【卡通风格·发牌尾迹】（2026-10-04）三阶段互不相同：星尘(暗牌)/气泡(手牌)/花瓣(明牌) */
      @keyframes ctTrailStar {
        0%   { opacity: 1; scale: 1;  rotate: 0deg; }
        100% { opacity: 0; scale: .2; rotate: 160deg; }
      }
      @keyframes ctTrailDot {
        0%   { opacity: .95; scale: 1;  translate: 0 0; }
        100% { opacity: 0;  scale: .3; translate: 0 -14px; }
      }
      @keyframes ctTrailPetal {
        0%   { opacity: 1; scale: 1;  rotate: 0deg;   translate: 0 0; }
        100% { opacity: 0; scale: .4; rotate: 120deg; translate: 6px -16px; }
      }

      /* 【卡通风格·空牌堆】开局前 classic-deck-init 兜底样式 → 卡通白色半透明槽
         ★ 2026-10-16：排除 pb-gate-deck（城堡门楼）——门楼牌堆若残留 classic-deck-init
         类，此规则的白底+白边框（!important）会在门楼外显形为"无形的方框"（用户截图）；
         cartoon 空牌堆已统一渲染门楼关门态，本兜底仅作用于非门楼残留场景 */
      .game-container.card-style-cartoon #player-deck.classic-deck-init:not(.pb-gate-deck),
      .game-container.card-style-cartoon #opponent-deck.classic-deck-init:not(.pb-gate-deck) {
        background: rgba(255,255,255,.30) !important;
        border: 3px solid rgba(255,255,255,.55) !important;
        border-radius: 14px !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 5px 0 rgba(67,49,94,.18) !important;
      }

      /* 【卡通风格·场景chrome】草地背景 + 白色半透明槽位（覆盖经典内联样式）
        ★ 2026-10-04 修复：之前用 border:2px solid !important（经典为1px），content-box 下
        把路牌区/中立区总宽撑大 → flex-shrink 把卡通的路和卡牌整体压瘦（其他风格无此层边框不受影响）。
        现在全部改为零布局影响实现：只改 border-color / inset box-shadow 画圈 */
      .game-container.card-style-cartoon {
        background:
          radial-gradient(circle 240px at 8% 10%, rgba(170,227,124,.85) 0 55%, transparent 61%),
          radial-gradient(circle 200px at 92% 8%, rgba(170,227,124,.85) 0 55%, transparent 61%),
          radial-gradient(circle 220px at 90% 92%, rgba(170,227,124,.85) 0 55%, transparent 61%),
          radial-gradient(circle 180px at 6% 90%, rgba(170,227,124,.85) 0 55%, transparent 61%),
          linear-gradient(180deg, #97d765 0%, #8ed05c 55%, #7cbd4d 100%) !important;
      }
      .game-container.card-style-cartoon .player-road-slot,
      .game-container.card-style-cartoon .opponent-road-slot {
        background: rgba(255,255,255,.30) !important;
        border-color: rgba(255,255,255,.55) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.3) !important;
      }
      /* 【卡通风格·中立区】（2026-10-05 七次设计·高脚木桌版=方案C，经预览页用户确认）：
         暖红棕平涂台面+顶部亮檐+底部暗带+内衬亮圈，深棕粗描边，
         台底厚度块+地面投影+左右桌腿（浮起立体感）；双方样式完全一致（不做阵营色区分）。
         ★ position:relative 仅供桌腿 ::before/::after 定位（区后代均自带定位，无重锚风险） */
      .game-container.card-style-cartoon #opponent-neutral-area,
      .game-container.card-style-cartoon #player-neutral-area {
        position: relative;
        background:
          linear-gradient(180deg, #e09a68 0px, #e09a68 10px, rgba(0,0,0,0) 10px),
          linear-gradient(0deg, #94502c 0px, #94502c 12px, rgba(0,0,0,0) 12px),
          #c4744a !important;
        border: 4px solid #2d1a0e !important;
        border-radius: 16px !important;
        box-shadow:
          inset 0 0 0 2px #e09a68,
          0 10px 0 #7a3d1e,
          0 14px 0 rgba(67,49,94,.25) !important;
      }
      .game-container.card-style-cartoon #opponent-neutral-area::before,
      .game-container.card-style-cartoon #opponent-neutral-area::after,
      .game-container.card-style-cartoon #player-neutral-area::before,
      .game-container.card-style-cartoon #player-neutral-area::after {
        content: "";
        position: absolute;
        top: calc(100% + 14px);
        width: 14px;
        height: 10px;
        background: #7a3d1e;
        border-radius: 0 0 3px 3px;
      }
      .game-container.card-style-cartoon #opponent-neutral-area::before,
      .game-container.card-style-cartoon #player-neutral-area::before { left: 30px; }
      .game-container.card-style-cartoon #opponent-neutral-area::after,
      .game-container.card-style-cartoon #player-neutral-area::after { right: 30px; }
      .game-container.card-style-cartoon #opponent-neutral-area .opponent-neutral-slot,
      .game-container.card-style-cartoon #player-neutral-area .player-neutral-slot {
        background: #94502c !important;
        border: 2px solid #2d1a0e !important;
        border-radius: 8px !important;
        /* 与预览方案C逐字一致：槽位无 box-shadow。
           ★ 物理还原预览留白：实机槽位被卡牌撑满面板（缝仅1-3px、上下留3px），
             台面亮檐/暗带/内衬圈全被盖死=预览细节全丢；
             scale(0.93) 让每槽每侧让出≈2px→缝隙≈7-9px、上下≈8px，
             预览全部细节（亮檐10px/暗带12px/内衬圈）重新可见。
             transform 不占布局，space-between 位置/卡牌落点 rect 全部自洽 */
        transform: scale(0.93);
      }
      /* 【卡通风格·拼点栏】（2026-10-04）果冻橡皮块设计（用户参考图）：
         结构沿用 rs-g3（JS 零改动），cartoon 作用域内重写各状态 rs-face 视觉——
         未定=深灰紫实心果冻块 / 我方胜=亮蓝块✓ / 对方胜=亮红粉块× / 平局=中灰块-；
         选择器特异性：cartoon 各状态(5类) > cartoon W态(4类) > 经典各状态(3类)，互不串扰 */
      .game-container.card-style-cartoon .result-slot {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }
      /* 地面光斑与霓虹呼吸：草地场景去掉（参考图为干净果冻块） */
      .game-container.card-style-cartoon .rs-g3::before { display: none; }
      .game-container.card-style-cartoon .rs-g3::after {
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(67,49,94,.14);
        animation: none;
      }
      .game-container.card-style-cartoon .rs-g3.rs-l::after { box-shadow: 0 0 8px rgba(178,42,82,.16); }
      /* 符号：圆体胖字 + 卡通投影（替换霓虹 drop-shadow） */
      .game-container.card-style-cartoon .rs-g3 .rs-sym {
        font-family: 'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;
        font-weight: 900;
        font-size: 1.35rem;
        text-shadow: 0 2.5px 0 rgba(67,49,94,.4);
        filter: none;
      }
      /* W态（我方胜）：亮蓝果冻块 */
      .game-container.card-style-cartoon .rs-g3 .rs-face {
        border-radius: 10px;
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.4) 0%, transparent 46%),
          linear-gradient(135deg, #6fb3f5 0%, #3e8de0 48%, #2a63b5 100%);
        box-shadow:
          inset 0 3px 0 rgba(255,255,255,.45),
          inset 0 -6px 10px rgba(20,50,110,.28),
          0 4px 0 #2458a4,
          0 8px 0 rgba(67,49,94,.22);
      }
      .game-container.card-style-cartoon .rs-g3 .rs-rim::before { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(160,205,250,.3) 50%, transparent 100%); }
      .game-container.card-style-cartoon .rs-g3 .rs-rim::after { background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 90%); }
      .game-container.card-style-cartoon .rs-g3 .rs-bloom { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.28) 0%, transparent 60%); }
      /* L态（对方胜）：亮红粉果冻块 ×（参考图） */
      .game-container.card-style-cartoon .rs-g3.rs-l .rs-face {
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35) 0%, transparent 46%),
          linear-gradient(135deg, #ff7a9c 0%, #ef5d8f 48%, #d13f74 100%);
        box-shadow:
          inset 0 3px 0 rgba(255,255,255,.4),
          inset 0 -6px 10px rgba(120,20,60,.28),
          0 4px 0 #b22a52,
          0 8px 0 rgba(67,49,94,.22);
      }
      .game-container.card-style-cartoon .rs-g3.rs-l .rs-rim::before { background: linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,156,184,.3) 50%, transparent 100%); }
      /* T态（平局）：中灰果冻块 - */
      .game-container.card-style-cartoon .rs-g3.rs-t .rs-face {
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.32) 0%, transparent 46%),
          linear-gradient(135deg, #9aa0ad 0%, #767d8c 48%, #5a6170 100%);
        box-shadow:
          inset 0 3px 0 rgba(255,255,255,.35),
          inset 0 -6px 10px rgba(30,34,44,.28),
          0 4px 0 #4b5160,
          0 8px 0 rgba(67,49,94,.22);
      }
      .game-container.card-style-cartoon .rs-g3.rs-t .rs-rim::before { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(210,215,225,.25) 50%, transparent 100%); }
      /* E态（未定）：低饱和浅色果冻块（2026-10-04 用户反馈：深灰紫与草地场景违和）——
         白色半透明+淡灰紫描边，与白色路槽同一轻快质感，仅保留轻微轮廓区分 */
      .game-container.card-style-cartoon .rs-g3.rs-e .rs-face {
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.5) 0%, transparent 46%),
          linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(244,247,252,.3) 55%, rgba(224,231,243,.22) 100%);
        box-shadow:
          inset 0 2px 0 rgba(255,255,255,.55),
          inset 0 0 0 1px rgba(120,128,150,.28),
          0 3px 0 rgba(67,49,94,.12),
          0 6px 0 rgba(67,49,94,.08);
        border: none;
      }
      .game-container.card-style-cartoon .rs-g3.rs-e .rs-face::before { opacity: .25; }
      .game-container.card-style-cartoon .rs-g3.rs-e .rs-rim::before { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(210,218,235,.18) 50%, transparent 100%); }
      /* 共振（飘动胜）：刚性等比缩放 → 果冻Q弹压扁 */
      .game-container.card-style-cartoon .rs-g3.rs-wave { animation: ctRsWave .8s ease-in-out infinite; }
      @keyframes ctRsWave {
        0%, 100% { transform: scale(1, 1); }
        50%      { transform: scale(1.06, .9); }
      }
      /* 四路赛点（≥4路全胜/全败）（2026-10-04 二次设计）：饱和度拉满 + 果冻狂跳 + 流光扫过 + 强光晕 */
      .game-container.card-style-cartoon .rs-g3.rs-flame .rs-face {
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.55) 0%, transparent 46%),
          linear-gradient(135deg, #9cccff 0%, #3e8de0 52%, #1d5cb8 100%) !important;
        box-shadow:
          inset 0 3px 0 rgba(255,255,255,.6),
          inset 0 -6px 10px rgba(20,50,110,.35),
          0 4px 0 #1d4fa8,
          0 8px 0 rgba(67,49,94,.3) !important;
      }
      .game-container.card-style-cartoon .rs-g3.rs-l.rs-flame .rs-face {
        background:
          radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.5) 0%, transparent 46%),
          linear-gradient(135deg, #ff9dbb 0%, #f0437e 52%, #c21e5e 100%) !important;
        box-shadow:
          inset 0 3px 0 rgba(255,255,255,.55),
          inset 0 -6px 10px rgba(120,20,60,.35),
          0 4px 0 #a81a50,
          0 8px 0 rgba(67,49,94,.3) !important;
      }
      /* 果冻狂跳（胜利雀跃，替代柔和火焰呼吸） */
      .game-container.card-style-cartoon .rs-g3.rs-flame { animation: ctRsFlameJump .55s ease-in-out infinite; }
      @keyframes ctRsFlameJump {
        0%, 100% { transform: scale(1, 1); }
        40%      { transform: scale(1.045, .94); }
        70%      { transform: scale(.975, 1.04); }
      }
      /* 高光流带反复扫过卡面 */
      .game-container.card-style-cartoon .rs-g3.rs-flame .rs-face::before {
        opacity: 1;
        animation: ctRsShine 1.1s ease-in-out infinite;
      }
      @keyframes ctRsShine {
        0%       { transform: translateX(-140%) rotate(8deg); }
        55%,100% { transform: translateX(340%) rotate(8deg); }
      }
      /* 强光晕呼吸 */
      .game-container.card-style-cartoon .rs-g3.rs-flame::after { animation: ctRsFlameB .55s ease-in-out infinite; }
      @keyframes ctRsFlameB {
        0%, 100% { box-shadow: 0 0 10px rgba(62,141,224,.6), 0 0 24px rgba(62,141,224,.35); }
        50%      { box-shadow: 0 0 20px rgba(62,141,224,.95), 0 0 42px rgba(62,141,224,.55); }
      }
      .game-container.card-style-cartoon .rs-g3.rs-l.rs-flame::after { animation-name: ctRsFlameR; }
      @keyframes ctRsFlameR {
        0%, 100% { box-shadow: 0 0 10px rgba(240,67,126,.6), 0 0 24px rgba(240,67,126,.35); }
        50%      { box-shadow: 0 0 20px rgba(240,67,126,.95), 0 0 42px rgba(240,67,126,.55); }
      }

      /* 【卡通风格·出牌光环】（2026-10-04 四次调整：淡蓝填充改为 JS 注入覆盖层）
         ★ 背景 !important 简写会锁死 background-size 动画（动画永远输给 !important）——
         因此填充改由 .ct-slot-fill 覆盖层承担（transform scaleY 中线展开+惯性回弹），
         槽位本身只保留蓝色描边+光晕脉冲；覆盖层在槽内首节点，天然垫在卡牌下方 */
      .game-container.card-style-cartoon .slot-highlight {
        position: relative !important;   /* 覆盖层 absolute 的定位上下文保障 */
        border-color: rgba(125,184,245,.9) !important;
        box-shadow:
          inset 0 0 0 2px rgba(255,255,255,.5),
          inset 0 0 1rem rgba(62,141,224,.4),
          0 0 0 2px rgba(125,184,245,.75),
          0 0 16px rgba(62,141,224,.45) !important;
        animation: ctSlotHi 1.6s ease-in-out .45s infinite;
      }
      @keyframes ctSlotHi {
        0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), inset 0 0 1rem rgba(62,141,224,.4), 0 0 0 2px rgba(125,184,245,.75), 0 0 16px rgba(62,141,224,.45); }
        50%      { box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.7), inset 0 0 1.4rem rgba(62,141,224,.55), 0 0 0 3px rgba(125,184,245,.95), 0 0 26px rgba(62,141,224,.65); }
      }
      /* 展开填充层：从路线中线向上/下生长至满格（scaleY + 惯性过冲回稳） */
      .game-container.card-style-cartoon .ct-slot-fill {
        position: absolute; left: 0; right: 0; top: 0; bottom: 0;
        pointer-events: none; z-index: 0;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(160,212,255,.5) 0%, rgba(96,163,240,.38) 45%, rgba(62,141,224,.3) 100%);
        transform-origin: 50% 50%;
        animation: ctSlotFillIn .5s cubic-bezier(.3,1.2,.5,1) both;
      }
      @keyframes ctSlotFillIn {
        0%   { transform: scaleY(.03); opacity: .5; }
        72%  { transform: scaleY(1.015); opacity: 1; }
        100% { transform: scaleY(1); opacity: 1; }
      }

      /* 【卡通风格·匹配光环·方案C实装】（2026-10-04）：匹配期间卡面队色部分
         （描边/数字/内圈）在 原色↔金色 间呼吸 + 同步金色光晕(filter) + 上下起伏，1.8s 同节奏。
         ★ 技术点：全局 .match-glow 有 border:none/box-shadow 的 !important——
           描边颜色走 @property 注册的 --ct-flash 变量动画（var 消费端可读动画值，绕过 !important 锁），
           光晕走 filter drop-shadow（不受 box-shadow !important 影响）；
           队色变量由 getCardFaceHTML 卡面内联注入（--ct-bdc/--ct-pipc/--ct-rgc） */
      @property --ct-flash { syntax: '<color>'; inherits: true; initial-value: #fbbf24; }
      .game-container.card-style-cartoon .match-glow {
        border: 3px solid var(--ct-flash) !important;
        border-radius: var(--ct-rad, 14px) !important;   /* 还原卡面圆角（全局 match-glow 强制10px会改倒角） */
        box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28) !important;
        animation: ctMatchBreath 1.8s ease-in-out infinite !important;
      }
      @keyframes ctMatchBreath {
        0%, 100% {
          --ct-flash: var(--ct-bdc, #433160);
          transform: translateY(0) scale(1);
          filter: drop-shadow(0 0 4px rgba(251,191,36,.28));
        }
        50% {
          --ct-flash: #fbbf24;
          transform: translateY(3px) scale(.97);
          filter: drop-shadow(0 0 10px rgba(251,191,36,.55)) drop-shadow(0 0 26px rgba(251,191,36,.3));
        }
      }
      .game-container.card-style-cartoon .match-glow .ct-pip {
        animation: ctPipBreath 1.8s ease-in-out infinite;
      }
      @keyframes ctPipBreath {
        0%, 100% { color: var(--ct-pipc, #d13f74); }
        50%      { color: #fbbf24; }
      }
      .game-container.card-style-cartoon .match-glow .ct-ring {
        animation: ctRingBreath 1.8s ease-in-out infinite;
      }
      @keyframes ctRingBreath {
        0%, 100% { border-color: var(--ct-rgc, rgba(239,93,143,.35)); }
        50%      { border-color: rgba(251,191,36,.6); }
      }
      /* ★ 中立区筹码例外（2026-10-04 用户反馈：光环导致筹码移动错位）——
         中立筹码回归全局经典金圈样式（不改几何/不变色/不位移），与经典拖/撞光环一致 */
      .game-container.card-style-cartoon .neutral-area .match-glow {
        border: none !important;
        border-radius: 0.625rem !important;
        box-shadow: 0 0 0 0.1875rem #FBBF24, 0 0 0.9375rem 0.3125rem rgba(251,191,36,.5), 0 0 1.875rem 0.625rem rgba(251,191,36,.3), inset 0 0 0.9375rem rgba(251,191,36,.25) !important;
        animation: matchGlow 2s ease-in-out infinite !important;
        transform: none !important;
        filter: none !important;
      }

      /* 【卡通风格·出牌落地】（2026-10-04 三次调整）：缩小 → 放大 → 还原（居中对称，不再用跷跷板支点） */
      .game-container.card-style-cartoon .card-road-pop {
        animation: ctRoadPop .55s cubic-bezier(.3,1.3,.5,1) both;
      }
      @keyframes ctRoadPop {
        0%   { transform: scale(1); }
        22%  { transform: scale(.94); }
        48%  { transform: scale(1.05); }
        100% { transform: scale(1); }
      }
      /* 【卡通风格·悬停倾斜禁用】（2026-10-04 用户指令）：glory 卡的 3D 倾斜跟随不符合卡通风格，
         卡通下悬停不再倾斜（其他风格保留原倾斜效果） */
      .game-container.card-style-cartoon .glory-card.glory-card.glory-card:hover:not(.match-glow) {
        transform: none !important;
      }
      .game-container.card-style-cartoon .player-hand-slot:not(.stone-hand-slot),
      .game-container.card-style-cartoon .player-dark-slot:not(.stone-dark-slot),
      .game-container.card-style-cartoon .opponent-hand-slot:not(.stone-hand-slot),
      .game-container.card-style-cartoon .opponent-dark-slot:not(.stone-dark-slot),
      .game-container.card-style-cartoon .opponent-revealed-slot {
        background: rgba(255,255,255,.30) !important;
        border-color: rgba(255,255,255,.55) !important;
        box-shadow: none !important;
      }
      /* ★ 2026-10-10 修复（用户报：空槽时拱架上再现半透明层）：上组规则的白半透明
         background 带 !important，压过 stone-dark-slot 的 transparent——方案二清理时
         误删了原本压制它的覆盖块。此前被"5 张卡铺满容器"盖住未显形，定位修复后
         空槽白底重新露出。源头排除 stone-dark-slot（=石砌拱架门洞槽，须全透明
         露出拱门）；非 stone 槽的白半透明空槽设计不变 */
      .game-container.card-style-cartoon .player-revealed-slot:nth-child(even)::before {
              /* ★ 2026-10-6 修复（用户报：草不见了）：本规则此前只剩 background，
                 缺 content/position —— 伪元素不生成，草丛装饰完全消失。
                 ★ inset 取 -6px：SVG viewBox 76x108 = 槽位 64x96 + 四周各 6px，
                 草花从卡牌四边探出 6px（inset:0 会被发下的牌完全盖住）。 */
              content: "";
              position: absolute;
              inset: -6px;
              z-index: 0;
              pointer-events: none;
              background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 108' preserveAspectRatio='none'%3E%3Cpath d='M64,24 Q66,16 62,10' stroke='%236aa84f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='72' cy='20' rx='9' ry='4.5' fill='%236aa84f' transform='rotate(25 72 20)'/%3E%3Cellipse cx='59' cy='7' rx='8' ry='4' fill='%237ab55f' transform='rotate(-20 59 7)'/%3E%3Cg%3E%3Ccircle cx='61' cy='9' r='4.5' fill='%23f2b6c6'/%3E%3Ccircle cx='56' cy='13' r='4' fill='%23f2b6c6'/%3E%3Ccircle cx='57' cy='6' r='4' fill='%23f2b6c6'/%3E%3Ccircle cx='64' cy='14' r='4' fill='%23f2b6c6'/%3E%3Ccircle cx='60' cy='15' r='4' fill='%23f8c9d8'/%3E%3Ccircle cx='60' cy='10' r='3.2' fill='%23fbbf24'/%3E%3C/g%3E%3Cellipse cx='4' cy='98' rx='10' ry='4.5' fill='%236aa84f' transform='rotate(20 4 98)'/%3E%3Cellipse cx='13' cy='104' rx='8' ry='4' fill='%237ab55f' transform='rotate(-15 13 104)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            }
      
      /* 底部厚度条（z-1 垫在槽后，露出槽底下方）：渐变侧脸+顶缘唇光+底描边 */
      .game-container.card-style-cartoon .player-revealed-slot::after {
        content: "";
        position: absolute;
        left: -12px;
        right: -12px;
        top: 100%;
        height: 8px;
        z-index: -1;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 8' preserveAspectRatio='none'%3E%3Crect x='1' y='0' width='86' height='7' rx='2' fill='%238a4526'/%3E%3Crect x='1' y='0' width='86' height='1.5' fill='rgba(255,190,130,.4)'/%3E%3Crect x='1' y='5.5' width='86' height='1.5' fill='rgba(40,20,6,.6)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
      }
                  /* 【卡通风格·得分栏=木招牌 v3】（2026-10-05）：分块 CSS（整幅 SVG 在游戏宽画布上会横向拉伸变形，弃用）——
         招牌板=CSS 渐变+描边+厚度；雨棚=条纹条；score-box 双写类压联机蓝盒 */
            .game-container.card-style-cartoon .score-bar-container {
              position: relative;
              background: transparent !important;
              border-color: transparent !important;
              box-shadow: none !important;
              padding: 6px 8px !important;
              overflow: visible !important;
            }
            .game-container.card-style-cartoon .score-bar-container::before {
              content: "";
              position: absolute;
              inset: -12px -10px;
              z-index: 0;
              pointer-events: none;
              background:
                linear-gradient(180deg, #e09a68 0px, #e09a68 9px, rgba(0,0,0,0) 9px),
                linear-gradient(0deg, #94502c 0px, #94502c 10px, rgba(0,0,0,0) 10px),
                #c4744a;
              border: 4px solid #2d1a0e;
              border-radius: 12px;
              box-shadow:
                inset 0 0 0 2px #e09a68,
                0 6px 0 #7a3d1e,
                0 10px 0 rgba(67,49,94,.22);
            }
            /* 顶部条纹雨棚：数值与预览完全一致（全局 zoom 等比缩放整个得分栏，相对比例不变，无需补偿） */
            .game-container.card-style-cartoon .score-bar-container::after {
              content: "";
              position: absolute;
              left: 6px; right: 6px; top: -25px; height: 18px;
              z-index: 0;
              pointer-events: none;
              background: repeating-linear-gradient(90deg, #e09a68 0 14px, #c4744a 14px 28px);
              border: 3px solid #2d1a0e;
              border-radius: 7px;
              box-shadow: 0 4px 0 #7a3d1e;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row {
              position: relative;
              z-index: 1;
              overflow: visible !important;
            }
            /* 小木牌（双写类+row 中间层，特异性压联机蓝盒） */
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box.score-box {
              background: linear-gradient(180deg, #e8b27a 0%, #d99a5c 100%) !important;
              border: 1px solid transparent !important;
              border-radius: 7px !important;
              box-shadow:
                0 0 0 2.5px #2d1a0e,
                inset 0 2px 0 rgba(255,235,200,.5),
                0 3px 0 rgba(122,61,30,.55) !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box .score-label {
              color: #5e3a16 !important;
              font-weight: 700 !important;
              text-shadow: none !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box .score-value {
              color: #3a2210 !important;
              font-weight: 900 !important;
              text-shadow: 0 1px 0 rgba(255,235,200,.6) !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box .score-range {
              color: rgba(94,58,22,.75) !important;
              font-weight: 700 !important;
              text-shadow: none !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box.score-box-total {
              background: linear-gradient(180deg, #fcd34d 0%, #f0b429 100%) !important;
              box-shadow:
                0 0 0 2.5px #2d1a0e,
                inset 0 2px 0 rgba(255,250,220,.65),
                0 3px 0 rgba(122,61,30,.6),
                0 0 12px rgba(251,191,36,.5) !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-box.score-box-total .score-value {
              color: #4a2b12 !important;
              font-size: 21px !important;
            }
            .game-container.card-style-cartoon .score-bar-container .score-row .score-operator {
              color: #3a2210 !important;
              font-weight: 900 !important;
              text-shadow: 0 1.5px 0 rgba(255,235,200,.55) !important;
            }

      /* 经典风格功能牌区3D凸出效果（仅在风格背景开启时生效） */
      .style-bg-on #player-hand .player-hand-slot,
      .style-bg-on #player-hand-right .player-hand-slot {
        background: transparent !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.15),
          0 4px 8px rgba(0, 0, 0, 0.3),
          0 2px 4px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -2px 4px rgba(0, 0, 0, 0.15);
      }

      .style-bg-on #opponent-hand .opponent-hand-slot,
      .style-bg-on #opponent-hand-right .opponent-hand-slot {
        background: transparent !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.15),
          0 4px 8px rgba(0, 0, 0, 0.3),
          0 2px 4px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -2px 4px rgba(0, 0, 0, 0.15);
      }

      #player-dark-cards .player-dark-slot,
      #player-dark-cards-right .player-dark-slot {
        box-shadow:
          0 0 0 1px rgba(59, 130, 246, 0.4),
          0 4px 8px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          inset 0 -2px 4px rgba(0, 0, 0, 0.1);
      }

      #opponent-dark-cards .opponent-dark-slot,
      #opponent-dark-cards-right .opponent-dark-slot {
        box-shadow:
          0 0 0 1px rgba(239, 68, 68, 0.4),
          0 4px 8px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          inset 0 -2px 4px rgba(0, 0, 0, 0.1);
      }

      #player-revealed-cards .player-revealed-slot,
      #player-revealed-cards-right .player-revealed-slot,
      #opponent-revealed-cards .opponent-revealed-slot,
      #opponent-revealed-cards-right .opponent-revealed-slot {
        box-shadow:
          0 0 0 1px rgba(251, 191, 36, 0.4),
          0 4px 8px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          inset 0 -2px 4px rgba(0, 0, 0, 0.1);
      }

      #player-deck.deck-container,
      #opponent-deck.deck-container {
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.15),
          0 6px 12px rgba(0, 0, 0, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      /* 暗牌悬停效果 - 与普通卡牌相同，用于区分暗牌区 */
      .dark-card-hover {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .dark-card-hover:hover:not(.tutorial-card-fail-shake),
      .dark-card-hover.tip-hover:not(.tutorial-card-fail-shake) {
        transform: translateY(-0.5rem) !important;
        box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3) !important;
      }
      /* ★ 2026-10-1：抖动期间排除 hover 的 !important transform——否则悬停中点击暗牌时，
         抖动动画的 transform 被压制（important 作者声明 > 动画值），表现为"快速移开鼠标才抖、
         悬停不动则全程无抖动"。抖动结束后 JS 移除类，hover 自动恢复 */

      /* ------------------------------------------------------------------------ */
      /* 【HTML样式-2/3】全局样式 - 区域容器 */
      /* ------------------------------------------------------------------------ */
      /* 中立区容器 - 紫色边框、渐变背景、发光效果（恰好容纳4张中立牌+间隙） */
      /* 高度计算：1张大卡(slot宽-8) + 3张24px小卡 + 间隙8px + 内边距8px + 边框4px ≈ 9.5rem */
      .neutral-area {
        width: 448px;
        height: 152px;
        border-radius: 12px;
        border: 2px solid #a855f7;
        display: flex;
        justify-content: space-between;
        background: rgba(168, 85, 247, 0.1);
        box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.2);
        overflow: visible;
      }

      /* ★ 金属风格背景下：去除中立区之间的外发光阴影，避免上下两个中立区中间出现叠加亮条 */
      .game-container.metal-bg-active .neutral-area {
        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
      }

      /* 牌堆容器 - 固定大小，用于显示双方牌库 */
      .deck-container {
        width: 64px;
        height: 96px;
        border-radius: 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      /* 牌堆数量标签 - 半透明背景，白色加粗字体 */
      .deck-count {
        color: white;
        font-size: 20px;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.6);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1;
      }

      /* 状态栏面板 - 紫色渐变，用于显示游戏状态文字 */
      .status-panel {
        padding: 8px 24px;
        border-radius: 12px;
        border: 2px solid #805ad5;
        background: linear-gradient(145deg, #2d1f4e, #1a1033);
        box-shadow: 0 8px 32px rgba(128, 90, 213, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 -3px 10px rgba(0, 0, 0, 0.4) inset;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* 槽位标签 - 小字体、加粗、文字阴影 */
      .slot-label {
        font-size: 14px;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      /* ------------------------------------------------------------------------ */
      /* 【得分栏样式】对方/我方得分栏（绿色框+计算公式） */
      /* ------------------------------------------------------------------------ */
      .score-bar-container {
        width: 448px;
        padding: 8px;
        border-radius: 12px;
        background: rgba(30, 41, 59, 0.4);
        border: 2px solid rgba(148, 163, 184, 0.4);
        flex-shrink: 0;
        opacity: 0.2;
      }

      .score-row {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        flex-wrap: nowrap;
        width: 100%;
        height: 100%;
      }

      /* 英文模式 rank-panel 牌型名缩小（英文长单词适配 scale(0.95)） */
      html[lang="en"] .rank-panel .score-row .score-type {
        font-size: 0.62rem !important;
        letter-spacing: -0.3px;
      }

      /* 英文模式得分栏：每个盒子精确锁定中文尺寸，label仅视觉缩放，不碰布局 */
      html[lang="en"] .score-bar-container .score-box {
        height: 55px;
      }
      html[lang="en"] .score-bar-container .score-row > :nth-child(1) { min-width: 75px; }
      html[lang="en"] .score-bar-container .score-row > :nth-child(3) { min-width: 75px; }
      html[lang="en"] .score-bar-container .score-row > :nth-child(5) { min-width: 86px; }
      html[lang="en"] .score-bar-container .score-row > :nth-child(7) { min-width: 101px; }
      html[lang="en"] .score-bar-container .score-label {
        transform: scale(0.75);
        transform-origin: center center;
      }

      .score-box {
        background: linear-gradient(135deg, #065f46, #10b981);
        border: 2px solid #34d399;
        border-radius: 7px;
        padding: 5px 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        box-shadow: 0 4px 8px rgba(6, 95, 70, 0.3);
        transition: all 0.2s ease;
      }

      .score-box-compact {
        padding: 4px 5px;
        flex: 1;
      }

      .score-box-total {
        background: linear-gradient(135deg, #047857, #34d399);
        border-color: #6ee7b7;
        flex: 1.3;
        padding: 6px 9px;
        box-shadow: 0 0 10px rgba(52, 211, 153, 0.6),
                    0 4px 8px rgba(6, 95, 70, 0.5);
      }

      .score-label {
        font-size: 12px;
        color: #94a3b8;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1;
      }

      .score-value {
        font-size: 18px;
        color: white;
        font-weight: bold;
        line-height: 1.1;
        text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
      }

      .score-value-total {
        font-size: 21px;
        color: #fef3c7;
        text-shadow: 0 0 7px rgba(250, 204, 21, 0.6),
                     0 2px 4px rgba(0, 0, 0, 0.5);
      }

      .score-range {
        font-size: 10px;
        color: rgba(148, 163, 184, 0.8);
        line-height: 1;
        margin-top: 1px;
      }

      .score-operator {
        font-size: 16px;
        color: #94a3b8;
        font-weight: bold;
        padding: 0 3px;
        align-self: center;
      }

      /* 对方主题色（红色调） */
      .score-bar-opponent .score-box {
        background: linear-gradient(135deg, #7f1d1d, #ef4444);
        border-color: #fca5a5;
        box-shadow: 0 0.25rem 0.5rem rgba(127, 29, 29, 0.3);
      }
      .score-bar-opponent .score-box-total {
        background: linear-gradient(135deg, #991b1b, #f97316);
        border-color: #fdba74;
        box-shadow: 0 0 0.625rem rgba(249, 115, 22, 0.6),
                    0 0.25rem 0.5rem rgba(127, 29, 29, 0.5);
      }
      .score-bar-opponent .score-label { color: #94a3b8; }
      .score-bar-opponent .score-value { color: white; }
      .score-bar-opponent .score-value-total {
        color: #fef3c7;
        text-shadow: 0 0 0.25rem rgba(250, 204, 21, 0.6),
                     0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
      }
      .score-bar-opponent .score-range { color: rgba(148, 163, 184, 0.8); }
      .score-bar-opponent .score-operator { color: #94a3b8; }

      /* 我方主题色（蓝色调） */
      .score-bar-player .score-box {
        background: linear-gradient(135deg, #1e3a8a, #3b82f6);
        border-color: #93c5fd;
        box-shadow: 0 0.25rem 0.5rem rgba(30, 58, 138, 0.3);
      }
      .score-bar-player .score-box-total {
        background: linear-gradient(135deg, #1e40af, #60a5fa);
        border-color: #fdba74;
        box-shadow: 0 0 0.625rem rgba(253, 186, 116, 0.6),
                    0 0.25rem 0.5rem rgba(30, 58, 138, 0.5);
      }
      .score-bar-player .score-label { color: #94a3b8; }
      .score-bar-player .score-value { color: white; }
      .score-bar-player .score-value-total {
        color: #fef3c7;
        text-shadow: 0 0 0.25rem rgba(250, 204, 21, 0.6),
                     0 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
      }
      .score-bar-player .score-range { color: rgba(148, 163, 184, 0.8); }
      .score-bar-player .score-operator { color: #94a3b8; }

      /* 得分栏容器主题色 */
      .score-bar-opponent {
        background: rgba(127, 29, 29, 0.3);
        border-color: rgba(239, 68, 68, 0.4);
      }
      .score-bar-player {
        background: rgba(30, 58, 138, 0.3);
        border-color: rgba(59, 130, 246, 0.4);
      }

      /* 槽位高亮效果 - 金色内发光，用于选中状态 */
      .slot-highlight {
        box-shadow: inset 0 0 1.25rem rgba(251, 191, 36, 0.6);
      }

      /* 玩家回合高亮 - 金色外发光，标识当前回合 */
      .player-turn {
        box-shadow: 0 0 1.5625rem rgba(251, 191, 36, 0.8);
      }

      /* === 叫牌成功动画相关样式 === */
      /* 总分金色：叫牌成功后永久保持金色字体 */
      .call-card-gold {
        color: #fbbf24 !important;
        text-shadow: 0 0 0.5rem rgba(251, 191, 36, 1),
                     0 0 1rem rgba(251, 191, 36, 0.7),
                     0 0 2rem rgba(251, 191, 36, 0.4) !important;
        transition: color 0.5s ease, text-shadow 0.5s ease;
      }

      /* 金光划过遮罩（覆盖在卡牌上，用于裁切光带） */
      .gold-sweep {
        position: absolute;
        overflow: hidden;
        pointer-events: none;
        z-index: 9998;
        border-radius: 8px;
        background: transparent;
        animation: cardGoldPulse 1.3s ease-out forwards;
      }

      @keyframes cardGoldPulse {
        0%   { box-shadow: 0 0 0 rgba(251, 191, 36, 0), inset 0 0 0 rgba(251, 191, 36, 0); }
        20%  { box-shadow: 0 0 2rem rgba(251, 191, 36, 0.9), inset 0 0 1.5rem rgba(251, 191, 36, 0.4); }
        70%  { box-shadow: 0 0 3rem rgba(251, 191, 36, 0.7), inset 0 0 2rem rgba(251, 191, 36, 0.3); }
        100% { box-shadow: 0 0 0 rgba(251, 191, 36, 0), inset 0 0 0 rgba(251, 191, 36, 0); }
      }

      /* 主金色光带：像刷金属漆，从下到上移动（慢） */
      .gold-paint-band {
        position: absolute;
        left: -10%;
        width: 120%;
        height: 60%;
        background: linear-gradient(180deg,
          transparent 0%,
          rgba(255, 255, 220, 0.3) 10%,
          rgba(255, 236, 179, 0.7) 25%,
          rgba(253, 224, 71, 0.95) 40%,
          rgba(251, 191, 36, 1) 50%,
          rgba(253, 224, 71, 0.95) 60%,
          rgba(255, 236, 179, 0.7) 75%,
          rgba(255, 255, 220, 0.3) 90%,
          transparent 100%);
        box-shadow: 0 0 3rem rgba(251, 191, 36, 1),
                    0 0 6rem rgba(251, 191, 36, 0.7),
                    0 0 10rem rgba(255, 214, 71, 0.4);
        filter: brightness(1.3) contrast(1.1);
        animation: goldPaintSweep 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      }

      @keyframes goldPaintSweep {
        0%   { top: 110%; opacity: 0; }
        10%  { opacity: 1; }
        100% { top: -60%; opacity: 1; }
      }

      /* 第二层光带：稍后到达，更细更亮（金属反光） */
      .gold-paint-band2 {
        position: absolute;
        left: -10%;
        width: 120%;
        height: 35%;
        background: linear-gradient(180deg,
          transparent 0%,
          rgba(255, 248, 200, 0.6) 30%,
          rgba(255, 255, 255, 0.9) 50%,
          rgba(255, 248, 200, 0.6) 70%,
          transparent 100%);
        filter: brightness(1.5);
        animation: goldPaintSweep2 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.15s;
        opacity: 0;
      }

      @keyframes goldPaintSweep2 {
        0%   { top: 120%; opacity: 0; }
        20%  { opacity: 0.8; }
        100% { top: -50%; opacity: 0.8; }
      }

      /* 金色闪烁颗粒（金属光泽中的闪烁点） */
      .gold-spark {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: radial-gradient(circle, #ffffff 0%, #fde047 50%, rgba(251, 191, 36, 0) 100%);
        box-shadow: 0 0 0.5rem rgba(255, 255, 200, 1),
                    0 0 1rem rgba(251, 191, 36, 0.8);
        pointer-events: none;
        animation: goldSparkFlicker 0.6s ease-out forwards;
      }

      @keyframes goldSparkFlicker {
        0%   { transform: scale(0) rotate(0deg); opacity: 0; }
        30%  { transform: scale(1.2) rotate(90deg); opacity: 1; }
        100% { transform: scale(0) rotate(180deg); opacity: 0; }
      }

      /* 金漆期间：卡牌缩小（通过 transform 控制） */
      .card-call-shrink {
        animation: cardCallShrink 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        box-shadow: 0 0 2rem rgba(251, 191, 36, 0.5),
                    inset 0 0 1rem rgba(251, 191, 36, 0.3) !important;
        filter: brightness(1.15) saturate(1.2);
      }

      @keyframes cardCallShrink {
        0%   { transform: scale(1); }
        15%  { transform: scale(0.92); }
        90%  { transform: scale(0.92); }
        100% { transform: scale(0.92); }
      }

      /* 金漆结束：卡牌突然放大（弹跳） */
      .card-call-pop {
        animation: cardCallPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        box-shadow: 0 0 3rem rgba(251, 191, 36, 1),
                    0 0 6rem rgba(251, 191, 36, 0.6) !important;
      }

      @keyframes cardCallPop {
        0%   { transform: scale(0.92); filter: brightness(1.3) saturate(1.2); }
        50%  { transform: scale(1.2); filter: brightness(1.6) saturate(1.4); }
        100% { transform: scale(1); filter: brightness(1); }
      }

      /* 路牌区出牌弹跳动画 */
      .card-road-pop {
        animation: cardRoadPop 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      @keyframes cardRoadPop {
        0%   { transform: scale(0.96); }
        50%  { transform: scale(1.05); }
        100% { transform: scale(1); }
      }

      /* 金色闪电球（从卡牌飞向得分栏 - 闪电动画） */
      .lightning-orb {
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: radial-gradient(circle,
          #ffffff 0%,
          #fff8dc 20%,
          #fde047 50%,
          #fbbf24 80%,
          rgba(251, 191, 36, 0.5) 100%);
        box-shadow: 0 0 1rem rgba(255, 255, 255, 1),
                    0 0 2rem rgba(251, 191, 36, 1),
                    0 0 4rem rgba(251, 191, 36, 0.8),
                    0 0 8rem rgba(251, 191, 36, 0.4);
        pointer-events: none;
        z-index: 9999;
        animation: lightningPulse 0.15s ease-in-out infinite alternate;
      }

      @keyframes lightningPulse {
        0%   { transform: scale(1); filter: brightness(1); }
        100% { transform: scale(1.2); filter: brightness(1.3); }
      }

      /* 闪电尾迹（在飞行路径上留下闪烁的电光） */
      .lightning-trail {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle, #fff8dc 0%, #fde047 40%, rgba(251, 191, 36, 0) 100%);
        box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
        pointer-events: none;
        z-index: 9998;
        animation: trailFade 0.5s ease-out forwards;
      }

      @keyframes trailFade {
        0%   { transform: scale(1.5); opacity: 1; }
        100% { transform: scale(0); opacity: 0; }
      }

      /* 闪电分支（在主飞行路径上随机分叉的电光） */
      .lightning-branch {
        position: absolute;
        width: 2px;
        background: linear-gradient(180deg,
          #ffffff 0%,
          #fde047 30%,
          #fbbf24 70%,
          rgba(251, 191, 36, 0) 100%);
        box-shadow: 0 0 0.3rem rgba(255, 255, 200, 1),
                    0 0 0.6rem rgba(251, 191, 36, 0.9);
        pointer-events: none;
        z-index: 9998;
        transform-origin: top center;
        animation: branchFade 0.3s ease-out forwards;
      }

      @keyframes branchFade {
        0%   { opacity: 1; filter: brightness(1.5); }
        100% { opacity: 0; filter: brightness(0.5); }
      }

      /* 得分栏闪光爆发效果（光球到达时） */
      .score-flash {
        animation: scoreFlash 0.5s ease-out forwards;
      }

      @keyframes scoreFlash {
        0% { transform: scale(1); filter: brightness(1); }
        50% { transform: scale(1.2); filter: brightness(2) saturate(1.5); }
        100% { transform: scale(1); filter: brightness(1.3); }
      }

      /* 卡牌四周灰尘粒子 */
      .dust-particle {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(226, 232, 240, 0.9), rgba(148, 163, 184, 0.3));
        pointer-events: none;
        z-index: 9997;
        animation: dustFloat 1.2s ease-out forwards;
      }

      @keyframes dustFloat {
        0% {
          transform: translate(0, 0) scale(0.3);
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          transform: translate(var(--dust-dx), var(--dust-dy)) scale(1.2);
          opacity: 0;
        }
      }

      /* 叫牌时卡牌本身的金色高亮边框 */
      .card-call-highlight {
        animation: cardGlow 0.8s ease-in-out;
        box-shadow: 0 0 2rem rgba(251, 191, 36, 0.9),
                    0 0 4rem rgba(251, 191, 36, 0.5) !important;
      }

      @keyframes cardGlow {
        0% { box-shadow: 0 0 0.5rem rgba(251, 191, 36, 0.3); }
        50% { box-shadow: 0 0 2.5rem rgba(251, 191, 36, 1), 0 0 5rem rgba(251, 191, 36, 0.6); }
        100% { box-shadow: 0 0 0.5rem rgba(251, 191, 36, 0.3); }
      }

      /* 叫牌失败：卡牌抖动同时变灰 */
      .card-call-fail-shake {
        animation: cardFailShake 0.6s ease-in-out;
        filter: grayscale(0.5) brightness(0.8) sepia(0.2) saturate(0.5);
        box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.5);
        transition: filter 0.4s ease, box-shadow 0.4s ease;
      }

      /* === 叫牌掀缝动画：光芒挂 body 层（不被路牌区裁剪），掀开时射灯式晃动照射 === */
      .pb-call-lift {
        transform-origin: left center;
        animation: pbCallLift 1.55s cubic-bezier(0.34, 1.28, 0.5, 1) forwards;
        will-change: transform;
      }

      @keyframes pbCallLift {
        0%, 16%  { transform: perspective(350px) rotateY(0deg); }
        34%, 58% { transform: perspective(350px) rotateY(-18deg); }
        68%      { transform: perspective(350px) rotateY(-11deg); }
        80%, 92% { transform: perspective(350px) rotateY(-16deg); }
        100%     { transform: perspective(350px) rotateY(0deg); }
      }

      /* 光芒容器：fixed 挂 body，跟随卡牌矩形（子元素可自由外溢） */
      .pb-call-glow {
        position: fixed;
        pointer-events: none;
        z-index: 9998;
        opacity: 0;
        animation: pbCallGlowFade 1.55s ease-in-out forwards;
      }

      @keyframes pbCallGlowFade {
        0%   { opacity: 0; }
        30%  { opacity: 1; }
        60%  { opacity: 0.9; }
        80%  { opacity: 0.95; }
        100% { opacity: 0; }
      }

      /* 原版光效：右缘暖光呼吸（黑暗中掀起漏光） */
      .pb-call-warm {
        position: absolute;
        inset: -26% -54% -40% -44%;
        background: radial-gradient(ellipse 56% 50% at 80% 54%,
          rgba(255, 248, 222, 0.98) 0%, rgba(253, 208, 90, 0.72) 28%,
          rgba(251, 191, 36, 0.30) 56%, transparent 78%);
        filter: blur(8px);
        animation: pbWarmBreath 1.55s ease-in-out forwards;
      }

      @keyframes pbWarmBreath {
        0%, 16%  { opacity: 0; }
        34%, 58% { opacity: 1; }
        68%      { opacity: 0.55; }
        80%, 92% { opacity: 0.9; }
        100%     { opacity: 0; }
      }



      /* 缝隙亮线：贴卡牌右缘的强光 */
      .pb-call-seam {
        position: absolute;
        top: -4%;
        bottom: -4%;
        right: -7px;
        width: 16px;
        background: linear-gradient(90deg, transparent, rgba(255, 252, 238, 1) 55%, rgba(255, 232, 168, 0.65));
        filter: blur(4px);
        border-radius: 8px;
      }

      /* 桌面反光：卡牌下方的椭圆光晕 */
      .pb-call-floor {
        position: absolute;
        left: -20%;
        right: -60%;
        bottom: -18px;
        height: 42px;
        background: radial-gradient(ellipse 52% 100% at 55% 0%,
          rgba(255, 242, 200, 0.55), rgba(251, 191, 36, 0.16) 55%, transparent 80%);
        filter: blur(7px);
      }

      /* 教程卡牌抖动：仅抖动，不变灰 */
      .tutorial-card-fail-shake {
        animation: cardFailShake 0.6s ease-in-out !important;
      }

      @keyframes cardFailShake {
        0%, 100% {
          transform: translate(0, 0) rotate(0deg);
        }
        10%, 30%, 50%, 70%, 90% {
          transform: translate(-5px, 0) rotate(-2deg);
        }
        20%, 40%, 60%, 80% {
          transform: translate(5px, 0) rotate(2deg);
        }
        55% {
          transform: translate(0, -5px) rotate(0deg);
        }
      }

      /* ------------------------------------------------------------------------ */
      /* 【HTML样式-2/3】全局样式 - 功能区布局 */
      /* ------------------------------------------------------------------------ */
      /* 对方功能区 - 顶部区域，包含手牌区、明牌区、暗牌区 */
      .opponent-function-area {
        height: 104px;
        flex-shrink: 0;
        position: relative;
      }

      /* 我方功能区 - 底部区域，包含手牌区、明牌区、暗牌区 */
      .player-function-area {
        height: 104px;
        flex-shrink: 0;
        position: relative;
      }

      /* ------------------------------------------------------------------------ */
      /* 【四人模式布局】我方拆分(左:暗1+手5+明1, 右:暗4+手1+明2)              */
      /* 对方(AI)保持原样(暗5+手6+明3)，不拆分                                  */
      /* ------------------------------------------------------------------------ */
      /* 四人模式：只重新定位我方左侧容器 */
      .game-container.four-player-mode #player-dark-cards {
        left: calc(50% - 740px);
      }
      .game-container.four-player-mode #player-hand {
        left: calc(50% - 596px);
        transform: none;
      }
      .game-container.four-player-mode #player-revealed-cards {
        left: calc(50% - 164px);
        right: auto;
      }

      /* ★ 四人模式练习：座位区样式 */
      .practice-seat {
        position: absolute;
        bottom: 36px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 2px dashed rgba(100, 180, 255, 0.5);
        background: rgba(30, 58, 95, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 15;
        transition: all 0.2s;
        overflow: visible;
      }
      .practice-seat:hover {
        border-color: rgba(100, 180, 255, 0.9);
        background: rgba(30, 58, 95, 0.9);
        transform: scale(1.05);
      }
      .practice-seat-plus {
        font-size: 24px;
        color: rgba(100, 180, 255, 0.6);
        font-weight: bold;
        line-height: 1;
      }
      /* 队员座位：蓝色边框 */
      .practice-seat.filled {
        border: 2px solid rgba(100, 180, 255, 0.8);
        background: rgba(30, 58, 95, 0.9);
        box-shadow: 0 0 10px rgba(100, 180, 255, 0.3);
      }
      .practice-seat.filled:hover {
        border-color: rgba(100, 180, 255, 1);
        box-shadow: 0 0 15px rgba(100, 180, 255, 0.5);
      }
      /* 队长座位：金色边框 + 光晕 */
      .practice-seat.filled.leader {
        border: 2px solid rgba(255, 215, 0, 0.9);
        background: rgba(30, 58, 95, 0.9);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
      }
      .practice-seat.filled.leader:hover {
        border-color: rgba(255, 215, 0, 1);
        box-shadow: 0 0 18px rgba(255, 215, 0, 0.7);
      }
      /* ★ 掉线状态：灰色边框 + 灰度滤镜 */
      .practice-seat.filled.disconnected {
        border: 2px solid rgba(120, 120, 120, 0.8);
        background: rgba(40, 40, 40, 0.9);
        box-shadow: 0 0 6px rgba(80, 80, 80, 0.3);
      }
      .practice-seat.filled.disconnected .practice-seat-avatar,
      .practice-seat.filled.disconnected .practice-seat-avatar-emoji {
        filter: grayscale(100%) opacity(0.5);
      }
      .practice-seat.filled.disconnected .practice-seat-name {
        color: rgba(180, 180, 180, 0.7);
      }
      /* ★ 2026-8-31: 掉线队友座位可点击重新邀请的视觉提示 */
      .practice-seat.filled.clickable-reinvite {
        border: 2px solid rgba(99,102,241,0.6);
        box-shadow: 0 0 12px rgba(99,102,241,0.5);
        animation: practiceSeatPulse 2s ease-in-out infinite;
      }
      @keyframes practiceSeatPulse {
        0%, 100% { box-shadow: 0 0 12px rgba(99,102,241,0.4); }
        50% { box-shadow: 0 0 22px rgba(99,102,241,0.8); }
      }

      /* ★ 2026-8-31: 覆盖整个功能牌区的大重新邀请覆盖层 */
      .practice-reinvite-big-overlay {
        position: absolute;
        pointer-events: auto;
        cursor: pointer;
        border: 3px dashed rgba(99,102,241,0.7);
        background: radial-gradient(ellipse at center bottom, rgba(99,102,241,0.4) 0%, rgba(79,70,229,0.2) 40%, rgba(30,27,75,0.55) 100%);
        animation: practiceOverlayPulse 2s ease-in-out infinite;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        transition: background 0.2s;
      }
      .practice-reinvite-big-overlay:hover {
        background: radial-gradient(ellipse at center bottom, rgba(139,152,255,0.55) 0%, rgba(99,102,241,0.35) 40%, rgba(30,27,75,0.7) 100%);
        border-color: rgba(139, 152, 255, 1);
      }
      @keyframes practiceOverlayPulse {
        0%, 100% {
          border-color: rgba(99,102,241,0.5);
          box-shadow: inset 0 0 40px rgba(99,102,241,0.15);
        }
        50% {
          border-color: rgba(99,102,241,0.9);
          box-shadow: inset 0 0 60px rgba(99,102,241,0.3), 0 0 20px rgba(99,102,241,0.2);
        }
      }
      .pro-big-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
      }
      .pro-big-ring {
        position: absolute;
        top: 50%; left: 50%;
        width: 100px; height: 100px;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(139, 152, 255, 0.6);
        border-radius: 50%;
        animation: proRingSpin 3s linear infinite;
      }
      @keyframes proRingSpin {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
      }
      .pro-big-icon {
        font-size: 2.5rem;
        animation: proIconBounce 1.5s ease-in-out infinite;
      }
      @keyframes proIconBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }
      .pro-big-text {
        font-size: 0.95rem;
        font-weight: 700;
        color: #c7d2fe;
        text-shadow: 0 0 10px rgba(99,102,241,0.8), 0 2px 4px rgba(0,0,0,0.8);
        letter-spacing: 0.5px;
      }
      .practice-seat-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
      .practice-seat-avatar-emoji {
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        line-height: 1;
      }
      .practice-seat-name {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: rgba(255, 255, 255, 0.85);
        white-space: nowrap;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        pointer-events: none;
      }
      /* 座位位置：左座对齐暗牌区左侧，右座对齐明牌区右侧 */
      #practice-seat-left {
        left: calc(50% - 810px);
      }
      #practice-seat-right {
        left: calc(50% + 754px);
      }
      /* ★ 只读模式：游戏开始后头像保持显示但不可点击 */
      .practice-seat.practice-seat-readonly {
        cursor: default !important;
        opacity: 0.85;
      }
      .practice-seat.practice-seat-readonly:hover {
        transform: none;
      }

      /* ★ 四人模式：活跃区域统一高亮框（单一线框覆盖所有牌区） */
      #fp-active-box {
        position: absolute;
        pointer-events: none;
        z-index: 50;
        border: 2px solid rgba(96, 165, 250, 0.7);
        border-radius: 10px;
        animation: fp-box-pulse 1.5s ease-in-out infinite;
      }
      @keyframes fp-box-pulse {
        0%, 100% { border-color: rgba(96, 165, 250, 0.5); box-shadow: 0 0 8px rgba(96, 165, 250, 0.2); }
        50% { border-color: rgba(96, 165, 250, 0.9); box-shadow: 0 0 16px rgba(96, 165, 250, 0.4); }
      }

      /* ★ 2v2模式：当前回合玩家头像最外层边框闪烁（与线框同步） */
      .avatar-turn-active {
        animation: avatar-turn-pulse 1.5s ease-in-out infinite !important;
      }
      @keyframes avatar-turn-pulse {
        0%, 100% {
          box-shadow: 0 0 8px rgba(96, 165, 250, 0.3), 0 0 2px rgba(96, 165, 250, 0.5);
          border-color: rgba(96, 165, 250, 0.6) !important;
        }
        50% {
          box-shadow: 0 0 20px rgba(96, 165, 250, 0.6), 0 0 6px rgba(96, 165, 250, 0.8);
          border-color: rgba(96, 165, 250, 1) !important;
        }
      }

      /* ★ 四人模式：非活跃区域禁用悬停效果和指针（线框之外的卡牌取消互动） */
      .fp-inactive-side .card-hover:hover:not(.match-glow),
      .fp-inactive-side .card-hover.tip-hover:not(.match-glow),
      .fp-inactive-side .dark-card-hover:hover:not(.match-glow) {
        transform: none !important;
        box-shadow: none !important;
      }
      .fp-inactive-side .game-cursor-hover,
      .fp-inactive-side.game-cursor-hover {
        cursor: default !important;
      }
      /* 牌堆在非活跃状态下禁用所有悬停效果 */
      #player-deck.fp-inactive-side:hover {
        transform: none !important;
        box-shadow: none !important;
      }

      /* 中央对战区域 - 弹性布局，包含双方路牌区和拼点栏 */
      .center-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 0;
        overflow: visible;
      }

      /* 路牌区容器 - 横向排列五路 */
      .road-area {
        display: flex;
        gap: 8px;
        overflow: visible;
      }

      /* 单路路牌槽位 - 每条路只有一个槽位，总高度352px */
      .road-slot {
        width: 73.6px;
        height: 352px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding: 4px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        overflow: visible;
      }

      .player-road-slot {
        border-color: rgba(59, 130, 246, 0.3);
        /* 我方：视觉尾部 = 底部，新牌叠在下方 */
        flex-direction: column;
        justify-content: flex-start;
      }

      .opponent-road-slot {
        border-color: rgba(239, 68, 68, 0.3);
        /* 对方：视觉尾部 = 顶部，新牌叠在上方；
           flex-direction: column-reverse 使 DOM 最后一张被渲染在视觉顶部 */
        flex-direction: column-reverse;
        justify-content: flex-start;
      }

      .road-slot {
        gap: 2px;
      }

      .road-slot .card {
        width: 100% !important;
        height: 96px !important;
        flex-shrink: 0;
        align-self: center;
      }

      .road-slot .card-small {
        width: 100% !important;
        height: calc((352px - 96px - 8px - 2px - 16px) / 8) !important;
        flex-shrink: 0;
        align-self: center;
      }

      /* ------------------------------------------------------------------------ */
      /* 【HTML样式-3/3】全局样式 - CSS动画定义 */
      /* ------------------------------------------------------------------------ */
      /* 灯泡发光效果 - 悬停时光晕从中心向外延伸（黄色系）
         用 CSS :hover 伪类 + transition 实现，浏览器原生管理悬停状态，
         不会出现 JS 事件丢失导致不触发的问题
         默认态4层微弱光晕 → 悬停态4层逐步放大的光晕，transition 自动插值平滑过渡 */
      .lightbulb-icon {
        display: inline-block;
        line-height: 1;
        color: #E5E7EB;
        /* 默认态：4 层极弱的黄色光晕（从中心向外依次递减） */
        text-shadow:
          0 0 0.125rem rgba(255, 220, 120, 0.25),
          0 0 0.1875rem rgba(255, 200, 80, 0.15),
          0 0 0.25rem rgba(255, 180, 50, 0.08),
          0 0 0.3125rem rgba(255, 160, 40, 0.04);
        filter: drop-shadow(0 0 0.25rem rgba(255, 200, 80, 0.3));
        /* 连续平滑过渡，时长稍长以突出"延伸"感 */
        transition: text-shadow 1.1s ease-out,
                    filter 1.1s ease-out;
      }

      /* ====================================================================== */
      /* 【设置面板按钮统一样式】所有分组选项按钮（光标/先手/AI策略）
         统一采用内联 style + JS事件管理模式（AI策略按钮模板）
         选中态：紫色系 #7c3aed 背景 + #a78bfa 边框 + 白色文字
         未选中态：灰蓝色系 #334155 背景 + #475569 边框 + #94a3b8 文字
         悬停态（选中）：亮紫 #8b5cf6 + 白色文字
         悬停态（未选中）：亮灰 #475569 + 白色文字
         此模式下 CSS 不再负责按钮颜色，仅保留过渡效果 */
      /* ====================================================================== */

      /* 规则按钮默认状态 - 深灰渐变背景、浅灰边框，与设置按钮风格一致
         位置在左下角，随游戏容器等比例缩放
         用 CSS :hover 伪类替代 JS 事件绑定，从根本上解决"偶尔不触发"
         正方形（width = height = 40px，与左上角设置按钮同尺寸）
         光晕全部为 inset 内阴影（不溢出边框） */
      .rules-btn-base {
        position: absolute;
        bottom: 16px;
        left: 16px;
        background: linear-gradient(145deg, #374151, #1f2937);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 6px;
        border: 1px solid #4b5563;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17.6px;
        z-index: 50;
        cursor: pointer;
        box-shadow:
          inset 0 0 0 rgba(0, 0, 0, 0),
          inset 0 0 0 rgba(255, 220, 100, 0),
          inset 0 0 0 rgba(255, 200, 80, 0),
          inset 0 0 0 rgba(255, 220, 100, 0);
        transition: box-shadow 1.1s ease-out, border-color 1.1s ease-out;
      }

      /* 【修复"偶尔不触发"的核心】用 CSS :hover 伪类
         浏览器原生管理，100% 可靠，零 JS 事件绑定，永远不会漏触发
         全部使用 inset 内阴影，光晕完全在边框内部，不溢出 */
      .rules-btn-base:hover {
        /* 悬停态：多层黄色光晕从按钮边框向内发光（inset = 从边缘渗透到内部）
           第一层：黑色 inset —— 产生边框内部的凹陷阴影
           第二层：强黄色 —— 紧贴边框的高亮光晕
           第三层：扩散黄色 —— 更深层的光晕延伸
           第四层：内部黄光 —— 让整个按钮内部都有暖光氛围 */
        box-shadow:
          inset 0 0 12px rgba(0, 0, 0, 0.55),
          inset 0 0 24px rgba(255, 220, 100, 0.45),
          inset 0 0 44px rgba(255, 200, 80, 0.3),
          inset 0 0 70px rgba(255, 230, 120, 0.2);
        border-color: #e9d27a;
      }

      /* 悬停时按钮内部的灯泡图标也一起发光（通过父元素 :hover 联动） */
      .rules-btn-base:hover .lightbulb-icon {
        /* 悬停态：4 层大幅扩散的黄色光晕
           transition 会从默认态连续插值到此处，产生向外延伸生长的动画 */
        text-shadow:
          0 0 0.75rem rgba(255, 240, 140, 0.95),
          0 0 1.75rem rgba(255, 210, 90, 0.7),
          0 0 3.125rem rgba(255, 180, 60, 0.5),
          0 0 4.5rem rgba(255, 160, 50, 0.32);
        filter: drop-shadow(0 0 0.625rem rgba(255, 220, 100, 0.8));
      }

      /* ====================================================================== */
      /* 【整局游戏时间计时器】2v2联机模式右下角，位于游戏控制按钮上方
         正计时显示整局游戏已进行时长（MM:SS），常态化显示
         位于 .game-container 内，随容器整体等比例缩放（遵守缩放规则） */
      /* ====================================================================== */
      .match-timer-display {
        align-self: flex-end;
        padding: 6px 14px;
        border-radius: 8px;
        /* ★ 2026-9-30：凹陷效果（顶部深压+底部微光唇，金边内凹槽） */
        background: linear-gradient(180deg, #080c16 0%, #0d1424 55%, #131d33 100%);
        color: #fde68a;
        font-size: 13px;
        font-weight: bold;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        letter-spacing: 0.5px;
        border: 1px solid rgba(255, 215, 100, 0.4);
        box-shadow:
          inset 0 3px 6px rgba(0, 0, 0, 0.8),
          inset 0 -1px 0 rgba(255, 215, 100, 0.22),
          inset 0 0 8px rgba(0, 0, 0, 0.5),
          0 1px 0 rgba(255, 255, 255, 0.05);
        text-align: center;
        white-space: nowrap;
        pointer-events: none;
      }

      /* ====================================================================== */
      /* 【游戏控制按钮统一样式】右下角：开始游戏 / 终止出牌 / 重新开始
         设计目标：悬停时增强立体感
         实现方式：纯 CSS :hover 伪类 + transition 平滑过渡
         立体效果构成：
           1. 外阴影增强 & 扩散（按钮上浮）
           2. 顶部高光 + 底部深阴影（凹陷内阴影，模拟立体按钮）
           3. 轻微放大（scale），让按钮"鼓起"
           4. 边框颜色提亮（高亮边框）
         过渡时间：0.45s cubic-bezier（自然的松紧效果） */
      /* ====================================================================== */

      /* 游戏控制按钮 - 基础样式（三个按钮共用）
         尺寸：足够大以便点击，圆角适中
         文本：粗体、居中、深色/白色文字对比清晰 */
      .game-ctrl-btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 14.4px;
        border: none;
        cursor: pointer;
        display: block;
        text-align: center;
        position: relative;
        /* 关键：4 层 box-shadow 构成立体感骨架
           第1层：外投影（按钮下方的地面阴影，模拟浮起）
           第2层：顶部高光内阴影（按钮顶面的光泽）
           第3层：底部深内阴影（按钮底部的凹陷，模拟立体边缘）
           第4层：侧面柔和内阴影（过渡层，让立体更自然）
           
           默认态：所有阴影强度较弱，按钮看起来"平"但有层次 */
        box-shadow:
          0 0.25rem 0.75rem rgba(0, 0, 0, 0.2),
          inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1),
          inset 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.15),
          inset 0 0 0rem rgba(255, 255, 255, 0);
        /* 统一过渡：所有阴影 + transform + 边框一起平滑变化 */
        transition:
          box-shadow 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
          transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      /* 悬停态：立体感增强
         1. 外阴影大幅增强 + 扩散（按钮明显浮起，下方地面阴影变大变深）
         2. 顶部高光变亮（顶面反射更多光，看起来像立体按钮的上表面）
         3. 底部内阴影加深（底部凹陷更明显，立体边缘更清晰）
         4. 侧面加一层彩色光晕（按钮有发光感，更醒目）
         5. 轻微向上浮起 + 放大（translateY + scale，物理按钮被按下前的状态） */
      .game-ctrl-btn:hover:not(:disabled) {
        transform: translateY(-0.1875rem) scale(1.05);
        box-shadow:
          0 0.5rem 1.375rem rgba(0, 0, 0, 0.35),
          0 0.125rem 0.375rem rgba(0, 0, 0, 0.2),
          inset 0 0.125rem 0.375rem rgba(255, 255, 255, 0.25),
          inset 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
      }

      /* 按下态（:active）：轻微下沉 + 阴影缩小，模拟按钮被按下去 */
      .game-ctrl-btn:active:not(:disabled) {
        transform: translateY(0.0625rem) scale(1.02);
        box-shadow:
          0 0.125rem 0.375rem rgba(0, 0, 0, 0.25),
          inset 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2),
          inset 0 -0.0625rem 0.125rem rgba(255, 255, 255, 0.1);
      }

      /* 禁用态：灰色透明度降低，不可交互（保持视觉层级） */
      .game-ctrl-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* ---- 各按钮专属颜色（渐变色 + 悬停色光晕） ---- */

      /* 开始游戏 - 金色系 */
      .game-ctrl-btn-gold {
        background: linear-gradient(145deg, #fbbf24, #f59e0b);
        color: #1a1a2e;
      }
      /* 悬停时附加金色外发光（在原有立体阴影上叠加彩色光晕） */
      .game-ctrl-btn-gold:hover:not(:disabled) {
        box-shadow:
          0 0.5rem 1.375rem rgba(0, 0, 0, 0.35),
          0 0.125rem 0.375rem rgba(0, 0, 0, 0.2),
          0 0 1.125rem rgba(255, 200, 100, 0.4),
          0 0 0.5rem rgba(251, 191, 36, 0.3),
          inset 0 0.125rem 0.375rem rgba(255, 255, 255, 0.35),
          inset 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
      }

      /* 终止出牌 - 红色系 */
      .game-ctrl-btn-red {
        background: linear-gradient(145deg, #ef4444, #dc2626);
        color: white;
      }
      /* 悬停时附加红色外发光 */
      .game-ctrl-btn-red:hover:not(:disabled) {
        box-shadow:
          0 0.5rem 1.375rem rgba(0, 0, 0, 0.35),
          0 0.125rem 0.375rem rgba(0, 0, 0, 0.2),
          0 0 1.125rem rgba(239, 68, 68, 0.4),
          0 0 0.5rem rgba(220, 38, 38, 0.3),
          inset 0 0.125rem 0.375rem rgba(255, 255, 255, 0.25),
          inset 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
      }

      /* 重新开始 - 灰色系 */
      .game-ctrl-btn-gray {
        background: linear-gradient(145deg, #6b7280, #4b5563);
        color: white;
      }
      /* 悬停时附加冷色外发光 */
      .game-ctrl-btn-gray:hover:not(:disabled) {
        box-shadow:
          0 0.5rem 1.375rem rgba(0, 0, 0, 0.35),
          0 0.125rem 0.375rem rgba(0, 0, 0, 0.2),
          0 0 1.125rem rgba(150, 180, 220, 0.35),
          0 0 0.5rem rgba(107, 114, 128, 0.3),
          inset 0 0.125rem 0.375rem rgba(255, 255, 255, 0.2),
          inset 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
      }

      /* 旗帜飘动动画 - 拼点栏胜利旗帜摆动效果 */
      .flag-waving {
        animation: flagWave 0.8s ease-in-out infinite;
      }

      /* 条纹飘动动画 - 胜利旗帜条纹左右移动 */
      .stripe-waving {
        animation: stripeWave 0.6s ease-in-out infinite;
      }

      /* 蓝色火焰动画 - 我方拼点胜利时发光效果 */
      .blue-flame {
        animation: blueFlameGlow 0.8s ease-in-out infinite !important;
      }

      /* 红色火焰动画 - 对方拼点胜利时发光效果 */
      .red-flame {
        animation: redFlameGlow 0.8s ease-in-out infinite !important;
      }

      @keyframes flagWave {
        0% { transform: skewX(0deg); }
        25% { transform: skewX(-3deg); }
        50% { transform: skewX(0deg); }
        75% { transform: skewX(3deg); }
        100% { transform: skewX(0deg); }
      }

      @keyframes bidShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-8px); }
        40% { transform: translateX(8px); }
        60% { transform: translateX(-6px); }
        80% { transform: translateX(6px); }
      }

      @keyframes stripeWave {
        0% { transform: translateX(0); }
        25% { transform: translateX(0.125rem); }
        50% { transform: translateX(0); }
        75% { transform: translateX(-0.125rem); }
        100% { transform: translateX(0); }
      }

      @keyframes blueFlameGlow {
        0%, 100% {
          filter: drop-shadow(0 0 0.625rem rgba(59, 130, 246, 0.8)) drop-shadow(0 0 1.25rem rgba(59, 130, 246, 0.6)) drop-shadow(0 0 1.875rem rgba(59, 130, 246, 0.4));
        }
        50% {
          filter: drop-shadow(0 0 0.9375rem rgba(59, 130, 246, 1)) drop-shadow(0 0 1.875rem rgba(59, 130, 246, 0.8)) drop-shadow(0 0 2.8125rem rgba(59, 130, 246, 0.6));
        }
      }

      @keyframes redFlameGlow {
        0%, 100% {
          filter: drop-shadow(0 0 0.625rem rgba(239, 68, 68, 0.8)) drop-shadow(0 0 1.25rem rgba(239, 68, 68, 0.6)) drop-shadow(0 0 1.875rem rgba(239, 68, 68, 0.4));
        }
        50% {
          filter: drop-shadow(0 0 0.9375rem rgba(239, 68, 68, 1)) drop-shadow(0 0 1.875rem rgba(239, 68, 68, 0.8)) drop-shadow(0 0 2.8125rem rgba(239, 68, 68, 0.6));
        }
      }

      /* ═══ 拼点栏·水晶灯管风格（F·精修，2026-9-30 实装）═══
         仅经典分支启用（金属/玻璃保持原渲染不动）
         结构：.rs-g3(槽=块体) > .rs-face(正面挤出) > .rs-rim(左右双棱) + .rs-bloom(符号光晕)
         状态类：默认蓝W / rs-l红L / rs-t灰T / rs-e熄灭E；特效类：rs-wave晶体共振 / rs-flame火焰 */
      .rs-g3 { position: relative; }
      .rs-g3::before {         /* 地面光斑：灯管照亮下方台面 */
        content: '';
        position: absolute; left: 10%; right: 10%; top: calc(100% + 8px); height: 10px;
        background: radial-gradient(ellipse at 50% 0%, rgba(96, 165, 250, 0.45), transparent 70%);
        filter: blur(4px); pointer-events: none;
      }
      .rs-g3 .rs-face {        /* 正面：左上受光 + 三层阶梯侧脸（贴合圆角无缝隙） */
        position: absolute; inset: 0;
        border-radius: 8px;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.35) 0%, transparent 42%),
          linear-gradient(135deg, #5b93f5 0%, #3568d8 48%, #1a3a8c 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.55),
          inset 1px 0 0 rgba(255, 255, 255, 0.25),
          inset 0 -8px 12px rgba(8, 20, 60, 0.38),
          0 3px 0 #3568d8,
          0 5px 0 #1c3a86,
          0 7px 0 #0b1a44,
          0 14px 18px rgba(0, 0, 0, 0.5);
      }
      .rs-g3 .rs-face::before {  /* 斜向宽光带（玻璃反光） */
        content: '';
        position: absolute; top: -40%; left: -28%; width: 55%; height: 180%;
        background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.05) 55%, transparent 100%);
        transform: rotate(8deg);
      }
      .rs-g3 .rs-rim { position: absolute; left: 0; right: 0; top: 3px; bottom: 3px; }
      .rs-g3 .rs-rim::before, .rs-g3 .rs-rim::after {
        content: '';
        position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px;
      }
      .rs-g3 .rs-rim::before { /* 左侧受光面：亮棱 */
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(158, 197, 255, 0.55) 45%, rgba(158, 197, 255, 0.05) 100%);
      }
      .rs-g3 .rs-rim::after {  /* 右侧背光面：弱反光（约1/3强度） */
        right: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(158, 197, 255, 0.16) 40%, transparent 90%);
      }
      .rs-g3 .rs-bloom {       /* 符号灯光晕染面板 */
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.5) 0%, rgba(190, 220, 255, 0.22) 34%, transparent 62%);
      }
      .rs-g3 .rs-sym {
        position: relative; z-index: 3; color: #fff; font-weight: bold; font-size: 1.5rem; line-height: 1;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 9px rgba(160, 205, 255, 0.85)) drop-shadow(0 0 20px rgba(59, 130, 246, 0.55));
      }
      .rs-g3::after {          /* 呼吸外发光（与牌型栏 2.4s 同律动） */
        content: '';
        position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.5), 0 0 36px rgba(59, 130, 246, 0.28);
        animation: rsGlowPulse 2.4s ease-in-out infinite;
      }
      @keyframes rsGlowPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
      /* 红态（对方胜）：朝向与蓝块一致——受光左上、亮棱在左 */
      .rs-g3.rs-l::before { background: radial-gradient(ellipse at 50% 0%, rgba(248, 113, 113, 0.45), transparent 70%); }
      .rs-g3.rs-l .rs-face {
        background:
          radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.30) 0%, transparent 42%),
          linear-gradient(135deg, #f05555 0%, #c22a2a 48%, #7c1010 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.5),
          inset 1px 0 0 rgba(255, 255, 255, 0.22),
          inset 0 -8px 12px rgba(50, 6, 10, 0.38),
          0 3px 0 #a02428,
          0 5px 0 #6e1218,
          0 7px 0 #3c080c,
          0 14px 18px rgba(0, 0, 0, 0.5);
      }
      .rs-g3.rs-l .rs-rim::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 179, 179, 0.55) 45%, rgba(255, 179, 179, 0.05) 100%); }
      .rs-g3.rs-l .rs-rim::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 179, 179, 0.16) 40%, transparent 90%); }
      .rs-g3.rs-l .rs-bloom { background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 200, 200, 0.2) 34%, transparent 62%); }
      .rs-g3.rs-l .rs-sym { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 9px rgba(255, 190, 190, 0.85)) drop-shadow(0 0 20px rgba(239, 68, 68, 0.55)); }
      .rs-g3.rs-l::after { box-shadow: 0 0 16px rgba(239, 68, 68, 0.5), 0 0 36px rgba(239, 68, 68, 0.28); }
      /* 灰态（平局） */
      .rs-g3.rs-t::before { background: radial-gradient(ellipse at 50% 0%, rgba(203, 213, 225, 0.3), transparent 70%); }
      .rs-g3.rs-t .rs-face {
        background:
          radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
          linear-gradient(135deg, #7b8497 0%, #555e70 48%, #2c3342 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.45),
          inset 1px 0 0 rgba(255, 255, 255, 0.2),
          inset 0 -8px 12px rgba(10, 14, 24, 0.38),
          0 3px 0 #4a5266,
          0 5px 0 #2a303e,
          0 7px 0 #171b24,
          0 14px 18px rgba(0, 0, 0, 0.5);
      }
      .rs-g3.rs-t .rs-rim::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(203, 213, 225, 0.5) 45%, rgba(203, 213, 225, 0.05) 100%); }
      .rs-g3.rs-t .rs-rim::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(203, 213, 225, 0.14) 40%, transparent 90%); }
      .rs-g3.rs-t .rs-bloom { background: radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.35) 0%, rgba(226, 232, 240, 0.16) 34%, transparent 62%); }
      .rs-g3.rs-t .rs-sym { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 8px rgba(226, 232, 240, 0.6)); }
      .rs-g3.rs-t::after { box-shadow: 0 0 12px rgba(203, 213, 225, 0.25); animation: none; opacity: 0.7; }
      /* 熄灭态（未定）：暗紫凸块 */
      .rs-g3.rs-e::before { display: none; }
      .rs-g3.rs-e .rs-face {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.26) 0%, rgba(30, 22, 70, 0.4) 55%, rgba(5, 5, 20, 0.5) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -8px 12px rgba(0, 0, 0, 0.3),
          0 3px 0 rgba(96, 72, 170, 0.55),
          0 5px 0 rgba(45, 32, 90, 0.8),
          0 10px 14px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(139, 92, 246, 0.3);
      }
      .rs-g3.rs-e .rs-face::before { opacity: 0.4; }
      .rs-g3.rs-e .rs-rim::before { background: linear-gradient(180deg, rgba(196, 181, 253, 0.5) 0%, rgba(139, 92, 246, 0.18) 60%, transparent 100%); }
      .rs-g3.rs-e .rs-rim::after { background: linear-gradient(180deg, rgba(196, 181, 253, 0.16) 0%, rgba(139, 92, 246, 0.06) 50%, transparent 90%); }
      .rs-g3.rs-e::after { display: none; }
      /* 晶体共振（飘动胜：相邻路同胜）——块体刚性，光效涌动 */
      .rs-g3.rs-wave { animation: rsResonate 0.8s ease-in-out infinite; }
      @keyframes rsResonate {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.03); }
      }
      .rs-g3.rs-wave::after { animation: rsResoGlow 0.8s ease-in-out infinite; }
      @keyframes rsResoGlow {
        0%, 100% { filter: brightness(1); opacity: 0.85; }
        50% { filter: brightness(1.9); opacity: 1; }
      }
      .rs-g3.rs-wave .rs-bloom { animation: rsBloomPulse 0.8s ease-in-out infinite; }
      @keyframes rsBloomPulse {
        0%, 100% { opacity: 0.75; }
        50% { opacity: 1; }
      }
      .rs-g3.rs-wave .rs-face::before { animation: rsPrismScan 0.6s ease-in-out infinite; }
      @keyframes rsPrismScan {
        0%, 100% { transform: translateX(0) rotate(8deg); }
        50% { transform: translateX(16px) rotate(8deg); }
      }
      /* 火焰态（≥4路）：定义在共振之后——叠加时 ::after 由火焰呼吸接管（块体共振保留） */
      .rs-g3.rs-flame::after { animation: rsFlameB 0.8s ease-in-out infinite; }
      @keyframes rsFlameB {
        0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); }
        50% { box-shadow: 0 0 15px rgba(59, 130, 246, 1), 0 0 30px rgba(59, 130, 246, 0.8), 0 0 45px rgba(59, 130, 246, 0.6); }
      }
      .rs-g3.rs-l.rs-flame::after { animation-name: rsFlameR; }
      @keyframes rsFlameR {
        0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.6), 0 0 30px rgba(239, 68, 68, 0.4); }
        50% { box-shadow: 0 0 15px rgba(239, 68, 68, 1), 0 0 30px rgba(239, 68, 68, 0.8), 0 0 45px rgba(239, 68, 68, 0.6); }
      }

      /* 齿轮旋转动画 - 设置按钮悬停时齿轮转动效果 */
      @keyframes gearSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .gear-spin {
        animation: gearSpin 1s linear infinite;
      }

      /* 按钮边框旋转动画 - 悬停时边框旋转45度后复原 */
      @keyframes borderRotate {
        0% { transform: rotate(0deg); }
        50% { transform: rotate(45deg); }
        100% { transform: rotate(0deg); }
      }

      .border-rotate {
        animation: borderRotate 0.6s ease-out;
      }
      
      /* 匹配卡牌金色闪烁动画 — 每秒1次 + 始终保持金色 */
      @keyframes matchGlow {
        0%, 100% {
          box-shadow: 
            0 0 0 0.1875rem #FBBF24,
            0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
            0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
            inset 0 0 0.9375rem rgba(251, 191, 36, 0.25);
        }
        50% {
          box-shadow: 
            0 0 0 0.25rem #FBBF24,
            0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
            0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
            inset 0 0 1.5625rem rgba(255, 215, 0, 0.45);
        }
      }

      /* ai-surround-glow：AI围牌时中立区格子的单道光环（仅用于 opponentPerformSurroundMatch）
         不包含紧贴层，避免与 neutral-aura 叠加形成两道 */
      @keyframes aiSurroundGlow {
        0%, 100% {
          box-shadow: 
            0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
            0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
            inset 0 0 0.9375rem rgba(251, 191, 36, 0.25);
        }
        50% {
          box-shadow: 
            0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
            0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
            inset 0 0 1.5625rem rgba(255, 215, 0, 0.45);
        }
      }
      
      .match-glow {
        position: relative !important;
        outline: none !important;
        border-radius: 0.625rem !important;
        box-shadow:
          0 0 0 0.1875rem #FBBF24,
          0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
          0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
          inset 0 0 0.9375rem rgba(251, 191, 36, 0.25);
        cursor: pointer !important;
        z-index: 10 !important;
        overflow: visible !important;
        animation: matchGlow 2s ease-in-out infinite !important;
        border: none !important;
        transition: none !important;
      }

      .match-glow:hover, .match-glow-hover {
        animation: none !important;
        box-shadow:
          0 0 0 0.25rem #FBBF24,
          0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
          0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
          inset 0 0 1.5625rem rgba(255, 215, 0, 0.45) !important;
        transform: none !important;
        overflow: visible !important;
      }

      /* AI围牌时中立区格子的单道光环（仅用于 opponentPerformSurroundMatch） */
      .ai-surround-glow {
        position: relative !important;
        outline: 0.1875rem solid #FBBF24 !important;
        outline-offset: -0.1875rem !important;
        /* ★ 2026-9-30 FIX：删除强制圆角，光环描边跟随槽位自身圆角（贴合倒角） */
        animation: aiSurroundGlow 2s ease-in-out infinite !important;
        cursor: pointer !important;
        z-index: 10 !important;
        overflow: visible !important;
        border: none !important;
      }

      /* card-glow：可出牌提示光环（点击终止按钮但有牌可出时显示） */
      /* 单道金色脉冲边框，提示玩家这些牌仍可打出 */
      .card-glow {
        position: relative;
        outline: 0.1875rem solid #FBBF24 !important;
        outline-offset: -0.1875rem !important;
        border-radius: 0.625rem !important;
        animation: cardGlowPulse 1.5s ease-in-out infinite;
        cursor: pointer !important;
        z-index: 50;
        transform: scale(1.03);
        transition: all 0.3s ease;
        border: none !important;
      }

      /* cardGlowPulse：单道光晕脉冲动画，动画 opacity（与 matchGlow 一致），避免 !important box-shadow 冲突 */
      @keyframes cardGlowPulse {
        0%, 100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }
    }
  </style>
  <!-- 标准 CSS 块：中立区匹配光环（border为光环主体，box-shadow为外层光晕） -->
  <style>
    /* =========================================================================
       【流星-星星抖动】
       当流星飞过某颗星星附近时，给该星星添加.meteor-shake类，触发抖动+放大效果。
       ========================================================================= */
    .shakeable-star.meteor-shake {
      animation: meteor-shake-burst 0.45s ease-out;
      transform-origin: center center;
      transform-box: fill-box;
    }

    @keyframes meteor-shake-burst {
      0%   { transform: scale(1) translate(0, 0); filter: brightness(1); }
      15%  { transform: scale(1.9) translate(-2px, 1px); filter: brightness(1.8) drop-shadow(0 0 6px rgba(255,255,255,0.9)); }
      30%  { transform: scale(1.4) translate(3px, -2px); filter: brightness(1.5); }
      50%  { transform: scale(1.6) translate(-3px, 2px); filter: brightness(1.7) drop-shadow(0 0 5px rgba(180,200,255,0.8)); }
      70%  { transform: scale(1.3) translate(2px, -1px); filter: brightness(1.3); }
      100% { transform: scale(1) translate(0, 0); filter: brightness(1); }
    }

    /* =========================================================================
       【回合按钮 - 翻页悬停动画】
       结构：底层按钮（深色+文本） → 覆盖页（亮色+同文本，从下往上翻开消失）
       悬停效果：亮色覆盖页以底部为轴，向上翻转 110° 消失，同时蓝色高光条从底部滑出
       ========================================================================= */
    .turn-page-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      z-index: 1;
      padding: 0.75rem 1.5rem;
      background: linear-gradient(145deg, #374151, #1f2937);
      color: white;
      font-weight: bold;
      letter-spacing: 0.0625rem;
      border-radius: 0.625rem;
      border: 0.0625rem solid #4b5563;
      box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3);
      cursor: pointer;
      overflow: visible;
      perspective: 43.75rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, z-index 0s ease 0.3s;
    }

    .turn-page-btn:hover {
      z-index: 100;
      transform: translateY(-0.125rem);
      box-shadow: 0 0.375rem 1.375rem rgba(0, 0, 0, 0.45), 0 0 1.25rem rgba(96, 165, 250, 0.25);
      border-color: #60a5fa;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, z-index 0s;
    }

    /* 文本：始终放在最上层，不被覆盖页遮挡 */
    .turn-page-btn .turn-page-text {
      position: relative;
      z-index: 3;
      display: inline-block;
      transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    .turn-page-btn:hover .turn-page-text {
      color: #dbeafe;
      text-shadow: 0 0 8px rgba(96, 165, 250, 0.6);
    }

    /* 翻页覆盖页：亮色页默认平铺在按钮上方（比底层更亮）
       以底部为转轴，悬停时向上翻转 110° 消失——模拟书页从下往上翻开
       z-index: 1（在按钮背景和文本之间，不遮挡文字但能覆盖背景色） */
    .turn-page-btn .turn-page-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: linear-gradient(145deg, #4f6480, #3b4c66);
      border-radius: 10px;
      transform-origin: bottom center;
      transform: rotateX(0deg);
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.55s ease,
                  box-shadow 0.55s ease;
      backface-visibility: hidden;
      z-index: 1;
      pointer-events: none;
    }

    .turn-page-btn:hover .turn-page-overlay {
      /* 以底部为轴，向上翻转 110°，同时淡出 */
      transform-origin: bottom center;
      transform: rotateX(110deg);
      opacity: 0;
      box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.35);
    }

    /* 蓝色高光条：从底部向上滑出 */
    .turn-page-btn::after {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #60a5fa, transparent);
      border-radius: 2px;
      transform: translateY(6px);
      opacity: 0;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.45s ease;
      z-index: 3;
      pointer-events: none;
      box-shadow: 0 0 10px rgba(96, 165, 250, 0.7);
    }

    .turn-page-btn:hover::after {
      transform: translateY(0);
      opacity: 1;
    }

    /* ★ 卡牌区域容器z-index：确保高于回合按钮(z-index:1)，低于悬停态(z-index:100) */
    #opponent-hand, #opponent-hand-right,
    #opponent-revealed-cards, #opponent-revealed-cards-right,
    #opponent-dark-cards, #opponent-dark-cards-right,
    #player-hand, #player-hand-right,
    #player-revealed-cards, #player-revealed-cards-right,
    #player-dark-cards, #player-dark-cards-right,
    #player-deck {
      z-index: 10;
    }

    /* 中立区光晕动画 - 外层模糊光晕呼吸 + 亮度脉动 */
    /* ★ 2026-10-3（用户指令：光环呼吸不得让卡牌/槽位半透明）：原 opacity 1↔0.7 呼吸
       会让槽内卡牌跟着变半透明——改为 filter brightness 亮度脉动（不透明，仅明暗）；
       box-shadow 光晕呼吸照旧 */
    @keyframes neutralGlow {
      0%, 100% {
        filter: brightness(1);
        box-shadow:
          0 0 15px 5px rgba(251, 191, 36, 0.5),
          0 0 30px 10px rgba(251, 191, 36, 0.3),
          inset 0 0 15px rgba(251, 191, 36, 0.25);
      }
      50% {
        filter: brightness(1.18);
        box-shadow:
          0 0 25px 8px rgba(255, 215, 0, 0.7),
          0 0 50px 20px rgba(255, 215, 0, 0.5),
          inset 0 0 25px rgba(255, 215, 0, 0.45);
      }
    }

    /* 玻璃/金属风格匹配光晕动画 - box-shadow 第一层作为单道光环 + 外层光晕呼吸 */
    /* ★ 2026-10-3（用户指令）：删除 opacity 1↔0.7 呼吸——金属/玻璃风格 match-glow 作用在
       卡牌本体上，半透明呼吸会让卡牌透出背景。仅保留 box-shadow 光晕呼吸 */
    @keyframes glassMatchGlow {
      0%, 100% {
        box-shadow:
          0 0 0 0.1875rem #FBBF24,
          0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
          0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
          inset 0 0 0.9375rem rgba(251, 191, 36, 0.25);
      }
      50% {
        box-shadow:
          0 0 0 0.25rem #FBBF24,
          0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
          0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
          inset 0 0 1.5625rem rgba(255, 215, 0, 0.45);
      }
    }

    /* 中立区匹配光环 - border 作为光环主体 + 动画控制外层光晕闪烁 */
    /* margin-left: -2px：光环整体向左偏移 2px，消除视觉上向右的错位感 */
    .neutral-aura {
      position: relative !important;
      outline: 3px solid #FBBF24 !important;
      outline-offset: -3px !important;
      /* ★ 2026-10-02 FIX（用户反馈：回放光环无光晕）：实测 neutralGlow 的 box-shadow 分量
         在部分环境 computed 恒为 none（opacity 分量正常）→ 光环只剩细描边。改为基样式直接
         给静态金色光晕，由呼吸动画带动明暗脉动，与对局观感一致。
         ★ 2026-10-3（用户指令：光环呼吸不得让卡牌/槽位半透明）：呼吸分量已由 opacity
         （1↔0.7）改为 filter brightness（1↔1.18）——不透明，仅明暗脉动 */
      box-shadow:
        0 0 18px 6px rgba(251, 191, 36, 0.55),
        0 0 42px 14px rgba(251, 191, 36, 0.30),
        inset 0 0 18px rgba(251, 191, 36, 0.28) !important;
      /* ★ 2026-9-30 FIX：删除强制 border-radius:10px——光环描边改跟随槽位自身圆角
         （经典风格中间槽直角/首末倒角 10px，此前强制全圆导致光环与槽体倒角不贴合） */
      animation: neutralGlow 2s ease-in-out infinite !important;
      cursor: pointer !important;
      z-index: 10 !important;
      margin-left: -2px !important;
      overflow: visible !important;
      border: none !important;
    }

    .neutral-aura:hover, .neutral-aura-hover {
      animation: none !important;
      box-shadow:
        0 0 25px 8px rgba(255, 215, 0, 0.85),
        0 0 50px 20px rgba(255, 215, 0, 0.5),
        inset 0 0 25px rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }
    .neutral-aura.shaking {
      transform: none !important;
    }
    .neutral-aura.shaking:hover {
      transform: none !important;
      animation: none !important;
    }

    /* =========================================================================
       【手牌区卡槽 - 窑洞风】实装（2026-10-7 用户确认的参考图复刻方案）
       手牌整排 = 连体窑洞：容器画弧顶夯土墙（石头/门环为 SVG 背景层，与槽位逐像素
       对位：洞 64×96 + 间隙 8 = 手牌区真实节奏）+ 底部木板地台；
       每槽 = 拱形洞口（金黄拱圈 + 深洞 ::before），卡牌满槽覆盖（inset:-2px）。
       钩子类名沿用 stone-hand-slot（JS 各分配路径零改动）
       ========================================================================= */
    /* —— 容器 = 窑洞立面：弧顶夯土墙（石头装饰 + 门环 SVG；我方/对方/四人右侧通用） —— */
    .game-container.card-style-cartoon #player-hand::before,
    .game-container.card-style-cartoon #opponent-hand::before,
    .game-container.card-style-cartoon #player-hand-right::before,
    .game-container.card-style-cartoon #opponent-hand-right::before {
      content:""; position:absolute; inset:-36px -26px 0 -26px; z-index:0;
      pointer-events:none;
      border: 3px solid #5f4022; border-bottom:none;
      border-radius: 50% 50% 8px 8px / 28px 25px 8px 8px;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 476 132'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0.7' y2='1'%3E%3Cstop offset='0' stop-color='%23f4d8a2'/%3E%3Cstop offset='0.5' stop-color='%23dcb072'/%3E%3Cstop offset='1' stop-color='%23b0803f'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6cf74'/%3E%3Cstop offset='1' stop-color='%23dfa842'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='8' y='14' font-size='9' font-weight='bold' fill='rgba(120,70,25,.85)' font-family='sans-serif'%3EV10-8%3C/text%3E%3Cellipse cx='94' cy='122' rx='11' ry='9.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='91' cy='119' rx='4.5' ry='3' fill='rgba(255,246,215,.7)'/%3E%3Cellipse cx='106' cy='124' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='166' cy='122' rx='11' ry='9.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='163' cy='119' rx='4.5' ry='3' fill='rgba(255,246,215,.7)'/%3E%3Cellipse cx='154' cy='124' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='238' cy='122' rx='11' ry='9.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='235' cy='119' rx='4.5' ry='3' fill='rgba(255,246,215,.7)'/%3E%3Cellipse cx='250' cy='124' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='310' cy='122' rx='11' ry='9.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='307' cy='119' rx='4.5' ry='3' fill='rgba(255,246,215,.7)'/%3E%3Cellipse cx='298' cy='124' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='382' cy='122' rx='11' ry='9.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='379' cy='119' rx='4.5' ry='3' fill='rgba(255,246,215,.7)'/%3E%3Cellipse cx='394' cy='124' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='30' cy='123' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='44' cy='125' rx='5' ry='4' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='55' cy='125' rx='3.5' ry='3' fill='url(%23g)' stroke='%235f4022' stroke-width='1.5'/%3E%3Cellipse cx='446' cy='123' rx='7' ry='5.5' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='432' cy='125' rx='5' ry='4' fill='url(%23g)' stroke='%235f4022' stroke-width='2'/%3E%3Cellipse cx='421' cy='125' rx='3.5' ry='3' fill='url(%23g)' stroke='%235f4022' stroke-width='1.5'/%3E%3C/svg%3E") center bottom / 476px 132px no-repeat,
        repeating-linear-gradient(180deg, rgba(150,95,40,.16) 0 2px, transparent 2px 24px),
        linear-gradient(180deg, #f4ca7a 0%, #e9b75e 40%, #d0963f 100%);
      box-shadow:
        inset 18px 0 24px rgba(120,70,25,.22),
        inset -18px 0 24px rgba(120,70,25,.22),
        inset 0 6px 8px rgba(255,240,200,.22),
        inset 0 -12px 16px rgba(115,65,22,.34);
    }
    .game-container.card-style-cartoon #opponent-hand::before,
    .game-container.card-style-cartoon #opponent-hand-right::before {
      inset:-16px -26px 0 -26px;   /* 对方区顶部仅 16px 空间：放不下门环（需 28px），门环仅我方槽位 ::before；墙面沿用共享 SVG（底部锚定，顶部空域自动裁掉） */
    }
    /* —— 容器 = 底部木板地台 —— */
    .game-container.card-style-cartoon #player-hand::after,
    .game-container.card-style-cartoon #opponent-hand::after,
    .game-container.card-style-cartoon #player-hand-right::after,
    .game-container.card-style-cartoon #opponent-hand-right::after {
      content:""; position:absolute; left:-45px; right:-45px; top:100%; height:15px; z-index:0;
      /* ★ 2026-10-9 修复（用户报：地基遮挡卡牌底部阴影）：z-index 2→0——槽位/卡牌 z1，
         地台原 z2 盖住了卡牌向下延伸的阴影；降为 0 后阴影呈现在地台之上 */
      pointer-events:none;
      border: 2.5px solid #5f4022; border-radius:6px;
      background:
        repeating-linear-gradient(90deg, rgba(95,55,20,.32) 0 2px, transparent 2px 78px),
        repeating-linear-gradient(0deg, rgba(120,75,30,.15) 0 1.5px, transparent 1.5px 8px),
        linear-gradient(180deg, #e4b46c 0%, #c48b44 52%, #96612a 100%);
      box-shadow:
        inset 0 3px 0 rgba(255,228,170,.6),
        inset 0 -4px 6px rgba(90,50,18,.45),
        inset 12px 0 12px rgba(95,55,20,.25),
        inset -12px 0 12px rgba(95,55,20,.25),
        0 5px 7px rgba(50,28,10,.42);
    }
    /* —— 洞口槽位（64×96 卡牌尺寸）：金黄拱圈 + 洞内（SVG 背景层）+ 四向倒角明暗 —— */
    .player-hand-slot.stone-hand-slot,
    .opponent-hand-slot.stone-hand-slot {
      position: relative; z-index: 1; overflow: visible;
      border: 3px solid #5f4022;
      border-radius: 32px 32px 6px 6px / 44px 44px 4px 4px;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 90'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231f1106'/%3E%3Cstop offset='0.5' stop-color='%23150b04'/%3E%3Cstop offset='1' stop-color='%232c1b0c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5,38 A24,33 0 0 1 53,38 L53,82 Q53,85 50,85 L8,85 Q5,85 5,82 Z' fill='url(%23h)' stroke='rgba(255,228,168,.55)' stroke-width='2.5'/%3E%3Cellipse cx='29' cy='28' rx='22' ry='13' fill='rgba(8,4,1,.55)'/%3E%3Cellipse cx='29' cy='83' rx='20' ry='3' fill='rgba(215,165,95,.18)'/%3E%3C/svg%3E") 0 0 / 58px 90px no-repeat,
        linear-gradient(180deg, #f8d47e 0%, #ecbc60 50%, #dda648 100%);
      box-shadow:
        inset 3px 0 4px rgba(255,240,200,.4),
        inset -3px 0 4px rgba(150,90,30,.35),
        inset 0 4px 0 rgba(255,240,200,.6),
        inset 0 -4px 0 rgba(160,95,30,.4),
        0 3px 5px rgba(60,32,10,.32);
    }
    /* —— 拱顶门环（::before，逐字移植预览「参考图复刻.html」的门环参数）——
       预览：环 24×24 top:-10（金边4px，占槽框 -10..+14）+ 门钮 -16..-9；
       游戏（槽位多 3px 边框）换算：top=-18 → 金边占槽框 -10..+14，与预览完全一致 */
    .player-hand-slot.stone-hand-slot::before {
      content:'';
      position:absolute; top:-18px; left:50%; margin-left:-14px; transform-origin:50% 10%;
      width:28px; height:32px;
      pointer-events:none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cdefs%3E%3ClinearGradient id='rg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6cf74'/%3E%3Cstop offset='1' stop-color='%23dfa842'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='17.5' r='12.25' fill='none' stroke='%235f4022' stroke-width='2'/%3E%3Ccircle cx='14' cy='17.5' r='10' fill='none' stroke='url(%23rg)' stroke-width='4'/%3E%3Ccircle cx='14' cy='17.5' r='8.5' fill='none' stroke='rgba(60,32,10,.5)' stroke-width='1.5'/%3E%3Crect x='9' y='4' width='10' height='7' rx='2.5' fill='url(%23rg)' stroke='%235f4022' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 28px 32px no-repeat;
    }
    /* 【有牌槽不隐藏窑洞】（2026-10-8 用户指令：卡通为独立逻辑，卡牌满槽覆盖洞口，
       窑洞样式保持不隐藏——其他风格的抑制逻辑不适用于卡通） */
/* —— 空槽悬停：门环左右晃动（有卡牌时禁用；替换原 '+' 悬停效果）—— */
    .player-hand-slot.stone-hand-slot:not(:has(.card, .card-back, .card-small)):hover::before {
      animation: caveRingSway .9s ease-in-out;
    }
    @keyframes caveRingSway {
      0% { rotate: 0deg; }
      22% { rotate: 9deg; }
      52% { rotate: -7deg; }
      80% { rotate: 3.5deg; }
      100% { rotate: 0deg; }
    }
    /* —— 【手牌空槽悬停·固定散射光 2026-10-9 用户指令】：与明牌区灯光区分——空窑洞悬停时
       阳光从洞口固定散射而入：::after 天光层（洞形圆角）+ conic 扇形散射光锥（自洞顶
       向下张开，中间亮两侧渐隐）+ 洞底固定光斑；门环晃动效果保留（::before 独立）。 —— */
    .player-hand-slot.stone-hand-slot:not(:has(.card, .card-back, .card-small)):hover::after,
    .opponent-hand-slot.stone-hand-slot:not(:has(.card, .card-back, .card-small)):hover::after {
      content: "" !important;
      position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; z-index: -1;
      /* ★ 2026-10-9（用户报：光照遮挡门环）：z-index 1→-1——槽为层叠上下文，
         负 z 层 = 洞背景之上、门环(auto)与卡牌(z1)之下，光照不再盖门环 */
      pointer-events: none;
      border-radius: 24px 24px 4px 4px / 33px 33px 3px 3px;
      background:
        conic-gradient(from 180deg at 50% -8%, transparent 38%, rgba(255,252,228,.5) 45%, rgba(255,253,235,.85) 50%, rgba(255,252,228,.5) 55%, transparent 62%),
        radial-gradient(ellipse 58% 15% at 50% 90%, rgba(255,250,225,.75), transparent 75%),
        linear-gradient(180deg, rgba(245,231,189,.92) 0%, rgba(229,201,146,.75) 45%, rgba(205,164,106,.6) 100%);
    }
    /* =========================================================================
       【明牌区卡槽 - 木构棚屋风】实装（2026-10-9 用户确认的预览定稿方案）
       明牌整排 = 连体木构棚屋：容器画整幅立面（厚坡顶+瓦行明暗+T形脊柱+圆木檐口双梁+
       山墙木格窗+4粗柱+两端栅栏+浅木基座，一整幅 SVG 背景层，与槽位逐像素对位：
       洞 64×96 + 间隙 12（柱位）+ 两端墙 28 = 容器 272，立面 SVG 304×168）；
       每槽 = 圆木分节拱圈大门洞（深洞+洞内台阶+石墩），槽位背景透明透出墙面。
       对方区（顶部仅 16px）同张 SVG 底部对齐裁掉屋顶段 = 矮墙+门洞+台阶。
       旧板凳装饰（草丛/底部厚度条/金圈）在本风格下清除。
       ========================================================================= */
    .game-container.card-style-cartoon #player-revealed-cards,
    .game-container.card-style-cartoon #player-revealed-cards-right,
    .game-container.card-style-cartoon #opponent-revealed-cards,
    .game-container.card-style-cartoon #opponent-revealed-cards-right {
      gap: 12px !important;          /* 覆盖内联 gap:8px：间隙 12 = 立柱位 */
      padding: 0 28px !important;    /* 两端墙 28，立面 SVG 对位基准 */
    }
    /* —— 位置补偿（2026-10-9 用户报偏移）：两端墙 padding 28 使槽位整体左移，
       右移 28px 让门洞槽区回到原屏幕位置（主容器 right 定位 / 四人右容器 left 定位分开补偿） —— */
    .game-container.card-style-cartoon #player-revealed-cards,
    .game-container.card-style-cartoon #opponent-revealed-cards {
      right: calc(12% + 92px) !important;      /* 120px - 28px 补偿 */
    }
    .game-container.card-style-cartoon #player-revealed-cards-right,
    .game-container.card-style-cartoon #opponent-revealed-cards-right {
      left: calc(50% + 576px) !important;      /* 604px - 28px 补偿 */
    }
    /* —— 容器 = 棚屋立面（我方含屋顶；对方顶部裁成矮墙） —— */
    .game-container.card-style-cartoon #player-revealed-cards::before,
    .game-container.card-style-cartoon #player-revealed-cards-right::before,
    .game-container.card-style-cartoon #opponent-revealed-cards::before,
    .game-container.card-style-cartoon #opponent-revealed-cards-right::before {
      content:""; position:absolute; left:-16px; right:-16px; top:-62px; bottom:-10px; z-index:0;
      pointer-events:none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -8 304 168'%3E%3Cdefs%3E%3ClinearGradient id='rf' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b0793f'/%3E%3Cstop offset='1' stop-color='%238a5a2c'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2d494'/%3E%3Cstop offset='0.6' stop-color='%23e8c078'/%3E%3Cstop offset='1' stop-color='%23d5a75c'/%3E%3C/linearGradient%3E%3ClinearGradient id='wd' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a9713b'/%3E%3Cstop offset='1' stop-color='%23845527'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M152,2 L298,46 L6,46 Z' fill='url(%23rf)' stroke='%235f4022' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cg stroke='rgba(255,235,190,.35)' stroke-width='3.5'%3E%3Cpath d='M150.99,5.35 L16.2,46 M153.01,5.35 L287.8,46'/%3E%3C/g%3E%3Cpath d='M152,14 L280,46 L24,46 Z' fill='url(%23pl)'/%3E%3Cpath d='M152,14 L24,46 L24,49.5 L152,17.5 Z M152,14 L280,46 L280,49.5 L152,17.5 Z' fill='rgba(95,64,34,.3)'/%3E%3Cg stroke='rgba(255,235,190,.55)' stroke-width='1.5'%3E%3Cpath d='M151.28,4.39 L13.3,46 M152.72,4.39 L290.7,46 M150.13,8.22 L24.6,46 M153.87,8.22 L279.4,46'/%3E%3C/g%3E%3Cg stroke='rgba(95,64,34,.45)' stroke-width='1.5'%3E%3Cpath d='M150.7,6.31 L19,46 M153.3,6.31 L285,46 M149.55,10.13 L30.3,46 M154.45,10.13 L273.7,46'/%3E%3C/g%3E%3Cg stroke='rgba(95,64,34,.5)' stroke-width='2'%3E%3Cpath d='M115.5,13 L115.5,23.1 M79,24 L79,32.3 M42.5,35.5 L42.5,41.4 M188.5,13 L188.5,23.1 M225,24 L225,32.3 M261.5,35.5 L261.5,41.4'/%3E%3C/g%3E%3Crect x='141.5' y='26' width='25' height='16.5' rx='2.5' fill='rgba(95,64,34,.3)'/%3E%3Crect x='139' y='24' width='24' height='16' rx='2' fill='%23c99558' stroke='%235f4022' stroke-width='1.5'/%3E%3Cpath d='M140.5,25.2 L161.5,25.2' stroke='rgba(255,240,200,.5)' stroke-width='1.2'/%3E%3Crect x='142' y='27' width='18' height='10' rx='1' fill='%234a2e14'/%3E%3Crect x='150' y='27' width='2' height='10' fill='%23cf9d5c'/%3E%3Crect x='142' y='31' width='18' height='2' fill='%23cf9d5c'/%3E%3Cpath d='M143,36.2 L159,36.2' stroke='rgba(255,220,160,.25)' stroke-width='1'/%3E%3Crect x='148' y='4' width='8' height='12' rx='3' fill='url(%23wd)' stroke='%235f4022' stroke-width='1.5'/%3E%3Cpath d='M149.5,6 L149.5,13' stroke='rgba(255,235,190,.45)' stroke-width='1.2'/%3E%3Crect x='144' y='-2' width='16' height='8' rx='4' fill='url(%23wd)' stroke='%235f4022' stroke-width='1.5'/%3E%3Cpath d='M146,0 L158,0' stroke='rgba(255,235,190,.5)' stroke-width='1.5'/%3E%3Crect x='2' y='46' width='300' height='10' rx='4' fill='url(%23wd)' stroke='%235f4022' stroke-width='1.5'/%3E%3Crect x='8' y='47.5' width='288' height='2' rx='1' fill='rgba(255,235,190,.35)'/%3E%3Crect x='20' y='56' width='264' height='94' fill='url(%23pl)' stroke='%235f4022' stroke-width='1.5'/%3E%3Ctext x='36' y='158.5' font-size='8' font-weight='bold' fill='rgba(120,70,25,.8)' font-family='sans-serif'%3EV10-9%3C/text%3E%3Cg stroke='%235f4022' stroke-width='1.5'%3E%3Crect x='20' y='56' width='12' height='94' fill='url(%23wd)'/%3E%3Crect x='108' y='56' width='12' height='94' fill='url(%23wd)'/%3E%3Crect x='184' y='56' width='12' height='94' fill='url(%23wd)'/%3E%3Crect x='272' y='56' width='12' height='94' fill='url(%23wd)'/%3E%3C/g%3E%3Crect x='4' y='56' width='296' height='3' rx='1.5' fill='%238a5a2c' stroke='%235f4022' stroke-width='1'/%3E%3Crect x='6' y='59' width='292' height='2' rx='1' fill='rgba(95,64,34,.28)'/%3E%3Ccircle cx='70' cy='88' r='2' fill='rgba(255,240,200,.55)'/%3E%3Ccircle cx='238' cy='82' r='2.2' fill='rgba(255,240,200,.5)'/%3E%3Cg stroke='%235f4022' stroke-width='1.5'%3E%3Crect x='3' y='124' width='4' height='24' fill='url(%23wd)'/%3E%3Crect x='11' y='122' width='4' height='26' fill='url(%23wd)'/%3E%3Crect x='19' y='124' width='4' height='24' fill='url(%23wd)'/%3E%3Crect x='27' y='122' width='4' height='26' fill='url(%23wd)'/%3E%3Crect x='1' y='131' width='32' height='4' fill='url(%23wd)'/%3E%3Crect x='1' y='141' width='32' height='4' fill='url(%23wd)'/%3E%3Crect x='273' y='124' width='4' height='24' fill='url(%23wd)'/%3E%3Crect x='281' y='122' width='4' height='26' fill='url(%23wd)'/%3E%3Crect x='289' y='124' width='4' height='24' fill='url(%23wd)'/%3E%3Crect x='297' y='122' width='4' height='26' fill='url(%23wd)'/%3E%3Crect x='271' y='131' width='32' height='4' fill='url(%23wd)'/%3E%3Crect x='271' y='141' width='32' height='4' fill='url(%23wd)'/%3E%3C/g%3E%3Crect x='4' y='150' width='296' height='10' rx='4' fill='%23e8c078' stroke='%235f4022' stroke-width='1.5'/%3E%3Cpath d='M76,151 L76,159 M152,151 L152,159 M228,151 L228,159' stroke='%23b08a4a' stroke-width='1.5'/%3E%3C/svg%3E") center bottom / 304px 168px no-repeat;
    }
    .game-container.card-style-cartoon #opponent-revealed-cards::before,
    .game-container.card-style-cartoon #opponent-revealed-cards-right::before {
      top:-8px;   /* 盒高 114 = SVG 显示 168 底对齐 → 裁顶 54px：可见起点=檐口梁顶(y46)，屋顶残段全裁 */
    }
    /* —— 槽位 = 大门洞（透明背景透出墙面；去边框/金圈/板凳面） —— */
    .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot,
    .game-container.card-style-cartoon #player-revealed-cards-right .player-revealed-slot,
    .game-container.card-style-cartoon #opponent-revealed-cards .opponent-revealed-slot,
    .game-container.card-style-cartoon #opponent-revealed-cards-right .opponent-revealed-slot {
      position: relative; z-index: 1; overflow: visible;
      width: 64px !important; height: 96px !important; padding: 0 !important;
      min-width: 0 !important; box-sizing: border-box !important;
      border: none !important; border-radius: 0 !important;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23150a04'/%3E%3Cstop offset='0.55' stop-color='%23241305'/%3E%3Cstop offset='1' stop-color='%236f4a28'/%3E%3C/linearGradient%3E%3ClinearGradient id='av' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e7bc7e'/%3E%3Cstop offset='1' stop-color='%23a9713b'/%3E%3C/linearGradient%3E%3ClinearGradient id='st2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8d9b0'/%3E%3Cstop offset='1' stop-color='%23c9b088'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7,42 A25,25 0 0 1 57,42 L57,80 L7,80 Z' fill='url(%23h)'/%3E%3Cellipse cx='32' cy='77' rx='19' ry='4.5' fill='rgba(214,164,96,.4)'/%3E%3Cpath d='M1,80 L1,42 A31,31 0 0 1 63,42 L63,80 L57,80 L57,42 A25,25 0 0 0 7,42 L7,80 Z' fill-rule='evenodd' fill='url(%23av)' stroke='%235f4022' stroke-width='2'/%3E%3Cg stroke='rgba(95,64,34,.75)' stroke-width='2'%3E%3Cpath d='M23.45,18.51 L21.4,12.87 M12.85,25.93 L8.25,22.08 M7.38,37.66 L1.46,36.62 M40.55,18.51 L42.6,12.87 M51.15,25.93 L55.75,22.08 M56.62,37.66 L62.54,36.62 M1,54 L7,54 M1,69 L7,69 M57,54 L63,54 M57,69 L63,69'/%3E%3C/g%3E%3Crect x='2' y='80' width='60' height='8' rx='2' fill='url(%23st2)' stroke='%235f4022' stroke-width='1.2'/%3E%3Cpath d='M4,81.2 L60,81.2' stroke='rgba(255,250,230,.55)' stroke-width='1.2'/%3E%3Cpath d='M22,80.5 L22,88 M42,80.5 L42,88' stroke='rgba(95,64,34,.45)' stroke-width='1.5'/%3E%3Crect x='0' y='88' width='64' height='8' rx='2' fill='url(%23st2)' stroke='%235f4022' stroke-width='1.2'/%3E%3Cpath d='M3,89.2 L61,89.2' stroke='rgba(255,250,230,.5)' stroke-width='1.2'/%3E%3Cpath d='M16,89 L16,96 M32,89 L32,96 M48,89 L48,96' stroke='rgba(95,64,34,.45)' stroke-width='1.5'/%3E%3Crect x='0' y='68' width='7' height='12' rx='2' fill='%23cfc4a8' stroke='%235f4022' stroke-width='1.2'/%3E%3Crect x='57' y='68' width='7' height='12' rx='2' fill='%23cfc4a8' stroke='%235f4022' stroke-width='1.2'/%3E%3Crect x='1' y='69' width='5' height='3' rx='1.5' fill='rgba(255,255,245,.5)'/%3E%3Crect x='58' y='69' width='5' height='3' rx='1.5' fill='rgba(255,255,245,.5)'/%3E%3C/svg%3E") 0 0 / 64px 96px no-repeat !important;
      box-shadow: none !important;
    }
    /* —— 旧板凳装饰清除：草丛（even ::before）/ 底部厚度条（::after） —— */
    .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot:nth-child(even)::before,
    .game-container.card-style-cartoon #player-revealed-cards-right .player-revealed-slot:nth-child(even)::before {
      content: none !important;
    }
    .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot::after,
    .game-container.card-style-cartoon #player-revealed-cards-right .player-revealed-slot::after,
    .game-container.card-style-cartoon #opponent-revealed-cards .opponent-revealed-slot::after,
    .game-container.card-style-cartoon #opponent-revealed-cards-right .opponent-revealed-slot::after {
      content: none !important;
    }
    /* —— 【卡通风格·明牌槽新悬停 2026-10-9 用户指令】：删除旧悬停后，空槽悬停 = 大门内开灯：
       悬停时槽背景整体替换为"开灯版洞 SVG"（洞内暖黄灯光渐变：顶暗底亮+中心灯芯亮点），
       洞外泛光用 box-shadow + lampOn 点亮动画（一次回闪模拟灯管启辉）；有牌槽不触发。 —— */
    .game-container.card-style-cartoon #player-revealed-cards .player-revealed-slot:not(:has(.card, .card-back, .card-small)):hover,
    .game-container.card-style-cartoon #player-revealed-cards-right .player-revealed-slot:not(:has(.card, .card-back, .card-small)):hover,
    .game-container.card-style-cartoon #opponent-revealed-cards .opponent-revealed-slot:not(:has(.card, .card-back, .card-small)):hover,
    .game-container.card-style-cartoon #opponent-revealed-cards-right .opponent-revealed-slot:not(:has(.card, .card-back, .card-small)):hover {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96'%3E%3Cdefs%3E%3ClinearGradient id='lp' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23241105'/%3E%3Cstop offset='0.3' stop-color='%2355300f'/%3E%3Cstop offset='0.55' stop-color='%23a86a20'/%3E%3Cstop offset='0.78' stop-color='%23e8a84e'/%3E%3Cstop offset='1' stop-color='%23ffd98a'/%3E%3C/linearGradient%3E%3ClinearGradient id='av' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e7bc7e'/%3E%3Cstop offset='1' stop-color='%23a9713b'/%3E%3C/linearGradient%3E%3ClinearGradient id='st2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8d9b0'/%3E%3Cstop offset='1' stop-color='%23c9b088'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7,42 A25,25 0 0 1 57,42 L57,80 L7,80 Z' fill='url(%23lp)'/%3E%3Cellipse cx='32' cy='32' rx='17' ry='11' fill='rgba(0,0,0,.45)'/%3E%3Cellipse cx='32' cy='62' rx='9' ry='6' fill='rgba(255,244,200,.75)'/%3E%3Cellipse cx='32' cy='77' rx='19' ry='4.5' fill='rgba(255,225,150,.55)'/%3E%3Cpath d='M1,80 L1,42 A31,31 0 0 1 63,42 L63,80 L57,80 L57,42 A25,25 0 0 0 7,42 L7,80 Z' fill-rule='evenodd' fill='url(%23av)' stroke='%235f4022' stroke-width='2'/%3E%3Cg stroke='rgba(95,64,34,.75)' stroke-width='2'%3E%3Cpath d='M23.45,18.51 L21.4,12.87 M12.85,25.93 L8.25,22.08 M7.38,37.66 L1.46,36.62 M40.55,18.51 L42.6,12.87 M51.15,25.93 L55.75,22.08 M56.62,37.66 L62.54,36.62 M1,54 L7,54 M1,69 L7,69 M57,54 L63,54 M57,69 L63,69'/%3E%3C/g%3E%3Crect x='2' y='80' width='60' height='8' rx='2' fill='url(%23st2)' stroke='%235f4022' stroke-width='1.2'/%3E%3Cpath d='M4,81.2 L60,81.2' stroke='rgba(255,250,230,.55)' stroke-width='1.2'/%3E%3Cpath d='M22,80.5 L22,88 M42,80.5 L42,88' stroke='rgba(95,64,34,.45)' stroke-width='1.5'/%3E%3Crect x='0' y='88' width='64' height='8' rx='2' fill='url(%23st2)' stroke='%235f4022' stroke-width='1.2'/%3E%3Cpath d='M3,89.2 L61,89.2' stroke='rgba(255,250,230,.5)' stroke-width='1.2'/%3E%3Cpath d='M16,89 L16,96 M32,89 L32,96 M48,89 L48,96' stroke='rgba(95,64,34,.45)' stroke-width='1.5'/%3E%3Crect x='0' y='68' width='7' height='12' rx='2' fill='%23cfc4a8' stroke='%235f4022' stroke-width='1.2'/%3E%3Crect x='57' y='68' width='7' height='12' rx='2' fill='%23cfc4a8' stroke='%235f4022' stroke-width='1.2'/%3E%3Crect x='1' y='69' width='5' height='3' rx='1.5' fill='rgba(255,255,245,.5)'/%3E%3Crect x='58' y='69' width='5' height='3' rx='1.5' fill='rgba(255,255,245,.5)'/%3E%3C/svg%3E") 0 0 / 64px 96px no-repeat !important;
      box-shadow: 0 0 24px 6px rgba(255,200,100,.4) !important;
      animation: lampOn .45s ease-out;
    }
    @keyframes lampOn {
      0% { opacity: .35; } 100% { opacity: 1; }
    }

    /* —— 【卡通风格·暗牌空槽悬停 2026-10-11 用户指令】：空槽悬停 = 门内点烛、逐渐光亮：
       槽背景替换为"烛光版"洞内 SVG（几何对齐立面 gateB 内洞：中心x32、起拱y44、r17）。
       ★ 2026-10-11 用户三处修正：①矩形 box-shadow 泛光沿 64×96 盒轮廓散开、看起来像
         卡槽隐藏边框复现 → 删除，改用 filter: drop-shadow（跟随拱洞 alpha 形状发光）；
       ②门洞底部 y84-91（槽内）是立面 gateB 的木门槛（fill #a5793f，SVG 内重绘同色同位）——
         洞内渐变只铺到 y84，蜡烛立在木板之上；③删除洞顶黑影 ellipse。
       candleOn 动画 0.6s ease-in 整体从暗到亮（蜡烛点燃感）；有牌槽不触发。 —— */
    .game-container.card-style-cartoon #player-dark-cards .player-dark-slot.stone-dark-slot:not(:has(.card, .card-back, .card-small)):hover,
    .game-container.card-style-cartoon #opponent-dark-cards .opponent-dark-slot.stone-dark-slot:not(:has(.card, .card-back, .card-small)):hover {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96'%3E%3Cdefs%3E%3ClinearGradient id='cdl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23241105'/%3E%3Cstop offset='0.35' stop-color='%2355300f'/%3E%3Cstop offset='0.6' stop-color='%23a86a20'/%3E%3Cstop offset='0.82' stop-color='%23e8a84e'/%3E%3Cstop offset='1' stop-color='%23ffd98a'/%3E%3C/linearGradient%3E%3CradialGradient id='flm' cx='0.5' cy='0.5' r='0.5'%3E%3Cstop offset='0' stop-color='%23fff6d8' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23fff6d8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M15,44 A17,17 0 0 1 49,44 L49,84 L15,84 Z' fill='url(%23cdl)'/%3E%3Cpath d='M15,84 L49,84 L49,91 L15,91 Z' fill='%23a5793f'/%3E%3Cpath d='M15,84.8 L49,84.8' stroke='rgba(255,220,160,0.35)' stroke-width='1.5'/%3E%3Cellipse cx='32' cy='82' rx='13' ry='4' fill='url(%23flm)' opacity='0.7'/%3E%3Cellipse cx='32' cy='70' rx='10' ry='12' fill='url(%23flm)' opacity='0.85'/%3E%3Crect x='29.5' y='74' width='5' height='10' rx='1.5' fill='%23f2e3c2' stroke='%23a8794a' stroke-width='0.8'/%3E%3Cellipse cx='32' cy='70' rx='3' ry='5.5' fill='%23ffcf5e'/%3E%3Cellipse cx='32' cy='71' rx='1.5' ry='3' fill='%23fff8dc'/%3E%3Cpath d='M15,44 A17,17 0 0 1 49,44 L49,84 L15,84 Z' fill='none' stroke='rgba(255,200,110,0.35)' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 64px 96px no-repeat !important;
      box-shadow: none !important;
      filter: drop-shadow(0 0 10px rgba(255,180,80,.55));
      animation: candleOn .6s ease-in;
    }
    @keyframes candleOn {
      0% { opacity: 0; } 55% { opacity: .65; } 100% { opacity: 1; }
    }

    /* 动态注入的卡牌收进凹槽内 */
    .player-hand-slot.stone-hand-slot > .card,
    .player-hand-slot.stone-hand-slot > .card-small,
    .player-hand-slot.stone-hand-slot > .card-back,
    .opponent-hand-slot.stone-hand-slot > .card,
    .opponent-hand-slot.stone-hand-slot > .card-small,
    .opponent-hand-slot.stone-hand-slot > .card-back {
      /* ★ 2026-10-6 修复①（用户报：卡面未居中整体偏右）：卡通卡面 div 带内联
         position:relative + width/height:100%，内联优先级高于本规则——inset
         被当成 relative 偏移 → 卡面向右下偏、右侧露出石板。加 !important
         强制定位（important 样式表 > 内联普通声明）。
         ★ 2026-10-6 修复②（用户报：发牌后卡牌又窄又小）：原 inset:5px 把卡牌
         缩进槽内 5px（54x86），视觉明显小于其他风格的 64x96。改为 -2px 使卡牌
         铺满整个槽位（恰好盖住 2px 石板边框、与外沿对齐），恢复 64x96 满槽比例。
         ★ 2026-10-9 修复③（用户报：手牌变小）：窑洞槽 border 为 3px（border-box 64x96，
         padding-box 仅 58x90）——inset:-2 相对 padding-box 只外扩 4 → 卡 62x94，
         比槽还小 2x2；且风格切换重建卡牌后发牌动画终帧消失、缩水显形。
         改为 inset:-5px（padding-box 外扩 10 = 覆盖 3px 边框 + 2px 露出）→ 卡 68x100，
         与暗牌/明牌卡（7489 规则，border 已清为 none）尺寸完全一致。 */
      position: absolute !important; inset: -5px !important; width: auto !important; height: auto !important;
      border-radius: 5px; z-index: 1;
    }
    /* 【卡通风格·暗牌/明牌卡尺寸对齐手牌】（2026-10-6 用户指令）：
       手牌卡经 stone 规则外扩为 68×100（覆盖石板框），暗/明牌仍为 64×96=视觉小一圈；
       同款 inset:-2px 外扩使三区卡牌尺寸一致（实测定位：差异仅来自手牌 stone 规则） */
    .game-container.card-style-cartoon .player-dark-slot > .card,
    .game-container.card-style-cartoon .player-dark-slot > .card-back,
    .game-container.card-style-cartoon .player-dark-slot > .card-small,
    .game-container.card-style-cartoon .player-revealed-slot > .card,
    .game-container.card-style-cartoon .player-revealed-slot > .card-back,
    .game-container.card-style-cartoon .player-revealed-slot > .card-small,
    .game-container.card-style-cartoon .opponent-dark-slot > .card,
    .game-container.card-style-cartoon .opponent-dark-slot > .card-back,
    .game-container.card-style-cartoon .opponent-dark-slot > .card-small,
    .game-container.card-style-cartoon .opponent-revealed-slot > .card,
    .game-container.card-style-cartoon .opponent-revealed-slot > .card-back,
    .game-container.card-style-cartoon .opponent-revealed-slot > .card-small {
      position: absolute !important; inset: -2px !important; width: auto !important; height: auto !important;
      z-index: 1;
    }
        /* 洞口自身无上浮悬停（2026-10-8 用户指令：悬停卡牌时窑洞不得消失/门环不得上移）：
       有牌/无牌槽位一律抵消全局 .card-hover 的槽位上浮——卡牌自己的果冻悬停不受影响 */
    .player-hand-slot.stone-hand-slot.card-hover:hover,
    .opponent-hand-slot.stone-hand-slot.card-hover:hover {
      transform: none !important;
      box-shadow:
        inset 3px 0 4px rgba(255,240,200,.4),
        inset -3px 0 4px rgba(150,90,30,.35),
        inset 0 4px 0 rgba(255,240,200,.6),
        inset 0 -4px 0 rgba(160,95,30,.4),
        0 3px 5px rgba(60,32,10,.32) !important;
    }
    /* 匹配光环兼容：石板手牌槽内的 match-glow / neutral-aura 效果沿用金属风格 */
    .player-hand-slot.stone-hand-slot .match-glow,
    .opponent-hand-slot.stone-hand-slot .match-glow {
      position: relative !important;
      outline: none !important;
      border-radius: 0.625rem !important;
      box-shadow:
        0 0 0 0.1875rem #FBBF24,
        0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
        0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
        inset 0 0 0.9375rem rgba(251, 191, 36, 0.25) !important;
      cursor: pointer !important;
      z-index: 10 !important;
      overflow: visible !important;
      animation: glassMatchGlow 2s ease-in-out infinite !important;
      border: none !important;
      transition: none !important;
    }
    .player-hand-slot.stone-hand-slot .match-glow:hover, .player-hand-slot.stone-hand-slot .match-glow-hover,
    .opponent-hand-slot.stone-hand-slot .match-glow:hover, .opponent-hand-slot.stone-hand-slot .match-glow-hover {
      animation: none !important;
      box-shadow:
        0 0 0 0.25rem #FBBF24,
        0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
        0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
        inset 0 0 1.5625rem rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }
    .player-hand-slot.stone-hand-slot .neutral-aura,
    .opponent-hand-slot.stone-hand-slot .neutral-aura {
      position: relative !important;
      outline: 3px solid #FBBF24 !important;
      outline-offset: -3px !important;
      animation: neutralGlow 2s ease-in-out infinite !important;
      cursor: pointer !important;
      z-index: 10 !important;
      margin-left: -2px !important;
      overflow: visible !important;
    }
    .player-hand-slot.stone-hand-slot .neutral-aura.shaking,
    .opponent-hand-slot.stone-hand-slot .neutral-aura.shaking {
      transform: none !important;
    }

    /* =========================================================================
       【金属风格匹配光环】- 参考经典风格（单层）
       ========================================================================= */
    .metal-hand-slot .match-glow,
    .metal-dark-slot .match-glow,
    .metal-revealed-slot .match-glow,
    .opponent-metal-hand-slot .match-glow,
    .player-road-slot-metal .match-glow,
    .opponent-road-slot-metal .match-glow {
      position: relative !important;
      outline: none !important;
      border-radius: 0.625rem !important;
      box-shadow:
        0 0 0 0.1875rem #FBBF24,
        0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
        0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
        inset 0 0 0.9375rem rgba(251, 191, 36, 0.25) !important;
      cursor: pointer !important;
      z-index: 10 !important;
      overflow: visible !important;
      animation: glassMatchGlow 2s ease-in-out infinite !important;
      border: none !important;
      transition: none !important;
    }

    .metal-hand-slot .match-glow:hover, .metal-hand-slot .match-glow-hover,
    .metal-dark-slot .match-glow:hover, .metal-dark-slot .match-glow-hover,
    .metal-revealed-slot .match-glow:hover, .metal-revealed-slot .match-glow-hover,
    .opponent-metal-hand-slot .match-glow:hover, .opponent-metal-hand-slot .match-glow-hover,
    .player-road-slot-metal .match-glow:hover, .player-road-slot-metal .match-glow-hover,
    .opponent-road-slot-metal .match-glow:hover, .opponent-road-slot-metal .match-glow-hover {
      animation: none !important;
      box-shadow:
        0 0 0 0.25rem #FBBF24,
        0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
        0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
        inset 0 0 1.5625rem rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }

    .metal-hand-slot .neutral-aura,
    .metal-dark-slot .neutral-aura,
    .metal-revealed-slot .neutral-aura,
    .opponent-metal-hand-slot .neutral-aura,
    .player-neutral-slot-metal.neutral-aura,
    .opponent-neutral-slot-metal.neutral-aura {
      position: relative !important;
      outline: 3px solid #FBBF24 !important;
      outline-offset: -3px !important;
      /* ★ 2026-9-30 FIX：删除强制 border-radius，跟随槽位自身圆角 */
      animation: neutralGlow 2s ease-in-out infinite !important;
      cursor: pointer !important;
      z-index: 10 !important;
      margin-left: -2px !important;
      overflow: visible !important;
    }

    .metal-hand-slot .neutral-aura:hover, .metal-hand-slot .neutral-aura-hover,
    .metal-dark-slot .neutral-aura:hover, .metal-dark-slot .neutral-aura-hover,
    .metal-revealed-slot .neutral-aura:hover, .metal-revealed-slot .neutral-aura-hover,
    .opponent-metal-hand-slot .neutral-aura:hover, .opponent-metal-hand-slot .neutral-aura-hover,
    .player-neutral-slot-metal.neutral-aura:hover, .player-neutral-slot-metal.neutral-aura-hover,
    .opponent-neutral-slot-metal.neutral-aura:hover, .opponent-neutral-slot-metal.neutral-aura-hover {
      animation: none !important;
      box-shadow:
        0 0 25px 8px rgba(255, 215, 0, 0.85),
        0 0 50px 20px rgba(255, 215, 0, 0.5),
        inset 0 0 25px rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }
    .metal-hand-slot .neutral-aura.shaking,
    .metal-dark-slot .neutral-aura.shaking,
    .metal-revealed-slot .neutral-aura.shaking,
    .opponent-metal-hand-slot .neutral-aura.shaking,
    .player-neutral-slot-metal.neutral-aura.shaking,
    .opponent-neutral-slot-metal.neutral-aura.shaking {
      transform: none !important;
    }
    .metal-hand-slot .neutral-aura.shaking:hover,
    .metal-dark-slot .neutral-aura.shaking:hover,
    .metal-revealed-slot .neutral-aura.shaking:hover,
    .opponent-metal-hand-slot .neutral-aura.shaking:hover,
    .player-neutral-slot-metal.neutral-aura.shaking:hover,
    .opponent-neutral-slot-metal.neutral-aura.shaking:hover {
      transform: none !important;
      animation: none !important;
    }

    /* =========================================================================
       【玻璃风格匹配光环】- 参考经典风格（单层）
       ========================================================================= */
    .glass-hand-slot .match-glow,
    .glass-dark-slot .match-glow,
    .glass-revealed-slot .match-glow,
    .opponent-glass-hand-slot .match-glow,
    .player-road-slot-glass .match-glow,
    .opponent-road-slot-glass .match-glow {
      position: relative !important;
      outline: none !important;
      border-radius: 0.625rem !important;
      box-shadow:
        0 0 0 0.1875rem #FBBF24,
        0 0 0.9375rem 0.3125rem rgba(251, 191, 36, 0.5),
        0 0 1.875rem 0.625rem rgba(251, 191, 36, 0.3),
        inset 0 0 0.9375rem rgba(251, 191, 36, 0.25) !important;
      cursor: pointer !important;
      z-index: 10 !important;
      overflow: visible !important;
      animation: glassMatchGlow 2s ease-in-out infinite !important;
      border: none !important;
      transition: none !important;
    }

    .glass-hand-slot .match-glow:hover, .glass-hand-slot .match-glow-hover,
    .glass-dark-slot .match-glow:hover, .glass-dark-slot .match-glow-hover,
    .glass-revealed-slot .match-glow:hover, .glass-revealed-slot .match-glow-hover,
    .opponent-glass-hand-slot .match-glow:hover, .opponent-glass-hand-slot .match-glow-hover,
    .player-road-slot-glass .match-glow:hover, .player-road-slot-glass .match-glow-hover,
    .opponent-road-slot-glass .match-glow:hover, .opponent-road-slot-glass .match-glow-hover {
      animation: none !important;
      box-shadow:
        0 0 0 0.25rem #FBBF24,
        0 0 1.5625rem 0.5rem rgba(255, 215, 0, 0.85),
        0 0 3.125rem 1.25rem rgba(255, 215, 0, 0.5),
        inset 0 0 1.5625rem rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }

    .glass-hand-slot .neutral-aura,
    .glass-dark-slot .neutral-aura,
    .glass-revealed-slot .neutral-aura,
    .opponent-glass-hand-slot .neutral-aura,
    .player-neutral-slot-glass.neutral-aura,
    .opponent-neutral-slot-glass.neutral-aura {
      position: relative !important;
      outline: 3px solid #FBBF24 !important;
      outline-offset: -3px !important;
      /* ★ 2026-9-30 FIX：删除强制 border-radius，跟随槽位自身圆角 */
      animation: neutralGlow 2s ease-in-out infinite !important;
      cursor: pointer !important;
      z-index: 10 !important;
      margin-left: -2px !important;
      overflow: visible !important;
      border: none !important;
    }

    .glass-hand-slot .neutral-aura:hover, .glass-hand-slot .neutral-aura-hover,
    .glass-dark-slot .neutral-aura:hover, .glass-dark-slot .neutral-aura-hover,
    .glass-revealed-slot .neutral-aura:hover, .glass-revealed-slot .neutral-aura-hover,
    .opponent-glass-hand-slot .neutral-aura:hover, .opponent-glass-hand-slot .neutral-aura-hover,
    .player-neutral-slot-glass.neutral-aura:hover, .player-neutral-slot-glass.neutral-aura-hover,
    .opponent-neutral-slot-glass.neutral-aura:hover, .opponent-neutral-slot-glass.neutral-aura-hover {
      animation: none !important;
      box-shadow:
        0 0 25px 8px rgba(255, 215, 0, 0.85),
        0 0 50px 20px rgba(255, 215, 0, 0.5),
        inset 0 0 25px rgba(255, 215, 0, 0.45) !important;
      transform: scale(1.05);
      overflow: visible !important;
    }
    .glass-hand-slot .neutral-aura.shaking,
    .glass-dark-slot .neutral-aura.shaking,
    .glass-revealed-slot .neutral-aura.shaking,
    .opponent-glass-hand-slot .neutral-aura.shaking,
    .player-neutral-slot-glass.neutral-aura.shaking,
    .opponent-neutral-slot-glass.neutral-aura.shaking {
      transform: none !important;
    }
    .glass-hand-slot .neutral-aura.shaking:hover,
    .glass-dark-slot .neutral-aura.shaking:hover,
    .glass-revealed-slot .neutral-aura.shaking:hover,
    .opponent-glass-hand-slot .neutral-aura.shaking:hover,
    .player-neutral-slot-glass.neutral-aura.shaking:hover,
    .opponent-neutral-slot-glass.neutral-aura.shaking:hover {
      transform: none !important;
      animation: none !important;
    }

    /* =========================================================================
       【核心模块流程图 - 交互样式】
       流程图节点悬停: 放大 + 增强阴影 + 平滑过渡
       流程图面板: 可滚动 + 响应式布局
       ========================================================================= */
    .flow-node {
      transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
      cursor: default;
    }

    .flow-node:hover {
      transform: scale(1.05) translateY(-2px);
      filter: brightness(1.1);
    }

    .flowchart-section {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .flowchart-section:hover {
      transform: translateY(-3px);
    }

    #flowchart-panel {
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #475569 #1e293b;
    }

    #flowchart-panel::-webkit-scrollbar {
      width: 10px;
    }

    #flowchart-panel::-webkit-scrollbar-track {
      background: #1e293b;
      border-radius: 5px;
    }

    #flowchart-panel::-webkit-scrollbar-thumb {
      background: #475569;
      border-radius: 5px;
    }

    #flowchart-panel::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }

    #settings-panel {
      scrollbar-width: thin;
      scrollbar-color: #475569 #1e293b;
    }

    #settings-panel::-webkit-scrollbar {
      width: 10px;
    }

    #settings-panel::-webkit-scrollbar-track {
      background: #1e293b;
      border-radius: 5px;
    }

    #settings-panel::-webkit-scrollbar-thumb {
      background: #475569;
      border-radius: 5px;
    }

    #settings-panel::-webkit-scrollbar-thumb:hover {
      background: #64748b;
    }

    /* 元素设置按钮选中状态 */
    .bg-setting-btn.active {
      border-color: #fbbf24 !important;
      box-shadow: 0 0 0.5rem rgba(251, 191, 36, 0.4) !important;
      color: #fbbf24 !important;
    }

    /* 元素按钮三态样式 */
    .bg-anim-btn.active {
      border-color: #22d3ee !important;
      background: linear-gradient(145deg, #0e7490 0%, #0891b2 100%) !important;
      color: #fff !important;
      box-shadow: 0 0 0.4rem rgba(34, 211, 238, 0.4) !important;
    }
    .bg-anim-btn.off {
      border-color: #ef4444 !important;
      background: #7f1d1d !important;
      color: #fca5a5 !important;
    }

    /* 背景按钮选中状态 */
    .bg-image-btn.active {
      border-color: #a78bfa !important;
      background: linear-gradient(145deg, #5b21b6 0%, #6d28d9 100%) !important;
      color: #fff !important;
      box-shadow: 0 0 0.4rem rgba(167, 139, 250, 0.4) !important;
    }

    /* 动画暂停：关闭背景动态时，冻结CSS动画和SVG动画 */
    .game-container.bg-anim-off::before,
    .game-container.bg-anim-off::after {
      animation-play-state: paused !important;
    }

    /* =========================================================================
       【玻璃风格功能牌区 - 凹陷效果】
       有牌时不显示边框（.slot-has-card）
       ========================================================================= */
    .glass-hand-slot {
      background: linear-gradient(180deg, rgba(160, 220, 255, 0.25) 0%, rgba(80, 160, 245, 0.15) 50%, rgba(60, 140, 230, 0.2) 100%) !important;
      border: 4px solid rgba(255, 255, 255, 0.95) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(200, 220, 255, 0.9), 0 0 6px rgba(180, 200, 240, 0.6), 0 0 50px rgba(120, 200, 255, 0.6), inset 0 4px 10px rgba(0, 40, 100, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(0, 40, 100, 0.6), inset -3px 0 8px rgba(0, 40, 100, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .glass-hand-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(0, 40, 100, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(0, 40, 100, 0.6), inset -3px 0 8px rgba(0, 40, 100, 0.6) !important;
    }
    .glass-hand-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(230,245,255,0.3) 40%, rgba(200,225,255,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .glass-hand-slot::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.18) 15%, rgba(150,180,230,0.08) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(50,80,150,0.06) 85%, rgba(255,255,255,0.2) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }

    .glass-dark-slot {
      background: linear-gradient(180deg, rgba(80, 110, 160, 0.2) 0%, rgba(50, 80, 130, 0.15) 50%, rgba(60, 90, 140, 0.2) 100%) !important;
      border: 4px solid rgba(180, 210, 240, 0.9) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(160, 190, 220, 0.8), 0 0 6px rgba(140, 170, 200, 0.5), 0 0 30px rgba(100, 160, 220, 0.3), inset 0 4px 10px rgba(0, 20, 60, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.25), inset 3px 0 8px rgba(0, 20, 60, 0.6), inset -3px 0 8px rgba(0, 20, 60, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .glass-dark-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(0, 20, 60, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.25), inset 3px 0 8px rgba(0, 20, 60, 0.6), inset -3px 0 8px rgba(0, 20, 60, 0.6) !important;
    }
    .glass-dark-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 20%, rgba(230,245,255,0.15) 40%, rgba(200,225,255,0.08) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }

    .glass-revealed-slot {
      background: linear-gradient(180deg, rgba(255, 230, 160, 0.25) 0%, rgba(255, 190, 100, 0.15) 50%, rgba(240, 160, 70, 0.2) 100%) !important;
      border: 4px solid rgba(255, 255, 240, 0.95) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(255, 240, 200, 0.9), 0 0 6px rgba(255, 220, 160, 0.6), 0 0 50px rgba(255, 200, 120, 0.6), inset 0 4px 10px rgba(120, 60, 0, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(120, 60, 0, 0.6), inset -3px 0 8px rgba(120, 60, 0, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .glass-revealed-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(120, 60, 0, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(120, 60, 0, 0.6), inset -3px 0 8px rgba(120, 60, 0, 0.6) !important;
    }
    .glass-revealed-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(255,245,200,0.3) 40%, rgba(255,230,150,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .glass-revealed-slot::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(255,240,200,0.18) 15%, rgba(255,220,150,0.08) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(150,100,50,0.06) 85%, rgba(255,255,255,0.2) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }

    .opponent-glass-hand-slot {
      background: linear-gradient(180deg, rgba(255, 140, 140, 0.8) 0%, rgba(240, 100, 100, 0.7) 50%, rgba(220, 80, 80, 0.75) 100%) !important;
      border: 4px solid rgba(255, 240, 240, 0.95) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(255, 200, 200, 0.9), 0 0 6px rgba(255, 160, 160, 0.6), 0 0 50px rgba(255, 150, 150, 0.6), inset 0 4px 10px rgba(140, 20, 20, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(140, 20, 20, 0.6), inset -3px 0 8px rgba(140, 20, 20, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .opponent-glass-hand-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(255,220,220,0.3) 40%, rgba(255,180,180,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .opponent-glass-hand-slot::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.35) 0%, rgba(255,180,180,0.15) 15%, rgba(255,120,120,0.06) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(150,50,50,0.06) 85%, rgba(255,255,255,0.15) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }
    .opponent-glass-hand-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(140, 20, 20, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(140, 20, 20, 0.6), inset -3px 0 8px rgba(140, 20, 20, 0.6) !important;
    }

    .opponent-glass-dark-slot {
      background: linear-gradient(180deg, rgba(80, 110, 160, 0.6) 0%, rgba(50, 80, 130, 0.55) 50%, rgba(60, 90, 140, 0.6) 100%) !important;
      border: 4px solid rgba(180, 210, 240, 0.9) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(160, 190, 220, 0.8), 0 0 6px rgba(140, 170, 200, 0.5), 0 0 30px rgba(200, 100, 100, 0.3), inset 0 4px 10px rgba(0, 20, 60, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.25), inset 3px 0 8px rgba(0, 20, 60, 0.6), inset -3px 0 8px rgba(0, 20, 60, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .opponent-glass-dark-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 20%, rgba(255,220,220,0.15) 40%, rgba(255,180,180,0.08) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .opponent-glass-dark-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(0, 20, 60, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.25), inset 3px 0 8px rgba(0, 20, 60, 0.6), inset -3px 0 8px rgba(0, 20, 60, 0.6) !important;
    }

    .opponent-glass-revealed-slot {
      background: linear-gradient(180deg, rgba(255, 230, 160, 0.8) 0%, rgba(255, 190, 100, 0.7) 50%, rgba(240, 160, 70, 0.75) 100%) !important;
      border: 4px solid rgba(255, 255, 240, 0.95) !important;
      border-radius: 12px !important;
      box-shadow: 0 0 2px rgba(255, 240, 200, 0.9), 0 0 6px rgba(255, 220, 160, 0.6), 0 0 50px rgba(255, 200, 120, 0.6), inset 0 4px 10px rgba(120, 60, 0, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(120, 60, 0, 0.6), inset -3px 0 8px rgba(120, 60, 0, 0.6) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .opponent-glass-revealed-slot::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(255,245,200,0.3) 40%, rgba(255,230,150,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .opponent-glass-revealed-slot::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(255,240,200,0.18) 15%, rgba(255,220,150,0.08) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(150,100,50,0.06) 85%, rgba(255,255,255,0.2) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }
    .opponent-glass-revealed-slot.slot-has-card {
      border: none !important;
      box-shadow: inset 0 4px 10px rgba(120, 60, 0, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(120, 60, 0, 0.6), inset -3px 0 8px rgba(120, 60, 0, 0.6) !important;
    }

    /* 玻璃风格下，可出牌提示光环：参考.match-glow样式，确保光环正确显示 */
    /* 隐藏伪元素，防止遮挡光环效果 */
    .glass-hand-slot.card-glow::before,
    .glass-hand-slot.card-glow::after,
    .glass-dark-slot.card-glow::before,
    .glass-dark-slot.card-glow::after,
    .glass-revealed-slot.card-glow::before,
    .glass-revealed-slot.card-glow::after,
    .opponent-glass-hand-slot.card-glow::before,
    .opponent-glass-hand-slot.card-glow::after,
    .opponent-glass-dark-slot.card-glow::before,
    .opponent-glass-dark-slot.card-glow::after,
    .opponent-glass-revealed-slot.card-glow::before,
    .opponent-glass-revealed-slot.card-glow::after {
      display: none !important;
    }
    
    /* slot容器上的光环 */
    .glass-hand-slot.card-glow,
    .glass-dark-slot.card-glow,
    .glass-revealed-slot.card-glow,
    .opponent-glass-hand-slot.card-glow,
    .opponent-glass-dark-slot.card-glow,
    .opponent-glass-revealed-slot.card-glow,
    .glass-hand-slot.slot-has-card.card-glow,
    .glass-dark-slot.slot-has-card.card-glow,
    .glass-revealed-slot.slot-has-card.card-glow,
    .opponent-glass-hand-slot.slot-has-card.card-glow,
    .opponent-glass-dark-slot.slot-has-card.card-glow,
    .opponent-glass-revealed-slot.slot-has-card.card-glow {
      overflow: visible !important;
      outline: 0.1875rem solid #FBBF24 !important;
      outline-offset: -0.1875rem !important;
      border-radius: 0.625rem !important;
      animation: cardGlowPulse 1.5s ease-in-out infinite !important;
      z-index: 50 !important;
      transform: scale(1.03) !important;
      filter: drop-shadow(0 0 0.9375rem rgba(251, 191, 36, 0.5)) !important;
    }

    /* =========================================================================
       【玻璃风格路牌区】- 去除上方高光
       ========================================================================= */
    .player-road-slot-glass {
      background: transparent !important;
      border: none !important;
      border-radius: 12px !important;
      box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.3), inset 0 -2px 8px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(255, 255, 255, 0.2), inset -1px 0 4px rgba(0, 0, 0, 0.15) !important;
      position: relative !important;
      overflow: visible !important;
    }
    
    .player-road-slot-glass.slot-highlight {
      box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), inset 0 0 1.25rem rgba(251, 191, 36, 0.6) !important;
      border: none !important;
    }

    .opponent-road-slot-glass {
      background: transparent !important;
      border: none !important;
      border-radius: 12px !important;
      box-shadow: 0 0 30px rgba(239, 68, 68, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.3), inset 0 -2px 8px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(255, 255, 255, 0.2), inset -1px 0 4px rgba(0, 0, 0, 0.15) !important;
      position: relative !important;
      overflow: visible !important;
    }
    
    .opponent-road-slot-glass.slot-highlight {
      box-shadow: 0 0 30px rgba(239, 68, 68, 0.3), inset 0 0 1.25rem rgba(251, 191, 36, 0.6) !important;
      border: none !important;
    }

    /* =========================================================================
       【金属风格路牌区】
       ========================================================================= */
    .player-road-slot-metal {
      width: 4.6rem !important;
      padding: 3px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.7), inset 0 6px 15px rgba(255,255,255,0.1), inset 0 -8px 20px rgba(0,0,0,0.5), inset 1px 0 4px rgba(255,255,255,0.06), inset -1px 0 4px rgba(0,0,0,0.3) !important;
      position: relative !important;
      overflow: visible !important;
      z-index: 10 !important;
    }

    .player-road-slot-metal::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 10px !important;
      padding: 2px !important;
      background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%) !important;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      -webkit-mask-composite: xor !important;
      mask-composite: exclude !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    .player-road-slot-metal.slot-highlight {
      background: linear-gradient(180deg, #6b7280 0%, #4b5563 25%, #374151 50%, #1f2937 75%, #111827 100%) !important;
      box-shadow: 0 0 35px rgba(251, 191, 36, 0.5), inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(251,191,36,0.2) !important;
    }

    .player-road-slot-metal.slot-highlight::after {
      background: linear-gradient(145deg, #FBBF24 0%, #F59E0B 30%, #D97706 50%, #F59E0B 70%, #FBBF24 100%) !important;
    }

    .opponent-road-slot-metal {
      width: 4.6rem !important;
      padding: 3px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.7), inset 0 6px 15px rgba(255,255,255,0.1), inset 0 -8px 20px rgba(0,0,0,0.5), inset 1px 0 4px rgba(255,255,255,0.06), inset -1px 0 4px rgba(0,0,0,0.3) !important;
      position: relative !important;
      overflow: visible !important;
      z-index: 10 !important;
    }

    .opponent-road-slot-metal::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 10px !important;
      padding: 2px !important;
      background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%) !important;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      -webkit-mask-composite: xor !important;
      mask-composite: exclude !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    .opponent-road-slot-metal.slot-highlight {
      background: linear-gradient(180deg, #6b7280 0%, #4b5563 25%, #374151 50%, #1f2937 75%, #111827 100%) !important;
      box-shadow: 0 0 35px rgba(251, 191, 36, 0.5), inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(251,191,36,0.2) !important;
    }

    .opponent-road-slot-metal.slot-highlight::after {
      background: linear-gradient(145deg, #FBBF24 0%, #F59E0B 30%, #D97706 50%, #F59E0B 70%, #FBBF24 100%) !important;
    }

    /* =========================================================================
       【玻璃风格中立区】- 去除上方高光
       ========================================================================= */
    .player-neutral-slot-glass {
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 0 25px rgba(168, 85, 247, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(255, 255, 255, 0.2), inset -1px 0 4px rgba(0, 0, 0, 0.15) !important;
      position: relative !important;
      overflow: visible !important;
    }

    .opponent-neutral-slot-glass {
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      box-shadow: 0 0 25px rgba(236, 72, 153, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.2), inset 1px 0 4px rgba(255, 255, 255, 0.2), inset -1px 0 4px rgba(0, 0, 0, 0.15) !important;
      position: relative !important;
      overflow: visible !important;
    }

    /* =========================================================================
       【金属风格中立区】
       ========================================================================= */
    .player-neutral-slot-metal {
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      /* ★ 金属风格下仅保留金属边框（::after），去除 slot 自身 box-shadow，
           避免上下两个中立区中间叠加出多余阴影 */
      box-shadow: none !important;
      position: relative !important;
      overflow: visible !important;
    }

    .player-neutral-slot-metal::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 10px !important;
      padding: 3px !important;
      background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%) !important;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      -webkit-mask-composite: xor !important;
      mask-composite: exclude !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    .opponent-neutral-slot-metal {
      background: transparent !important;
      border: none !important;
      border-radius: 10px !important;
      /* ★ 金属风格下仅保留金属边框（::after），去除 slot 自身 box-shadow */
      box-shadow: none !important;
      position: relative !important;
      overflow: visible !important;
    }

    .opponent-neutral-slot-metal::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 10px !important;
      padding: 3px !important;
      background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%) !important;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
      -webkit-mask-composite: xor !important;
      mask-composite: exclude !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    /* 背景开启时隐藏金属风格中立区伪元素边框 */
    .neutral-area.neutral-bg-hidden .player-neutral-slot-metal::after,
    .neutral-area.neutral-bg-hidden .opponent-neutral-slot-metal::after {
      display: none !important;
    }

    /* =========================================================================
       【玻璃风格牌堆】- 保持原有颜色，添加玻璃质感效果 + 悬停动画
       ========================================================================= */
    .glass-deck-blue {
      position: relative !important;
      overflow: hidden !important;
      box-shadow: inset 0 4px 10px rgba(0, 40, 100, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(0, 40, 100, 0.6), inset -3px 0 8px rgba(0, 40, 100, 0.6) !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-deck-blue:hover {
      transform: translateY(-0.5rem) !important;
      box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3), inset 0 4px 10px rgba(0, 40, 100, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(0, 40, 100, 0.6), inset -3px 0 8px rgba(0, 40, 100, 0.6) !important;
    }
    .glass-deck-blue::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(230,245,255,0.3) 40%, rgba(200,225,255,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .glass-deck-blue::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.18) 15%, rgba(150,180,230,0.08) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(50,80,150,0.06) 85%, rgba(255,255,255,0.2) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }

    .glass-deck-red {
      position: relative !important;
      overflow: hidden !important;
      box-shadow: inset 0 4px 10px rgba(140, 20, 20, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(140, 20, 20, 0.6), inset -3px 0 8px rgba(140, 20, 20, 0.6) !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-deck-red:hover {
      transform: translateY(-0.5rem) !important;
      box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3), inset 0 4px 10px rgba(140, 20, 20, 0.8), inset 0 -8px 18px rgba(255, 255, 255, 0.5), inset 3px 0 8px rgba(140, 20, 20, 0.6), inset -3px 0 8px rgba(140, 20, 20, 0.6) !important;
    }
    .glass-deck-red::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 55% !important;
      background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 20%, rgba(255,240,240,0.3) 40%, rgba(255,220,220,0.15) 60%, transparent 85%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }
    .glass-deck-red::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(255,200,200,0.18) 15%, rgba(255,160,160,0.08) 30%, transparent 50%, rgba(0,0,0,0.05) 70%, rgba(150,50,50,0.06) 85%, rgba(255,255,255,0.2) 100%) !important;
      pointer-events: none !important;
      z-index: 3 !important;
    }

    /* =========================================================================
       【玻璃风格拼点栏】- 仅添加玻璃质感，保持原有结构
       ========================================================================= */
    .result-slot-glass {
      border: 2px solid rgba(255, 255, 255, 0.6) !important;
      box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.3),
        inset 0 -3px 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(59, 130, 246, 0.2) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .result-slot-glass::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 50% !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 30%, rgba(255,255,255,0.05) 70%, transparent 100%) !important;
      pointer-events: none !important;
      z-index: 1 !important;
      border-radius: inherit !important;
    }
    .result-slot-glass::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.08) 100%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
      border-radius: inherit !important;
    }

    /* =========================================================================
       【金属风格拼点栏】
       ========================================================================= */
    /* 【玻璃风格拼点栏】鎏金卷轴指示器（2026-9-29 重设计：缎面卷帛+画卷按局势变色；经典/金属不受影响） */
    .result-slot .scrl-wrap { position:absolute; inset:0; display:flex; align-items:stretch; }
    .result-slot .srod { position:relative; width:10px; z-index:2;
        background:linear-gradient(90deg,#3a2b16,#6b4e26 30%,#8a6a34 50%,#6b4e26 70%,#3a2b16);
        box-shadow:inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.5); }
    .result-slot .srod::before, .result-slot .srod::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:8px; height:5px; border-radius:2.5px;
        background:linear-gradient(180deg,#f5e7c8,#b8935a 60%,#6f5527); box-shadow:0 1px 2px rgba(0,0,0,0.6); }
    .result-slot .srod::before { top:-2px; } .result-slot .srod::after { bottom:-2px; }
    .result-slot .sparch { position:relative; flex:1; margin:2px 0; display:flex; align-items:center; justify-content:center; overflow:hidden;
        background:linear-gradient(180deg,#cfc2a2,#b8a888 45%,#a5946e 80%,#b3a17d), repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px);
        box-shadow:inset 0 2px 5px rgba(0,0,0,0.45), inset 0 -2px 5px rgba(0,0,0,0.4); }
    .result-slot .sparch::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,0.16), transparent 45%, rgba(0,0,0,0.12)); }
    .result-slot .spanl { position:relative; z-index:1; width:66%; height:72%; display:flex; align-items:center; justify-content:center;
        -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
        mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
    .result-slot .spanl-in { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:6px;
        -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
        mask-image:linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); }
    .result-slot .spanl-w .spanl-in { background:linear-gradient(180deg,#2f6bd8,#1e40af 55%,#152a66), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px); }
    .result-slot .spanl-l .spanl-in { background:linear-gradient(180deg,#c24040,#8e1d1d 55%,#5e1010), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px); }
    .result-slot .spanl-t .spanl-in { background:linear-gradient(180deg,#8a92a6,#5d6577 55%,#474f63), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px); }
    .result-slot .spanl-rim { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72%; height:78%; border-radius:9px; }
    .result-slot .spanl-rim-w { background:#4a5a82; box-shadow:0 0 14px 8px rgba(74,90,130,0.55); }
    .result-slot .spanl-rim-l { background:#8a5a48; box-shadow:0 0 14px 8px rgba(138,90,72,0.55); }
    .result-slot .spanl-rim-t { background:#7d7a6e; box-shadow:0 0 14px 8px rgba(125,122,110,0.55); }
    .result-slot .scrl-halo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74%; height:80%; border-radius:50%; filter:blur(9px); opacity:0; pointer-events:none; }
    .result-slot .scrl-wrap.scrl-gloww .scrl-halo { opacity:1; background:radial-gradient(ellipse, rgba(96,165,250,0.5), transparent 70%); animation:scrlHaloW 1s ease-in-out infinite; }
    .result-slot .scrl-wrap.scrl-glowl .scrl-halo { opacity:1; background:radial-gradient(ellipse, rgba(251,146,60,0.45), transparent 70%); animation:scrlHaloL 1s ease-in-out infinite; }
    @keyframes scrlHaloW { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
    @keyframes scrlHaloL { 0%,100% { opacity:0.5; } 50% { opacity:1; } }
    .result-slot .scrl-sym { position:relative; z-index:1; color:#fff; font-weight:900; font-size:13px; text-shadow:0 2px 3px rgba(0,0,0,0.55); }
    .result-slot .scrl-bar { position:relative; z-index:1; width:15px; height:3.5px; border-radius:2px; background:linear-gradient(180deg,#f1f5f9,#cbd5e1); box-shadow:0 1px 2px rgba(0,0,0,0.45); }
    .result-slot .scrl-wrap.scrl-waving .sparch, .result-slot .scrl-wrap.scrl-waving .spanl, .result-slot .scrl-wrap.scrl-waving .spanl-in, .result-slot .scrl-wrap.scrl-waving .scrl-sym, .result-slot .scrl-wrap.scrl-waving .scrl-bar { animation:scrlWaveG 0.8s ease-in-out infinite; }
    @keyframes scrlWaveG { 0% { transform:skewX(0deg); } 25% { transform:skewX(-2.5deg); } 50% { transform:skewX(0deg); } 75% { transform:skewX(2.5deg); } 100% { transform:skewX(0deg); } }
    .result-slot .scrl-wrap.scrl-gloww .srod, .result-slot .scrl-wrap.scrl-glowl .srod { animation:scrlRodGlow 1s ease-in-out infinite; }
    .result-slot .scrl-wrap.scrl-gloww .spanl-in { animation:scrlPanlGlowW 1s ease-in-out infinite; }
    .result-slot .scrl-wrap.scrl-glowl .spanl-in { animation:scrlPanlGlowL 1s ease-in-out infinite; }
    @keyframes scrlRodGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.5) drop-shadow(0 0 5px rgba(253,224,71,0.7)); } }
    @keyframes scrlPanlGlowW { 0%,100% { filter:brightness(1) saturate(1); } 50% { filter:brightness(1.4) saturate(1.25); } }
    @keyframes scrlPanlGlowL { 0%,100% { filter:brightness(1) saturate(1); } 50% { filter:brightness(1.35) saturate(1.2); } }

    .result-slot-metal {
      width: 4.6rem !important;
      background:
        linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%) border-box,
        linear-gradient(180deg, #3b82f6 0%, #2563eb 30%, #1e40af 50%, #1e3a8a 70%, #1e3a8a 100%) padding-box !important;
      border: 3px solid transparent !important;
      border-radius: 8px !important;
      box-shadow: 0 8px 25px rgba(0,0,0,0.7), 0 3px 12px rgba(59,130,246,0.3), inset 0 2px 3px rgba(0,0,0,0.6), inset 0 -1px 2px rgba(0,0,0,0.4) !important;
      background-clip: border-box, padding-box !important;
      position: relative !important;
      overflow: hidden !important;
    }
    
    .result-slot-metal::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(110deg, rgba(255,255,255,0.3) 0%, rgba(200,220,255,0.08) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.08) 70%, transparent 85%, rgba(255,255,255,0.15) 100%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
      border-radius: inherit !important;
    }

    /* =========================================================================
       【经典风格功能牌区】鎏金缎面美化（2026-9-29：方案A）
       仅作用于经典风格+关闭背景时的空槽观感（:not(.style-bg-on) 作用域）；
       开启背景时本区块全部失效，.style-bg-on 透明+白圈3D边框保持现状不变；
       玻璃/金属风格不受影响（经典分支专属类名 classic-hand-slot）。
       ========================================================================= */
    /* 【修复】有牌的分槽整体隐形：背景开关切换后，卡牌边缘不再露出多余边框/底色/光晕 */
    .game-container:not(.style-bg-on) .player-hand-slot.classic-hand-slot:has(.card, .card-small, .card-back),
    .game-container:not(.style-bg-on) .opponent-hand-slot.opponent-classic-hand-slot:has(.card, .card-small, .card-back),
    .game-container:not(.style-bg-on) .player-dark-slot.classic-dark-slot:has(.card, .card-small, .card-back),
    .game-container:not(.style-bg-on) .opponent-dark-slot.opponent-classic-dark-slot:has(.card, .card-small, .card-back),
    .game-container:not(.style-bg-on) .player-revealed-slot.classic-revealed-slot:has(.card, .card-small, .card-back),
    .game-container:not(.style-bg-on) .opponent-revealed-slot.classic-revealed-slot:has(.card, .card-small, .card-back) {
      position: relative;
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    /* 【悬停标识】仅手牌区：有牌悬停（卡牌上浮）时，底部亮条标记（颜色随分槽底色：我方蓝 / 对方红） */
    .game-container:not(.style-bg-on) .player-hand-slot.classic-hand-slot:has(.card, .card-small, .card-back):hover::after {
      content: ''; position: absolute; left: 10%; right: 10%; bottom: -9px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.95), transparent);
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.55);
      z-index: 3; pointer-events: none;
    }
    .game-container:not(.style-bg-on) .opponent-hand-slot.opponent-classic-hand-slot:has(.card, .card-small, .card-back):hover::after {
      content: ''; position: absolute; left: 10%; right: 10%; bottom: -9px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.95), transparent);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
      z-index: 3; pointer-events: none;
    }
    /* 【悬停标识】暗牌区有牌：与手牌区相同，悬停时原卡牌底部高光条（::before，因 ::after 已被内金细框占用；我方蓝 / 对方红） */
    .game-container:not(.style-bg-on) .player-dark-slot.classic-dark-slot:has(.card, .card-small, .card-back):hover::before {
      content: ''; position: absolute; left: 10%; right: 10%; bottom: -9px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.95), transparent);
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.55);
      z-index: 3; pointer-events: none;
    }
    .game-container:not(.style-bg-on) .opponent-dark-slot.opponent-classic-dark-slot:has(.card, .card-small, .card-back):hover::before {
      content: ''; position: absolute; left: 10%; right: 10%; bottom: -9px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.95), transparent);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
      z-index: 3; pointer-events: none;
    }
    /* 【悬停标识】明牌区有牌：同样光条（双方金色，::before） */
    .game-container:not(.style-bg-on) .player-revealed-slot.classic-revealed-slot:has(.card, .card-small, .card-back):hover::before,
    .game-container:not(.style-bg-on) .opponent-revealed-slot.classic-revealed-slot:has(.card, .card-small, .card-back):hover::before {
      content: ''; position: absolute; left: 10%; right: 10%; bottom: -9px; height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(232, 201, 138, 0.95), transparent);
      box-shadow: 0 0 8px rgba(232, 201, 138, 0.55);
      z-index: 3; pointer-events: none;
    }
    .game-container:not(.style-bg-on) .player-hand-slot.classic-hand-slot {
      border-radius: 6px;
      background:
        radial-gradient(circle 2px at 7px 7px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 57px 7px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 7px 89px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 57px 89px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.04) 3px 6px),
        linear-gradient(160deg, #6d9bf5 0%, #3b82f6 38%, #2563d6 68%, #1a3f9e 100%);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.9),
        inset 0 0 0 1px rgba(255,255,255,0.22),
        inset 0 2px 3px rgba(255,255,255,0.35),
        inset 0 -5px 9px rgba(9,24,72,0.6),
        0 6px 14px rgba(0,0,0,0.45);
    }
    .game-container:not(.style-bg-on) .opponent-hand-slot.opponent-classic-hand-slot {
      border-radius: 6px;
      background:
        radial-gradient(circle 2px at 7px 7px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 57px 7px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 7px 89px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        radial-gradient(circle 2px at 57px 89px, #f0dca8 45%, rgba(240,220,168,0) 50%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 3px, rgba(0,0,0,0.04) 3px 6px),
        linear-gradient(160deg, #f37a7a 0%, #ef4444 38%, #c22626 68%, #8f1414 100%);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.9),
        inset 0 0 0 1px rgba(255,255,255,0.22),
        inset 0 2px 3px rgba(255,255,255,0.35),
        inset 0 -5px 9px rgba(84,10,10,0.6),
        0 6px 14px rgba(0,0,0,0.45);
    }
    /* 悬停增强：金线发亮+金晕（覆盖全局 .card-hover 的黑投影；match-glow 匹配高亮不受影响） */
    .game-container:not(.style-bg-on) #player-hand .player-hand-slot.classic-hand-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-hand .player-hand-slot.classic-hand-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-hand-right .player-hand-slot.classic-hand-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-hand-right .player-hand-slot.classic-hand-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)) {
      box-shadow:
        0 0 0 1px #f0d9a6,
        0 0 14px rgba(219,186,116,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.3),
        inset 0 2px 3px rgba(255,255,255,0.45),
        inset 0 -5px 9px rgba(9,24,72,0.6),
        0 14px 26px rgba(0,0,0,0.55) !important;
    }

    /* 【经典风格·暗牌区】方案B「内嵌金线槽」（2026-9-29：外金线+内金细框+内凹斜纹；仅关背景生效；开背景 .style-bg-on 规则还原现状） */
    .game-container:not(.style-bg-on) .player-dark-slot.classic-dark-slot {
      position: relative;
      border-color: transparent;
      border-radius: 6px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 3px, transparent 3px 6px),
        linear-gradient(180deg, #16307a, #20479e 55%, #2a56bb);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.55),
        inset 0 4px 8px rgba(2,10,38,0.85),
        inset 0 -2px 5px rgba(122,172,255,0.35),
        0 2px 6px rgba(0,0,0,0.45);
    }
    .game-container:not(.style-bg-on) .player-dark-slot.classic-dark-slot::after {
      content:''; position:absolute; inset:4px; border:1px solid rgba(219,186,116,0.4); border-radius:4px;
      transition:all 0.25s cubic-bezier(0.4,0,0.2,1); pointer-events:none;
    }
    .game-container:not(.style-bg-on) .opponent-dark-slot.opponent-classic-dark-slot {
      position: relative;
      border-color: transparent;
      border-radius: 6px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 3px, transparent 3px 6px),
        linear-gradient(180deg, #6e1010, #941a1a 55%, #ad2424);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.55),
        inset 0 4px 8px rgba(38,2,2,0.85),
        inset 0 -2px 5px rgba(255,150,150,0.32),
        0 2px 6px rgba(0,0,0,0.45);
    }
    .game-container:not(.style-bg-on) .opponent-dark-slot.opponent-classic-dark-slot::after {
      content:''; position:absolute; inset:4px; border:1px solid rgba(219,186,116,0.4); border-radius:4px;
      transition:all 0.25s cubic-bezier(0.4,0,0.2,1); pointer-events:none;
    }
    /* 有牌时隐藏内金细框（避免细线叠在卡牌边缘） */
    .game-container .player-dark-slot.classic-dark-slot.slot-has-card::after,
    .game-container .opponent-dark-slot.opponent-classic-dark-slot.slot-has-card::after { display:none; }
    /* 我方暗牌悬停：金线发亮+金晕+内框点亮 */
    .game-container:not(.style-bg-on) #player-dark-cards .player-dark-slot.classic-dark-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-dark-cards .player-dark-slot.classic-dark-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-dark-cards-right .player-dark-slot.classic-dark-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-dark-cards-right .player-dark-slot.classic-dark-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)) {
      box-shadow:
        0 0 0 1px rgba(240,217,166,0.95),
        0 0 12px rgba(219,186,116,0.35),
        inset 0 4px 8px rgba(2,10,38,0.85),
        inset 0 -2px 5px rgba(150,190,255,0.55),
        0 12px 24px rgba(0,0,0,0.55) !important;
    }
    .game-container:not(.style-bg-on) #player-dark-cards .player-dark-slot.classic-dark-slot:hover::after,
    .game-container:not(.style-bg-on) #player-dark-cards .player-dark-slot.classic-dark-slot.tip-hover::after,
    .game-container:not(.style-bg-on) #player-dark-cards-right .player-dark-slot.classic-dark-slot:hover::after,
    .game-container:not(.style-bg-on) #player-dark-cards-right .player-dark-slot.classic-dark-slot.tip-hover::after {
      border-color:rgba(240,217,166,0.85); box-shadow:inset 0 0 10px rgba(219,186,116,0.25);
    }

    /* 【经典风格·明牌区】方案B「内嵌金线槽」·金调（双方同金色身份；仅关背景生效） */
    .game-container:not(.style-bg-on) .player-revealed-slot.classic-revealed-slot,
    .game-container:not(.style-bg-on) .opponent-revealed-slot.classic-revealed-slot {
      position: relative;
      border-color: transparent;
      border-radius: 6px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 3px, transparent 3px 6px),
        linear-gradient(180deg, #6e5316, #8a6a1e 55%, #a5822a);
      box-shadow:
        0 0 0 1px rgba(240,217,166,0.75),
        inset 0 4px 8px rgba(50,32,0,0.8),
        inset 0 -2px 5px rgba(255,225,150,0.4),
        0 2px 6px rgba(0,0,0,0.45);
    }
    .game-container:not(.style-bg-on) .player-revealed-slot.classic-revealed-slot::after,
    .game-container:not(.style-bg-on) .opponent-revealed-slot.classic-revealed-slot::after {
      content:''; position:absolute; inset:4px; border:1px solid rgba(245,231,200,0.5); border-radius:4px;
      transition:all 0.25s cubic-bezier(0.4,0,0.2,1); pointer-events:none;
    }
    .game-container .player-revealed-slot.classic-revealed-slot.slot-has-card::after,
    .game-container .opponent-revealed-slot.classic-revealed-slot.slot-has-card::after { display:none; }
    /* 我方明牌悬停：金框发亮+金晕+内框点亮 */
    .game-container:not(.style-bg-on) #player-revealed-cards .player-revealed-slot.classic-revealed-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-revealed-cards .player-revealed-slot.classic-revealed-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-revealed-cards-right .player-revealed-slot.classic-revealed-slot:hover:not(.match-glow):not(:has(.card, .card-small, .card-back)),
    .game-container:not(.style-bg-on) #player-revealed-cards-right .player-revealed-slot.classic-revealed-slot.tip-hover:not(.match-glow):not(:has(.card, .card-small, .card-back)) {
      box-shadow:
        0 0 0 1px #fff3cf,
        0 0 14px rgba(219,186,116,0.45),
        inset 0 4px 8px rgba(50,32,0,0.8),
        inset 0 -2px 5px rgba(255,235,170,0.6),
        0 12px 24px rgba(0,0,0,0.55) !important;
    }
    .game-container:not(.style-bg-on) #player-revealed-cards .player-revealed-slot.classic-revealed-slot:hover::after,
    .game-container:not(.style-bg-on) #player-revealed-cards .player-revealed-slot.classic-revealed-slot.tip-hover::after,
    .game-container:not(.style-bg-on) #player-revealed-cards-right .player-revealed-slot.classic-revealed-slot:hover::after,
    .game-container:not(.style-bg-on) #player-revealed-cards-right .player-revealed-slot.classic-revealed-slot.tip-hover::after {
      border-color:rgba(255,243,207,0.9); box-shadow:inset 0 0 10px rgba(240,217,166,0.3);
    }

    /* 【经典风格·牌堆】未开局占位样式（classic-deck-init：金框缎面 / 开背景还原原版深灰） */
    .game-container:not(.style-bg-on) .classic-deck-init {
      background: linear-gradient(160deg, #546e8e 0%, #3a5070 38%, #2a3c54 68%, #1c2a3e 100%);
      border: 2px solid transparent;
      border-radius: 8px;
      box-shadow: inset 0 -4px 8px rgba(12,20,38,0.5), 0 4px 12px rgba(0,0,0,0.4);
      transition: border-color 0.2s ease, box-shadow 0.25s ease;
    }
    .game-container:not(.style-bg-on) .classic-deck-init:hover {
      border-color: rgba(219,186,116,0.85);
      box-shadow: 0 0 0 1px rgba(245,231,200,0.3), inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -4px 8px rgba(12,20,38,0.5), 0 4px 12px rgba(0,0,0,0.4);
    }
    /* 游戏中牌堆卡背金框：悬停时才显示（仅关背景；开背景走 JS 原版无边框） */
    .game-container .classic-deck-live { transition: border-color 0.2s ease, box-shadow 0.25s ease; }
    .game-container:not(.style-bg-on) .classic-deck-live:hover {
      border-color: rgba(219,186,116,0.85) !important;
      box-shadow: 0 0 0 1px rgba(245,231,200,0.3), inset 0 0 0 1px rgba(255,255,255,0.18), 0 6px 14px rgba(0,0,0,0.45) !important;
    }
    .game-container.style-bg-on .classic-deck-init {
      background: linear-gradient(180deg, #1e293b, #0f172a, #1e293b);
      border: 2px solid #334155;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* 【经典风格·路牌区】方案C「石径嵌金」凹陷版（2026-9-30：顶部深压+底部微光唇=凹陷；近黑石板底+中轴金色虚轨+上下收口；仅关背景生效） */
    .game-container:not(.style-bg-on) .player-road-slot-classic {
      border-color: transparent;
      background: linear-gradient(180deg, #060a18 0%, #0d1428 45%, #1a2648 100%);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.45),
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        inset 0 18px 28px rgba(0, 0, 0, 0.95),
        inset 0 -6px 10px rgba(110, 150, 255, 0.35),
        inset 0 -2px 0 rgba(130, 165, 255, 0.55),
        0 2px 0 rgba(90, 110, 190, 0.35);
    }
    .game-container:not(.style-bg-on) .player-road-slot-classic::before {
      content:''; position:absolute; left:12px; right:12px; top:7px; bottom:7px; pointer-events:none;
      transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1);
      background:
        linear-gradient(90deg, transparent, rgba(219,186,116,0.65) 50%, transparent) 0 0/100% 2px no-repeat,
        linear-gradient(90deg, transparent, rgba(219,186,116,0.65) 50%, transparent) 0 100%/100% 2px no-repeat;
    }
    .game-container:not(.style-bg-on) .player-road-slot-classic::after {
      content:''; position:absolute; left:calc(50% - 1px); top:16px; bottom:16px; width:2px; border-radius:1px; pointer-events:none;
      transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1);
      background:repeating-linear-gradient(180deg, rgba(219,186,116,0.4) 0 8px, transparent 8px 15px);
    }
    .game-container:not(.style-bg-on) .opponent-road-slot-classic {
      border-color: transparent;
      background: linear-gradient(180deg, #1c0710 0%, #240d18 45%, #3a1626 100%);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.45),
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        inset 0 18px 28px rgba(0, 0, 0, 0.95),
        inset 0 -6px 10px rgba(255, 120, 150, 0.22),
        inset 0 -2px 0 rgba(255, 150, 170, 0.45),
        0 2px 0 rgba(190, 90, 130, 0.35);
    }
    .game-container:not(.style-bg-on) .opponent-road-slot-classic::before {
      content:''; position:absolute; left:12px; right:12px; top:7px; bottom:7px; pointer-events:none;
      transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1);
      background:
        linear-gradient(90deg, transparent, rgba(219,186,116,0.65) 50%, transparent) 0 0/100% 2px no-repeat,
        linear-gradient(90deg, transparent, rgba(219,186,116,0.65) 50%, transparent) 0 100%/100% 2px no-repeat;
    }
    .game-container:not(.style-bg-on) .opponent-road-slot-classic::after {
      content:''; position:absolute; left:calc(50% - 1px); top:16px; bottom:16px; width:2px; border-radius:1px; pointer-events:none;
      transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1);
      background:repeating-linear-gradient(180deg, rgba(219,186,116,0.4) 0 8px, transparent 8px 15px);
    }
    /* 有牌路隐藏内部装饰（外圈金线始终可见；金线外框不遮卡牌） */
    .game-container .player-road-slot-classic:has(.card)::before,
    .game-container .player-road-slot-classic:has(.card)::after,
    .game-container .opponent-road-slot-classic:has(.card)::before,
    .game-container .opponent-road-slot-classic:has(.card)::after { opacity:0; }
    /* slot-highlight 金光高亮保留（可放置提示 = 凹陷结构 + 金色内发光） */
    .game-container:not(.style-bg-on) .player-road-slot-classic.slot-highlight {
      box-shadow:
        0 0 0 1px rgba(240,217,166,0.75),
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        inset 0 18px 28px rgba(0, 0, 0, 0.95),
        inset 0 -6px 10px rgba(110, 150, 255, 0.35),
        inset 0 -2px 0 rgba(130, 165, 255, 0.55),
        inset 0 0 1.25rem rgba(251,191,36,0.6),
        0 2px 0 rgba(90, 110, 190, 0.35);
    }
    .game-container:not(.style-bg-on) .opponent-road-slot-classic.slot-highlight {
      box-shadow:
        0 0 0 1px rgba(240,217,166,0.75),
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        inset 0 18px 28px rgba(0, 0, 0, 0.95),
        inset 0 -6px 10px rgba(255, 120, 150, 0.22),
        inset 0 -2px 0 rgba(255, 150, 170, 0.45),
        inset 0 0 1.25rem rgba(251,191,36,0.6),
        0 2px 0 rgba(190, 90, 130, 0.35);
    }

    /* 【经典风格·回合按钮】方案A「浮雕受光」（2026-9-30：面内明暗浮雕——顶部受光亮棱+面向下渐暗+底缘深棱线；悬停浮起/按住压凹；card-style-classic 作用域=经典卡面风格下始终生效（开/关背景都生效，与开始/退出按钮同模式）） */
    .game-container.card-style-classic .turn-page-btn {
      color: #f2f5fc;
      background: linear-gradient(180deg, #4d5974 0%, #37425a 38%, #262f44 74%, #19202f 100%);
      border: 1px solid #5f6f90;
      box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 0 rgba(216, 229, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.70),
        inset 0 -6px 10px rgba(0, 0, 0, 0.42);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease, background 0.2s ease, z-index 0s ease 0.3s;
    }
    .game-container.card-style-classic .turn-page-btn:hover {
      transform: translateY(-2px);
      border-color: #85a7d8;
      background: linear-gradient(180deg, #576488 0%, #3f4b66 38%, #2c374e 74%, #1d2536 100%);
      box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(96, 165, 250, 0.20),
        inset 0 2px 0 rgba(216, 229, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.70),
        inset 0 -6px 10px rgba(0, 0, 0, 0.42);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease, background 0.2s ease, z-index 0s;
    }
    .game-container.card-style-classic .turn-page-btn:active {
      transform: translateY(1px);
      box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(216, 229, 255, 0.14),
        inset 0 3px 9px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.7);
    }
    .game-container.card-style-classic .turn-page-btn .turn-page-text {
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
    }
    .game-container.card-style-classic .turn-page-btn .turn-page-overlay {
      background: linear-gradient(180deg, #5d6c8e 0%, #46536f 60%, #354059 100%);
      box-shadow: inset 0 2px 0 rgba(216, 229, 255, 0.35);
    }

    /* 【经典风格·中立区】方案B「内嵌金线槽」·金色菱格纹（2026-9-29：仅关背景生效；开背景沿用现有隐藏机制；归属金光 neutral-aura 不受影响） */
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic),
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) {
      position: relative;
      border-color: transparent;
      background:
        repeating-linear-gradient(45deg, rgba(219,186,116,0.055) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(219,186,116,0.055) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, #0f1a30, #142244 55%, #192c58);
      box-shadow:
        0 0 0 1px rgba(219,186,116,0.5),
        inset 0 10px 20px rgba(2,10,38,0.8),
        inset 0 -4px 10px rgba(100,150,255,0.16),
        0 2px 6px rgba(0,0,0,0.4);
    }
    /* 分槽：保留蓝/红方框（原版识别度）；
       ★ 2026-9-30 用户规则（纠正）：中间路保持竖线直角，仅首末外侧倒角（首槽=左两角 10px，末槽=右两角 10px）；
       光环槽（neutral-aura 金光 / ai-surround-glow 围牌）仍是四边倒角 10px——与分槽竖线是两套规则，勿混淆 */
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura) {
      border: 1px solid rgba(59, 130, 246, 0.35) !important;
      background: rgba(59, 130, 246, 0.12) !important;
    }
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura) {
      border: 1px solid rgba(239, 68, 68, 0.35) !important;
      background: rgba(239, 68, 68, 0.12) !important;
    }
    /* 分槽圆角按位置：首槽左倒角 / 中间路直角（竖线分隔）/ 末槽右倒角；光环槽不参与（保持四边倒角） */
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="0"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="0"] {
      border-radius: 10px 0 0 10px !important;
    }
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="1"],
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="2"],
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="3"],
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="4"],
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="5"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="1"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="2"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="3"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="4"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="5"] {
      border-radius: 0 !important;
    }
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="6"],
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot:not(.neutral-aura):not(.ai-surround-glow)[data-slot="6"] {
      border-radius: 0 10px 10px 0 !important;
    }
    /* 光环槽（金光/围牌光环）：border 仍豁免（保护金光 outline），四边倒角 10px（与分槽竖线不同，保持不变） */
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot.neutral-aura,
    .game-container:not(.style-bg-on) .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot.ai-surround-glow,
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot.neutral-aura,
    .game-container:not(.style-bg-on) .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot.ai-surround-glow {
      border-radius: 10px !important;
    }
    /* ★ 2026-10-3 修复（用户反馈：开背景模式光环变方形）：上面的倒角豁免只写了关背景
       （:not(.style-bg-on)）作用域，开背景下光环槽退回基础 4px 圆角视觉=方形直角。
       光环槽四边倒角 10px 与背景开关无关（定稿规则），此处补开背景同样生效 */
    .game-container.style-bg-on .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot.neutral-aura,
    .game-container.style-bg-on .neutral-area:has(.player-neutral-slot-classic) .player-neutral-slot.ai-surround-glow,
    .game-container.style-bg-on .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot.neutral-aura,
    .game-container.style-bg-on .neutral-area:has(.opponent-neutral-slot-classic) .opponent-neutral-slot.ai-surround-glow {
      border-radius: 10px !important;
    }

    /* 【经典风格·开始游戏/退出练习按钮】方案B「金印凹刻」（2026-9-30：仅经典卡面风格 card-style-classic 作用域；终止出牌/重新开始等按钮不受影响） */
    .game-container.card-style-classic .game-ctrl-btn-classic-start {
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 243, 207, 0.5), rgba(255, 243, 207, 0) 55%),
        linear-gradient(160deg, #e8c05c, #c99a2e 60%, #a67c1a) !important;
      color: #2e2008 !important;
      border: none !important;
      border-radius: 10px !important;
      text-shadow: 0 1px 0 rgba(255, 243, 207, 0.5) !important;
      box-shadow: 0 5px 0 #6e5310, 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 243, 207, 0.6) !important;
    }
    .game-container.card-style-classic .game-ctrl-btn-classic-start:hover:not(:disabled) {
      transform: translateY(-2px) !important;
      box-shadow: 0 7px 0 #6e5310, 0 12px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(240, 217, 166, 0.4), inset 0 1px 0 rgba(255, 243, 207, 0.7) !important;
    }
    .game-container.card-style-classic .game-ctrl-btn-classic-start:active:not(:disabled) {
      transform: translateY(4px) !important;
      box-shadow: 0 1px 0 #6e5310, 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 243, 207, 0.6) !important;
    }
    /* ★ 2026-9-30：联机投降按钮 = 凹刻同构·灰色系（保留立体结构，配色区别金色开始按钮） */
    .game-container.card-style-classic #online-surrender {
      background: linear-gradient(160deg, #5a6472 0%, #48505c 60%, #3a414c 100%) !important;
      color: #e8ecf2 !important;
      border: none !important;
      border-radius: 10px !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
      box-shadow: 0 5px 0 #23272e, 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }
    .game-container.card-style-classic #online-surrender:hover:not(:disabled) {
      transform: translateY(-2px) !important;
      box-shadow: 0 7px 0 #23272e, 0 12px 22px rgba(0, 0, 0, 0.55), 0 0 14px rgba(180, 195, 215, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }
    .game-container.card-style-classic #online-surrender:active:not(:disabled) {
      transform: translateY(4px) !important;
      box-shadow: 0 1px 0 #23272e, 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
    .game-container.card-style-classic .game-ctrl-btn-classic-exit {
      background: #101a30 !important;
      color: #a08850 !important;
      border: none !important;
      border-radius: 10px !important;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6) !important;
      box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(219, 186, 116, 0.25), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }
    .game-container.card-style-classic .game-ctrl-btn-classic-exit:hover:not(:disabled) {
      color: #dbba74 !important;
      transform: translateY(-1px) !important;
      box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(219, 186, 116, 0.45), 0 0 12px rgba(219, 186, 116, 0.2) !important;
    }

    /* =========================================================================
       【金属风格功能牌区】
       ========================================================================= */
    .metal-hand-slot {
      background: linear-gradient(145deg, #1e3a5f, #0f2744);
      border: 2px solid #4a90d9;
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(100,160,255,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .metal-hand-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(150,200,255,0.4) 0%, rgba(100,160,255,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(150,200,255,0.2) 100%),
        linear-gradient(180deg, rgba(100,160,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .metal-hand-slot.slot-has-card {
      border: none;
      box-shadow: none;
    }

    .metal-dark-slot {
      background: linear-gradient(145deg, #4a5568, #2d3748);
      border: 2px solid rgba(59, 130, 246, 0.4);
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(255,255,255,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .metal-dark-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .metal-dark-slot.slot-has-card {
      border: none !important;
      box-shadow: none;
    }

    .metal-revealed-slot {
      background: linear-gradient(145deg, #4a5568, #2d3748);
      border: 2px solid rgba(251, 191, 36, 0.4);
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(255,255,255,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .metal-revealed-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .metal-revealed-slot.slot-has-card {
      border: none !important;
      box-shadow: none;
    }

    .opponent-metal-hand-slot {
      background: linear-gradient(145deg, #5f1e1e, #440f0f);
      border: 2px solid #d94a4a;
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(255,100,100,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .opponent-metal-hand-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(255,150,150,0.4) 0%, rgba(255,100,100,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(255,150,150,0.2) 100%),
        linear-gradient(180deg, rgba(255,100,100,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .opponent-metal-hand-slot.slot-has-card {
      border: none;
      box-shadow: none;
    }

    .opponent-metal-dark-slot {
      background: linear-gradient(145deg, #4a5568, #2d3748);
      border: 2px solid rgba(239, 68, 68, 0.4);
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(255,255,255,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .opponent-metal-dark-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .opponent-metal-dark-slot.slot-has-card {
      border: none !important;
      box-shadow: none;
    }

    .opponent-metal-revealed-slot {
      background: linear-gradient(145deg, #4a5568, #2d3748);
      border: 2px solid rgba(251, 191, 36, 0.4);
      border-radius: 0.625rem;
      box-shadow: 
        0 12px 30px rgba(0,0,0,0.8),
        0 4px 10px rgba(0,0,0,0.5),
        inset 0 3px 8px rgba(255,255,255,0.2),
        inset 0 -4px 12px rgba(0,0,0,0.4);
      position: relative;
      overflow: visible;
    }
    
    .opponent-metal-revealed-slot::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.15) 15%, transparent 30%, transparent 50%, rgba(0,0,0,0.15) 70%, transparent 85%, rgba(255,255,255,0.2) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }
    
    .opponent-metal-revealed-slot.slot-has-card {
      border: none !important;
      box-shadow: none;
    }

    /* 金属风格牌堆 */
    .metal-deck-blue {
      background: radial-gradient(circle at center, #1e3a8a, #0f172a);
      border: 0.125rem solid #3b82f6;
      box-shadow: 0 0.375rem 1.25rem rgba(59, 130, 246, 0.3), inset 0 0 0.625rem rgba(0, 0, 0, 0.5), inset 0 3px 8px rgba(255,255,255,0.08), inset 0 -4px 12px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .metal-deck-blue:hover {
      transform: translateY(-0.5rem) !important;
      box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3), inset 0 0 0.625rem rgba(0, 0, 0, 0.5), inset 0 3px 8px rgba(255,255,255,0.08), inset 0 -4px 12px rgba(0,0,0,0.2);
    }
    
    .metal-deck-blue::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(110deg, rgba(255,255,255,0.1) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.05) 70%, transparent 85%, rgba(255,255,255,0.05) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }

    .metal-deck-red {
      background: linear-gradient(180deg, #7f1d1d, #450a0a, #7f1d1d);
      border: 0.125rem solid #ef4444;
      box-shadow: 0 0.375rem 1.25rem rgba(239, 68, 68, 0.3), inset 0 0 0.625rem rgba(0, 0, 0, 0.5), inset 0 3px 8px rgba(255,255,255,0.08), inset 0 -4px 12px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .metal-deck-red:hover {
      transform: translateY(-0.5rem) !important;
      box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.4), 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.3), inset 0 0 0.625rem rgba(0, 0, 0, 0.5), inset 0 3px 8px rgba(255,255,255,0.08), inset 0 -4px 12px rgba(0,0,0,0.2);
    }
    
    .metal-deck-red::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(110deg, rgba(255,255,255,0.1) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.05) 70%, transparent 85%, rgba(255,255,255,0.05) 100%);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }

    .turn-record-strategy {
      position: relative;
    }

    .turn-record-strategy:hover {
      border: 2px solid #FBBF24 !important;
      box-shadow: 
        0 0 8px rgba(251, 191, 36, 0.6),
        0 0 16px rgba(251, 191, 36, 0.4),
        inset 0 0 8px rgba(251, 191, 36, 0.2);
    }
  </style>
</head>
<body data-page-node-id="U1VrNFkCFdR8QJo360BdN0">

  <div id="main-menu" class="main-menu-container" data-page-node-id="lqSOGd8vpMeN3sS7OFWQwK">
    <!-- 昵称编辑弹窗 -->
    <div id="nickname-editor-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeNicknameEditor()" data-page-node-id="0MJOVaLJtTGc08YhgwEqq4">
      <div class="profile-modal-content" data-page-node-id="TAJNB5Ywv9PuGZUhGNsXww">
        <div class="profile-modal-title" data-i18n="nick_title_edit" data-page-node-id="Icc3ArkapB8CndCmS0WqVK">编辑昵称</div>
        <div class="profile-player-id" id="profile-player-id-display" data-page-node-id="gHjIiNvluGnArmpWlClM8G"></div>
        <input type="text" id="nickname-input" class="nickname-input" maxlength="12" placeholder="请输入昵称" data-i18n-placeholder="ph_nickname" onkeydown="if(event.key==='Enter')saveNickname()" data-page-node-id="9V97VKbXnanONGVAckq3Lh" />
        <!-- ★ 游戏内文字提示（不使用浏览器 alert 弹窗） -->
        <div id="nickname-tip" style="display:none;margin-top:8px;text-align:center;font-size:13px;font-weight:600;color:#ff6b6b;line-height:1.5;" data-page-node-id="GjBFREouQiHENCEUs7yCvP"></div>
        <div class="profile-modal-buttons" data-page-node-id="ZJvAerO6NZIM1Hicfb9WMw">
          <button class="profile-modal-btn profile-modal-cancel" onclick="closeNicknameEditor()" data-i18n="nick_cancel" data-page-node-id="GSI5b4xFh9hyUt0UUfi7P0">取消</button>
          <button class="profile-modal-btn profile-modal-confirm" onclick="saveNickname()" data-i18n="nick_save" data-page-node-id="A7CB2hHuC6yAuIqj9sLi4R">保存</button>
        </div>
      </div>
    </div>
    <!-- 娱乐模式预告弹窗（2026-9-16：点击娱乐模式先展示玩法预告说明，不直接进入） -->
    <div id="ent-preview-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeEntPreview()">
      <div class="profile-modal-content" style="max-width:420px;">
        <div class="profile-modal-title" data-i18n="ent_preview_title">娱乐模式 · 预告</div>
        <div style="text-align:left;font-size:0.95rem;line-height:1.9;color:#e2e8f0;padding:4px 6px;">
          <div style="margin-bottom:10px;">⚔️ <span data-i18n="ent_preview_desc1">本模式将提供武将+策略卡组合的方式对局。</span></div>
          <div>🎴 <span data-i18n="ent_preview_desc2">解锁成就可以获取相关武将，提升等级可以解锁相关策略卡（使用策略卡需要消耗游戏积分）</span></div>
        </div>
        <div class="profile-modal-buttons">
          <button class="profile-modal-btn profile-modal-confirm" onclick="closeEntPreview()" data-i18n="ent_preview_btn">敬请期待</button>
        </div>
      </div>
    </div>
    <!-- 玩家个人资料弹窗（点击主页昵称打开） -->
    <div id="player-profile-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeProfileModal()" data-page-node-id="f0P63b0fYPAicmcLIFcQIz">
      <div class="profile-modal-content" style="max-width:420px;position:relative;" data-page-node-id="2M57DICFNQwru28FHAgPfM">
        <!-- ★ 2026-9-13 导入回放：隐藏文件选择框（accept 限定 .json），由 ppImportReplayFile 触发 -->
        <input type="file" id="pp-replay-import-input" accept=".json,application/json" style="display:none;" onchange="ppHandleReplayImportFile(this.files && this.files[0])" />
        <div class="profile-modal-title" data-i18n="pp_title" data-page-node-id="8AjDaj1dDDfdiDFRW5Kxaj">个人资料</div>
        <div class="pp-header" data-page-node-id="PIiG1bnO4Bj1mCOKYboAhM">
          <img id="pp-avatar" class="pp-avatar" src="" alt="头像" data-page-node-id="23tD20eFkeERQDSweIrrUp" />
          <div class="pp-info" data-page-node-id="cnUzTVvEP0MyIQFg53xqU1">
            <div class="pp-nick-row">
              <div class="pp-nickname" id="pp-nickname" data-page-node-id="ORbY8Y5WCcmdsIs0wjiBhg">玩家</div>
              <!-- ★ 修改昵称移至昵称右侧（未登录弹提示且不关闭资料弹窗） -->
              <button class="pp-edit-nick-btn" onclick="onPpEditNickClick()" data-i18n="pp_edit_nick" data-page-node-id="vbpXWRTdqaZwtWuBxewnZM">修改昵称</button>
            </div>
            <div class="pp-id" id="pp-id" data-page-node-id="HkQ9LdEfOKW7R1KFPzidEs">#a00000000</div>
          </div>
        </div>
        <!-- ★ 2026-9-13：导入回放入口移至标题右侧（flex 布局，左标题右按钮） -->
        <div class="pp-stats-title" style="display:flex;align-items:center;justify-content:space-between;gap:8px;" data-page-node-id="pkw6XYCksxlG6g0ZLHoNZu">
          <span data-i18n="pp_stats_title">模式战绩（胜率分开记录）</span>
          <button class="pp-replay-btn" onclick="ppImportReplayFile()" data-i18n="pp_import_short" style="flex-shrink:0;">📂 导入回放</button>
        </div>
        <div class="pp-stats" id="pp-stats" data-page-node-id="MP9eFmgxLiJ7cBMJM2W6ne"></div>
        <!-- ★ 账号系统：单按钮动态切换（未登录→登录/注册；已登录→退出登录） -->
        <div id="pp-auth-area" style="margin-top:10px;">
          <button id="pp-auth-btn" class="profile-modal-btn profile-modal-confirm" style="width:100%;" onclick="onPpAuthClick()" data-i18n="ag_login_register">登录 / 注册</button>
        </div>
      </div>
    </div>
    <!-- 账号登录/注册弹窗 -->
    <!-- ★ PIPL 合规备注：两个协议复选框必须默认不勾选，由用户主动勾选（单独同意，第13/14条） -->
    <div id="auth-modal" class="profile-modal" style="display:none;">
      <div class="profile-modal-content" style="max-width:400px;">
        <div class="profile-modal-title" data-i18n="ag_account_title">账号</div>
        <div class="auth-tabs">
          <button class="auth-tab active" id="auth-tab-login" onclick="switchAuthTab('login')" data-i18n="ag_tab_login">登录</button>
          <button class="auth-tab" id="auth-tab-register" onclick="switchAuthTab('register')" data-i18n="ag_tab_register">注册</button>
        </div>
        <!-- 登录表单 -->
        <div class="auth-form" id="auth-form-login">
          <input type="text" class="nickname-input" id="auth-login-account" maxlength="11" data-i18n-placeholder="ag_account_ph" placeholder="手机号" autocomplete="username" />
          <input type="password" class="nickname-input" id="auth-login-pwd" maxlength="32" data-i18n-placeholder="ag_password_ph" placeholder="密码" />
          <!-- ★ 安全备注：记住密码明文存于本浏览器 localStorage，仅个人设备建议勾选 -->
          <label class="auth-agree-row" style="cursor:pointer;">
            <input type="checkbox" id="auth-remember-pwd" />
            <span data-i18n="ag_remember_pwd">记住密码</span>
          </label>
          <div class="auth-error" id="auth-login-error"></div>
          <button class="profile-modal-btn profile-modal-confirm auth-btn" id="auth-login-btn" onclick="pbDoLogin()" data-i18n="ag_btn_login">登 录</button>
        </div>
        <!-- 注册表单 -->
        <div class="auth-form" id="auth-form-register" style="display:none;">
          <input type="text" class="nickname-input" id="auth-reg-account" maxlength="11" data-i18n-placeholder="ag_account_ph" placeholder="手机号" autocomplete="username" />
          <div class="pwd-wrap">
            <input type="password" class="nickname-input" id="auth-reg-pwd" maxlength="32" data-i18n-placeholder="ag_pwd_rule_ph" placeholder="密码（8-32位，含字母和数字）" oninput="pbUpdatePwdStrength();pbCheckPwdMatch()" />
            <button type="button" class="pwd-toggle-btn" onclick="pbTogglePwd('auth-reg-pwd', this)" data-i18n-title="ag_pwd_show">
              <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z"/></svg>
              <svg class="eye-closed" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z"/><line x1="4" y1="3.5" x2="20.5" y2="20.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
            </button>
          </div>
          <!-- ★ 密码强度条：实时评分（弱/中/强） -->
          <div class="pwd-strength-row" id="pwd-strength-row" style="display:none;">
            <div class="pwd-strength-bars">
              <div class="pwd-strength-bar" id="pwd-bar-1"></div>
              <div class="pwd-strength-bar" id="pwd-bar-2"></div>
              <div class="pwd-strength-bar" id="pwd-bar-3"></div>
            </div>
            <span class="pwd-strength-label" id="pwd-strength-label"></span>
          </div>
          <div class="pwd-wrap">
            <input type="password" class="nickname-input" id="auth-reg-pwd2" maxlength="32" data-i18n-placeholder="ag_pwd_confirm_ph" placeholder="确认密码" oninput="pbCheckPwdMatch()" />
            <button type="button" class="pwd-toggle-btn" onclick="pbTogglePwd('auth-reg-pwd2', this)" data-i18n-title="ag_pwd_show">
              <svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z"/></svg>
              <svg class="eye-closed" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z"/><line x1="4" y1="3.5" x2="20.5" y2="20.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
            </button>
          </div>
          <div class="auth-captcha-row">
            <input type="text" class="nickname-input" id="auth-reg-captcha" maxlength="4" data-i18n-placeholder="ag_captcha_ph" placeholder="验证码" autocomplete="off" />
            <img class="auth-captcha-img" id="auth-captcha-img" src="" alt="验证码" title="" onclick="pbRefreshCaptcha()" />
          </div>
          <div class="auth-agree-row">
            <input type="checkbox" id="auth-agree-service" />
            <span>我已阅读并同意<span class="auth-agree-link" onclick="openLegalModal('service', true)" data-i18n="ag_link_service">《用户服务协议》</span></span>
          </div>
          <div class="auth-agree-row">
            <input type="checkbox" id="auth-agree-privacy" />
            <span>我已阅读并同意<span class="auth-agree-link" onclick="openLegalModal('privacy', true)" data-i18n="ag_link_privacy">《隐私政策》</span>（含个人信息收集与使用规则）</span>
          </div>
          <div class="auth-error" id="auth-reg-error"></div>
          <button class="profile-modal-btn profile-modal-confirm auth-btn" id="auth-reg-btn" onclick="pbDoRegister()" data-i18n="ag_btn_register">注 册</button>
        </div>
        <div class="profile-modal-buttons" style="margin-top:12px;">
          <button class="profile-modal-btn profile-modal-cancel" style="width:100%;" onclick="closeAuthModal()" data-i18n="pp_close">关闭</button>
        </div>
      </div>
    </div>
    <!-- 协议全文弹窗（用户服务协议 / 隐私政策） -->
    <div id="legal-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeLegalModal()">
      <div class="profile-modal-content" style="max-width:560px;">
        <div class="profile-modal-title" id="legal-title">协议</div>
        <div class="legal-body" id="legal-body"></div>
        <div class="profile-modal-buttons" style="margin-top:12px;">
          <button class="profile-modal-btn profile-modal-cancel" onclick="closeLegalModal()" data-i18n="ag_legal_close">关闭</button>
          <button class="profile-modal-btn profile-modal-confirm" id="legal-agree-btn" style="display:none;" onclick="agreeLegalAndCheck()" data-i18n="ag_legal_agree">我已阅读并同意</button>
        </div>
      </div>
    </div>
    <!-- 回放播放器：原界面直接弹出，复用真实对局界面渲染 + 游戏原生动画管线（2026-9-11） -->
    <div id="rp-backdrop"></div>
    <div id="replay-player-overlay">
      <div class="rp-topbar">
        <span class="rp-title" data-i18n="rp_title">▶ 回放</span>
        <span class="rp-info" id="rp-info"></span>
        <button class="rp-btn" id="rp-dl-btn" onclick="rpDownloadCurrent()" data-i18n="rp_download" style="margin-left:auto; flex-shrink:0;">⬇ 下载</button>
        <button class="rp-close" onclick="closeReplayPlayer()" title="退出回放" data-i18n-title="rp_exit">✕</button>
      </div>
      <div class="rp-spacer"></div>
      <div class="rp-bottombar">
        <div class="rp-review" id="rp-review" style="display:none;">
          <div class="rp-review-row">
            <div class="rp-btn-group">
              <button class="rp-btn" onclick="rpStepBack()" title="上一步" data-i18n-title="rp_back_one">⏪ 上一步</button>
              <button class="rp-btn primary" id="rp-play-btn" onclick="rpTogglePlay()" data-i18n="rp_play">▶ 播放</button>
              <button class="rp-btn" onclick="rpStepFwd()" title="下一步" data-i18n-title="rp_fwd_one">下一步 ⏩</button>
            </div>
            <canvas id="rp-review-canvas" class="rp-review-canvas" title="点击跳转进度"></canvas>
            <div class="rp-btn-group">
              <button class="rp-btn" onclick="rpRestart()" title="重播" data-i18n="rp_restart" data-i18n-title="rp_restart">↻ 重播</button>
              <select class="rp-speed" id="rp-speed" onchange="rpRestartTimer()" title="倍速">
                <option value="4000">0.25x</option>
                <option value="2000">0.5x</option>
                <option value="1000" selected>1x</option>
                <option value="500">2x</option>
                <option value="333">3x</option>
              </select>
              <button class="rp-btn" onclick="rpGoto(rpActions.length - 1)" title="跳到末尾" data-i18n-title="rp_to_end">⏭ 末尾</button>
            </div>
          </div>
        </div>
        <div class="rp-action-bar">
          <span class="rp-step-label" id="rp-step">0/0</span>
          <span class="rp-action-desc" id="rp-desc">—</span>
          <span class="rp-score-badge" id="rp-score-badge" style="display:none;"></span>
        </div>
      </div>
    </div>
    <!-- 头像选择弹窗 -->
    <div id="avatar-picker-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeAvatarPicker()" data-page-node-id="IvGsknp7TVdYDoep0EiwqF">
      <div class="profile-modal-content" style="max-width:420px;" data-page-node-id="7yMaxIuNrCNEqjsHQA2sup">
        <div class="profile-modal-title" data-i18n="nick_avatar" data-page-node-id="xKjWOTtHS2lCcCx1GU4Vog">选择头像</div>
        <div class="avatar-grid" id="avatar-grid" data-page-node-id="8aGIVKaAWe1MtzI9SfEOxU"></div>
        <div class="avatar-upload-text" data-i18n="nick_upload" data-page-node-id="5s6pSwXeeZIdnGfIGeCqOr">点击 + 上传自定义头像</div>
        <input type="file" id="avatar-file-input" accept="image/*" style="display:none;" onchange="handleAvatarFileSelect(event)" data-page-node-id="LFHjJmelSPPkgx5CTFPsOe" />
        <div class="profile-modal-buttons" data-page-node-id="sf2J5wWBcemoQoSJd19XdP">
          <button class="profile-modal-btn profile-modal-confirm" onclick="closeAvatarPicker()" data-i18n="nick_done" data-page-node-id="kQ0v9grrsLPEr18kz6MBO2">完成</button>
        </div>
      </div>
    </div>
    <!-- 头像裁剪弹窗 -->
    <div id="avatar-crop-modal" class="profile-modal" style="display:none;" onclick="if(event.target===this)closeAvatarCropModal()" data-page-node-id="VCixjogMS2kqodTGH3l5R4">
      <div class="profile-modal-content" style="max-width:420px;" data-page-node-id="yp0iIOntmndaFZJggFwUko">
        <div class="profile-modal-title" data-i18n="nick_crop" data-page-node-id="oa9WB1BNThc24837kM7NwZ">裁剪头像</div>
        <div class="crop-container" data-page-node-id="kIacql1iOEL9gwl2irf6Kz">
          <div class="crop-viewport" id="crop-viewport" data-page-node-id="yNrN3YxwgcdKk3qbohHmUf">
            <img id="crop-image" src="" alt="裁剪预览" data-i18n-alt="alt_crop" draggable="false" data-page-node-id="TY0kgxTu1z04cDUszXvqtP" />
            <div class="crop-overlay" data-page-node-id="SGpkTMdvGISEBov9a4O9J9">
              <div class="crop-frame" data-page-node-id="iXgmFRb0ts6wVljR5Hsfze">
              <div class="crop-line-h" data-page-node-id="awzLvRzKmy7JzBvziNHWzm"></div>
              <div class="crop-line-v" data-page-node-id="9qgPP13pX2kKMzIfJEAV3T"></div>
            </div>
            </div>
          </div>
        </div>
        <div class="crop-zoom-row" data-page-node-id="eImGUKrdGxUOH7cqD3aBVn">
          <span class="crop-zoom-label" data-i18n="nick_zoom_out" data-page-node-id="7kKJcmr8gP2nCDZDbq3KAe">缩小</span>
          <input type="range" id="crop-zoom" class="crop-zoom-slider" min="0.5" max="3" step="0.01" value="1" oninput="onCropZoomChange(this.value)" data-page-node-id="2yU1Cw8CxEpNMkOvhPNtUK" />
          <span class="crop-zoom-label" data-i18n="nick_zoom_in" data-page-node-id="aaHSKGXINZ0Xp1wZAOO71a">放大</span>
        </div>
        <div class="profile-modal-buttons" data-page-node-id="SCNYIctIyb75hVUi6UjcDj">
          <button class="profile-modal-btn profile-modal-cancel" onclick="closeAvatarCropModal()" data-page-node-id="DmmZmzaoffBb3CIoAvn8Xt">取消</button>
          <button class="profile-modal-btn profile-modal-confirm" onclick="applyAvatarCrop()" data-page-node-id="XQ9Hl22Z5clYWGZFP8CWNs">应用</button>
        </div>
      </div>
    </div>

    <!-- 左上角人物信息 -->
      <div id="player-profile" class="player-profile" data-page-node-id="5uKB0BKvvAythD0PgGzdGn">
        <div class="profile-avatar" id="profile-avatar" onclick="onHomeBadgeClick('avatar')" data-page-node-id="HSC8yZG5NeF5w2zes36yJg">
          <img id="profile-avatar-img" src="" alt="头像" data-i18n-alt="alt_avatar" style="width:100%;height:100%;object-fit:cover;border-radius:50%;" data-page-node-id="J5666KOtNEZmQbkzLGWFZ0" />
        </div>
        <div class="profile-info" data-page-node-id="M5m2H3PTbzxQ812j39ptt0">
          <!-- ★ 修复（2026-9-13）：移除 data-i18n="nick_default"——切换语言时会把已登录玩家的名称覆盖为「玩家/Player」。
               名称由 initPlayerProfile 按登录态动态写入，不做静态翻译 -->
          <div class="profile-nickname" id="profile-nickname" onclick="onHomeBadgeClick('nick')" data-page-node-id="fgVQZMFp5Gzizu3CCWYStV">玩家</div>
          <div class="profile-exp-bar" data-page-node-id="Q9A92Qe2a2dHPZKUDKtuqn">
            <span class="exp-level" id="profile-level" data-page-node-id="O06Ohux9PLhGj99Aajj1Uj">0</span>
            <div class="exp-track" data-page-node-id="weaea2f5EeqsxnHmlMI15z">
              <div class="exp-fill" id="profile-exp-fill" data-page-node-id="ImZXEKCunVrcij8JIJddxx"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 组队图标 / 队友头像 -->
      <div id="team-icon-container" class="team-icon-container" data-page-node-id="9KqebcBAtQ6eG31OdNfkQY">
        <div class="team-icon" id="team-icon" onclick="PBOnline.toggleTeamInvitePanel()" data-page-node-id="CoajryawGqRxPws5y2TyOb">
          <span class="team-plus" data-page-node-id="uTfOnjAjhKdoZT9G2XBUAx">+</span>
        </div>
        <div class="team-label" id="team-label" data-i18n="team_label" data-page-node-id="ZMiwIvqtrFU6N2UYE0icWh">组队</div>
        <!-- 已组队：队友信息卡片 -->
        <div class="teammate-profile" id="teammate-profile" onclick="PBOnline.toggleTeammateExitPopup(event)" data-page-node-id="s6Axnic9hqDMNQIbmsHkF3">
          <div class="teammate-avatar-box" id="teammate-avatar-box" data-page-node-id="3yD1bG4EQx02Ue9vPLxpnr"></div>
          <div class="teammate-info-box" data-page-node-id="XqjAHu0bZguyaQbXjxbzFK">
            <div class="teammate-nick-text" id="teammate-nick-text" data-page-node-id="FyTjDOBomDJtqCkPLIXtKm"></div>
            <div class="teammate-exp-row" data-page-node-id="FKlE6lrrH92aD0QE6I63Ig">
              <span class="teammate-level-text" id="teammate-level-text" data-page-node-id="USMLrgZlJQAxUtUwJc2QUh">0级</span>
              <div class="teammate-track-bar" data-page-node-id="xBJAwlJkZypv8y8wYa9HxS"><div class="teammate-fill-bar" id="teammate-fill-bar" data-page-node-id="DS3MWlNEtXHpw1AH04zXpA"></div></div>
            </div>
          </div>
          <!-- 退出队伍弹窗 -->
          <div class="teammate-exit-popup" id="teammate-exit-popup" data-page-node-id="hea8SU1cvK64FakY38ULoq">
            <button class="teammate-exit-btn" onclick="event.stopPropagation(); PBOnline.leaveTeam();" data-i18n="team_leave" data-page-node-id="DoYDjAzHmPErshxdOMxSGQ">退出队伍</button>
          </div>
        </div>
      </div>
    <!-- 开发者消息 ✉️ - 右上角（排行榜图标左侧 · 2026-9-14）：显示开发者发给玩家的消息 -->
    <div id="dev-mail-container" class="dev-mail-container">
      <div class="dev-mail-icon" id="dev-mail-icon" onclick="DevMail.togglePanel()" title="开发者消息"><svg class="dev-mail-svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>
        <span class="dev-mail-badge" id="dev-mail-badge">0</span>
      </div>
      <div class="dev-mail-panel" id="dev-mail-panel">
        <div class="dev-mail-panel-title" data-i18n="dm_title">开发者消息</div>
        <div class="dev-mail-list" id="dev-mail-list">
          <div class="dev-mail-empty" data-i18n="dm_empty">暂无消息</div>
        </div>
        <div class="dev-mail-admin">
          <button class="dev-mail-admin-toggle" onclick="DevMail.adminRowToggle()" title="管理员">🔑</button>
        </div>
        <div class="dm-admin-row" id="dm-admin-row" style="display:none;">
          <input type="password" id="dm-admin-pwd-input" placeholder="管理员密码" data-i18n-placeholder="dm_admin_pwd" />
          <button onclick="DevMail.saveAdminPwd()" data-i18n="dm_pwd_save">保存</button>
        </div>
      </div>
    </div>
    <!-- 服务器负载图标 - 右上角 -->
    <div id="server-stats-container" class="server-stats-container" data-page-node-id="kQRctUs3GP4EMubZkggVdL">
      <div class="server-stats-icon" id="server-stats-icon" onclick="PBOnline.toggleServerStats()" data-page-node-id="t1gbQfcKG6GLCjesGFjSs9">
        <span class="server-stats-indicator" id="server-stats-indicator" data-page-node-id="jsfBFPSyAqL8KlKxDgwSAM"></span>
        <span class="server-stats-text" id="server-stats-text" data-page-node-id="6aWOohbY5JBsuo5p0dRYIf">--</span>
      </div>
      <div class="server-stats-panel" id="server-stats-panel" data-page-node-id="hEzxFA8Aw8swAcrY5Hgz0L">
        <div class="server-stats-panel-title" data-i18n="ss_title" data-page-node-id="RH9rAG3RKEGJ8RA5K5stRX">服务器状态</div>
        <div class="server-stats-row" data-page-node-id="VrUFsJaXjpG9CtiESeXrq5"><span class="ss-label" data-i18n="ss_online" data-page-node-id="6wIejXng5C5waKpQSKTZw4">在线玩家</span><span class="ss-value" id="ss-online" data-page-node-id="EOSKfgqyXE5DFdotFYQfkW">--</span></div>
        <div class="server-stats-row" data-page-node-id="TqOHzeTYCmt2PIqobZX2KU"><span class="ss-label" data-i18n="ss_rooms" data-page-node-id="4WQChBua758tMHPc3zoEmR">对局房间</span><span class="ss-value" id="ss-rooms" data-page-node-id="kDKlJrjxejekDQEsVWEs7F">--</span></div>
        <div class="server-stats-row" data-page-node-id="mHpXt72EY7RQsygLH4iqA7"><span class="ss-label" data-i18n="ss_queue" data-page-node-id="enz6vHoZPRBwaXMczpfErx">匹配队列</span><span class="ss-value" id="ss-queue" data-page-node-id="169zAD26KA1PgLxBphOJVc">--</span></div>
        <div class="server-stats-row" data-page-node-id="9Z6q2nKC9wCss8v46QCA06"><span class="ss-label" data-i18n="ss_mem" data-page-node-id="0nGpZodKGRQEB9114X70Dn">内存占用</span><span class="ss-value" id="ss-mem" data-page-node-id="LAaPwYx1HrDuwfzGkaJkaP">--</span></div>
        <div class="server-stats-row" data-page-node-id="oATrfZB9HzyXlmqLkRfeHl"><span class="ss-label" data-i18n="ss_uptime" data-page-node-id="asUzEywQRpe22GTqwIyJyo">运行时间</span><span class="ss-value" id="ss-uptime" data-page-node-id="KhXvVzD18GhDw63kZDjW3O">--</span></div>
        <div class="server-stats-row" id="ss-latency-row" data-page-node-id="BvTYYS9KvrqNmQEdwYuoXc"><span class="ss-label" data-i18n="ss_latency" data-page-node-id="pMj0z45D9zsW69KmfWKlkw">我的延迟</span><span class="ss-value" id="ss-latency" data-page-node-id="RC13iar4UhnbsKIG58Ex0i">--</span></div>
        <!-- AI 玩家（面板最下方 · 点击展开设置，修改需管理员密码 M20260601） -->
        <div class="ai-row" id="ai-row" onclick="toggleAiSettings(event)" data-page-node-id="eyN63HhOIa6T9OFJy82gqT">
          <span class="ai-row-left" data-page-node-id="h05x6sAtZApFV2WeJxgpGw">
            <span id="ai-status-dot" class="ai-status-dot off" data-page-node-id="YRTATJ78evYYHLOjWOADGv"></span>
            <span class="ss-label" data-page-node-id="MMLaJ2t2GMhb8pmYyyxgGa">AI玩家</span>
          </span>
          <span class="ai-row-left" data-page-node-id="v6R2zgHBU2X6uUSxbgorQL">
            <span id="ai-status-text" class="ai-status-text" data-page-node-id="Ms7DK0rNNLYjGiOPZfaCzf">已关闭</span>
            <span id="ai-caret" class="ai-caret" data-page-node-id="4YtAoQVld2BGxebaeX6k3v">▼</span>
          </span>
        </div>
        <div class="ai-settings" id="ai-settings" data-page-node-id="aJBwcO5RNGnkjtEPh1i8BD">
          <div class="ai-set-row" data-page-node-id="KWTD1n8K1QKYaPVs1xBt9W">
            <label class="ai-set-label" data-page-node-id="6WjcGeaPQ2tZpbwusOyF0y">开启AI玩家-0号</label>
            <label class="ai-toggle" title="开启/关闭">
              <input type="checkbox" id="ai-enabled-chk" data-page-node-id="bY4bqG5EtgG53TXTdjvjh5" />
              <span class="ai-toggle-track"><span class="ai-toggle-thumb"></span></span>
            </label>
          </div>
          <div class="ai-set-row" data-page-node-id="9BCTklgF1rb3sCXcv5DDvF">
            <label class="ai-set-label" data-page-node-id="pSZOKNGnAZdLioNzpgNToA">数量（0-8）</label>
            <input type="number" id="ai-count-input" min="0" max="8" value="1" data-page-node-id="LzrLO11CgwSkCyT2WVBUhw" />
          </div>
          <div class="ai-set-row" data-page-node-id="83zc5EUgsAgi6ZTbtyySxt">
            <label class="ai-set-label" data-page-node-id="cFnznl5RQzrLXwINTbucSq">管理员密码</label>
            <input type="password" id="ai-password-input" placeholder="请输入密码" data-page-node-id="WZwNSN5pBBZoRnqGnd7QDl" />
          </div>
          <div class="ai-set-row">
            <label class="ai-set-label">记住密码</label>
            <label class="ai-checkbox" title="记住密码">
              <input type="checkbox" id="ai-remember-chk" />
              <span class="ai-checkbox-box"></span>
            </label>
          </div>
          <div id="ai-modal-error" class="ai-error" data-page-node-id="TUFHcwkFH5nI6StjQa1DQk"></div>
          <div class="ai-actions" data-page-node-id="OnDGpe3OD9cbwSHocQwc1K">
            <button class="ai-btn cancel" onclick="closeAiSettings(event)" data-page-node-id="m8YjWq0BvZnBqV3Wd2Xlq4">收起</button>
            <button class="ai-btn ok" onclick="confirmAiPlayerSettings(event)" data-page-node-id="2LEwZQNKmIQ2Jk8AACRWD2">确定</button>
          </div>
          <div class="ai-hint" data-page-node-id="dBllMWMZ4CHdmXvdpmUyvz">AI 玩家仅进入"单人匹配"队列，只会被真人匹配到。数量为 0 即全部关闭；关闭"0号"后，拉起的均为公平 AI。</div>
        </div>
      </div>
    </div>
    <!-- ★ 排行榜入口（2026-9-14）：右上角「服务器状态」图标左侧，图标+名称，点击展开面板 -->
    <div id="lb-entry" class="lb-entry" onclick="lbTogglePanel()" title="排行榜">
      <span class="lb-entry-icon">🏆</span>
      <span class="lb-entry-text" data-i18n="lb_entry">排行榜</span>
    </div>
    <!-- ★ 排行榜面板：单人/双人匹配胜率前十，前三差异化样式，点击玩家展开最近10场（含回放） -->
    <div id="lb-panel" class="lb-panel">
      <div class="lb-header">
        <span class="lb-title" data-i18n="lb_title">🏆 排行榜</span>
        <div class="lb-toggle" id="lb-toggle">
          <div class="lb-thumb" id="lb-thumb"></div>
          <span class="lb-opt on" data-mode="online_1v1" onclick="lbSwitchMode('online_1v1');event.stopPropagation();" data-i18n="menu_online_solo">单人匹配</span>
          <span class="lb-opt" data-mode="online_2v2" onclick="lbSwitchMode('online_2v2');event.stopPropagation();" data-i18n="menu_online_2v2">双人匹配</span>
        </div>
      </div>
      <div class="lb-list" id="lb-list"><div class="lb-empty">加载中…</div></div>
    </div>
    <!-- 三个房间 overlay 已移入 game-container 内部 -->

    <script>
      // ===== AI 玩家开关逻辑（需管理员密码 M20260601 才能修改） =====
      // includeZero：「开启AI玩家-0号」开关——关闭后服务器立刻移除全知 0 号，
      // 后续拉起的 id 从 1 开始（全是公平号），方便测试其他 AI。
      // 数量（0-8）即总开关：0 = 全部关闭。
      var aiPanelState = { enabled: false, count: 1, includeZero: true };
      var aiPending = false;        // 已下发、等待服务器确认
      var aiPendingTimer = null;    // 超时兜底：避免"点了没反应"

      function pbRequestAiStatus() {
        try { if (typeof PBOnline !== 'undefined' && PBOnline.send) PBOnline.send({ type: 'ai_players_status_request', data: {} }); } catch (e) {}
      }

      function aiSetMsg(text, kind) {
        var err = document.getElementById('ai-modal-error');
        if (!err) return;
        err.textContent = text || '';
        err.style.color = (kind === 'ok') ? '#4ade80' : (kind === 'wait' ? '#93c5fd' : '#f87171');
      }

      function aiClearPending() {
        aiPending = false;
        if (aiPendingTimer) { clearTimeout(aiPendingTimer); aiPendingTimer = null; }
      }

      function pbHandleAiStatus(data) {
        if (!data) return;
        aiPanelState.enabled = !!data.enabled;
        var _c = parseInt(data.count, 10);
        aiPanelState.count = isNaN(_c) ? 1 : Math.max(0, Math.min(8, _c));
        aiPanelState.includeZero = data.includeZero !== false; // 旧服务器无此字段 → 默认 true
        updateAiPanelDisplay();
        if (aiPending) {
          aiClearPending();
          aiSetMsg('已生效', 'ok');
        }
      }

      function updateAiPanelDisplay() {
        var dot = document.getElementById('ai-status-dot');
        var txt = document.getElementById('ai-status-text');
        if (dot) dot.className = 'ai-status-dot ' + (aiPanelState.enabled ? 'on' : 'off');
        if (txt) txt.textContent = (aiPanelState.enabled ? '已开启 ×' + aiPanelState.count : '已关闭');
      }

      function toggleAiSettings(ev) {
        if (ev) ev.stopPropagation();
        var box = document.getElementById('ai-settings');
        var caret = document.getElementById('ai-caret');
        if (!box) return;
        var opening = !box.classList.contains('open');
        if (opening) {
          // 展开时用服务器当前状态回填表单
          var chk = document.getElementById('ai-enabled-chk');
          var cnt = document.getElementById('ai-count-input');
          var err = document.getElementById('ai-modal-error');
          var pwd = document.getElementById('ai-password-input');
          var remember = document.getElementById('ai-remember-chk');
          var savedPwd = null;
          try { savedPwd = localStorage.getItem('pb_ai_admin_pwd'); } catch (e) { savedPwd = null; }
          if (chk) chk.checked = aiPanelState.includeZero; // 开关=是否包含全知 0 号
          if (cnt) cnt.value = aiPanelState.count;
          if (err) aiSetMsg('', '');
          if (remember) remember.checked = !!savedPwd;
          if (pwd) pwd.value = savedPwd || '';
        }
        box.classList.toggle('open', opening);
        if (caret) caret.classList.toggle('open', opening);
      }

      function closeAiSettings(ev) {
        if (ev) ev.stopPropagation();
        var box = document.getElementById('ai-settings');
        var caret = document.getElementById('ai-caret');
        if (box) box.classList.remove('open');
        if (caret) caret.classList.remove('open');
      }

      function isOnlineConnected() {
        try { return typeof PBOnline !== 'undefined' && PBOnline.isConnected === true; }
        catch (e) { return false; }
      }

      function confirmAiPlayerSettings(ev) {
        if (ev) ev.stopPropagation();
        var pwd = document.getElementById('ai-password-input');
        var chk = document.getElementById('ai-enabled-chk');
        var cnt = document.getElementById('ai-count-input');
        var password = pwd ? pwd.value : '';
        if (password !== 'M.20260601') {
          aiSetMsg('管理员密码错误', 'err');
          return;
        }
        // 密码正确：按"记住密码"勾选状态保存/清除（localStorage）
        var remember = document.getElementById('ai-remember-chk');
        try {
          if (remember && remember.checked) localStorage.setItem('pb_ai_admin_pwd', password);
          else localStorage.removeItem('pb_ai_admin_pwd');
        } catch (e) { /* 隐私模式等场景忽略 */ }
        if (!isOnlineConnected()) {
          aiSetMsg('未连接服务器，无法修改', 'err');
          return;
        }
        var enabled = chk ? chk.checked : false;
        var _n = parseInt(cnt ? cnt.value : '', 10);
        var count = isNaN(_n) ? 0 : Math.max(0, Math.min(8, _n));
        try {
          // includeZero=开关（是否含全知 0 号）；enabled 由服务器按 count>0 判定
          PBOnline.send({ type: 'set_ai_players', data: { password: 'M.20260601', enabled: count > 0, count: count, includeZero: enabled } });
        } catch (e) {
          aiSetMsg('发送失败：' + e.message, 'err');
          return;
        }
        // 已下发，等待服务器回 ai_players_status 再刷新显示；
        // 若 5 秒无回包，明确提示"服务器未部署该功能"，杜绝"点了没反应"。
        aiClearPending();
        aiPending = true;
        aiSetMsg('已下发，等待服务器确认…', 'wait');
        aiPendingTimer = setTimeout(function () {
          if (!aiPending) return;
          aiPending = false;
          aiSetMsg('服务器未响应：该服务器未部署 AI 玩家功能', 'err');
        }, 5000);
      }

      // 交互增强：回车确认
      window.addEventListener('load', function () {
        // 页面加载后向服务器请求当前 AI 玩家状态
        setTimeout(pbRequestAiStatus, 1500);

        var pwdInput = document.getElementById('ai-password-input');
        if (pwdInput) {
          pwdInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') { e.preventDefault(); confirmAiPlayerSettings(); }
          });
        }
        var cntInput = document.getElementById('ai-count-input');
        if (cntInput) {
          cntInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') { e.preventDefault(); confirmAiPlayerSettings(); }
          });
        }
      });
    </script>

    <div class="main-menu-content" data-page-node-id="BYQiyicK4sJDpR34Qc4GnT">
      <div class="menu-title" data-page-node-id="dh6QSVWVKvF0FVsB9v84QC">
        <h1 class="title-main" data-i18n="game_name" data-page-node-id="1EnQZQ07jq95PlycC6KgJt">临阵伐谋</h1>
        <p class="title-subtitle" data-i18n="game_subtitle" data-page-node-id="3Ik0caEWBWVdC0wAHoj7Su">五路对战卡牌游戏</p>
      </div>
      <div class="menu-buttons" data-page-node-id="OQ4Y5M6ePU7Vuet74Gj4vS">
        <button class="menu-btn btn-entertainment" onclick="showEntPreview()" data-page-node-id="TUwV5aT31yi7xSVSIdydEf">
          <span class="btn-icon" data-page-node-id="pq3tKsbVMc5uRL1bmSoE8x">🎮</span>
          <span class="btn-text" data-i18n="menu_entertainment" data-page-node-id="S62Ec71M9IeaEloz3Qqohq">娱乐模式</span>
          <span class="btn-badge" data-i18n="menu_ent_badge" data-page-node-id="1pauwSaRMefVW8jxto2m5y">暂无</span>
        </button>
        <div style="position:relative;width:280px;" data-page-node-id="JeZgXApaqNFAimUMOSeANG">
          <button class="menu-btn btn-online" onclick="toggleOnlineSubmenu(event)" data-page-node-id="zDQlzV37HFeOQKfQAfn49m">
            <span class="btn-icon" data-page-node-id="3UUbVsKlV9A2VHVb8wurfy">🌐</span>
            <span class="btn-text" data-i18n="menu_online" data-page-node-id="ivfD3VJZZNeQyXbGiMyw2J">联机模式</span>
          </button>
          <div id="online-submenu" class="online-submenu" data-page-node-id="H1o1XmBbY637HOLTC8DfsG">
            <div class="online-submenu-item" onclick="PBOnline.startMatchmaking(); event.stopPropagation();" data-page-node-id="bhPjbj3Tet6fflLs1myht6">
              <span class="submenu-icon" data-page-node-id="lQS85PGVn2POUqrrRoH4a1">⚔️</span>
              <span class="submenu-text" data-i18n="menu_online_solo" data-page-node-id="EeK4UzEGsClmWdoTm8Aqqh">单人匹配</span>
            </div>
            <div class="online-submenu-item" onclick="PBOnline.startMatchmaking2v2(); event.stopPropagation();" data-page-node-id="uneOzCmNyUvVb8D8foIRKb">
              <span class="submenu-icon" data-page-node-id="RjyUCkCXNuEQpAlliBJFg6">👥</span>
              <span class="submenu-text" data-i18n="menu_online_2v2" data-page-node-id="OVpLRiODCCtuAAVipYBXja">双人匹配</span>
            </div>
            <div class="online-submenu-item" onclick="openRoomList(); event.stopPropagation();" data-page-node-id="rUUK0nEXi16W0hUXMRa0Tu">
              <span class="submenu-icon" data-page-node-id="5At7damnari0H8CA1SiRmX">🏠</span>
              <span class="submenu-text" data-i18n="menu_online_custom" data-page-node-id="HYH3IxQbQQiFzS0kZ9NRHE">自定义房间</span>
            </div>
          </div>
        </div>
        <div style="position:relative;width:280px;" data-page-node-id="Xgfgh2tCz2xi8GMWQidMaC">
          <button class="menu-btn btn-practice" onclick="togglePracticeSubmenu(event)" data-page-node-id="NEA4vQrY6uKEXtjMGwD9BS">
            <span class="btn-icon" data-page-node-id="O9fqQtLJt7JTgsBtURsfap">🤖</span>
            <span class="btn-text" data-i18n="menu_practice" data-page-node-id="4Y4JoF8EzsjC4mbV9E2gLv">人机练习</span>
          </button>
          <div id="practice-submenu" class="practice-submenu" data-page-node-id="qCIhbnrKf6kikPSPKv83uQ">
            <div class="practice-submenu-item" onclick="startPracticeGame1v1(); event.stopPropagation();" data-page-node-id="K3ZhBEVsHkQKeB1fgGWCHe">
              <span class="submenu-icon" data-page-node-id="PW9ua7ASM3BRFvSRGJVJUJ">⚔️</span>
              <span class="submenu-text" data-i18n="menu_practice_1v1" data-page-node-id="Kr6go8ZO34AkidBi8DBiZp">单人 1v1</span>
            </div>
            <div class="practice-submenu-item" onclick="window._forceNeutralBorder=true; startPracticeGame2v2(); event.stopPropagation();" data-page-node-id="VGYKwC2BcBbSAAT6wAG3rJ">
              <span class="submenu-icon" data-page-node-id="fKSSQnlEYG1KCeH3OU9h3V">👥</span>
              <span class="submenu-text" data-i18n="menu_practice_2v1" data-page-node-id="hZFr15poLzO8bwVeYS24Rs">双人 2v1</span>
            </div>
          </div>
        </div>
        <div style="position:relative;width:280px;" data-page-node-id="OYU1lCvTnoDJGAlushzEtE">
          <button class="menu-btn btn-tutorial" onclick="toggleTutorialSubmenu(event)" data-page-node-id="5vU2vREBrDRDy5RWiHeQYD">
            <span class="btn-icon" data-page-node-id="ccuQsjEzwNgQ9tXRGMkfVr">📖</span>
            <span class="btn-text" data-i18n="menu_tutorial" data-page-node-id="ROqAeFrMv6nFWFuEstJf8E">教程</span>
          </button>
          <div id="tutorial-submenu" class="tutorial-submenu" data-page-node-id="UjjUFccjJxrh6SB5ORqXbt">
            <div class="tutorial-submenu-item" onclick="startTutorial('point'); event.stopPropagation();" data-page-node-id="CLDZTdMSFewAc545WpmAHO">
              <span class="submenu-icon" data-page-node-id="rSRSuyAF4IBC9ssyYp16xG">🃏</span>
              <span class="submenu-text submenu-text-sm" data-i18n="menu_tutorial_point" data-page-node-id="qUthYcMT7rUtTl9VqyQGzY">拼点和牌型</span>
            </div>
            <div class="tutorial-submenu-item" onclick="startFunctionalCardTutorial(); event.stopPropagation();" data-page-node-id="VDIYLDIVbwZTBPi2E8B5Y1">
              <span class="submenu-icon" data-page-node-id="5gQFQsuz2Eh4nXhe9EwHxx">⚡</span>
              <span class="submenu-text" data-i18n="menu_tutorial_action" data-page-node-id="szja0UR9yQAt667lY2OQHO">功能牌</span>
            </div>
            <div class="tutorial-submenu-item" onclick="startMatchTutorial(); event.stopPropagation();" data-page-node-id="rmiFE9MXWWRTR2w4KCPqvN">
              <span class="submenu-icon" data-page-node-id="SbNU5xTZRn1bVq1qaDH75e">🔗</span>
              <span class="submenu-text" data-i18n="menu_tutorial_match" data-page-node-id="iuAEw0et0UilHLPRn9RKML">匹配操作</span>
            </div>
          </div>
        </div>
        <!-- 快捷键入口（教程按钮下方 · 半宽，点击或按 Alt 呼出；放在容器外避免影响子菜单定位） -->
        <button id="hotkey-btn" class="menu-btn btn-hotkey" style="width:140px;margin:0 auto;" onclick="toggleHotkeyPanel()">
          <span class="btn-icon">⌨️</span>
          <span class="btn-text" data-i18n="hk_btn">快捷键</span>
        </button>
      </div>
      <div class="menu-version" data-page-node-id="IfbsYXiVw4EQfXFQ9lhddr">
        <!-- ★ 2026-9-20 关闭游戏：界面底部独立小圆钮（红色警示配色，区别于金色菜单按钮） -->
        <button id="quit-game-btn" class="menu-quit-btn" title="关闭游戏" onclick="pbQuitGame()" aria-label="关闭游戏">
          <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M12 3v8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" fill="none"/><path d="M6.3 6.5a8 8 0 1 0 11.4 0" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" fill="none"/></svg>
        </button>
        <span data-page-node-id="A2lD2aHi5HpL9h0A7WEVby">Version 1.2.0</span>
      </div>
    </div>

    <!-- BGM 音量控制器 - 主页左下角（上方，显示模式按钮在其下） -->
    <div id="bgm-volume-control" class="bgm-volume-control" data-page-node-id="wHuLzVdbrF1GH9cFHe5Axv">
      <span class="bgm-volume-icon" data-page-node-id="bemhUk6PRSZ9FLEdxO6pXh"><svg class="bgm-note-svg" viewBox="0 0 24 17.6" aria-hidden="true"><polygon points="4,3 21,1.8 21,4.8 4,6"/><rect x="5.2" y="4.6" width="1.6" height="8.4"/><rect x="19.2" y="3.4" width="1.6" height="9.5"/><ellipse cx="4.5" cy="13.6" rx="2.9" ry="2.1"/><ellipse cx="18.6" cy="13.5" rx="2.9" ry="2.1"/></svg></span>
      <input type="range" id="bgm-volume-slider" min="0" max="100" value="20" class="bgm-volume-slider" title="BGM音量" data-i18n-title="title_bgm" data-page-node-id="RPwhGFqjICjtxaNVXfZngJ" />
      <span id="bgm-volume-value" class="bgm-volume-value" data-page-node-id="HO7LGkdAMKOiUPTiwzPQAy">20%</span>
    </div>

    <!-- 显示模式按钮 - 主页左下角最底（仅 Electron 显示；悬停向右展开滑块，切换全屏/无边框，2026-9-15） -->
    <div id="winmode-wrap" style="display:none;left:20px;bottom:20px;">
      <div id="winmode-icon" title="显示模式"><span>⛶</span></div>
      <div id="winmode-panel">
        <div id="wm-track">
          <div id="wm-thumb"></div>
          <button id="wm-opt-full" class="wm-opt game-cursor-hover" data-i18n="set_full">全屏</button>
          <button id="wm-opt-borderless" class="wm-opt game-cursor-hover" data-i18n="set_borderless">无边框</button>
        </div>
      </div>
    </div>

    <!-- 快捷键入口已移至主页菜单教程按钮下方（id=hotkey-btn） -->

    <!-- ICP 备案号 - 主页底部居中（2026-9-30 合规要求：已备案站点须在首页底部展示备案号并链接工信部备案系统） -->
    <div id="icp-footer" style="display:none;position:fixed;left:0;bottom:0;width:1920px;text-align:center;pointer-events:none;z-index:60;padding-bottom:6px;font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:13px;line-height:1.6;color:rgba(226,232,240,0.55);text-shadow:0 1px 3px rgba(0,0,0,0.85);">
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="pointer-events:auto;color:inherit;text-decoration:none;">皖ICP备2026032394号</a>
    </div>

    <!-- 语言设置入口 - 主页右下角（原图鉴按钮，保留 codex-btn id 让 updateScale 自动缩放） -->
    <button id="codex-btn" class="menu-codex-btn" onclick="openLanguagePanel()" data-page-node-id="qbYArdkYJQidhAGsBlnF8l">
      <span class="btn-icon" style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;filter:drop-shadow(0 2px 6px rgba(34,211,238,0.5));" data-page-node-id="eyJpaEz546EHpewNvlQjSN">
        <svg viewBox="0 0 64 40" xmlns="http://www.w3.org/2000/svg" width="32" height="32" data-page-node-id="KTCEWa95eRWPq0crb03NKU">
          <!-- 书本左页（渐变填充） -->
          <defs data-page-node-id="HtQM6ap5IZ1yDJjnIDZ8a0">
            <linearGradient id="pageGrad" x1="0" y1="0" x2="0" y2="1" data-page-node-id="E8vAUUTWl4Kw7KS7oEdnxp">
              <stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" data-page-node-id="zaNohtGsEpeZqm5m4gNv8Y"/>
              <stop offset="100%" stop-color="#e0e7ff" stop-opacity="0.75" data-page-node-id="EfOZdsM90H99rCvawaAl0C"/>
            </linearGradient>
          </defs>
          <!-- 书本整体外框（圆角粗描边） -->
          <rect x="16" y="5" width="32" height="28" rx="2" fill="url(#pageGrad)" stroke="#ffffff" stroke-width="2.5" data-page-node-id="QGN7gTe6fYtDUuk3fESOkM"/>
          <!-- 中缝加粗 -->
          <line x1="32" y1="5" x2="32" y2="33" stroke="#a855f7" stroke-width="2" data-page-node-id="jYn9BWeXhIReIfDwuiieIZ"/>
          <!-- 左页：中（和 A 同一 y，用 dominant-baseline 几何居中） -->
          <text x="24" y="19" text-anchor="middle" dominant-baseline="central" font-size="13" font-weight="900" fill="#7c3aed" font-family="'PingFang SC','Microsoft YaHei',sans-serif" data-page-node-id="qZq2E96QZY06aCk7x3c1Ts">中</text>
          <!-- 右页：A -->
          <text x="40" y="19" text-anchor="middle" dominant-baseline="central" font-size="14" font-weight="900" fill="#7c3aed" font-family="sans-serif" data-page-node-id="iclrE2vK3EsVfBB7QaT1be">A</text>
          <!-- 左箭头（实心三角箭头，亮青色） -->
          <polygon points="4,20 14,13 14,27" fill="#22d3ee" stroke="#06b6d4" stroke-width="1.5" stroke-linejoin="round" data-page-node-id="nXrOET6PSUvZPGq9MPjoGo"/>
          <!-- 右箭头（实心三角箭头） -->
          <polygon points="60,20 50,13 50,27" fill="#22d3ee" stroke="#06b6d4" stroke-width="1.5" stroke-linejoin="round" data-page-node-id="OWXdbUfLJoMdAGtESranKN"/>
        </svg>
      </span>
      <span class="btn-text" data-page-node-id="k4o1ojhOtSWIL0X4Xy4dZB">
        <span data-i18n="lang_btn" data-page-node-id="joJqOxhCl9pgpEr0rtxtIC">语言</span>
        <span class="btn-sub" data-i18n="lang_btn_sub" data-page-node-id="bzfXlMjZ9nnfsdyuCMeL4e">Language</span>
      </span>
    </button>

    <!-- 快捷键一览浮层（左下角展开，无遮罩；updateScale 定位，Alt 全模式呼出） -->
    <style>
      #hotkey-panel { position: fixed; z-index: 10060; width: 460px; max-width: 92vw; max-height: 74vh; overflow-y: auto; background: linear-gradient(160deg, rgba(120,53,15,0.97) 0%, rgba(30,27,75,0.96) 55%, rgba(15,23,42,0.97) 100%); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(250,204,21,0.35); border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; transform-origin: bottom left; transform: scale(0.92); opacity: 0; transition: transform 0.2s cubic-bezier(.2,.9,.3,1.2), opacity 0.18s ease; pointer-events: none; }
      #hotkey-panel.open { transform: scale(1); opacity: 1; pointer-events: auto; }
      .hk-group { margin-bottom: 14px; }
      .hk-group-title { font-size: 14px; font-weight: 800; color: #fde68a; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
      .hk-group-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(250,204,21,0.35), transparent); }
      .hk-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; }
      .hk-row:nth-child(odd) { background: rgba(255,255,255,0.045); }
      .hk-key { flex-shrink: 0; min-width: 150px; font-size: 12.5px; font-weight: 700; color: #fbbf24; background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.3); border-radius: 6px; padding: 3px 10px; text-align: center; }
      .hk-desc { font-size: 13px; color: #ddd6fe; }
    </style>
    <!-- 快捷键一览浮层主体在 </body> 前（body 直属，任何模式都可由 Alt 呼出） -->

    <!-- 关于 / 语言 弹窗 - 设计稿坐标系（和 custom-room-overlay 同级同结构） -->
    <div id="language-overlay" style="position:absolute;top:0;left:0;width:1920px;height:1080px;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10050;display:none;align-items:center;justify-content:center;transform-origin:top left;" data-page-node-id="DdDb4T52JGBX00fZRA3IRW">
      <div id="language-panel" style="width:500px;max-width:92vw;max-height:82vh;background:linear-gradient(160deg, rgba(76,29,149,0.97) 0%, rgba(30,27,75,0.97) 50%, rgba(15,23,42,0.97) 100%);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(168,85,247,0.35);border-radius:16px;box-shadow:0 25px 80px rgba(88,28,135,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;overflow:hidden;display:flex;flex-direction:column;transform:scale(0.95);transition:transform 0.22s cubic-bezier(.2,.9,.3,1.2);" data-page-node-id="eBt4PQ8TkGWJoClnzTJRS5">
        <!-- 标题栏（带渐变顶部高光条） -->
        <div style="padding:16px 20px 14px;border-bottom:1px solid rgba(168,85,247,0.25);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg, rgba(168,85,247,0.22) 0%, rgba(34,211,238,0.08) 50%, transparent 100%);" data-page-node-id="WXG3HMHMlBEtiBNZmFXKCc">
          <div style="display:flex;align-items:center;gap:12px;" data-page-node-id="YNZo562TPYf5UX1p1eAyk4">
            <span style="display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;filter:drop-shadow(0 0 6px rgba(168,85,247,0.6));" data-page-node-id="srCtoMPMCrWJNgMJ0WuXDR">
              <svg viewBox="0 0 64 40" xmlns="http://www.w3.org/2000/svg" width="60" height="60" data-page-node-id="Is3o8T5nhPyTK2hvvjUgUu">
                <defs data-page-node-id="unJEpJARw9bKzvUuEWn014">
                  <linearGradient id="lgPanelGrad" x1="0" y1="0" x2="0" y2="1" data-page-node-id="SuwEVXGY6c8fF7QkmCnfGx">
                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" data-page-node-id="H4UUpoR41ePlv6bD1M8Dxv"/>
                    <stop offset="100%" stop-color="#ede9fe" stop-opacity="0.8" data-page-node-id="rAAqG0JRVNSqej5V5pQeHe"/>
                  </linearGradient>
                </defs>
                <rect x="16" y="5" width="32" height="28" rx="2" fill="url(#lgPanelGrad)" stroke="#ffffff" stroke-width="2.5" data-page-node-id="tmk7Q0bbTDHXJYAx2q4uw1"/>
                <line x1="32" y1="5" x2="32" y2="33" stroke="#a855f7" stroke-width="2" data-page-node-id="sWnLOevBCH3gsnXqt1J7JA"/>
                <text x="24" y="19" text-anchor="middle" dominant-baseline="central" font-size="13" font-weight="900" fill="#7c3aed" font-family="'PingFang SC','Microsoft YaHei',sans-serif" data-page-node-id="mkb4nbXf6qWyAihiH0hQqP">中</text>
                <text x="40" y="19" text-anchor="middle" dominant-baseline="central" font-size="14" font-weight="900" fill="#7c3aed" font-family="sans-serif" data-page-node-id="YtkKS3nzpi6Gxx90scJTa8">A</text>
                <polygon points="4,20 14,13 14,27" fill="#22d3ee" stroke="#06b6d4" stroke-width="1.5" stroke-linejoin="round" data-page-node-id="cs0fRLIWyH7bK2eapDL69e"/>
                <polygon points="60,20 50,13 50,27" fill="#22d3ee" stroke="#06b6d4" stroke-width="1.5" stroke-linejoin="round" data-page-node-id="lwvcNRJ8dlXw0si7CEjUvP"/>
              </svg>
            </span>
            <span style="color:#f5f3ff;font-size:17px;font-weight:700;letter-spacing:0.3px;text-shadow:0 1px 2px rgba(0,0,0,0.3);" data-i18n="lang_title" data-page-node-id="wgE4CPWKRZGgEcujieN7be">关于 / 语言</span>
          </div>
          <button onclick="closeLanguagePanel()" style="width:30px;height:30px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#c4b5fd;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.18s;" data-page-node-id="uSiDdcrjN4FHdhOzBFXAAm">×</button>
        </div>
        <!-- 游戏介绍（开发者小故事 · 2026-9-13） -->
        <div style="padding:20px;flex:1;overflow-y:auto;color:#c4b5fd;font-size:13px;line-height:1.8;" data-page-node-id="MrooNnEsvgAwbOCzxWKq7Q">
          <div data-i18n="lang_about_title" style="font-weight:600;color:#ede9fe;margin-bottom:12px;font-size:15px;display:flex;align-items:center;gap:6px;" data-page-node-id="XyEozPElyjx96WCEcVxRcb">📖 这是关于《临阵伐谋》的小故事</div>
          <div style="color:#c4b5fd;font-size:12px;line-height:1.9;padding:14px;background:rgba(168,85,247,0.1);border-radius:8px;border:1px solid rgba(168,85,247,0.25);" data-page-node-id="EX6FdIMhHwbEk8xiw0Eq25">
            <p data-i18n="lang_about_p1" style="margin:0 0 10px;">小时候，我摆着爷爷给的许多硬币（不能花），着迷的过完一个下午。不是意淫怎么花，而是把它们想象成玩具士兵，在我的大脑内开启一场世界大战。</p>
            <p data-i18n="lang_about_p2" style="margin:0 0 10px;">虽然别的小孩拥有许多玩具，但我的想象力也在帮助我一点一点实现自己的乐趣。</p>
            <p data-i18n="lang_about_p3" style="margin:0 0 10px;">上学那会，最羡慕的是别家小孩拥有的桌游大富翁，我虽然没有，但我可以画画。于是画桌游，成了我日后自娱自乐的习惯。</p>
            <p data-i18n="lang_about_p4" style="margin:0 0 10px;">上班之后，工作磨灭了我很多爱好和游戏，空缺带来的孤寂，使我回想起了曾今的习惯。</p>
            <p data-i18n="lang_about_p5" style="margin:0 0 10px;">于是我重拾画笔（鼠标），制作了一款三国武将战争类桌游。</p>
            <p data-i18n="lang_about_p6" style="margin:0 0 10px;">因为累积数年的不断推倒重做（和室友测试游玩），此游戏的对战部分愈加完善和复杂。于是我将对战部分脱离本体，单独改动制作成了新游戏。</p>
            <p data-i18n="lang_about_p7" style="margin:0 0 10px;font-weight:700;color:#ede9fe;">而这游戏就是现在的《临阵伐谋》</p>
            <p data-i18n="lang_about_p8" style="margin:0 0 10px;">好了，小故事说完，感谢你的关注。最后表达一下：我制作游戏的动力，就是看到自己的游戏变得更好，而大家的评论，就是我进步的源泉。</p>
            <p style="margin:0;"><span data-i18n="lang_about_p9a">感兴趣的朋友，欢迎关注我的B站账号：</span><a href="https://space.bilibili.com/384137566?spm_id_from=333.788.0.0" target="_blank" rel="noopener" title="义明Tom的B站主页" style="color:#fcd34d;font-weight:700;text-decoration:none;transition:color .2s;" onmouseover="this.style.color='#fde68a'" onmouseout="this.style.color='#fcd34d'">义明Tom</a><a href="https://space.bilibili.com/384137566?spm_id_from=333.788.0.0" target="_blank" rel="noopener" title="义明Tom的B站主页" style="display:inline-flex;align-items:center;margin-left:6px;vertical-align:-3px;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fcd34d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:all .2s;" onmouseover="this.setAttribute('stroke','#fde68a')" onmouseout="this.setAttribute('stroke','#fcd34d')"><path d="M7 3.5 4 7"/><path d="m17 3.5 3 3.5"/><rect x="2" y="7" width="20" height="13" rx="3"/><path d="m9 12 2.5 1.5L9 15z" fill="#fcd34d" stroke="none"/><line x1="15.5" y1="12" x2="15.5" y2="15"/><line x1="17.5" y1="13.5" x2="15.5" y2="13.5"/></svg></a></p>
          </div>
        </div>
        <!-- 语言切换区 -->
        <div style="padding:16px 20px 20px;border-top:1px solid rgba(168,85,247,0.25);background:linear-gradient(180deg, transparent 0%, rgba(168,85,247,0.08) 100%);" data-page-node-id="UfznTAhjmORv2cdyD8AIPR">
          <div data-i18n="lang_select" style="font-size:12px;color:#a78bfa;margin-bottom:12px;letter-spacing:0.5px;" data-page-node-id="tsNUEdmRPXI4v8upgzBSFm">▼ 选择游戏语言</div>
          <div style="display:flex;gap:12px;" data-page-node-id="OPWRdwf3kYJ8vjxGHjaoY4">
            <!-- 中文 -->
            <button onclick="applyGameLang('zh')" class="lang-flag-btn" data-lang="zh" style="flex:1;padding:16px;border:2px solid rgba(196,181,253,0.35);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(168,85,247,0.18) 50%, rgba(124,58,237,0.22) 100%);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.22s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 4px 14px rgba(88,28,135,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);" data-page-node-id="KbFM8aZHy2kWHvTxbkUEL3">
              <span style="font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));" data-page-node-id="C8sLLyRQ9n2I4olT2Qabih">🇨🇳</span>
              <div style="text-align:left;" data-page-node-id="fRas29cUg3lPU13HRFakK3">
                <div data-i18n="lang_zh" style="color:#ede9fe;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.4);" data-page-node-id="CobBipoFttOg89BsAIBXCZ">简体中文</div>
                <div data-i18n="lang_zh_sub" style="color:#c4b5fd;font-size:10px;opacity:0.85;" data-page-node-id="OgU7YbS8bed1Kpf3gSpym3">简体中文</div>
              </div>
            </button>
            <!-- English -->
            <button onclick="applyGameLang('en')" class="lang-flag-btn" data-lang="en" style="flex:1;padding:16px;border:2px solid rgba(196,181,253,0.35);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(168,85,247,0.18) 50%, rgba(124,58,237,0.22) 100%);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.22s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 4px 14px rgba(88,28,135,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);" data-page-node-id="AboBTFUQI36F8GuArZ885c">
              <span style="font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));" data-page-node-id="300MbrXIxWqthWXgbgpGn3">🇬🇧</span>
              <div style="text-align:left;" data-page-node-id="d3iuj1C9A5me2EXwL2rcSF">
                <div data-i18n="lang_en" style="color:#ede9fe;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.4);" data-page-node-id="LgLX1tpAugDKChNnyDSspu">English</div>
                <div data-i18n="lang_en_sub" style="color:#c4b5fd;font-size:10px;opacity:0.85;" data-page-node-id="W2JjIJJA1d6GO7QRlNgAnM">English</div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 通用确认弹窗（body 级 overlay，transform-origin:top left） -->
    <div id="confirm-overlay" style="position:absolute;top:0;left:0;width:1920px;height:1080px;background:rgba(0,0,0,0.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10060;display:none;transform-origin:top left;opacity:0;transition:opacity 0.2s ease;" data-page-node-id="reClSsQikdsGIn3P0RHY2j">
      <div id="confirm-panel" style="position:absolute;width:240px;background:linear-gradient(160deg, rgba(76,29,149,0.97) 0%, rgba(30,27,75,0.97) 50%, rgba(15,23,42,0.97) 100%);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(168,85,247,0.35);border-radius:12px;box-shadow:0 12px 40px rgba(88,28,135,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;overflow:hidden;display:flex;flex-direction:column;transform:scale(0.92);transition:transform 0.18s cubic-bezier(.2,.9,.3,1.2);" data-page-node-id="7X4AaDvqWuPMBlTmzUZ6Xx">
        <!-- 图标 + 标题 -->
        <div style="padding:12px 14px 6px;display:flex;align-items:center;gap:8px;" data-page-node-id="L2CHtP29T6L2zObUbel9Ky">
          <span id="confirm-icon" style="font-size:22px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));" data-page-node-id="jAxTNZ5v7vNBjCxJgB8you">⚠️</span>
          <div id="confirm-title" style="color:#ede9fe;font-size:13px;font-weight:700;flex:1;" data-page-node-id="Z6P1hCzfSzx6UiLW0HPCob">确认操作</div>
        </div>
        <!-- 消息 -->
        <div id="confirm-message" style="padding:0 14px 12px;color:#c4b5fd;font-size:12px;line-height:1.5;" data-page-node-id="z2eDALuTpw7r1VlTODCOJr">确认执行此操作？</div>
        <!-- 按钮 -->
        <div style="padding:8px 10px 10px;border-top:1px solid rgba(168,85,247,0.25);background:linear-gradient(180deg, transparent 0%, rgba(168,85,247,0.08) 100%);display:flex;gap:8px;" data-page-node-id="7H9vNEY20nDUoTAkCpk10k">
          <button id="confirm-cancel-btn" onclick="_closeConfirmDialog(false)" data-i18n="cr_cancel" style="flex:1;padding:8px;border:1px solid rgba(168,85,247,0.4);border-radius:8px;background:rgba(255,255,255,0.06);color:#c4b5fd;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.18s;" data-page-node-id="BdITERmXMqGbv9hd4QzOTc">取消</button>
          <button id="confirm-ok-btn" onclick="_closeConfirmDialog(true)" style="flex:1;padding:8px;border:1px solid rgba(248,113,113,0.6);border-radius:8px;background:linear-gradient(135deg, #ef4444, #dc2626);color:white;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(220,38,38,0.4);transition:all 0.18s;" data-page-node-id="20mEYWBWLkZbEh9QEwodP8">确定</button>
        </div>
      </div>
    </div>

    <!-- 密码输入弹窗（body 级 overlay，房间大厅同款深蓝黑主题） -->
    <div id="pwd-overlay" style="position:absolute;top:0;left:0;width:1920px;height:1080px;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10065;display:none;transform-origin:top left;opacity:0;transition:opacity 0.2s ease;" data-page-node-id="mycxhyBezO21zn4FRcp7RX">
      <div id="pwd-panel" style="position:absolute;width:280px;background:linear-gradient(145deg, #1a1a2e, #16213e);border:1px solid rgba(255,255,255,0.12);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,0.7);overflow:hidden;display:flex;flex-direction:column;transform:scale(0.92);transition:transform 0.18s cubic-bezier(.2,.9,.3,1.2);" data-page-node-id="jW8wFgttYFNVEvgMDfGEgL">
        <div style="padding:14px 16px 10px;display:flex;align-items:center;gap:10px;" data-page-node-id="jhlW5Mh61VV0A9cUnEGsQ0">
          <span style="font-size:20px;" data-page-node-id="vcezMVGo97lT2CymkxD3dx">🔒</span>
          <div style="color:#f0f4ff;font-size:14px;font-weight:700;" data-page-node-id="2GbGSvNNSZoMwt6aMRTFNz">房间密码</div>
        </div>
        <div style="padding:0 16px 12px;" data-page-node-id="Cy5AJsUaxdRCuzrPbIx7Lu">
          <input id="pwd-input" type="password" maxlength="16" placeholder="请输入密码" data-i18n-placeholder="ph_password" autocomplete="off" style="width:100%;padding:9px 12px;border-radius:8px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:13px;outline:none;box-sizing:border-box;transition:border-color 0.15s;" onfocus="this.style.borderColor='#6366f1'" onblur="this.style.borderColor='#334155'" onkeydown="if(event.key==='Enter'){_submitPasswordDialog();event.preventDefault();}else if(event.key==='Escape'){_closePasswordDialog();event.preventDefault();}" data-page-node-id="tVCw8t3ddZtPrqZiFHX3ag" />
        </div>
        <div style="padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,0.08);background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.03) 100%);display:flex;gap:10px;" data-page-node-id="znQyUMUESslLx9LVVmdQN2">
          <button onclick="_closePasswordDialog(false)" data-i18n="cr_cancel" style="flex:1;padding:9px;border:1px solid #475569;border-radius:8px;background:#1e293b;color:#cbd5e1;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;" data-page-node-id="CvGPuACqjuPxZHDEEJzlb9">取消</button>
          <button onclick="_submitPasswordDialog()" style="flex:1;padding:9px;border:none;border-radius:8px;background:linear-gradient(135deg, #3b82f6, #1d4ed8);color:white;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(29,78,216,0.45);transition:all 0.15s;" data-page-node-id="A6mhbqVyXwZ9LYuSBqSo5x">确定</button>
        </div>
      </div>
    </div>

  </div>

  <div id="tutorial-overlay" data-page-node-id="lFvslUgUBtQ3wdcUiX8S8W"></div>

  <div class="game-container-wrapper" data-page-node-id="47c5KIpRXKf6YgigZNbQ3q">
    <div class="game-container" data-page-node-id="nDAG4fJH3rFVCS0ytx2EvC">
    <!-- ====================================================================== -->
    <!-- 背景装饰层 - 根据设置切换显示不同主题的装饰图案 -->
    <!-- z-index: 1，位于游戏背景(::before z-index:0)之上、游戏元素之下 -->
    <!-- ====================================================================== -->
    <svg id="bg-decoration" class="bg-decoration" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 3200 1200" style="
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    " data-page-node-id="CXcVhL5g6UooNy5eVrltDd">
      <defs data-page-node-id="13lyM1460iJC8MZstYmUKP">
        <!-- 十字星通体发光滤镜 -->
        <filter id="starfield-cross-glow" x="-200%" y="-200%" width="500%" height="500%" data-page-node-id="OoEHTDoxAVP0orqlbEVb4B">
          <feGaussianBlur stdDeviation="2.5" result="blur" data-page-node-id="Wx25CKRkIOhQV62RvyGT8j"/>
          <feMerge data-page-node-id="dMrOfNBEbdTPRvNI9Znp9y">
            <feMergeNode in="blur" data-page-node-id="cxWHJnunc4UtNy0dvpzKCb"/>
            <feMergeNode in="SourceGraphic" data-page-node-id="PZbkO4LG54KJOglGXBySSE"/>
          </feMerge>
        </filter>
        <!-- 电子粒子发光滤镜（机械科技） -->
        <filter id="tech-electron-glow" x="-300%" y="-300%" width="700%" height="700%" data-page-node-id="HRNPUkhGSSdFRwiN0u6tAv">
          <feGaussianBlur stdDeviation="3" result="blur1" data-page-node-id="UIqzfZjr7eqwLQGGEn4XYh"/>
          <feGaussianBlur stdDeviation="7" result="blur2" data-page-node-id="yerszZCHoretMQg1Nqv9FA"/>
          <feMerge data-page-node-id="Ac6xv2zSTvvEijiNwGSoLn">
            <feMergeNode in="blur2" data-page-node-id="fAPgSdNXbhdhjA86HThPog"/>
            <feMergeNode in="blur1" data-page-node-id="FGsnFPdAGYwyxFIeKkIGtY"/>
            <feMergeNode in="SourceGraphic" data-page-node-id="gj6WY0JD1jxXH7K53kpXpz"/>
          </feMerge>
        </filter>
        <!-- 流星头部发光滤镜 -->
        <filter id="meteor-head-glow" x="-400%" y="-400%" width="900%" height="900%" data-page-node-id="P5TBTLR3WYZ7tJauWMH5Ia">
          <feGaussianBlur stdDeviation="4" result="blur1" data-page-node-id="6FPee1r7D1NMhpFSSvi7OS"/>
          <feGaussianBlur stdDeviation="10" result="blur2" data-page-node-id="Z9Qpm7FqIaVfvzuxwkv3rk"/>
          <feMerge data-page-node-id="F9nMjuik0wiLpMMTnUYFbv">
            <feMergeNode in="blur2" data-page-node-id="ytau7Bi0qd06N7td3lVjBE"/>
            <feMergeNode in="blur1" data-page-node-id="5ITKcYM7YQtR4mkXC8bzVG"/>
            <feMergeNode in="SourceGraphic" data-page-node-id="uita5ZVdbSDfVmFQC5fjyo"/>
          </feMerge>
        </filter>
        <!-- 流星拖尾颜色渐变：头部亮绿→尾部透明消失 -->
        <linearGradient id="meteor-trail-grad" x1="100%" y1="0%" x2="0%" y2="0%" data-page-node-id="UH2EKtG4XcTyxXkRBDhxmj">
          <stop offset="0%" stop-color="rgba(220,255,225,0.95)" data-page-node-id="2Mgez5umFLvZxFMZAqmigr"/>
          <stop offset="15%" stop-color="rgba(150,240,180,0.75)" data-page-node-id="j8bYpRcZmo7x8G4eetv7RQ"/>
          <stop offset="40%" stop-color="rgba(80,222,128,0.5)" data-page-node-id="vGGhDADanPHXg7QcAghTJp"/>
          <stop offset="75%" stop-color="rgba(59,209,120,0.25)" data-page-node-id="nVKLxtB0lGEwBZoGkIb5tk"/>
          <stop offset="100%" stop-color="rgba(59,209,120,0)" data-page-node-id="2nILEhp5p0vF1vymidqF6s"/>
        </linearGradient>
        <!-- 流星拖尾粗细渐变：头部较粗，尾部收敛到细线 -->
        <linearGradient id="meteor-trail-grad-mid" x1="100%" y1="0%" x2="0%" y2="0%" data-page-node-id="fTQBPFEV3vofBY07bsOo7C">
          <stop offset="0%" stop-color="rgba(150,240,180,0.7)" data-page-node-id="N3MHYG3QfXLRXGYEMwaOng"/>
          <stop offset="30%" stop-color="rgba(80,222,128,0.4)" data-page-node-id="9wXDidQnCq26P2vQMorldE"/>
          <stop offset="70%" stop-color="rgba(59,209,120,0.15)" data-page-node-id="VSBrAwVOKeRXsJl9kjCli5"/>
          <stop offset="100%" stop-color="rgba(59,209,120,0)" data-page-node-id="VeFE4GLog9410TGpvHr0vo"/>
        </linearGradient>
        <!-- 星空主题装饰（动态版） -->
        <g id="deco-starfield" data-page-node-id="Hdyq2dVkPWC09VuqQspsDf">
          <!-- 四角星云光晕 - 缓慢呼吸 -->
          <g data-page-node-id="hRmUXVqTIz7f19Gq3TkJXx">
            <circle cx="450" cy="-50" r="300" fill="rgba(128,90,213,0.1)" data-page-node-id="pUeoSg12v8yTcbzeiPr6ZE"><animate attributeName="opacity" values="1;0.5;1" dur="8s" repeatCount="indefinite" data-page-node-id="vBNiYmHfWMXjr5vk0k3NS2"/></circle>
            <circle cx="2750" cy="-50" r="300" fill="rgba(128,90,213,0.1)" data-page-node-id="fhfi5Hmj0IO7yTLxT15wMT"><animate attributeName="opacity" values="1;0.5;1" dur="7s" repeatCount="indefinite" data-page-node-id="tZZT8HguMf82cxKYIqhtgQ"/></circle>
            <circle cx="450" cy="1250" r="300" fill="rgba(59,130,246,0.08)" data-page-node-id="tpvTaOzWrivJBQwaQtPYyD"><animate attributeName="opacity" values="1;0.5;1" dur="9s" repeatCount="indefinite" data-page-node-id="t2iE4b3shEmcW4AG7bQlc3"/></circle>
            <circle cx="2750" cy="1250" r="300" fill="rgba(59,130,246,0.08)" data-page-node-id="zzahTdR8iG4zuLE1o8EIUA"><animate attributeName="opacity" values="1;0.5;1" dur="7.5s" repeatCount="indefinite" data-page-node-id="by5olVYJNtCHIjLYnDiLgQ"/></circle>
          </g>
          <!-- 四角星座连接 -->
          <g data-page-node-id="rZqgkmzg6XgkG3r5cXN0EX">
            <!-- 左上星座 -->
            <path stroke="rgba(147,112,219,0.3)" stroke-width="1.5" fill="none" d="M 520 -30 L 590 -50 L 650 10 L 570 50 L 490 30 Z" data-page-node-id="BjDKaGXWCAgWz5kq0qoaqj"/>
            <circle cx="520" cy="-30" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="JBKNAmKADhvvvkkgQJ79bz"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4s" repeatCount="indefinite" data-page-node-id="7B5X1rsY2W0GKZDPpPmUU5"/></circle>
            <circle cx="590" cy="-50" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="ySE31PD7sAkFXNyUBXBJTS"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.5s" repeatCount="indefinite" data-page-node-id="tpTSfJCrU10zDf8lR7k1cM"/></circle>
            <circle cx="650" cy="10" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="GRF3ghcvTIpcXby8Z4y0iu"><animate attributeName="opacity" values="0.8;0.45;0.8" dur="4.5s" repeatCount="indefinite" data-page-node-id="BW1ln23hzMrqVVEUrYEbjy"/></circle>
            <circle cx="570" cy="50" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="diBlTfooskeikvNVRHTRGW"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="3.8s" repeatCount="indefinite" data-page-node-id="v95UWGdOtnP8UrmJmVQyCP"/></circle>
            <circle cx="490" cy="30" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="YCbge9YezDHSmE99dNBdrf"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4.2s" repeatCount="indefinite" data-page-node-id="MawJfKRGvF1cIJ6yxkEPX0"/></circle>
            <circle cx="550" cy="0" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="jSSVzkatjXjVfGFnhn3cZk"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.6s" repeatCount="indefinite" data-page-node-id="6tHrpChwOqV8uDyVZcE4TX"/></circle>
            <!-- 右上星座 -->
            <path stroke="rgba(147,112,219,0.3)" stroke-width="1.5" fill="none" d="M 2600 -30 L 2660 -50 L 2730 10 L 2660 50 L 2580 30 Z" data-page-node-id="4L5wFgDtN4QXculQUUjkNI"/>
            <circle cx="2600" cy="-30" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="QYgNMup0TNFV2lGEFecHfQ"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4.1s" repeatCount="indefinite" data-page-node-id="rqpHbdOpObEUxH1u2WgSlz"/></circle>
            <circle cx="2660" cy="-50" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="mgWdQWxeamQ8byt3oyfZus"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.7s" repeatCount="indefinite" data-page-node-id="pjJrtAvvM2nCB5ru7KJhkh"/></circle>
            <circle cx="2730" cy="10" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="NBF9KOOuDHHRTm8odGXevD"><animate attributeName="opacity" values="0.8;0.45;0.8" dur="4.3s" repeatCount="indefinite" data-page-node-id="jo72K5Ue8pvFJLZvamxiNJ"/></circle>
            <circle cx="2660" cy="50" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="deTuxDwTjOyIiRPlCZ4tRb"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="3.9s" repeatCount="indefinite" data-page-node-id="DAbTjLx3JbJ9T5yPFVkgrl"/></circle>
            <circle cx="2580" cy="30" r="5" fill="rgba(255,255,255,0.8)" data-page-node-id="ivqjLmL1IDcZPCQtm7CZ0G"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4.4s" repeatCount="indefinite" data-page-node-id="C2OBWFnce2dHdq0CGzXuBm"/></circle>
            <circle cx="2660" cy="0" r="6" fill="rgba(255,255,255,0.8)" data-page-node-id="qXvIz15Rqs3iA28PgkkOgJ"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.8s" repeatCount="indefinite" data-page-node-id="ELyWEOqa0AyBthaMBKDJO3"/></circle>
            <!-- 左下星座 -->
            <path stroke="rgba(59,130,246,0.3)" stroke-width="1.5" fill="none" d="M 520 1150 L 590 1170 L 650 1200 L 570 1240 L 490 1220 Z" data-page-node-id="PXDfZY5aVLN6CkVTvzF3YM"/>
            <circle cx="520" cy="1150" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="JPHr32ckeTkR68MpmhWFu1"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="4.2s" repeatCount="indefinite" data-page-node-id="u1W1ltGG2vnGlmP3OREuiF"/></circle>
            <circle cx="590" cy="1170" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="K8g3uCJsYVhIcFnnW2PYAL"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.8s" repeatCount="indefinite" data-page-node-id="lGT5x8JqRFSGhQZQzorBOl"/></circle>
            <circle cx="650" cy="1200" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="Fj5cRTNBBfMMDQxZLdOJWx"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4.5s" repeatCount="indefinite" data-page-node-id="SEZNH0AGgX1GW7xkZWogHx"/></circle>
            <circle cx="570" cy="1240" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="AUeCgwQewcqcH2bDLKPH9P"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.9s" repeatCount="indefinite" data-page-node-id="l0rAOaoOBTvfBXiKXjMXTb"/></circle>
            <circle cx="490" cy="1220" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="ipyBshMZrsH8gD7GrkAlvt"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="4.3s" repeatCount="indefinite" data-page-node-id="wrQA7Kk2IvAo9SHZbIvft3"/></circle>
            <circle cx="550" cy="1200" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="HKj4BQV05oLgR06oSwEbmn"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.7s" repeatCount="indefinite" data-page-node-id="AzimAHlYSzMGKGFb0k9LU4"/></circle>
            <!-- 右下星座 -->
            <path stroke="rgba(59,130,246,0.3)" stroke-width="1.5" fill="none" d="M 2600 1150 L 2660 1170 L 2730 1200 L 2660 1240 L 2580 1220 Z" data-page-node-id="aQu8xMRxDqvB2uNgUOAAql"/>
            <circle cx="2600" cy="1150" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="O3KgUZaUk0uPKRYfs2qhaH"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="4.1s" repeatCount="indefinite" data-page-node-id="VL53uD1JuXgdvlMPyL4rGf"/></circle>
            <circle cx="2660" cy="1170" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="6Emfui14gQ7dlWyRPIHcY2"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.9s" repeatCount="indefinite" data-page-node-id="Uk7ny1WFSjqbf77PveFCku"/></circle>
            <circle cx="2730" cy="1200" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="3kbb2259JuD0atAzHsmuzZ"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="4.4s" repeatCount="indefinite" data-page-node-id="CRBP1GR7ttsXACigdJz7Wb"/></circle>
            <circle cx="2660" cy="1240" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="NgAqWtpfOtwlepUQS1YsRW"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.8s" repeatCount="indefinite" data-page-node-id="XRRqlRLyyZ5EnK9qdh4JA1"/></circle>
            <circle cx="2580" cy="1220" r="5" fill="rgba(135,206,235,0.75)" data-page-node-id="eRDqyX94Xn9O4oXieJLDbV"><animate attributeName="opacity" values="0.75;0.35;0.75" dur="4.2s" repeatCount="indefinite" data-page-node-id="KyxbjVVWAsfHOmCIG4y0C8"/></circle>
            <circle cx="2660" cy="1200" r="6" fill="rgba(135,206,235,0.75)" data-page-node-id="b3HKZMb9OmprfIFnsvMyck"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.6s" repeatCount="indefinite" data-page-node-id="RaIqlqEr7Tv8WALeB0d5Er"/></circle>
          </g>
          <!-- 流星：由 JS 动态生成（随机位置、角度、大小、速度、轨迹长度） -->
          <g id="meteors" data-page-node-id="NBpM18qz7RGGDxyINXKqaC"></g>
          <!-- 十字星 - 由 JS 随机分布到安全区 -->
          <g id="cross-stars" data-page-node-id="Q2Ow8omfL1GKnc8ybeO7QZ"></g>
          <!-- 散点星星 - 由 JS 随机分布到安全区 -->
          <g id="scattered-stars-white" data-page-node-id="85puDgKNvfWLs8xwBI4vsS"></g>
          <g id="scattered-stars-purple" data-page-node-id="YDuskD1zWlU8Bt09h0dIY6"></g>
        </g>

        <!-- 魔幻森林主题装饰（动态版） -->
        <g id="deco-magicforest" data-page-node-id="YQtHqH9YTkJhdvlGw9ttGZ">
          <!-- 光束与雾气滤镜定义 -->
          <defs data-page-node-id="lcOdKLLLfUsBYM53vL2166">
            <!-- 柔光滤镜 - 高斯模糊，使光束边缘柔和 -->
            <filter id="soft-glow" x="-20%" y="-20%" width="140%" height="140%" data-page-node-id="w4GWwCVJ7OPLSfeIBF97YZ">
              <feGaussianBlur stdDeviation="40" data-page-node-id="yHItqHh1KhdtbT2xL9gGL3"/>
            </filter>
            <filter id="medium-glow" x="-20%" y="-20%" width="140%" height="140%" data-page-node-id="52KYwYTb086uxcd1IpcZq7">
              <feGaussianBlur stdDeviation="80" data-page-node-id="4iAgvto8Mm1ZsVDFOmbDwN"/>
            </filter>
            <filter id="strong-glow" x="-30%" y="-20%" width="160%" height="140%" data-page-node-id="lWnKe93qSfRjAMoyHpAc7L">
              <feGaussianBlur stdDeviation="120" data-page-node-id="AnWXme6GcN9Dj1kHm42fuk"/>
            </filter>
            <filter id="light-halo" x="-50%" y="-50%" width="200%" height="200%" data-page-node-id="ZMGpXIoAQuRFlWfJ6geXSq">
              <feGaussianBlur stdDeviation="150" data-page-node-id="pHT0C6sNEx6GXXlKdWUXHn"/>
            </filter>

            <!-- 光束垂直渐变 - 顶部白亮，底部绿黄消散 -->
            <linearGradient id="beam-center" x1="0" y1="0" x2="0" y2="1" data-page-node-id="GBfMWghVb2pBoeTaEdJv9C">
              <stop offset="0%" stop-color="rgba(255,255,240,0.2)" data-page-node-id="qazDtZNc1H6WQ3ycltVf4C"/>
              <stop offset="15%" stop-color="rgba(255,250,220,0.15)" data-page-node-id="HYyDDj8iIldFZPFf7l41bX"/>
              <stop offset="40%" stop-color="rgba(255,245,200,0.09)" data-page-node-id="rSHikZnOmMiKqoGWr7xm0B"/>
              <stop offset="70%" stop-color="rgba(230,230,180,0.04)" data-page-node-id="bxmedv9tVp3Aq61C2wlGl3"/>
              <stop offset="100%" stop-color="rgba(200,220,160,0)" data-page-node-id="C2PUtLFVTEg337LIT8sjPa"/>
            </linearGradient>
            <linearGradient id="beam-halo" x1="0" y1="0" x2="0" y2="1" data-page-node-id="2bhutFYD8SlAgiyachClZP">
              <stop offset="0%" stop-color="rgba(220,255,220,0.12)" data-page-node-id="r40j05lhnidQbuF2yLFQCe"/>
              <stop offset="20%" stop-color="rgba(180,240,180,0.08)" data-page-node-id="Plxwmmaj2Eno3H34UUje1D"/>
              <stop offset="50%" stop-color="rgba(160,220,160,0.04)" data-page-node-id="bZdsDdaf1ftfko905BVQqu"/>
              <stop offset="85%" stop-color="rgba(140,200,140,0.015)" data-page-node-id="pq1qBMTBldVFKneFnQQOqx"/>
              <stop offset="100%" stop-color="rgba(100,170,100,0)" data-page-node-id="IdVVq8vQzZlEIIf3zX3Cu2"/>
            </linearGradient>
            <linearGradient id="beam-outer" x1="0" y1="0" x2="0" y2="1" data-page-node-id="6H8tlYAfLDC7qov7zYfNmt">
              <stop offset="0%" stop-color="rgba(200,230,200,0.05)" data-page-node-id="VqpkQ6vCogoXTqblznsk21"/>
              <stop offset="30%" stop-color="rgba(170,215,170,0.035)" data-page-node-id="cqD0QMAB0icHe0Od8LBqsi"/>
              <stop offset="70%" stop-color="rgba(140,190,140,0.015)" data-page-node-id="rlxFBDPuFFIJfM0LoPeikG"/>
              <stop offset="100%" stop-color="rgba(100,160,100,0)" data-page-node-id="bfbEwqkADQY2qMiFdZizST"/>
            </linearGradient>

            <!-- 雾气径向渐变 -->
            <radialGradient id="mist-green" cx="0.5" cy="0.5" r="0.5" data-page-node-id="kGayKewuwFLZId7goOIkYv">
              <stop offset="0%" stop-color="rgba(180,230,180,0.035)" data-page-node-id="mKCvJKcQk9zZkGEnmJow12"/>
              <stop offset="50%" stop-color="rgba(140,200,140,0.018)" data-page-node-id="LyTnCnBMiqz0Ng7UbU30wE"/>
              <stop offset="100%" stop-color="rgba(100,170,100,0)" data-page-node-id="keYgZjsy6pjQzJtjfYeRRb"/>
            </radialGradient>
            <radialGradient id="mist-warm" cx="0.5" cy="0.5" r="0.5" data-page-node-id="R5iB7GL6KI8v09WAiFE7CN">
              <stop offset="0%" stop-color="rgba(255,240,200,0.028)" data-page-node-id="bw4CHOsMf79LTO6dAZDkSZ"/>
              <stop offset="50%" stop-color="rgba(220,210,160,0.015)" data-page-node-id="j29VqHfQf2UIPXnO7ZlcSs"/>
              <stop offset="100%" stop-color="rgba(180,180,130,0)" data-page-node-id="0lxdif0q7b45XuTcGCr8dc"/>
            </radialGradient>
          </defs>

          <!-- 光束 - 三层叠加，边缘自然柔化 -->
          <g filter="url(#strong-glow)" opacity="0.55" data-page-node-id="1QOgKXoQg9IfMm8FVGTeKa">
            <polygon points="720,0 580,0 300,1200 1000,1200" fill="url(#beam-outer)" data-page-node-id="GDNmHtOaYblMYxfYp28VK7"/>
            <polygon points="1050,0 900,0 650,1200 1300,1200" fill="url(#beam-outer)" data-page-node-id="kYZgWuh8eL2QA1OqTNJffZ"/>
            <polygon points="1500,0 1380,0 1100,1200 1800,1200" fill="url(#beam-outer)" data-page-node-id="SEz7wFC2H9Pu5Nfds8nLlR"/>
            <polygon points="1800,0 1680,0 1400,1200 2100,1200" fill="url(#beam-outer)" data-page-node-id="huvw2Vo913tFse21reJQZ7"/>
            <polygon points="2300,0 2150,0 1850,1200 2550,1200" fill="url(#beam-outer)" data-page-node-id="Cwr9j0VhpWkYh1PPEswNHA"/>
            <polygon points="2620,0 2480,0 2150,1200 2900,1200" fill="url(#beam-outer)" data-page-node-id="0ZCJ5j2OWAqxwy6tszrzpu"/>
          </g>

          <g filter="url(#medium-glow)" opacity="0.5" data-page-node-id="qnHgr9W6bbb9DthpTZN5aE">
            <polygon points="700,0 600,0 380,1200 900,1200" fill="url(#beam-halo)" data-page-node-id="chHDzpqVEqiXYD01GxLnud"/>
            <polygon points="1020,0 930,0 720,1200 1220,1200" fill="url(#beam-halo)" data-page-node-id="C7NX0SrE7iYkjir7UxgxnJ"/>
            <polygon points="1480,0 1400,0 1180,1200 1700,1200" fill="url(#beam-halo)" data-page-node-id="0i8c26Gew5qB2LSPWbCJcj"/>
            <polygon points="1780,0 1700,0 1480,1200 2000,1200" fill="url(#beam-halo)" data-page-node-id="ZTxocChEru4AnGOttTEkAU"/>
            <polygon points="2280,0 2180,0 1920,1200 2520,1200" fill="url(#beam-halo)" data-page-node-id="BLZFh7FDdukQA8GNBdCB6E"/>
            <polygon points="2600,0 2500,0 2230,1200 2850,1200" fill="url(#beam-halo)" data-page-node-id="e8LjBCaeVcZ5nDWpnQgByQ"/>
            <animate attributeName="opacity" values="0.5;0.4;0.5" dur="10s" repeatCount="indefinite" data-page-node-id="PxmD6b5z6VHhYrvc3en8Rb"/>
          </g>

          <g filter="url(#soft-glow)" opacity="0.45" data-page-node-id="FAVYFCjUce7IAfEJoQU90N">
            <polygon points="680,0 640,0 450,1200 820,1200" fill="url(#beam-center)" data-page-node-id="ko1nVaUHcXGZ71HA2FKF9y"/>
            <polygon points="1010,0 970,0 780,1200 1160,1200" fill="url(#beam-center)" data-page-node-id="cCuTPOQvIv7nXvJo9GpWxs"/>
            <polygon points="1470,0 1430,0 1250,1200 1650,1200" fill="url(#beam-center)" data-page-node-id="XHRkR4PbZBTBFcdUoRCMB9"/>
            <polygon points="1770,0 1730,0 1550,1200 1950,1200" fill="url(#beam-center)" data-page-node-id="wO6jNpUohtMfOPsD0xFB7A"/>
            <polygon points="2270,0 2230,0 2050,1200 2450,1200" fill="url(#beam-center)" data-page-node-id="COPD2NIi02M8AnlLWi9hKo"/>
            <polygon points="2590,0 2550,0 2380,1200 2760,1200" fill="url(#beam-center)" data-page-node-id="XKE5E0JqmhliCgbJGP3sxy"/>
            <animate attributeName="opacity" values="0.45;0.3;0.45" dur="8s" repeatCount="indefinite" data-page-node-id="QyE9TCwBfhGI0tVKNnmqF2"/>
          </g>

          <!-- 中央主光束 -->
          <g filter="url(#strong-glow)" opacity="0.55" data-page-node-id="Ry87Uj9UhbCmhYHAYJKY68">
            <polygon points="1550,0 1650,0 2000,1200 1200,1200" fill="url(#beam-outer)" data-page-node-id="dcZwBRFQ9RgEzfxf6lrN0x"/>
          </g>
          <g filter="url(#medium-glow)" opacity="0.5" data-page-node-id="O4MjtJJMyNsct4Tu0Tq44I">
            <polygon points="1520,0 1680,0 2050,1200 1150,1200" fill="url(#beam-halo)" data-page-node-id="QgA3RS8rPnDY5DK1i4dhyw"/>
          </g>
          <g filter="url(#soft-glow)" opacity="0.45" data-page-node-id="xoqKXEyk1wP0EDsJfg8mIi">
            <polygon points="1500,0 1700,0 2080,1200 1120,1200" fill="url(#beam-center)" data-page-node-id="yRz7AHh2AEMSLXKbSDhUUh"/>
            <animate attributeName="opacity" values="0.45;0.3;0.45" dur="6s" repeatCount="indefinite" data-page-node-id="l41vy7Xfff3sDrIViDKeSJ"/>
          </g>

          <!-- 雾气层 - 缓慢漂浮 -->
          <g opacity="0.55" data-page-node-id="NzWeGbiTgnuDLS0bGo0Kce">
            <animateTransform attributeName="transform" type="translate" values="0,0;200,20;0,0" dur="40s" repeatCount="indefinite" data-page-node-id="oDFczinvMvrReC9hFFmvip"/>
            <ellipse cx="800" cy="400" rx="700" ry="200" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="jToWWkPwa8ZBGIpGSttY1N"/>
            <ellipse cx="1600" cy="350" rx="800" ry="180" fill="url(#mist-warm)" filter="url(#medium-glow)" data-page-node-id="ZhmVXvVUXN6CQmHG9dRrek"/>
            <ellipse cx="2400" cy="420" rx="650" ry="190" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="aQT8lARkaRAFkkV3JUgafG"/>
          </g>

          <g opacity="0.55" data-page-node-id="fM6EVl0XTYfonGwjJ1R11B">
            <animateTransform attributeName="transform" type="translate" values="0,0;-200,30;0,0" dur="50s" repeatCount="indefinite" data-page-node-id="fqgwB2enxk8jj6ZHENcZG6"/>
            <ellipse cx="1000" cy="680" rx="750" ry="220" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="onnLxGVl2uR6KvF2GNUNOE"/>
            <ellipse cx="2000" cy="700" rx="850" ry="200" fill="url(#mist-warm)" filter="url(#medium-glow)" data-page-node-id="neYr17soJ4zFkl99N8nJnS"/>
            <ellipse cx="2600" cy="620" rx="550" ry="180" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="tmcSczP92qjWV0xhyn1dXq"/>
          </g>

          <g opacity="0.5" data-page-node-id="vYMyM5i34vCXDx49SguGzV">
            <animateTransform attributeName="transform" type="translate" values="0,0;250,-20;0,0" dur="45s" repeatCount="indefinite" data-page-node-id="vwtVLRAuAFaSU6NrFwd308"/>
            <ellipse cx="900" cy="950" rx="800" ry="240" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="EodnWUBMxmbfzm5FxThfLD"/>
            <ellipse cx="1800" cy="980" rx="750" ry="220" fill="url(#mist-warm)" filter="url(#medium-glow)" data-page-node-id="DUCUOCXnCbHayLLir16uE6"/>
            <ellipse cx="2500" cy="920" rx="600" ry="200" fill="url(#mist-green)" filter="url(#medium-glow)" data-page-node-id="mlHzQsUTcG0M9LAtW30DQQ"/>
          </g>

          <!-- 光束中的浮动光点 -->
          <g fill="rgba(255,255,220,0.18)" opacity="0.6" data-page-node-id="PGdzCzLnUMPsDB0oFDZHFA">
            <circle cx="650" cy="100" r="3" data-page-node-id="zaklvIkUEm5PvkpoPVJ3ob"><animate attributeName="cy" values="100;1100;100" dur="14s" repeatCount="indefinite" data-page-node-id="enpTM49vKVQM0AFktzJLpB"/><animate attributeName="opacity" values="0;0.5;0" dur="14s" repeatCount="indefinite" data-page-node-id="DRmd1PO4ufEGZxcnN1rHyT"/></circle>
            <circle cx="700" cy="250" r="2" data-page-node-id="znYNRTS97dGX1zMIU6BC2c"><animate attributeName="cy" values="250;1150;250" dur="11s" repeatCount="indefinite" data-page-node-id="XS21EL8Rv0U1tG9ACM9qfr"/><animate attributeName="opacity" values="0;0.4;0" dur="11s" repeatCount="indefinite" data-page-node-id="0FQeHFEEnwlxvU4V72kZpk"/></circle>
            <circle cx="600" cy="400" r="2.5" data-page-node-id="npEUKBhm0JHLu7rsxqV1oj"><animate attributeName="cy" values="400;1180;400" dur="13s" repeatCount="indefinite" data-page-node-id="wi8r251T3whJ5WljdkHbQm"/><animate attributeName="opacity" values="0;0.35;0" dur="13s" repeatCount="indefinite" data-page-node-id="vihM0UV6S2XknDugDJDNUb"/></circle>
            <circle cx="950" cy="150" r="2.5" data-page-node-id="jUMDC1T6dTBqHfgvFU23Gw"><animate attributeName="cy" values="150;1120;150" dur="15s" repeatCount="indefinite" data-page-node-id="GpiXfEUbjtLBb4YOpQ6YXE"/><animate attributeName="opacity" values="0;0.4;0" dur="15s" repeatCount="indefinite" data-page-node-id="PQbfSODf7SzTs4tHW5qBnd"/></circle>
            <circle cx="1020" cy="350" r="2" data-page-node-id="XUVuGfVGFvsSuBDYfiio60"><animate attributeName="cy" values="350;1160;350" dur="12s" repeatCount="indefinite" data-page-node-id="0Mf20CFS303pFtYXTUcUws"/><animate attributeName="opacity" values="0;0.35;0" dur="12s" repeatCount="indefinite" data-page-node-id="xFnsmwJ0JYdXfxC82Xr3cF"/></circle>
            <circle cx="1550" cy="80" r="3.5" data-page-node-id="RC7SlkXR91wMvGXx8Nm5Ig"><animate attributeName="cy" values="80;1100;80" dur="16s" repeatCount="indefinite" data-page-node-id="sGjfvk7K1Pi040mFXHLQ3h"/><animate attributeName="opacity" values="0;0.55;0" dur="16s" repeatCount="indefinite" data-page-node-id="K6RcPmL5iN35OQ7c9mY4oW"/></circle>
            <circle cx="1650" cy="200" r="2.5" data-page-node-id="g0E8wOEJlNwoXmT4Xjfqga"><animate attributeName="cy" values="200;1140;200" dur="13s" repeatCount="indefinite" data-page-node-id="LAwDklI2hq58poovcZxXVG"/><animate attributeName="opacity" values="0;0.4;0" dur="13s" repeatCount="indefinite" data-page-node-id="5WQKyGUX5G0YPvbVhqTwqd"/></circle>
            <circle cx="1450" cy="450" r="2" data-page-node-id="Kxz9ZRb4biJ7jlD4anhkiC"><animate attributeName="cy" values="450;1170;450" dur="11s" repeatCount="indefinite" data-page-node-id="jujUGyOtEL27Nd3SIlMUvt"/><animate attributeName="opacity" values="0;0.35;0" dur="11s" repeatCount="indefinite" data-page-node-id="YX5vROI61dyOwzgTaQ7icl"/></circle>
            <circle cx="1850" cy="120" r="3" data-page-node-id="cC5ovYpmtrKdfDPGphKeZW"><animate attributeName="cy" values="120;1110;120" dur="15.5s" repeatCount="indefinite" data-page-node-id="SIJV8DPlNZDWrCCJ9933Ar"/><animate attributeName="opacity" values="0;0.45;0" dur="15.5s" repeatCount="indefinite" data-page-node-id="q6GxJNCn5g2au2XGk1Pptz"/></circle>
            <circle cx="1950" cy="400" r="2" data-page-node-id="N5OGdhPWXnRvyHGvlDZz5r"><animate attributeName="cy" values="400;1150;400" dur="12s" repeatCount="indefinite" data-page-node-id="UFp9KUtsLTwP4tDQOLb8b1"/><animate attributeName="opacity" values="0;0.35;0" dur="12s" repeatCount="indefinite" data-page-node-id="fAGAG38cESoDL8TMLjc0F3"/></circle>
            <circle cx="2300" cy="180" r="2.5" data-page-node-id="infIEHhYUdzgkLZkxHYI1p"><animate attributeName="cy" values="180;1130;180" dur="14.5s" repeatCount="indefinite" data-page-node-id="YyQZGemhfcEHgHuGOb3vcJ"/><animate attributeName="opacity" values="0;0.4;0" dur="14.5s" repeatCount="indefinite" data-page-node-id="A1bTofxiJ0rATdU5lG8Rjp"/></circle>
            <circle cx="2400" cy="450" r="2" data-page-node-id="w8e5IROhw7kCJHd17eHYNY"><animate attributeName="cy" values="450;1160;450" dur="12.5s" repeatCount="indefinite" data-page-node-id="QIHN80Gdh3CIVXkpxZFnjn"/><animate attributeName="opacity" values="0;0.35;0" dur="12.5s" repeatCount="indefinite" data-page-node-id="Kn5ccvfcqTaLC3G6PpFVj6"/></circle>
            <circle cx="2600" cy="150" r="2.5" data-page-node-id="vckmFQ850bu6WKe1tBdzac"><animate attributeName="cy" values="150;1120;150" dur="15s" repeatCount="indefinite" data-page-node-id="8J3UlehfxSRIIyHnvzw9Eq"/><animate attributeName="opacity" values="0;0.4;0" dur="15s" repeatCount="indefinite" data-page-node-id="cwj61zSXCwq9I7NqNKxtpO"/></circle>
            <circle cx="2700" cy="380" r="2" data-page-node-id="SxTqNjdEjB6FF02Ycs72ie"><animate attributeName="cy" values="380;1150;380" dur="12.5s" repeatCount="indefinite" data-page-node-id="FDVwNsEEFCJHaegr93fLk2"/><animate attributeName="opacity" values="0;0.35;0" dur="12.5s" repeatCount="indefinite" data-page-node-id="VHQ8o4eDFtoRHqpzIehS6i"/></circle>
          </g>

          <!-- 中央光束光点 -->
          <g fill="rgba(255,255,230,0.22)" filter="url(#soft-glow)" opacity="0.65" data-page-node-id="JHt0hlNSkDui9cNfGOYaZO">
            <circle cx="1600" cy="150" r="6" data-page-node-id="drevEYroNWACYp5D5sC5lk"><animate attributeName="cy" values="150;1100;150" dur="18s" repeatCount="indefinite" data-page-node-id="QxluKbpagrmDbECGr1D8Tm"/><animate attributeName="opacity" values="0;0.55;0" dur="18s" repeatCount="indefinite" data-page-node-id="dUt35ceC0mJN4HnNDDjsi2"/></circle>
            <circle cx="1500" cy="350" r="4" data-page-node-id="YGWaWIi7kBKz1T6Ru3eWdh"><animate attributeName="cy" values="350;1150;350" dur="14s" repeatCount="indefinite" data-page-node-id="n86iphPU5YjijWEtHx1LF3"/><animate attributeName="opacity" values="0;0.45;0" dur="14s" repeatCount="indefinite" data-page-node-id="HnYFnO9kmEYs133xi5vqG5"/></circle>
            <circle cx="1700" cy="500" r="4" data-page-node-id="02mRhmjHt8mJVPq1xKHC5n"><animate attributeName="cy" values="500;1170;500" dur="15s" repeatCount="indefinite" data-page-node-id="QqaolPhuk3hpbb5r4HsDit"/><animate attributeName="opacity" values="0;0.4;0" dur="15s" repeatCount="indefinite" data-page-node-id="2l6OBNeRpUOVU3EOs6HOr6"/></circle>
            <circle cx="1550" cy="700" r="3" data-page-node-id="lB7XqtQoo2k7G1yUPH8J2O"><animate attributeName="cy" values="700;1180;700" dur="12s" repeatCount="indefinite" data-page-node-id="8fWKdYwC02xOlCSyyvM6kY"/><animate attributeName="opacity" values="0;0.35;0" dur="12s" repeatCount="indefinite" data-page-node-id="RB2PmQGzy2IBXiLF6aosdi"/></circle>
            <circle cx="1650" cy="850" r="3" data-page-node-id="wdgRP0xy4fws4y3bC1SZ7b"><animate attributeName="cy" values="850;1190;850" dur="10s" repeatCount="indefinite" data-page-node-id="Sds8DJp0T3MNAaOxImijc4"/><animate attributeName="opacity" values="0;0.35;0" dur="10s" repeatCount="indefinite" data-page-node-id="6C2V09VuwqAOwqKSmMmKYm"/></circle>
          </g>

          <!-- 蝴蝶1 - 从左下飞到右上 -->
          <g data-page-node-id="APrTYumcWZNALY1iYEH0x1">
            <animateTransform attributeName="transform" type="translate" values="600,750;1200,500;1800,350;2400,550;600,750" dur="18s" repeatCount="indefinite" data-page-node-id="eCo0qWTPli8a8GTSz1LBTo"/>
            <!-- 左翅 -->
            <ellipse cx="-8" cy="0" rx="12" ry="8" fill="rgba(236,72,153,0.4)" data-page-node-id="8EE0thjmo3BPNYyVetTh7m">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.25s" repeatCount="indefinite" additive="sum" data-page-node-id="vyr3MZFP8tGf9tBdr5oquC"/>
            </ellipse>
            <!-- 右翅 -->
            <ellipse cx="8" cy="0" rx="12" ry="8" fill="rgba(236,72,153,0.4)" data-page-node-id="tKGIloDsyeMXLD9QloruPt">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.25s" repeatCount="indefinite" additive="sum" data-page-node-id="BSfF7y5EWYx31xvvaY30bH"/>
            </ellipse>
            <!-- 身体 -->
            <ellipse cx="0" cy="0" rx="2.5" ry="6" fill="rgba(88,28,135,0.6)" data-page-node-id="mGjGz1d87fgfaGXWWUD4QU"/>
            <circle cx="0" cy="-8" r="2" fill="rgba(88,28,135,0.7)" data-page-node-id="qQkrq1wIf2A6SBf0vfZRuL"/>
            <!-- 翅膀装饰 -->
            <circle cx="-10" cy="-2" r="2" fill="rgba(251,191,36,0.5)" data-page-node-id="EBvvTnanrEZnaEEHuj6fxJ">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.25s" repeatCount="indefinite" additive="sum" data-page-node-id="yzyt0kazKM2DchRajk34er"/>
            </circle>
            <circle cx="10" cy="-2" r="2" fill="rgba(251,191,36,0.5)" data-page-node-id="db9v9817a4hBLYxYeCTWf9">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.25s" repeatCount="indefinite" additive="sum" data-page-node-id="CnEHaoeLVvrmOniycVj5S0"/>
            </circle>
          </g>
          <!-- 蝴蝶2 - 紫色，路径不同 -->
          <g data-page-node-id="LrrEpWkWw0sbWclih8xONU">
            <animateTransform attributeName="transform" type="translate" values="2500,400;2200,600;1800,450;1400,700;1000,500;2500,400" dur="22s" repeatCount="indefinite" data-page-node-id="FrRXHwmJmMHf0Ut963GjVf"/>
            <ellipse cx="-9" cy="0" rx="13" ry="9" fill="rgba(139,92,246,0.4)" data-page-node-id="jwXZNVm5oKjZDaYp18bgpk">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.22s" repeatCount="indefinite" additive="sum" data-page-node-id="3yT2e692mxH2xqJsiv3RmN"/>
            </ellipse>
            <ellipse cx="9" cy="0" rx="13" ry="9" fill="rgba(139,92,246,0.4)" data-page-node-id="KtO33cA9gBRccnYYznw2PE">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.22s" repeatCount="indefinite" additive="sum" data-page-node-id="NSbFj8fipgzGJEikDuMR3S"/>
            </ellipse>
            <ellipse cx="0" cy="0" rx="2.5" ry="7" fill="rgba(46,16,101,0.6)" data-page-node-id="HbxN1rjVCO5cvD7kfVotZ8"/>
            <circle cx="0" cy="-9" r="2" fill="rgba(46,16,101,0.7)" data-page-node-id="9zJ63ENmQH9S8GYYRqDZ0p"/>
            <circle cx="-11" cy="-3" r="2.5" fill="rgba(236,72,153,0.5)" data-page-node-id="hYIyyp8pJEBw6tlwJHj1rb">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.22s" repeatCount="indefinite" additive="sum" data-page-node-id="pJ7ycMqlNcxWnZRaB8jSS9"/>
            </circle>
            <circle cx="11" cy="-3" r="2.5" fill="rgba(236,72,153,0.5)" data-page-node-id="CCR79ULncftmJ3kMV1yGpy">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.22s" repeatCount="indefinite" additive="sum" data-page-node-id="MHBuvsdOBqZ9fXbs6DosCr"/>
            </circle>
          </g>
          <!-- 蝴蝶3 - 黄绿色，更慢 -->
          <g data-page-node-id="Gk19pzLjIBnupuq1EV9ue4">
            <animateTransform attributeName="transform" type="translate" values="900,600;1500,400;2100,650;1700,800;1100,750;900,600" dur="25s" repeatCount="indefinite" data-page-node-id="zVysJtPiIjvx227dCC4BJE"/>
            <ellipse cx="-7" cy="0" rx="11" ry="7" fill="rgba(190,242,100,0.4)" data-page-node-id="Ae6SS7GFN5YQJJMntJt5eA">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.28s" repeatCount="indefinite" additive="sum" data-page-node-id="4ND52ih6QLHP7za2bxhyxh"/>
            </ellipse>
            <ellipse cx="7" cy="0" rx="11" ry="7" fill="rgba(190,242,100,0.4)" data-page-node-id="XhGf1B1kBCRYwhTkTKjfi2">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.28s" repeatCount="indefinite" additive="sum" data-page-node-id="3Rerw8zs8pT7hAKSLOijm5"/>
            </ellipse>
            <ellipse cx="0" cy="0" rx="2" ry="5" fill="rgba(34,94,34,0.7)" data-page-node-id="G2ubNo6fHA8FFm3oVXEZtT"/>
            <circle cx="0" cy="-7" r="1.8" fill="rgba(34,94,34,0.8)" data-page-node-id="yyVkS09VsLvovXqWxIRvy2"/>
            <circle cx="-9" cy="-2" r="1.8" fill="rgba(59,130,246,0.5)" data-page-node-id="eBEttC1nJZZEmrKcdAyjU7">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.28s" repeatCount="indefinite" additive="sum" data-page-node-id="XT0KmXUJ5RHgVzWRRG4yVX"/>
            </circle>
            <circle cx="9" cy="-2" r="1.8" fill="rgba(59,130,246,0.5)" data-page-node-id="WsZf6QxcNOK2fmpt2PHCLX">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.28s" repeatCount="indefinite" additive="sum" data-page-node-id="uTiACvp5YJKhe6AsU1yTq6"/>
            </circle>
          </g>
          <!-- 蝴蝶4 - 浅蓝色，小一些 -->
          <g data-page-node-id="OVVCrJ9ADR82UQKEJiVpYK">
            <animateTransform attributeName="transform" type="translate" values="2300,900;1900,700;1500,850;1200,650;1600,550;2300,900" dur="20s" repeatCount="indefinite" data-page-node-id="oT59fEbFHEp9uCQ8yE2v5r"/>
            <ellipse cx="-6" cy="0" rx="10" ry="6.5" fill="rgba(100,180,255,0.4)" data-page-node-id="7eHHPSBQPtr9jaim4uD1cx">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.2s" repeatCount="indefinite" additive="sum" data-page-node-id="GlBAasH0I2xAsWMqS04SKz"/>
            </ellipse>
            <ellipse cx="6" cy="0" rx="10" ry="6.5" fill="rgba(100,180,255,0.4)" data-page-node-id="pNzFdFOO8V2ZQLoGTBVxRz">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.2s" repeatCount="indefinite" additive="sum" data-page-node-id="7bwWhMsOd8uWmx9SIynKtD"/>
            </ellipse>
            <ellipse cx="0" cy="0" rx="1.8" ry="4.5" fill="rgba(12,74,110,0.7)" data-page-node-id="52byMtVQfmOjjzgEYsvLG9"/>
            <circle cx="0" cy="-6" r="1.5" fill="rgba(12,74,110,0.8)" data-page-node-id="HLQTAePHkqgAdBVmBPxdxl"/>
            <circle cx="-8" cy="-2" r="1.5" fill="rgba(255,255,255,0.5)" data-page-node-id="2e92Ew3RUEM73GBwaZNjHn">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.2s" repeatCount="indefinite" additive="sum" data-page-node-id="LAEeUkfO8LTM1LYCDziABk"/>
            </circle>
            <circle cx="8" cy="-2" r="1.5" fill="rgba(255,255,255,0.5)" data-page-node-id="TG5BWUUd07DWHdPRCroKuI">
              <animateTransform attributeName="transform" type="scale" values="1 1;0.3 1;1 1" dur="0.2s" repeatCount="indefinite" additive="sum" data-page-node-id="2KUmk1mUdLud9t7qco0WUW"/>
            </circle>
          </g>
        </g>

        <!-- 机械科技主题装饰（动态版） -->
        <g id="deco-tech" data-page-node-id="O042S7nL590my92iVDUA72">
          <!-- 左上角齿轮 - 同心圆脉动 -->
          <g stroke="rgba(59,130,246,0.3)" stroke-width="2.5" fill="none" data-page-node-id="7gKL5nwSXPuEywIRWJGEWw">
            <circle cx="250" cy="200" r="90" data-page-node-id="AZwimdsNmIduqzVN3GyzV0"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="qdvYVYG1qRzfySVaI5drPj"/></circle>
            <circle cx="250" cy="200" r="50" data-page-node-id="U1e95MDbgJlECUOkOh54r6"><animate attributeName="opacity" values="1;0.6;1" dur="4s" repeatCount="indefinite" data-page-node-id="LfOPPtN8gdB8rbdqtOJiTT"/></circle>
            <circle cx="250" cy="200" r="25" data-page-node-id="hU5rZ2A1ZN4cPc1ZWPaz6A"><animate attributeName="opacity" values="1;0.7;1" dur="3s" repeatCount="indefinite" data-page-node-id="BiAQhpM8sV6rogv6QfBwDk"/></circle>
            <line x1="250" y1="90" x2="250" y2="115" data-page-node-id="r4xv9dZ6zDg7CO5cU4sPwu"/>
            <line x1="250" y1="285" x2="250" y2="310" data-page-node-id="uGjFO8T3uRNxQN7y0YLI50"/>
            <line x1="140" y1="200" x2="165" y2="200" data-page-node-id="FX5SefyXPj9AKTuhz1asMK"/>
            <line x1="335" y1="200" x2="360" y2="200" data-page-node-id="VVqZh1cfh113J6kVDCAeCw"/>
            <line x1="175" y1="125" x2="200" y2="150" data-page-node-id="vx4DoNTHb1UgDPcc0vu9Td"/>
            <line x1="300" y1="250" x2="325" y2="275" data-page-node-id="t6ZLUNTnFbRke57lZVJZKM"/>
            <line x1="300" y1="125" x2="325" y2="150" data-page-node-id="dleIIpGehdUXLLBVVtK6Ua"/>
            <line x1="175" y1="250" x2="200" y2="275" data-page-node-id="UmhcznIRcwh73M71ZHtZFt"/>
            <line x1="250" y1="165" x2="250" y2="235" stroke-width="3.5" data-page-node-id="KLEyP8NEfW0jJVVTMF2GpW"/>
            <line x1="215" y1="200" x2="285" y2="200" stroke-width="3.5" data-page-node-id="SrQX0In2YPGqaNNkFFSumM"/>
          </g>
          <!-- 右上角齿轮 - 同心圆脉动 -->
          <g stroke="rgba(59,130,246,0.3)" stroke-width="2.5" fill="none" data-page-node-id="xbNOd4zvpvSbQNpBZjNoOm">
            <circle cx="2950" cy="200" r="90" data-page-node-id="kfoIubpZ8wyht9mDGE0Rb6"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="ss9oEfqXNefTBNzFc1dEkV"/></circle>
            <circle cx="2950" cy="200" r="50" data-page-node-id="wOTvxL5jeCb2ZUrdCunC0w"><animate attributeName="opacity" values="1;0.6;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="O0ZHFHKOL1TsNmCDVH2WY3"/></circle>
            <circle cx="2950" cy="200" r="25" data-page-node-id="suWTiFPx6Qqd2fXAwIegsJ"><animate attributeName="opacity" values="1;0.7;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="tp6wDk8O47dGp6IGEDbd1l"/></circle>
            <line x1="2950" y1="90" x2="2950" y2="115" data-page-node-id="Iz3ftficEs4NWPZ5BzinQE"/>
            <line x1="2950" y1="285" x2="2950" y2="310" data-page-node-id="mtSwtQDRjv3oO4OKe0enwo"/>
            <line x1="2840" y1="200" x2="2865" y2="200" data-page-node-id="2aiMLqE8QRJGi6rj6AEhcJ"/>
            <line x1="3035" y1="200" x2="3060" y2="200" data-page-node-id="2fhqc9VdhYi0bRitunMKuZ"/>
            <line x1="2875" y1="125" x2="2900" y2="150" data-page-node-id="rb7ySbaEZVibqdQDvak9CD"/>
            <line x1="3000" y1="250" x2="3025" y2="275" data-page-node-id="Ozj3Tbhm5AJ65RNJHEODgS"/>
            <line x1="3000" y1="125" x2="3025" y2="150" data-page-node-id="V9h1fp1MCeUXCf3pX4tAOx"/>
            <line x1="2875" y1="250" x2="2900" y2="275" data-page-node-id="qWpeghNrXbg2OlttIpLzX7"/>
            <line x1="2950" y1="165" x2="2950" y2="235" stroke-width="3.5" data-page-node-id="ozam3HPjLmxzpk78pVK5Ml"/>
            <line x1="2915" y1="200" x2="2985" y2="200" stroke-width="3.5" data-page-node-id="bAo7XkxaRtYtxiv2gmWX89"/>
          </g>
          <!-- 左下角齿轮 - 同心圆脉动 -->
          <g stroke="rgba(34,211,238,0.25)" stroke-width="2.5" fill="none" data-page-node-id="1H2BK1WaDAMqzjzZY8lLcg">
            <circle cx="250" cy="1000" r="100" data-page-node-id="DtYeYPZfLdCvD9g7zUNQlT"><animate attributeName="opacity" values="1;0.5;1" dur="6s" repeatCount="indefinite" data-page-node-id="G82uFlhfXJk6kkWbCA0AbC"/></circle>
            <circle cx="250" cy="1000" r="55" data-page-node-id="OAchFcc9zwFwpX4nSYtwE9"><animate attributeName="opacity" values="1;0.6;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="0SDVluDEdmDFWBYSoID3je"/></circle>
            <circle cx="250" cy="1000" r="25" data-page-node-id="1RHUgRePNN0fNFQVwv9LTu"><animate attributeName="opacity" values="1;0.7;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="tLohmxWSQggZv7PlG25tJj"/></circle>
            <line x1="250" y1="880" x2="250" y2="910" data-page-node-id="f3NZ6LhMnH6GW8zKCd2o4y"/>
            <line x1="250" y1="1090" x2="250" y2="1120" data-page-node-id="wev31190yeHROmhksOPjBg"/>
            <line x1="130" y1="1000" x2="160" y2="1000" data-page-node-id="TCQjsUbArRqhAuffv14vuG"/>
            <line x1="340" y1="1000" x2="370" y2="1000" data-page-node-id="Ehjvcf7GFkJAyTf8SQw3Sw"/>
            <line x1="170" y1="920" x2="200" y2="950" data-page-node-id="j0H0gTk2CncSh7CisWH82h"/>
            <line x1="300" y1="1050" x2="330" y2="1080" data-page-node-id="xad31QDEC7bCZyPB9MRPyp"/>
            <line x1="300" y1="920" x2="330" y2="950" data-page-node-id="BtGSXD6JA45vgrTIXGkyVz"/>
            <line x1="170" y1="1050" x2="200" y2="1080" data-page-node-id="iXgoQRNTlVJXbXFT9yC3xf"/>
          </g>
          <!-- 右下角齿轮 - 同心圆脉动 -->
          <g stroke="rgba(34,211,238,0.25)" stroke-width="2.5" fill="none" data-page-node-id="Nj3J1Y2J7ollw0uprrbDTH">
            <circle cx="2950" cy="1000" r="100" data-page-node-id="xTkgTLWsktuOMDOm9Tzjgp"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="3hH3GeSdg7Sh0NObpTYLoE"/></circle>
            <circle cx="2950" cy="1000" r="55" data-page-node-id="lL1b1H1L4S6oW8o2YU1Imw"><animate attributeName="opacity" values="1;0.6;1" dur="5s" repeatCount="indefinite" data-page-node-id="jNnacONOVCOqaw5WUJihGx"/></circle>
            <circle cx="2950" cy="1000" r="25" data-page-node-id="01V4HfGDzWGkrsyNRmwBlZ"><animate attributeName="opacity" values="1;0.7;1" dur="4s" repeatCount="indefinite" data-page-node-id="lw7FWjJHs5vgIPyl48HAAc"/></circle>
            <line x1="2950" y1="880" x2="2950" y2="910" data-page-node-id="NZ7RsNv2FeMPYI6Zamw7ED"/>
            <line x1="2950" y1="1090" x2="2950" y2="1120" data-page-node-id="Mwe80k8dDtpkBuOSK4wzOI"/>
            <line x1="2830" y1="1000" x2="2860" y2="1000" data-page-node-id="SDVFgV1S2Mi6Vv8xBD4rss"/>
            <line x1="3040" y1="1000" x2="3070" y2="1000" data-page-node-id="57MNC8qCeG2G1UDZtZzqpm"/>
            <line x1="2870" y1="920" x2="2900" y2="950" data-page-node-id="uwZJVDxrRIj5C4VwozZnJR"/>
            <line x1="3000" y1="1050" x2="3030" y2="1080" data-page-node-id="Zl9iOHlFf7dFR6a6jXHpPm"/>
            <line x1="3000" y1="920" x2="3030" y2="950" data-page-node-id="gxEZ0BWwneQLgmF22TE8Is"/>
            <line x1="2870" y1="1050" x2="2900" y2="1080" data-page-node-id="bJAS45FCr9EWZVXLsxyEfx"/>
          </g>
          <!-- 小齿轮装饰 - 呼吸脉动 -->
          <g stroke="rgba(59,130,246,0.18)" stroke-width="1.5" fill="none" data-page-node-id="Jnp3mI5ZdHXc0zSpLstAhS">
            <circle cx="450" cy="350" r="30" data-page-node-id="YUhn7ayoqCd6SSeunNdBpm"><animate attributeName="opacity" values="1;0.5;1" dur="4s" repeatCount="indefinite" data-page-node-id="uETfaaQ6jrSAbdFahZsxdU"/></circle>
            <circle cx="450" cy="350" r="15" data-page-node-id="ju0P5k2Xea0FRVNxB0mNkF"><animate attributeName="opacity" values="1;0.6;1" dur="3s" repeatCount="indefinite" data-page-node-id="CKOUtaoZ0MAZXiHuvKyeyz"/></circle>
            <circle cx="2750" cy="350" r="30" data-page-node-id="PVxLYpbBnPVnCPiHBwnRSS"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="c3byEPGTB8KDOjK7ZGoZmZ"/></circle>
            <circle cx="2750" cy="350" r="15" data-page-node-id="x516A54h3F2TjJooUOBUFe"><animate attributeName="opacity" values="1;0.6;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="Xns3KcmGUp1BvjSfC6ft07"/></circle>
            <circle cx="450" cy="850" r="30" data-page-node-id="rQ9FdqWWUkpvrDIf5LSA5x"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="rz3I3GDyJbn5invJwKBcq9"/></circle>
            <circle cx="450" cy="850" r="15" data-page-node-id="pyqEG7KfbJgWnHIHnxhDpu"><animate attributeName="opacity" values="1;0.6;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="P0CfmQ03j51dMNBUPVxNu4"/></circle>
            <circle cx="2750" cy="850" r="30" data-page-node-id="t5iqQ9PbMVlv9q88uEfUbv"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="LSfmdiUUvkhNxenD9rzkGK"/></circle>
            <circle cx="2750" cy="850" r="15" data-page-node-id="8p0a5FqCxCvXTJM7pAGTbW"><animate attributeName="opacity" values="1;0.6;1" dur="4s" repeatCount="indefinite" data-page-node-id="s8ySyAuAfJNW0PqvT9UTsG"/></circle>
          </g>
          <!-- 六边形网格 - 呼吸脉动 -->
          <g stroke="rgba(59,130,246,0.18)" stroke-width="1.5" fill="none" data-page-node-id="oBLxz9rdk7RH1DOL1xjZN6">
            <polygon points="600,120 645,145 645,195 600,220 555,195 555,145" data-page-node-id="dME3HJxPK7JHTslsZVqPlt"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="2CRXLyDETKp6NcjeynN4DW"/></polygon>
            <polygon points="690,120 735,145 735,195 690,220 645,195 645,145" data-page-node-id="SWL9mGbEmP6xlTFJA4oqpt"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="57m17bkyjgwRsiAEUYrzrG"/></polygon>
            <polygon points="780,120 825,145 825,195 780,220 735,195 735,145" data-page-node-id="GeTMMdR3HzmFEhex5j1FRJ"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="SDGVQFia0xIgpwMNuiQX7R"/></polygon>
            <polygon points="2420,120 2465,145 2465,195 2420,220 2375,195 2375,145" data-page-node-id="nMeMPqzSmqcuuDvytQk4mH"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="9gWMlDK0BEeIDEmMIgFoyg"/></polygon>
            <polygon points="2510,120 2555,145 2555,195 2510,220 2465,195 2465,145" data-page-node-id="dDXkhiQxXEAWpLooFtwp2v"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="UWBdYOKFEJkQhh4D4OWyfU"/></polygon>
            <polygon points="2600,120 2645,145 2645,195 2600,220 2555,195 2555,145" data-page-node-id="8uXNYMXNPCsssZMTbN7jax"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="0V0fLeLCyUTW7WTHeG9fYK"/></polygon>
            <polygon points="600,980 645,1005 645,1055 600,1080 555,1055 555,1005" data-page-node-id="X0GkrsuxlVCU8CYE6iGguK"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="haMHmiGCFLJ2tlZhDXYlxf"/></polygon>
            <polygon points="690,980 735,1005 735,1055 690,1080 645,1055 645,1005" data-page-node-id="FSKINK7cL1IcHUB0velg1p"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="nnyfPVGnTczL1XgceKMeuq"/></polygon>
            <polygon points="780,980 825,1005 825,1055 780,1080 735,1055 735,1005" data-page-node-id="MZ3rZYJKkC9d8ohaOMtncI"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="XTDqjL3A4MBlcwolBF1Sjt"/></polygon>
            <polygon points="2420,980 2465,1005 2465,1055 2420,1080 2375,1055 2375,1005" data-page-node-id="jgZj7AKX6TnjSbc9h8j89Z"><animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" data-page-node-id="jqoPDtnbB3SEFatLyIxDKq"/></polygon>
            <polygon points="2510,980 2555,1005 2555,1055 2510,1080 2465,1055 2465,1005" data-page-node-id="BDutymZQ1Lg6uiu8BdrTf5"><animate attributeName="opacity" values="1;0.5;1" dur="5.5s" repeatCount="indefinite" data-page-node-id="KATzUSYHFoPvDCJoMmzo5j"/></polygon>
            <polygon points="2600,980 2645,1005 2645,1055 2600,1080 2555,1055 2555,1005" data-page-node-id="fBvlFMySLZ8M2cQzqOGdod"><animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" data-page-node-id="mnCp8hQMV8m56jmpFr088v"/></polygon>
          </g>
          <!-- 电路板（顶部）：电子在线路上来回游离 -->
          <g fill="none" stroke-linecap="round" data-page-node-id="x1IPwve1m7X6zQbuka6HD8">
            <!-- 导线 - 更明亮的静态线条 -->
            <path d="M 1050 180 L 1100 180 L 1100 220 L 1200 220" stroke="rgba(34,211,238,0.35)" stroke-width="2" data-page-node-id="sViXJw6IM9cdIr8e5OvGRF"/>
            <path d="M 1250 200 L 1300 200 L 1300 160 L 1400 160" stroke="rgba(59,130,246,0.35)" stroke-width="2" data-page-node-id="fFBZZBvzuZH1iU7CquQrcg"/>
            <path d="M 2150 180 L 2100 180 L 2100 220 L 2000 220" stroke="rgba(34,211,238,0.35)" stroke-width="2" data-page-node-id="ZgEa2mcAsuIvG6vHylcB9U"/>
            <path d="M 1950 200 L 1900 200 L 1900 160 L 1800 160" stroke="rgba(59,130,246,0.35)" stroke-width="2" data-page-node-id="leuqu7a82Dy8fSGbuMRFTW"/>
            <!-- 电子粒子：在线路上来回游走 -->
            <g fill="rgba(34,211,238,1)" filter="url(#tech-electron-glow)" data-page-node-id="CzEk4icWB0mURzO73FjUhp">
              <!-- 左上线路 电子1 (快速) -->
              <circle r="4" data-page-node-id="kGrkTB0lk0KeFpESZ8ZTiG"><animateMotion dur="3.5s" repeatCount="indefinite" path="M 1050 180 L 1100 180 L 1100 220 L 1200 220" data-page-node-id="jB3YDK5TjLDg1q4YTh1UsP"/><animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.75s" repeatCount="indefinite" data-page-node-id="SbranQ2rE1rLXGc9vPk43B"/></circle>
              <!-- 左上线路 电子2 (慢速反向) -->
              <circle r="3.5" data-page-node-id="RGCPZrjMyntOB8T56qKTeY"><animateMotion dur="5s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1050 180 L 1100 180 L 1100 220 L 1200 220" data-page-node-id="uFaJsP8NwlT8a3kwRKwt12"/></circle>
              <!-- 中上线路 电子1 -->
              <circle r="3.5" fill="rgba(96,165,250,1)" data-page-node-id="qT95sgBC2H6xNRrl2C5akw"><animateMotion dur="4s" repeatCount="indefinite" path="M 1250 200 L 1300 200 L 1300 160 L 1400 160" data-page-node-id="aJKqXHftN1kKnfM4Ewdbs5"/><animate attributeName="opacity" values="0.85;0.35;0.85" dur="2s" repeatCount="indefinite" data-page-node-id="jE6t4u9JFzycfBb8fWqfDL"/></circle>
              <!-- 中上线路 电子2 (反向) -->
              <circle r="3" fill="rgba(96,165,250,1)" data-page-node-id="FaSHAt7e07zzsRHGHLrC2C"><animateMotion dur="6s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1250 200 L 1300 200 L 1300 160 L 1400 160" data-page-node-id="xmD6RMrDDRHNpEQv5p988k"/></circle>
              <!-- 右上线路 电子1 (镜像) -->
              <circle r="4" data-page-node-id="MXRBAGlVzJS4r3AMlWi9B6"><animateMotion dur="3.8s" repeatCount="indefinite" path="M 2150 180 L 2100 180 L 2100 220 L 2000 220" data-page-node-id="7E2ikHMRWHwDmSF9WapfOi"/><animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.9s" repeatCount="indefinite" data-page-node-id="DsVf04B7ZGk4D1MTJ0XSaN"/></circle>
              <!-- 右上线路 电子2 (反向) -->
              <circle r="3.5" data-page-node-id="K78hW7c5s5Hdgq8pbdkmny"><animateMotion dur="5.2s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 2150 180 L 2100 180 L 2100 220 L 2000 220" data-page-node-id="iPsfvHshhcBcARMmY3rK7b"/></circle>
              <!-- 右中上线路 电子1 -->
              <circle r="3.5" fill="rgba(96,165,250,1)" data-page-node-id="bXOFerVqjmXbGqlYeaVOBd"><animateMotion dur="4.2s" repeatCount="indefinite" path="M 1950 200 L 1900 200 L 1900 160 L 1800 160" data-page-node-id="utHKOWAPVeZ54zVcFqtYRC"/><animate attributeName="opacity" values="0.85;0.35;0.85" dur="2.1s" repeatCount="indefinite" data-page-node-id="2Cu5nTc6EN9tnk16Vusr74"/></circle>
              <!-- 右中上线路 电子2 (反向) -->
              <circle r="3" fill="rgba(96,165,250,1)" data-page-node-id="WsvPOiIaCopFfvHIDuqcuE"><animateMotion dur="5.8s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1950 200 L 1900 200 L 1900 160 L 1800 160" data-page-node-id="XojkI5HGfwuAMQFeE0AH7i"/></circle>
            </g>
            <!-- 节点 (线路端点的连接点) -->
            <g fill="rgba(34,211,238,0.55)" data-page-node-id="aj3CY6N9KEBmnA6TZMdbLO">
              <circle cx="1050" cy="180" r="5" data-page-node-id="tos4pGMCDEv8Y1HzPT45Yo"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3s" repeatCount="indefinite" data-page-node-id="BsUoOfts2RuBQ1j7p6QK5s"/></circle>
              <circle cx="1200" cy="220" r="5" data-page-node-id="LS7xOn4BYgDk91HkwUXOFn"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.3s" repeatCount="indefinite" data-page-node-id="nD5LzVKxAsShGdYeiSgwug"/></circle>
              <circle cx="1250" cy="200" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="OCfBjptPRksSEMOMOja4O3"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.6s" repeatCount="indefinite" data-page-node-id="k8Rw3kegCKHYBZv3u3dD7o"/></circle>
              <circle cx="1400" cy="160" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="Q4tx8q3eUsxafaeo8ceHlo"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.2s" repeatCount="indefinite" data-page-node-id="FRhKHCnhNi3nDEu0rSfq5C"/></circle>
              <circle cx="2150" cy="180" r="5" data-page-node-id="jVuOyLk07bs1C80zUQKumU"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.4s" repeatCount="indefinite" data-page-node-id="juh5VxesuttAbt31eX7Tab"/></circle>
              <circle cx="2000" cy="220" r="5" data-page-node-id="30yluX147XxOBdGQ3N1AJd"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="2.9s" repeatCount="indefinite" data-page-node-id="x7FbtsXXUfiul82GZLAiIU"/></circle>
              <circle cx="1950" cy="200" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="FEOb75nfmyPdR0QN1EL4ho"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.1s" repeatCount="indefinite" data-page-node-id="beZGL6Ci2f63q8hRtb4MYC"/></circle>
              <circle cx="1800" cy="160" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="wT5m9UgVJUSmRCPAyvSQ1H"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.5s" repeatCount="indefinite" data-page-node-id="A3B0DmEPyU6FIVDel2TGZM"/></circle>
            </g>
          </g>
          <!-- 电路板（底部）：电子在线路上来回游离 -->
          <g fill="none" stroke-linecap="round" data-page-node-id="HwCDdXSN83FAxqM0L1szRv">
            <!-- 导线 -->
            <path d="M 1050 1020 L 1100 1020 L 1100 980 L 1200 980" stroke="rgba(34,211,238,0.35)" stroke-width="2" data-page-node-id="916TcLjDnWyaABpJRhAaFD"/>
            <path d="M 1250 1000 L 1300 1000 L 1300 1040 L 1400 1040" stroke="rgba(59,130,246,0.35)" stroke-width="2" data-page-node-id="j2c9BUBKhVri3ThMC4i9GG"/>
            <path d="M 2150 1020 L 2100 1020 L 2100 980 L 2000 980" stroke="rgba(34,211,238,0.35)" stroke-width="2" data-page-node-id="54Tg9K4a0lz5ozympbxMVT"/>
            <path d="M 1950 1000 L 1900 1000 L 1900 1040 L 1800 1040" stroke="rgba(59,130,246,0.35)" stroke-width="2" data-page-node-id="YcbBUnerui1Zjme2yZ5qsJ"/>
            <!-- 电子粒子 -->
            <g fill="rgba(34,211,238,1)" filter="url(#tech-electron-glow)" data-page-node-id="ZY086Nc39MbWtVq7RW6gRU">
              <circle r="4" data-page-node-id="GCBI0MqG1NCkMntbVfdFIS"><animateMotion dur="3.6s" repeatCount="indefinite" path="M 1050 1020 L 1100 1020 L 1100 980 L 1200 980" data-page-node-id="BC1tjMWQFMkoFmbqaGXPoR"/><animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.8s" repeatCount="indefinite" data-page-node-id="HvUJgKcqDqaUQP7wM34HzR"/></circle>
              <circle r="3.5" data-page-node-id="uiqDscTVa6jXBAML5kuSxx"><animateMotion dur="5.1s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1050 1020 L 1100 1020 L 1100 980 L 1200 980" data-page-node-id="zTQcAavHnNHXbV6m2eqoOz"/></circle>
              <circle r="3.5" fill="rgba(96,165,250,1)" data-page-node-id="OaaDVAwB4J0AHNo5ZSnDBb"><animateMotion dur="4.1s" repeatCount="indefinite" path="M 1250 1000 L 1300 1000 L 1300 1040 L 1400 1040" data-page-node-id="TFIOue7YDA2bAFTh4aolFk"/><animate attributeName="opacity" values="0.85;0.35;0.85" dur="2s" repeatCount="indefinite" data-page-node-id="4pjK3H2sd7UlftO9oqcgTI"/></circle>
              <circle r="3" fill="rgba(96,165,250,1)" data-page-node-id="QAnJ6e6EVLUJKrBj9akIRF"><animateMotion dur="5.9s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1250 1000 L 1300 1000 L 1300 1040 L 1400 1040" data-page-node-id="nANvELCDeDkyaCUtJLMbud"/></circle>
              <circle r="4" data-page-node-id="uXNxNSkF5ftq5DfAbR6Ibg"><animateMotion dur="3.7s" repeatCount="indefinite" path="M 2150 1020 L 2100 1020 L 2100 980 L 2000 980" data-page-node-id="qW6huQ2Nj5SQf5rGzG6iV1"/><animate attributeName="opacity" values="0.9;0.4;0.9" dur="1.85s" repeatCount="indefinite" data-page-node-id="3AItQv0I8DoUXTAW12QBgf"/></circle>
              <circle r="3.5" data-page-node-id="bmgoFu4Q1u0k9yc0sxgCk7"><animateMotion dur="5.3s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 2150 1020 L 2100 1020 L 2100 980 L 2000 980" data-page-node-id="32PAkXpI2kpQd2WDFy6wJN"/></circle>
              <circle r="3.5" fill="rgba(96,165,250,1)" data-page-node-id="vouIAniduFDPfu10LNNuE5"><animateMotion dur="4.3s" repeatCount="indefinite" path="M 1950 1000 L 1900 1000 L 1900 1040 L 1800 1040" data-page-node-id="yQ3H6BvkAilnOvQDJsLgx7"/><animate attributeName="opacity" values="0.85;0.35;0.85" dur="2.15s" repeatCount="indefinite" data-page-node-id="1TTPQjGAT6oVAdaIh50Mmi"/></circle>
              <circle r="3" fill="rgba(96,165,250,1)" data-page-node-id="SXuOqvtsnZ8nW4lG7zHeMW"><animateMotion dur="5.7s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" path="M 1950 1000 L 1900 1000 L 1900 1040 L 1800 1040" data-page-node-id="qAC6PzSAVDiB76siHa8Rxr"/></circle>
            </g>
            <!-- 节点 -->
            <g fill="rgba(34,211,238,0.55)" data-page-node-id="faLLm88PIHk6tm9R3gX4aT">
              <circle cx="1050" cy="1020" r="5" data-page-node-id="mrJcRNbUmFVEURvw3tBNV6"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="2.8s" repeatCount="indefinite" data-page-node-id="pFMusorYpIG7br5cFgmApj"/></circle>
              <circle cx="1200" cy="980" r="5" data-page-node-id="BnXWbCGJxy7NpPGmI2xbhu"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.2s" repeatCount="indefinite" data-page-node-id="Cmd5KJDIJdqFiFmF8BpZgi"/></circle>
              <circle cx="1250" cy="1000" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="ktiBMmTUVeo2LHeYlJwGr1"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.4s" repeatCount="indefinite" data-page-node-id="rYIjkkpuh4EOJUHvYZ18Gp"/></circle>
              <circle cx="1400" cy="1040" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="LIVzeVWYFmowPBs5QFLFZj"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.7s" repeatCount="indefinite" data-page-node-id="k9zovRWpPTwpBf3ey4Cgf8"/></circle>
              <circle cx="2150" cy="1020" r="5" data-page-node-id="9oI4Z6DkiZ1EmBHB1saGfp"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.3s" repeatCount="indefinite" data-page-node-id="QlJyTqniF3SqBIeSu8CD48"/></circle>
              <circle cx="2000" cy="980" r="5" data-page-node-id="fsYgd7GQs9DwUg3jzbcrKV"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.1s" repeatCount="indefinite" data-page-node-id="saC4hzC2TaEWCYbLbVv8DP"/></circle>
              <circle cx="1950" cy="1000" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="2BeBQ0IF204dCG9C41QHpZ"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3.5s" repeatCount="indefinite" data-page-node-id="0SGQ6TBye9JgYH7MDscTCT"/></circle>
              <circle cx="1800" cy="1040" r="4.5" fill="rgba(96,165,250,0.5)" data-page-node-id="xC3dk1tDK25HziBlE3n3r0"><animate attributeName="opacity" values="0.85;0.3;0.85" dur="3s" repeatCount="indefinite" data-page-node-id="5oi2k8JbWCxfFdMsqJvFFg"/></circle>
            </g>
          </g>
          <!-- 数据节点点 - 仅四角区域 - 闪烁 -->
          <g fill="rgba(34,211,238,0.25)" data-page-node-id="tVvKRnJk64nEYbLEI2Ee5M">
            <circle cx="500" cy="450" r="3" data-page-node-id="fsvo5Jcv1Jeb1riLXnjfoI"><animate attributeName="opacity" values="1;0.4;1" dur="3s" repeatCount="indefinite" data-page-node-id="dXCcYUpOtn8BqfhSiuFF4R"/></circle>
            <circle cx="700" cy="300" r="3" data-page-node-id="2li1hLRpbtrmag2ZVezrmr"><animate attributeName="opacity" values="1;0.4;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="BSn5G3B7sg3bXAbm8cif2n"/></circle>
            <circle cx="500" cy="750" r="3" data-page-node-id="nSMExDVEv8eLlESYzf0Orh"><animate attributeName="opacity" values="1;0.4;1" dur="4s" repeatCount="indefinite" data-page-node-id="Na72ksxh1vZosvd8o2Xuxs"/></circle>
            <circle cx="700" cy="900" r="3" data-page-node-id="cuuCX2cgpQu9kr9RFdZP9o"><animate attributeName="opacity" values="1;0.4;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="ftUe4QiMDLP29GVXyjqThL"/></circle>
            <circle cx="2500" cy="450" r="3" data-page-node-id="TvaNO4UvOD5XzhuMTGuwY2"><animate attributeName="opacity" values="1;0.4;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="R9M2fAKcpfhWLn67O14ppt"/></circle>
            <circle cx="2700" cy="300" r="3" data-page-node-id="FlzNelVdVcgZA5Lsd8zqzM"><animate attributeName="opacity" values="1;0.4;1" dur="3s" repeatCount="indefinite" data-page-node-id="enLLDtqmML3KPjOjX5aBUn"/></circle>
            <circle cx="2500" cy="750" r="3" data-page-node-id="i0qzhgjSXNd6o3BxzWjFV8"><animate attributeName="opacity" values="1;0.4;1" dur="4s" repeatCount="indefinite" data-page-node-id="uPTgyU5Ih0KCl70i30iecq"/></circle>
            <circle cx="2700" cy="900" r="3" data-page-node-id="FqEH1gMcP3g6Wiq0KZqXNT"><animate attributeName="opacity" values="1;0.4;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="vkf18olPbpFyhsO7FWPHGe"/></circle>
          </g>
          <!-- 数据节点点 - 四角区域 - 蓝色 - 闪烁 -->
          <g fill="rgba(59,130,246,0.2)" data-page-node-id="kHTV4EIKNlkLgpfoKsq70N">
            <circle cx="600" cy="400" r="2.5" data-page-node-id="foTk7jCF9gp71zOYnEI3Iz"><animate attributeName="opacity" values="1;0.45;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="TZxK6HE6JMGlRv3lh7WmuY"/></circle>
            <circle cx="400" cy="600" r="2.5" data-page-node-id="tkSN5JHblvEYDKphUvqg1S"><animate attributeName="opacity" values="1;0.45;1" dur="4s" repeatCount="indefinite" data-page-node-id="jH58wbGwQbBrVHCWZJClrs"/></circle>
            <circle cx="2600" cy="400" r="2.5" data-page-node-id="lSMn8iDjhlDU0fNLpkWVcO"><animate attributeName="opacity" values="1;0.45;1" dur="3.5s" repeatCount="indefinite" data-page-node-id="b8fqM7JtpG8CbF3mnhMMIW"/></circle>
            <circle cx="2800" cy="600" r="2.5" data-page-node-id="EgCgSX8Ksshg8eHAdHqvPE"><animate attributeName="opacity" values="1;0.45;1" dur="4s" repeatCount="indefinite" data-page-node-id="Evcolol3sAuNyjQukAjthS"/></circle>
          </g>
        </g>

      </defs>

      <!-- 装饰图案组（默认隐藏，由JS控制显示对应组） -->
      <use id="active-deco" href="#deco-starfield" data-page-node-id="zys9Vw9UKgObrOp8y7HjNh"/>
    </svg>
    <script>
    function generateStarfieldStars() {
      var svgNS = 'http://www.w3.org/2000/svg';
      var rand = function(min, max) { return Math.random() * (max - min) + min; };

      var safeZones = [
        { xMin: 550, xMax: 2650, yMin: 180, yMax: 280 },
        { xMin: 550, xMax: 850, yMin: 300, yMax: 900 },
        { xMin: 2150, xMax: 2650, yMin: 300, yMax: 900 },
        { xMin: 550, xMax: 2650, yMin: 920, yMax: 1020 },
      ];

      function randomPos() {
        var zone = safeZones[Math.floor(Math.random() * safeZones.length)];
        return { x: rand(zone.xMin, zone.xMax), y: rand(zone.yMin, zone.yMax) };
      }

      var crossStars = document.getElementById('cross-stars');
      if (!crossStars) return;

      while (crossStars.firstChild) { crossStars.removeChild(crossStars.firstChild); }

      // 清空上一轮的星星数据（用于流星碰撞检测）
      window.__starfieldStars = [];

      function buildCrossStar(x, y, sizeType, colorType) {
        var outer = document.createElementNS(svgNS, 'g');
        outer.setAttribute('transform', 'translate(' + x.toFixed(0) + ',' + y.toFixed(0) + ')');
        outer.setAttribute('filter', 'url(#starfield-cross-glow)');

        var inner = document.createElementNS(svgNS, 'g');
        inner.setAttribute('class', 'star-inner');
        inner.setAttribute('transform', 'translate(0,0)');

        var extent = sizeType === 'large' ? 24 : (sizeType === 'medium' ? 18 : 12);
        var half = sizeType === 'large' ? 3 : (sizeType === 'medium' ? 2 : 1.5);
        var d = 'M 0 -' + extent + ' L ' + half + ' -' + half + ' L ' + extent + ' 0 L ' + half + ' ' + half + ' L 0 ' + extent + ' L -' + half + ' ' + half + ' L -' + extent + ' 0 L -' + half + ' -' + half + ' Z';

        var colors = colorType === 'blue'
          ? ['rgba(100,170,255,0.15)', 'rgba(130,190,255,0.3)', 'rgba(170,215,255,0.55)', 'rgba(245,250,255,1)']
          : ['rgba(200,220,255,0.12)', 'rgba(220,235,255,0.28)', 'rgba(240,250,255,0.6)', 'rgba(255,255,255,1)'];
        var scales = [1.7, 1.3, 1.0, 0.7];

        for (var li = 0; li < 4; li++) {
          var path = document.createElementNS(svgNS, 'path');
          path.setAttribute('d', d);
          path.setAttribute('transform', 'scale(' + scales[li] + ')');
          path.setAttribute('fill', colors[li]);
          inner.appendChild(path);
        }

        var anim = document.createElementNS(svgNS, 'animate');
        anim.setAttribute('attributeName', 'opacity');
        anim.setAttribute('values', '1;0.35;1');
        anim.setAttribute('dur', (3 + Math.random() * 2).toFixed(1) + 's');
        anim.setAttribute('repeatCount', 'indefinite');
        inner.appendChild(anim);

        outer.appendChild(inner);

        window.__starfieldStars.push({
          el: outer,
          inner: inner,
          x: x,
          y: y,
          isCross: true
        });
        return outer;
      }

      for (var i = 0; i < 6; i++) { var p1 = randomPos(); crossStars.appendChild(buildCrossStar(p1.x, p1.y, 'medium', 'white')); }
      for (var j = 0; j < 6; j++) { var p2 = randomPos(); crossStars.appendChild(buildCrossStar(p2.x, p2.y, 'medium', 'blue')); }
      for (var k = 0; k < 4; k++) { var p3 = randomPos(); crossStars.appendChild(buildCrossStar(p3.x, p3.y, 'small', 'white')); }
      for (var m = 0; m < 4; m++) { var p4 = randomPos(); crossStars.appendChild(buildCrossStar(p4.x, p4.y, 'small', 'blue')); }

      var scatteredWhite = document.getElementById('scattered-stars-white');
      var scatteredPurple = document.getElementById('scattered-stars-purple');

      if (scatteredWhite) {
        while (scatteredWhite.firstChild) { scatteredWhite.removeChild(scatteredWhite.firstChild); }
      }
      if (scatteredPurple) {
        while (scatteredPurple.firstChild) { scatteredPurple.removeChild(scatteredPurple.firstChild); }
      }

      function buildDot(x, y, color) {
        var baseR = Math.random() < 0.5 ? 1.5 : 2;
        // 外层 g：只承载固定位置 transform（translate），也承载失败后的坠落 transform
        var outer = document.createElementNS(svgNS, 'g');
        outer.setAttribute('transform', 'translate(' + x.toFixed(0) + ',' + y.toFixed(0) + ')');

        // 内层 .star-inner：承载图形 + opacity 呼吸动画 + 失败时的抖动动画
        var inner = document.createElementNS(svgNS, 'g');
        inner.setAttribute('class', 'star-inner');
        inner.setAttribute('transform', 'translate(0,0)');

        var c = document.createElementNS(svgNS, 'circle');
        c.setAttribute('cx', '0');
        c.setAttribute('cy', '0');
        c.setAttribute('r', baseR);
        c.setAttribute('fill', color);
        var anim = document.createElementNS(svgNS, 'animate');
        anim.setAttribute('attributeName', 'opacity');
        var lo = (0.15 + Math.random() * 0.1).toFixed(2);
        var hi = (0.35 + Math.random() * 0.2).toFixed(2);
        anim.setAttribute('values', hi + ';' + lo + ';' + hi);
        anim.setAttribute('dur', (3 + Math.random() * 2).toFixed(1) + 's');
        anim.setAttribute('repeatCount', 'indefinite');
        c.appendChild(anim);

        inner.appendChild(c);
        outer.appendChild(inner);

        window.__starfieldStars.push({
          el: outer,     // 外层 g：坠落 transform 挂在这里
          inner: inner,  // 内层 .star-inner：抖动动画挂在这里
          x: x,
          y: y,
          isCross: false,
          baseR: baseR
        });
        return outer;
      }

      if (scatteredWhite) {
        for (var s = 0; s < 18; s++) { var sp = randomPos(); scatteredWhite.appendChild(buildDot(sp.x, sp.y, 'rgba(255,255,255,0.5)')); }
      }
      if (scatteredPurple) {
        for (var t = 0; t < 8; t++) { var tp = randomPos(); scatteredPurple.appendChild(buildDot(tp.x, tp.y, 'rgba(180,180,255,0.4)')); }
      }
    }
    generateStarfieldStars();

    // ----------------------------------------------------------------------------
    // 【星空战场胜负模式】
    // - 胜利模式：每秒额外生成 5 颗流星（每颗独立随机：从上方出现 + 随机角度 + 随机大小 + 随机速度）
    // - 失败模式：停止流星生成，全场星星快速闪烁，音乐停止后星星全部消失
    // ----------------------------------------------------------------------------
    window.__starfieldWinMode = false;
    window.__starfieldLoseMode = false;

    // 流星定时器（区分"基础循环"和"胜利每秒额外循环"）
    window.__meteorBaseTimer = null;
    window.__meteorWinTimer = null;

    // 检测当前是否为星空战场主题
    function isStarfieldTheme() {
      var container = document.querySelector('.game-container');
      if (container && container.classList.contains('bg-theme-starfield')) return true;
      if (typeof currentBgTheme !== 'undefined') {
        return currentBgTheme === 'starfield';
      }
      return false;
    }

    // 获取游戏容器元素
    function getGameContainer() {
      return document.querySelector('.game-container') || document.body;
    }

    // ---- 清除所有流星定时器 ----
    function clearAllMeteorTimers() {
      if (window.__meteorBaseTimer) {
        clearTimeout(window.__meteorBaseTimer);
        window.__meteorBaseTimer = null;
      }
      if (window.__meteorWinTimer) {
        clearInterval(window.__meteorWinTimer);
        window.__meteorWinTimer = null;
      }
    }

    // ---- 清空屏幕上已经存在的流星 DOM ----
    function clearMeteorDom() {
      var container = document.getElementById('meteors');
      if (container) {
        while (container.firstChild) {
          container.removeChild(container.firstChild);
        }
      }
    }

    // 应用胜利模式：启动"每秒额外生成 5 颗流星"
    function applyStarfieldWinMode() {
      if (!isStarfieldTheme()) return;
      window.__starfieldWinMode = true;
      window.__starfieldLoseMode = false;
      var gc = getGameContainer();
      gc.classList.remove('starfield-lose-mode', 'starfield-lose-faded');
      gc.classList.add('starfield-win-mode');

      // 每秒生成 5 颗从上方出现的流星（大小/角度/速度全部随机）
      if (window.__meteorWinTimer) {
        clearInterval(window.__meteorWinTimer);
        window.__meteorWinTimer = null;
      }
      // 先立刻触发一组，让视觉立刻变化
      for (var b = 0; b < 5; b++) spawnOneMeteorFromTop();
      window.__meteorWinTimer = setInterval(function () {
        for (var i = 0; i < 5; i++) spawnOneMeteorFromTop();
      }, 1000);
    }

    // 应用失败模式（停止流星 + 星星抖动）
    function applyStarfieldLoseMode() {
      if (!isStarfieldTheme()) return;
      window.__starfieldLoseMode = true;
      window.__starfieldWinMode = false;
      var gc = getGameContainer();
      gc.classList.add('starfield-lose-mode');
      gc.classList.remove('starfield-lose-faded');
      // 直接给每个星星的inner元素添加抖动类，确保动画生效
      var stars = window.__starfieldStars;
      if (stars && stars.length > 0) {
        for (var i = 0; i < stars.length; i++) {
          if (stars[i] && stars[i].inner) {
            stars[i].inner.classList.add('star-lose-shake');
          }
        }
      }
      // 停止"每秒 5 颗"的胜利定时器
      if (window.__meteorWinTimer) {
        clearInterval(window.__meteorWinTimer);
        window.__meteorWinTimer = null;
      }
      clearMeteorDom();
    }

    // 失败音乐停止后：抖动停止，全部星星向下坠落，从游戏界面底部消失
    function fadeOutLoseStars() {
      if (!isStarfieldTheme()) return;
      var gc = getGameContainer();
      // 先移除抖动模式（失败时星星不再抖动）
      gc.classList.remove('starfield-lose-mode');
      gc.classList.add('starfield-lose-faded');
      // 移除每个星星的抖动类
      var stars = window.__starfieldStars;
      if (stars && stars.length > 0) {
        for (var i = 0; i < stars.length; i++) {
          if (stars[i] && stars[i].inner) {
            stars[i].inner.classList.remove('star-lose-shake');
          }
        }
      }

      if (!stars || stars.length === 0) return;

      // 游戏画布高度：用于计算每个星星最终位置（坠落至界面底部之外）
      var gameHeight = 1080;
      var fallDuration = 1.3; // 秒：统一坠落速度

      // 先将所有星星的外层 g 切换为 CSS transform（设置为原位置），
      // 保证下一帧设置"目标位置"时，CSS transition 能从原位置平滑过渡。
      for (var i = 0; i < stars.length; i++) {
        var s = stars[i];
        if (!s || !s.el) continue;
        s.el.removeAttribute('transform');
        s.el.style.willChange = 'transform, opacity';
        s.el.style.transformOrigin = 'center center';
        s.el.style.opacity = '1';
        s.el.style.transform = 'translate(' + s.x.toFixed(0) + 'px,' + s.y.toFixed(0) + 'px)';
        s.el.style.transition = 'none'; // 先不做 transition
      }

      // 下一帧：设置坠落目标位置 + 启用 transition，浏览器会从原位置平滑坠落
      requestAnimationFrame(function () {
        for (var j = 0; j < stars.length; j++) {
          var ss = stars[j];
          if (!ss || !ss.el) continue;
          var jitterX = (Math.random() - 0.5) * 40;
          var finalX = ss.x + jitterX;
          var finalY = gameHeight + 100 + Math.random() * 120;
          ss.el.style.transition =
            'transform ' + fallDuration.toFixed(2) + 's cubic-bezier(0.45,0,1,1), ' +
            'opacity ' + fallDuration.toFixed(2) + 's ease-in';
          ss.el.style.opacity = '0';
          ss.el.style.transform = 'translate(' + finalX.toFixed(0) + 'px,' + finalY.toFixed(0) + 'px)';
        }
      });

      // 动画结束后从 DOM 中移除（避免残留不可见元素）
      setTimeout(function () {
        var list = window.__starfieldStars;
        if (!list) return;
        for (var k = 0; k < list.length; k++) {
          var ss = list[k];
          if (ss && ss.el && ss.el.parentNode) {
            ss.el.parentNode.removeChild(ss.el);
          }
        }
        // 不清空数组本身，让重新开始时 generateStarfieldStars 统一重建
      }, (fallDuration + 0.1) * 1000);
    }

    // 恢复星空战场到正常状态（重新开始时调用）
    function restoreStarfieldNormal() {
      window.__starfieldWinMode = false;
      window.__starfieldLoseMode = false;
      var gc = getGameContainer();
      gc.classList.remove('starfield-win-mode', 'starfield-lose-mode', 'starfield-lose-faded');
      // 移除所有星星的抖动类
      var stars = window.__starfieldStars;
      if (stars && stars.length > 0) {
        for (var i = 0; i < stars.length; i++) {
          if (stars[i] && stars[i].inner) {
            stars[i].inner.classList.remove('star-lose-shake');
          }
        }
      }
      // 清理胜利时的每秒定时器，避免残留
      if (window.__meteorWinTimer) {
        clearInterval(window.__meteorWinTimer);
        window.__meteorWinTimer = null;
      }
    }

    // ============================================================================
    // 【机械科技主题 · 胜负动画】
    // ============================================================================
    window.__techWinMode = false;
    window.__techLoseMode = false;
    window.__techVictoryLayer = null;
    window.__techDefeatLayer = null;

    function isTechTheme() {
      var container = document.querySelector('.game-container');
      if (container && container.classList.contains('bg-theme-tech')) return true;
      if (typeof currentBgTheme !== 'undefined') {
        return currentBgTheme === 'tech';
      }
      return false;
    }

    function applyForestWinMode() {
      if (!isMagicForestTheme()) return;
      window.__forestWinMode = true;
      window.__forestLoseMode = false;

      var gc = getGameContainer();
      gc.classList.remove('forest-lose-mode');
      gc.classList.add('magicforest-win-mode');

      if (window.__forestVictoryLayer) {
        window.__forestVictoryLayer.parentNode.removeChild(window.__forestVictoryLayer);
        window.__forestVictoryLayer = null;
      }

      var victoryLayer = document.createElement('div');
      victoryLayer.className = 'forest-victory-layer';
      gc.appendChild(victoryLayer);
      window.__forestVictoryLayer = victoryLayer;

      var butterflyCount = 12;
      var butterflies = [];

      function createPollen(x, y, delay) {
        var pollen = document.createElement('div');
        pollen.className = 'forest-pollen';
        pollen.style.left = (x - 3) + 'px';
        pollen.style.top = (y - 3) + 'px';
        pollen.style.opacity = '0';
        victoryLayer.appendChild(pollen);

        setTimeout(function() {
          if (!window.__forestWinMode || !pollen.parentNode) return;
          pollen.style.transition = 'top 1s ease-out, left 0.5s ease-in-out, opacity 0.3s ease-out';
          pollen.style.opacity = '1';
          pollen.style.top = (y + 30 + Math.random() * 20) + 'px';
          pollen.style.left = (x + (Math.random() - 0.5) * 40) + 'px';
        }, delay);

        setTimeout(function() {
          if (!pollen.parentNode) return;
          pollen.style.opacity = '0';
          setTimeout(function() {
            if (pollen.parentNode) pollen.parentNode.removeChild(pollen);
          }, 500);
        }, delay + 1000);
      }

      function createButterfly(index) {
        var butterfly = document.createElement('div');
        butterfly.className = 'forest-butterfly';
        butterfly.innerHTML = `
          <div class="forest-butterfly-inner">
            <div class="forest-butterfly-wing left"></div>
            <div class="forest-butterfly-wing right"></div>
            <div class="forest-butterfly-body"></div>
            <div class="forest-butterfly-antennas">
              <div class="forest-butterfly-antenna left"></div>
              <div class="forest-butterfly-antenna right"></div>
            </div>
          </div>
        `;

        var gcRect = gc.getBoundingClientRect();
        var startX = Math.random() * gcRect.width;
        var startY = gcRect.height + 50;
        
        butterfly.style.left = (startX - 40) + 'px';
        butterfly.style.top = startY + 'px';
        butterfly.style.opacity = '0';

        victoryLayer.appendChild(butterfly);
        butterflies.push(butterfly);

        setTimeout(function() {
          if (!window.__forestWinMode || !butterfly.parentNode) return;
          animateButterfly(butterfly, startX, startY, gcRect);
        }, index * 200);
      }

      function animateButterfly(butterfly, startX, startY, gcRect) {
        var currentX = startX;
        var currentY = startY;
        var targetY = Math.random() * gcRect.height * 0.6;
        var targetX = Math.random() * gcRect.width;
        var duration = 3000 + Math.random() * 2000;
        var startTime = Date.now();
        var lastPollenTime = startTime;

        butterfly.style.opacity = '1';

        function flyStep() {
          if (!window.__forestWinMode || !butterfly.parentNode) return;

          var elapsed = Date.now() - startTime;
          var progress = Math.min(elapsed / duration, 1);
          
          var easedProgress = 1 - Math.pow(1 - progress, 3);
          
          var waveOffset = Math.sin(elapsed * 0.003) * 50;
          var waveOffset2 = Math.cos(elapsed * 0.002) * 30;
          
          currentX = startX + (targetX - startX) * easedProgress + waveOffset + waveOffset2;
          currentY = startY + (targetY - startY) * easedProgress;

          var scale = 0.8 + Math.sin(elapsed * 0.005) * 0.2;
          var rotate = Math.sin(elapsed * 0.002) * 15;

          butterfly.style.transform = `translate(${currentX - (parseFloat(butterfly.style.left) + 40)}px, ${currentY - parseFloat(butterfly.style.top)}px) scale(${scale}) rotate(${rotate}deg)`;

          if (Date.now() - lastPollenTime > 150) {
            createPollen(currentX, currentY, 0);
            lastPollenTime = Date.now();
          }

          if (progress < 1) {
            requestAnimationFrame(flyStep);
          } else {
            setTimeout(function() {
              if (!window.__forestWinMode || !butterfly.parentNode) return;
              animateButterfly(butterfly, currentX, currentY, gcRect);
            }, 500);
          }
        }

        requestAnimationFrame(flyStep);
      }

      for (var i = 0; i < butterflyCount; i++) {
        createButterfly(i);
      }
    }

    function applyForestLoseMode() {
      if (!isMagicForestTheme()) return;
      window.__forestLoseMode = true;
      window.__forestWinMode = false;

      var gc = getGameContainer();
      gc.classList.remove('magicforest-win-mode', 'forest-lose-faded');
      gc.classList.add('forest-lose-mode');

      if (window.__forestVictoryLayer) {
        window.__forestVictoryLayer.parentNode.removeChild(window.__forestVictoryLayer);
        window.__forestVictoryLayer = null;
      }

      if (window.__forestLoseLayer) {
        window.__forestLoseLayer.parentNode.removeChild(window.__forestLoseLayer);
        window.__forestLoseLayer = null;
      }
    }

    function fadeOutForestLose() {
      if (!isMagicForestTheme()) return;
      var gc = getGameContainer();
      gc.classList.add('forest-lose-faded');
    }

    function restoreForestNormal() {
      if (!isMagicForestTheme()) return;
      window.__forestWinMode = false;
      window.__forestLoseMode = false;

      var gc = getGameContainer();
      gc.classList.remove('magicforest-win-mode', 'forest-lose-mode');

      if (window.__forestVictoryLayer) {
        var butterflies = window.__forestVictoryLayer.querySelectorAll('.forest-butterfly');
        butterflies.forEach(function(butterfly, index) {
          setTimeout(function() {
            butterfly.style.transition = 'opacity 0.5s ease-out';
            butterfly.style.opacity = '0';
          }, index * 100);
        });
        
        setTimeout(function() {
          if (window.__forestVictoryLayer && window.__forestVictoryLayer.parentNode) {
            window.__forestVictoryLayer.parentNode.removeChild(window.__forestVictoryLayer);
            window.__forestVictoryLayer = null;
          }
        }, butterflies.length * 100 + 600);
      }
    }

    function isMagicForestTheme() {
      var gc = getGameContainer();
      return gc && gc.classList.contains('bg-theme-magicforest');
    }

    function applyTechWinMode() {
      if (!isTechTheme()) return;
      window.__techWinMode = true;
      window.__techLoseMode = false;

      var gc = getGameContainer();
      gc.classList.remove('tech-lose-mode');
      gc.classList.add('tech-win-mode');

      if (window.__techDefeatLayer) {
        window.__techDefeatLayer.parentNode.removeChild(window.__techDefeatLayer);
        window.__techDefeatLayer = null;
      }

      var victoryLayer = document.createElement('div');
      victoryLayer.className = 'tech-victory-layer';
      gc.appendChild(victoryLayer);
      window.__techVictoryLayer = victoryLayer;

      var electronCount = 24;
      var electronDelay = 30;
      var roundInterval = 1800;
      var isAnimating = true;

      function createElectron(x, startY, endY, delay) {
        var electron = document.createElement('div');
        electron.className = 'tech-electron tech-win-electron';
        electron.style.left = (x - 5) + 'px';
        electron.style.top = startY + 'px';
        electron.style.opacity = '0';
        electron.style.transform = 'scale(0.5)';
        victoryLayer.appendChild(electron);

        setTimeout(function() {
          if (!window.__techWinMode || !electron.parentNode) return;
          electron.style.transition = 'top 1.2s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.3s ease-out, transform 0.3s ease-out';
          electron.style.opacity = '1';
          electron.style.transform = 'scale(1)';
          electron.style.top = endY + 'px';
        }, delay);

        setTimeout(function() {
          if (!electron.parentNode) return;
          electron.style.opacity = '0';
          electron.style.transition = 'opacity 0.5s ease-out, top 1.2s cubic-bezier(0.1, 0.8, 0.2, 1)';
          setTimeout(function() {
            if (electron.parentNode) electron.parentNode.removeChild(electron);
          }, 500);
        }, delay + 1200);
      }

      function launchWave() {
        if (!window.__techWinMode || !isAnimating) return;

        var gcRect = gc.getBoundingClientRect();
        var gameWidth = gcRect.width;
        var gameHeight = gcRect.height;
        var startY = gameHeight + 10;
        var endY = gameHeight * 0.15;

        var leftPadding = gameWidth * 0.1;
        var rightPadding = gameWidth * 0.1;
        var usableWidth = gameWidth - leftPadding - rightPadding;
        var spacing = usableWidth / (electronCount - 1);

        // 左到右波：第1个先发射，然后第2个，依次类推
        for (var i = 0; i < electronCount; i++) {
          var x = leftPadding + i * spacing;
          createElectron(x, startY, endY - Math.random() * 50, i * electronDelay);
        }

        // 右到左波：最右边的先发射，然后依次往左
        for (var j = 0; j < electronCount; j++) {
          var x2 = leftPadding + (electronCount - 1 - j) * spacing;
          createElectron(x2, startY, endY - 30 - Math.random() * 50, j * electronDelay);
        }
      }

      launchWave();
      window.__techWinWaveTimer = setInterval(launchWave, roundInterval);
    }

    function applyTechLoseMode() {
      if (!isTechTheme()) return;
      window.__techLoseMode = true;
      window.__techWinMode = false;

      var gc = getGameContainer();
      gc.classList.remove('tech-win-mode');
      gc.classList.add('tech-lose-mode');

      if (window.__techVictoryLayer) {
        window.__techVictoryLayer.parentNode.removeChild(window.__techVictoryLayer);
        window.__techVictoryLayer = null;
      }

      var defeatLayer = document.createElement('div');
      defeatLayer.className = 'tech-defeat-layer';
      gc.appendChild(defeatLayer);
      window.__techDefeatLayer = defeatLayer;

      var scanLines = [];
      window.__techDefeatScanLines = scanLines;

      function spawnScanLine() {
        if (!window.__techLoseMode) return;

        var line = document.createElement('div');
        line.className = 'tech-defeat-scan-line';
        line.style.top = '-10px';
        line.style.left = '0';
        line.style.right = '0';
        defeatLayer.appendChild(line);
        scanLines.push(line);

        line.addEventListener('animationend', function() {
          if (line.parentNode) {
            line.parentNode.removeChild(line);
            var idx = scanLines.indexOf(line);
            if (idx !== -1) scanLines.splice(idx, 1);
          }
        });

        setTimeout(spawnScanLine, 250);
      }

      spawnScanLine();
    }

    function triggerTechDefeatShorten() {
      window.__techLoseMode = false;
      var scanLines = window.__techDefeatScanLines || [];
      for (var i = 0; i < scanLines.length; i++) {
        var line = scanLines[i];
        var computedTop = getComputedStyle(line).top;
        line.style.top = computedTop;
        line.classList.add('shorten');
      }
    }

    function restoreTechNormal() {
      window.__techWinMode = false;
      window.__techLoseMode = false;
      var gc = getGameContainer();
      gc.classList.remove('tech-win-mode', 'tech-lose-mode');

      if (window.__techWinWaveTimer) {
        clearInterval(window.__techWinWaveTimer);
        window.__techWinWaveTimer = null;
      }

      if (window.__techVictoryLayer) {
        window.__techVictoryLayer.parentNode.removeChild(window.__techVictoryLayer);
        window.__techVictoryLayer = null;
      }
      if (window.__techDefeatLayer) {
        window.__techDefeatLayer.parentNode.removeChild(window.__techDefeatLayer);
        window.__techDefeatLayer = null;
      }
    }

    // ============================================================================
    // 【★ 统一：所有主题的胜负动画 → 正常状态】
    // 无论当前是什么主题、无论是胜利还是失败，一律回到正常状态。
    // 这是联机退出、返回房间、重新开始等所有"彻底清场"路径的唯一入口。
    // ============================================================================
    function restoreAllThemesToNormal() {
      // 1. 星空战场：清 win-mode / lose-mode / 坠落定时器 / 流星 DOM / 星星抖动类
      try {
        if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
        if (typeof clearMeteorDom === 'function') clearMeteorDom();
        // 清星星坠落过程中残留的 transition / opacity / transform 内联样式
        if (window.__starfieldStars && window.__starfieldStars.length) {
          for (var i = 0; i < window.__starfieldStars.length; i++) {
            var _s = window.__starfieldStars[i];
            if (_s && _s.el) {
              _s.el.style.transition = '';
              _s.el.style.opacity = '';
              _s.el.style.transform = '';
              _s.el.style.willChange = '';
            }
          }
        }
      } catch (e) { console.warn('[restoreAllThemes] starfield error:', e); }

      // 2. 魔法森林：清 win-mode / 蝴蝶 / 胜利层 DOM
      try {
        if (typeof restoreForestNormal === 'function') restoreForestNormal();
        // 强制立即移除 victoryLayer（不等蝴蝶动画结束）
        if (window.__forestVictoryLayer && window.__forestVictoryLayer.parentNode) {
          window.__forestVictoryLayer.parentNode.removeChild(window.__forestVictoryLayer);
          window.__forestVictoryLayer = null;
        }
      } catch (e) { console.warn('[restoreAllThemes] forest error:', e); }

      // 3. 机械科技：清 win-mode / 扫描线定时器 / 电子层 DOM
      try {
        if (typeof restoreTechNormal === 'function') restoreTechNormal();
      } catch (e) { console.warn('[restoreAllThemes] tech error:', e); }

      // 4. 通用：无论什么主题，移除 game-container 上所有 win/lose/faded 类
      try {
        var _gc = document.querySelector('.game-container');
        if (_gc) {
          _gc.classList.remove(
            'starfield-win-mode', 'starfield-lose-mode', 'starfield-lose-faded',
            'magicforest-win-mode', 'forest-lose-mode', 'forest-lose-faded',
            'tech-win-mode', 'tech-lose-mode', 'tech-lose-faded'
          );
        }
      } catch (e) { console.warn('[restoreAllThemes] gc class error:', e); }

      // 5. 清 __meteors 容器 DOM（如果存在）
      try {
        var _m = document.getElementById('meteors');
        if (_m) _m.innerHTML = '';
      } catch (e) {}

      console.log('[restoreAllThemes] 所有主题已恢复到正常状态');
    }

    // 创建一颗流星：从起点 startX,startY 飞向终点 endX,endY
    // 参数 size / speed / breakTime 分别控制大小、飞行时间（秒）、停顿时间（秒，保留为 0 也可）
    // 每颗流星包含：拖尾（3 层渐变矩形）+ 头部（两层椭圆）+ 消失点十字星闪烁
    // 动画全部使用 animateMotion + 子元素 animate，beginElement() 显式启动
    // extraHeadSpinStar: true 时，在头部额外叠加一个飞行期间持续旋转的十字星（仅用于胜利流星）
    function createOneMeteor(startX, startY, endX, endY, size, speed, breakTime, extraHeadSpinStar) {
      var svgNS = 'http://www.w3.org/2000/svg';
      var container = document.getElementById('meteors');
      if (!container) return;

      var totalCycle = speed + breakTime;
      var flightRatio = speed / totalCycle;

      // 方向向量
      var dx = endX - startX;
      var dy = endY - startY;
      var totalDistance = Math.sqrt(dx * dx + dy * dy);
      var dirX = dx / totalDistance;
      var dirY = dy / totalDistance;

      // 轨迹长度：飞行距离越短，轨迹越短
      var maxTrail = 400 + size * 150;
      var trailLen = Math.min(maxTrail, totalDistance * 0.45);
      trailLen = Math.max(80, trailLen);

      var headRx = 6.5 * size;
      var headRy = 2.5 * size;
      var tH1 = 3 * size;
      var tH2 = 1.6 * size;
      var tH3 = 0.55 * size;

      var anims = [];
      var g = document.createElementNS(svgNS, 'g');

      // 流星可见部分（拖尾 + 头部）
      var body = document.createElementNS(svgNS, 'g');
      body.setAttribute('filter', 'url(#meteor-head-glow)');

      function addTrail(tY, tH, gradId) {
        var r = document.createElementNS(svgNS, 'rect');
        r.setAttribute('y', (tY - tH / 2).toFixed(2));
        r.setAttribute('height', tH.toFixed(2));
        r.setAttribute('fill', gradId);

        var animX = document.createElementNS(svgNS, 'animate');
        animX.setAttribute('attributeName', 'x');
        animX.setAttribute('dur', totalCycle.toFixed(2) + 's');
        animX.setAttribute('keyTimes', '0;' + flightRatio.toFixed(3) + ';1');
        animX.setAttribute('values', (-trailLen).toFixed(0) + ';0;0');
        animX.setAttribute('begin', 'indefinite');
        animX.setAttribute('repeatCount', '1');
        animX.setAttribute('fill', 'freeze');
        r.appendChild(animX);
        anims.push(animX);

        var animW = document.createElementNS(svgNS, 'animate');
        animW.setAttribute('attributeName', 'width');
        animW.setAttribute('dur', totalCycle.toFixed(2) + 's');
        animW.setAttribute('keyTimes', '0;' + flightRatio.toFixed(3) + ';1');
        animW.setAttribute('values', trailLen.toFixed(0) + ';0;0');
        animW.setAttribute('begin', 'indefinite');
        animW.setAttribute('repeatCount', '1');
        animW.setAttribute('fill', 'freeze');
        r.appendChild(animW);
        anims.push(animW);

        body.appendChild(r);
      }
      addTrail(0, tH1, 'url(#meteor-trail-grad)');
      addTrail(0, tH2, 'url(#meteor-trail-grad-mid)');
      addTrail(0, tH3, 'url(#meteor-trail-grad)');

      var outer = document.createElementNS(svgNS, 'ellipse');
      outer.setAttribute('cx', '0'); outer.setAttribute('cy', '0');
      outer.setAttribute('rx', headRx.toFixed(2)); outer.setAttribute('ry', headRy.toFixed(2));
      outer.setAttribute('fill', 'rgba(255,255,255,1)'); body.appendChild(outer);
      var inner = document.createElementNS(svgNS, 'ellipse');
      inner.setAttribute('cx', '0'); inner.setAttribute('cy', '0');
      inner.setAttribute('rx', (headRx * 0.55).toFixed(2)); inner.setAttribute('ry', (headRy * 0.55).toFixed(2));
      inner.setAttribute('fill', 'rgba(240,253,255,1)'); body.appendChild(inner);

      // 流星身体的透明度动画：保持可见直到到达终点，到达后快速淡出
      var bodyOp = document.createElementNS(svgNS, 'animate');
      bodyOp.setAttribute('attributeName', 'opacity');
      var vIn = (flightRatio * 0.04).toFixed(3);
      var vEnd = flightRatio.toFixed(3);
      var vGone = Math.min(flightRatio + 0.03, 0.97).toFixed(3);
      bodyOp.setAttribute('values', '0;1;1;0;0;0');
      bodyOp.setAttribute('keyTimes', '0;' + vIn + ';' + vEnd + ';' + vGone + ';0.99;1');
      bodyOp.setAttribute('dur', totalCycle.toFixed(2) + 's');
      bodyOp.setAttribute('begin', 'indefinite');
      bodyOp.setAttribute('repeatCount', '1');
      bodyOp.setAttribute('fill', 'freeze');
      body.appendChild(bodyOp);
      anims.push(bodyOp);

      g.appendChild(body);

      // 消失点十字星闪烁（仅在普通流星显示；胜利额外流星用旋转十字星代替，不显示本块）
      if (!extraHeadSpinStar) {
        var pathAngle = (Math.atan2(dy, dx) * 180 / Math.PI).toFixed(1);
        var sparkleInner = document.createElementNS(svgNS, 'g');
        sparkleInner.setAttribute('transform', 'rotate(' + (-pathAngle) + ')');
        sparkleInner.setAttribute('filter', 'url(#meteor-head-glow)');

        var velocity = totalDistance / speed;
        var sizeFactor = 4 + size * 4;
        var velFactor = Math.min(velocity / 300, 1.5) * 3;
        var sparkExtent = (sizeFactor + velFactor).toFixed(1);
        var sparkHalf = (sparkExtent / 8).toFixed(2);
        var sparkD = 'M 0 -' + sparkExtent +
                     ' L ' + sparkHalf + ' -' + sparkHalf +
                     ' L ' + sparkExtent + ' 0' +
                     ' L ' + sparkHalf + ' ' + sparkHalf +
                     ' L 0 ' + sparkExtent +
                     ' L -' + sparkHalf + ' ' + sparkHalf +
                     ' L -' + sparkExtent + ' 0' +
                     ' L -' + sparkHalf + ' -' + sparkHalf + ' Z';

        var sparkColors = [
          'rgba(150,240,180,0.18)',
          'rgba(100,230,150,0.42)',
          'rgba(80,222,128,0.75)',
          'rgba(220,255,225,1)'
        ];
        var sparkScales = [
          (1.5 + size * 0.3).toFixed(2),
          (1.1 + size * 0.25).toFixed(2),
          (0.75 + size * 0.2).toFixed(2),
          (0.5 + size * 0.15).toFixed(2)
        ];

        for (var li = 0; li < 4; li++) {
          var path = document.createElementNS(svgNS, 'path');
          path.setAttribute('d', sparkD);
          path.setAttribute('transform', 'scale(' + sparkScales[li] + ')');
          path.setAttribute('fill', sparkColors[li]);
          sparkleInner.appendChild(path);
        }

        var peakScale1 = (1.0 + size * 0.3 + Math.min(velocity / 500, 0.4)).toFixed(2);
        var peakScale2 = (1.4 + size * 0.4 + Math.min(velocity / 400, 0.5)).toFixed(2);

        var sparkScale = document.createElementNS(svgNS, 'animateTransform');
        sparkScale.setAttribute('attributeName', 'transform');
        sparkScale.setAttribute('type', 'scale');
        sparkScale.setAttribute('dur', totalCycle.toFixed(2) + 's');
        var sparkFlash = Math.min(flightRatio + 0.12, 0.98).toFixed(3);
        sparkScale.setAttribute('keyTimes', '0;' + flightRatio.toFixed(3) + ';' + Math.min(flightRatio + 0.02, 0.97).toFixed(3) + ';' + sparkFlash + ';1');
        sparkScale.setAttribute('values', '0.3;' + peakScale1 + ';' + peakScale1 + ';' + peakScale2 + ';' + peakScale2);
        sparkScale.setAttribute('begin', 'indefinite');
        sparkScale.setAttribute('repeatCount', '1');
        sparkScale.setAttribute('fill', 'freeze');
        sparkleInner.appendChild(sparkScale);
        anims.push(sparkScale);

        var sparkOp = document.createElementNS(svgNS, 'animate');
        sparkOp.setAttribute('attributeName', 'opacity');
        sparkOp.setAttribute('dur', totalCycle.toFixed(2) + 's');
        var sparkFade = Math.min(flightRatio + 0.15, 0.98).toFixed(3);
        sparkOp.setAttribute('keyTimes', '0;' + flightRatio.toFixed(3) + ';' + Math.min(flightRatio + 0.01, 0.97).toFixed(3) + ';' + sparkFade + ';1');
        sparkOp.setAttribute('values', '0;0;1;0;0');
        sparkOp.setAttribute('begin', 'indefinite');
        sparkOp.setAttribute('repeatCount', '1');
        sparkOp.setAttribute('fill', 'freeze');
        sparkleInner.appendChild(sparkOp);
        anims.push(sparkOp);

        g.appendChild(sparkleInner);
      }

      // 胜利额外流星：在头部叠加一个持续旋转的绿色系八角星/十字星，
      // 整个飞行期间绕中心持续旋转（每 0.8 秒一圈）。
      if (extraHeadSpinStar) {
        var headSpinGroup = document.createElementNS(svgNS, 'g');
        headSpinGroup.setAttribute('filter', 'url(#meteor-head-glow)');

        // 尺寸跟随流星头：每个尖伸出的长度 ≈ 流星头 rx 的 2.5 倍，保证肉眼可见
        var headExtent = (headRx * 2.5).toFixed(1);
        var headHalf = (headExtent / 4).toFixed(2);
        var headD = 'M 0 -' + headExtent +
                    ' L ' + headHalf + ' -' + headHalf +
                    ' L ' + headExtent + ' 0' +
                    ' L ' + headHalf + ' ' + headHalf +
                    ' L 0 ' + headExtent +
                    ' L -' + headHalf + ' ' + headHalf +
                    ' L -' + headExtent + ' 0' +
                    ' L -' + headHalf + ' -' + headHalf + ' Z';

        var headSpinColors = [
          'rgba(150,240,180,0.20)',
          'rgba(100,230,150,0.45)',
          'rgba(80,222,128,0.75)',
          'rgba(220,255,225,1)'
        ];
        var headSpinScales = [
          (1.2 + size * 0.25).toFixed(2),
          (0.9 + size * 0.2).toFixed(2),
          (0.65 + size * 0.15).toFixed(2),
          (0.45 + size * 0.1).toFixed(2)
        ];
        for (var hi = 0; hi < 4; hi++) {
          var hPath = document.createElementNS(svgNS, 'path');
          hPath.setAttribute('d', headD);
          hPath.setAttribute('transform', 'scale(' + headSpinScales[hi] + ')');
          hPath.setAttribute('fill', headSpinColors[hi]);
          headSpinGroup.appendChild(hPath);
        }

        // JS rAF 驱动旋转：每 0.8 秒一圈，整个生命周期持续
        var spinStart = performance.now();
        var spinDuration = 800;
        var spinHandle = null;
        var spinDead = false;
        function updateSpin(now) {
          if (spinDead) return;
          if (!headSpinGroup.ownerDocument || !headSpinGroup.parentNode) {
            spinDead = true;
            return;
          }
          var elapsed = now - spinStart;
          var ang = ((elapsed % spinDuration) / spinDuration) * 360;
          headSpinGroup.setAttribute('transform', 'rotate(' + ang.toFixed(2) + ')');
          spinHandle = requestAnimationFrame(updateSpin);
        }
        spinHandle = requestAnimationFrame(updateSpin);

        // 流星生命周期结束时停掉 rAF，避免空转
        var spinStopTimer = setTimeout(function () {
          spinDead = true;
          if (spinHandle) cancelAnimationFrame(spinHandle);
          spinHandle = null;
        }, totalCycle * 1000 + 400);

        // 透明度过渡：飞行过程中保持 0.55 可见，飞行结束后淡出
        var headOp = document.createElementNS(svgNS, 'animate');
        headOp.setAttribute('attributeName', 'opacity');
        headOp.setAttribute('dur', totalCycle.toFixed(2) + 's');
        headOp.setAttribute('keyTimes', '0;0.02;' + flightRatio.toFixed(3) + ';' + Math.min(flightRatio + 0.12, 0.98).toFixed(3) + ';1');
        headOp.setAttribute('values', '0;0.55;0.55;0;0');
        headOp.setAttribute('begin', 'indefinite');
        headOp.setAttribute('repeatCount', '1');
        headOp.setAttribute('fill', 'freeze');
        headSpinGroup.appendChild(headOp);
        anims.push(headOp);

        g.appendChild(headSpinGroup);
      }

      // 运动动画：整个组跟随 animateMotion 运动，只播放一次，停在终点
      var animMotion = document.createElementNS(svgNS, 'animateMotion');
      animMotion.setAttribute('dur', totalCycle.toFixed(2) + 's');
      animMotion.setAttribute('begin', 'indefinite');
      animMotion.setAttribute('repeatCount', '1');
      animMotion.setAttribute('fill', 'freeze');
      animMotion.setAttribute('rotate', 'auto');
      animMotion.setAttribute('keyPoints', '0;1;1');
      animMotion.setAttribute('keyTimes', '0;' + flightRatio.toFixed(3) + ';1');
      animMotion.setAttribute('path', 'M ' + startX.toFixed(0) + ' ' + startY.toFixed(0) + ' L ' + endX.toFixed(0) + ' ' + endY.toFixed(0));
      g.appendChild(animMotion);
      anims.push(animMotion);

      // 记录到全局流星数据（供碰撞检测使用）
      if (!window.__meteorData) window.__meteorData = [];
      window.__meteorData.push({
        headRx: headRx,
        trailLen: trailLen,
        dirX: dirX,
        dirY: dirY,
        element: g,
        nextShakeTime: 0
      });

      container.appendChild(g);

      // 显式启动动画
      for (var ai = 0; ai < anims.length; ai++) {
        try { anims[ai].beginElement(); } catch (e) {}
      }

      // 动画结束后自动移除该流星，避免 DOM 累积（使用 totalCycle + 小幅余量）
      setTimeout(function () {
        try {
          if (g && g.parentNode) g.parentNode.removeChild(g);
          // 同步移除 __meteorData 里的记录
          if (window.__meteorData) {
            var idx = window.__meteorData.findIndex(function (m) { return m.element === g; });
            if (idx >= 0) window.__meteorData.splice(idx, 1);
          }
        } catch (e) {}
      }, Math.ceil(totalCycle * 1000) + 200);

      return totalCycle;
    }

    // ============================================================
    // 【基础循环】generateMeteors：随机方向飞入屏幕的 1 颗普通流星
    // （原先"胜利模式一次生成 5 颗"的逻辑已移除，胜利效果由 spawnOneMeteorFromTop + setInterval 每秒 5 颗实现）
    // ============================================================
    function generateMeteors() {
      var rand = function (min, max) { return Math.random() * (max - min) + min; };

      // 失败模式下不生成
      if (window.__starfieldLoseMode) return;

      var GAME_X_MIN = 0, GAME_X_MAX = 1920;
      var GAME_Y_MIN = 0, GAME_Y_MAX = 1080;

      var size = rand(0.7, 1.5);
      var speed = rand(3, 7);
      var breakTime = rand(2, 5);

      // 终点：游戏界面内随机
      var endX = rand(GAME_X_MIN + 100, GAME_X_MAX - 100);
      var endY = rand(GAME_Y_MIN + 100, GAME_Y_MAX - 100);

      // 起点：3 个方向随机飞入
      var startX, startY;
      var r = Math.random();
      if (r < 0.34) {
        startX = rand(GAME_X_MAX + 100, GAME_X_MAX + 500);
        startY = rand(50, 300);
      } else if (r < 0.67) {
        startX = rand(GAME_X_MIN, GAME_X_MAX);
        startY = rand(-150, 30);
      } else {
        startX = rand(-200, 250);
        startY = rand(80, 400);
      }

      var totalCycle = createOneMeteor(startX, startY, endX, endY, size, speed, breakTime);

      // 本轮结束后，延时再生成下一颗普通流星
      if (window.__meteorBaseTimer) {
        clearTimeout(window.__meteorBaseTimer);
        window.__meteorBaseTimer = null;
      }
      var nextDelay = Math.ceil((totalCycle || 6) * 1000) + 200;
      window.__meteorBaseTimer = setTimeout(function () {
        window.__meteorBaseTimer = null;
        if (typeof generateMeteors === 'function') generateMeteors();
      }, nextDelay);
    }

    // ============================================================
    // 【胜利额外流星】spawnOneMeteorFromTop：从上方出现，角度/大小/速度全部随机
    // - 由 applyStarfieldWinMode 内的 setInterval 每秒调用 5 次
    // ============================================================
    function spawnOneMeteorFromTop() {
      var rand = function (min, max) { return Math.random() * (max - min) + min; };

      var GAME_X_MIN = 400, GAME_X_MAX = 2800;
      var GAME_Y_MIN = 80, GAME_Y_MAX = 1120;

      // 起点：屏幕上方外
      var startX = rand(GAME_X_MIN - 100, GAME_X_MAX + 100);
      var startY = rand(-300, -50);

      // 角度：从起点向下随机偏转（让每颗都有不同斜度）
      //   - 垂直向下：dx=0, dy=很大
      //   - 随机偏左/右：dx 随机正负
      var angleDeg = rand(-75, 75);                 // -75° ~ +75° 的水平偏角（相对垂直向下）
      var flightLen = rand(900, 1800);              // 飞行距离
      var rad = angleDeg * Math.PI / 180;
      var dx = Math.sin(rad) * flightLen;
      var dy = Math.cos(rad) * flightLen;
      var endX = startX + dx;
      var endY = startY + dy;

      // 边界保护：如果终点出了屏幕，就夹回到屏幕边缘内
      if (endX < GAME_X_MIN - 200) endX = GAME_X_MIN - 200;
      if (endX > GAME_X_MAX + 200) endX = GAME_X_MAX + 200;
      if (endY < GAME_Y_MIN - 200) endY = GAME_Y_MIN - 200;
      if (endY > GAME_Y_MAX + 200) endY = GAME_Y_MAX + 200;

      var size = rand(0.5, 1.8);
      var speed = rand(2, 7);
      var breakTime = 0;

      createOneMeteor(startX, startY, endX, endY, size, speed, breakTime, true);
    }

    // 页面启动时先发起一次基础循环
    generateMeteors();

    // ----------------------------------------------------------
    // 流星与星星碰撞检测：周期性计算流星位置，触发星星抖动
    // （使用 JS 直接修改 SVG 属性，避免 CSS transform 对 SVG 元素不兼容的问题）
    // ----------------------------------------------------------
    (function startMeteorShakeDetection() {
      var SHAKE_COOLDOWN = 200;    // 每颗星星抖动后的冷却时间（ms）
      var SHAKE_DURATION = 450;    // 抖动持续时间（ms）

      // 抖动关键帧：时间(ms) / scale / jitterX / jitterY
      // 从星中心向外放大 + 左右抖动 + 末尾回正
      var SHAKE_KEYFRAMES = [
        { t: 0,   s: 1.0, dx: 0,  dy: 0,  glow: 0 },
        { t: 70,  s: 1.9, dx: -3, dy: 2,  glow: 1 },
        { t: 150, s: 1.4, dx: 3,  dy: -2, glow: 1 },
        { t: 250, s: 1.6, dx: -4, dy: 3,  glow: 1 },
        { t: 350, s: 1.3, dx: 2,  dy: -1, glow: 1 },
        { t: 450, s: 1.0, dx: 0,  dy: 0,  glow: 0 }
      ];

      // 对单颗星星触发放大+抖动动画（通过修改 SVG 属性实现）
      function triggerShake(star, now) {
        // 设置冷却时间（抖动时长 + 冷却时间），避免重复触发导致永久抖动
        star.shakeUntil = now + SHAKE_DURATION + SHAKE_COOLDOWN;

        // 对每个关键帧，用 setTimeout 修改 SVG 属性
        for (var ki = 0; ki < SHAKE_KEYFRAMES.length; ki++) {
          (function(k) {
            setTimeout(function() {
              if (star.isCross) {
                // 十字星：transform 是 translate(x,y) scale(s) translate(jx,jy)
                // SVG transform 从右向左应用：先 scale 以中心为轴，再 jitter，再定位
                star.el.setAttribute('transform',
                  'translate(' + (star.x + k.dx) + ',' + (star.y + k.dy) + ') scale(' + k.s + ')'
                );
                // 增亮：在发光路径上放大的同时，简单把 filter 切到更亮的
                if (k.glow > 0) {
                  star.el.setAttribute('filter', 'url(#meteor-shock-glow)');
                } else {
                  star.el.setAttribute('filter', 'url(#starfield-cross-glow)');
                }
              } else {
                // 散点星：修改 r（半径）和少量位置偏移
                var newR = star.baseR * (k.s * 0.7 + 0.3); // 散点星放大倍数稍小
                star.el.setAttribute('r', newR.toFixed(2));
                star.el.setAttribute('cx', (star.x + k.dx * 0.5).toFixed(0));
                star.el.setAttribute('cy', (star.y + k.dy * 0.5).toFixed(0));
                if (k.glow > 0) {
                  star.el.setAttribute('filter', 'url(#meteor-shock-glow)');
                } else {
                  star.el.removeAttribute('filter');
                }
              }
            }, k.t);
          })(SHAKE_KEYFRAMES[ki]);
        }
      }

      function tick(now) {
        var meteors = window.__meteorData;
        var stars = window.__starfieldStars;
        var bgSvg = document.getElementById('bg-decoration');
        if (!meteors || !stars || !bgSvg) {
          requestAnimationFrame(tick);
          return;
        }

        // 获取 SVG 元素的屏幕位置和 viewBox 缩放比例
        // viewBox = 0 0 3200 1200， preserveAspectRatio = xMidYMid slice
        var svgRect = bgSvg.getBoundingClientRect();
        var vbW = 3200, vbH = 1200;
        var scale = Math.max(svgRect.width / vbW, svgRect.height / vbH);
        var scaledW = vbW * scale;
        var scaledH = vbH * scale;
        var offsetX = (svgRect.width - scaledW) / 2;
        var offsetY = (svgRect.height - scaledH) / 2;

        // 对每颗流星：从 DOM 读取实际渲染位置，再找范围内最近的星星
        for (var mi = 0; mi < meteors.length; mi++) {
          var met = meteors[mi];

          // 流星级别冷却：每 250ms 检测一次
          if (now < met.nextShakeTime) continue;

          // 关键：从 DOM 读取流星头的实际渲染位置（永远和视觉一致）
          // getCTM().e 和 .f 是元素原点(0,0)在屏幕坐标系中的位置（流星头中心）
          var ctm;
          try {
            ctm = met.element.getCTM();
          } catch (e) { continue; }
          if (!ctm) continue;

          // 将屏幕坐标转换回 viewBox 坐标
          var screenX = ctm.e - svgRect.left;
          var screenY = ctm.f - svgRect.top;
          var cx = (screenX - offsetX) / scale;
          var cy = (screenY - offsetY) / scale;

          // 只在可见区域内触发（避免不可见时误触发）
          if (cx < 0 || cx > 1920 || cy < 0 || cy > 1080) continue;

          // 流星头 + 轨迹：沿轨迹采样多个检测点
          // 轨迹从流星头(cx,cy)沿相反方向(-dirX, -dirY)延伸 trailLen 单位
          var numSamples = 6;
          var trailRx = met.headRx * 4;          // 轨迹检测半径（略小于头）
          var headR = met.headRx * 6 + 30;       // 流星头检测半径
          var triggeredThisTick = false;

          for (var sn = 0; sn < numSamples; sn++) {
            // 采样进度：0 = 流星头位置，1 = 轨迹末端
            var t = sn / (numSamples - 1);
            // 采样点位置 = 头 + t * 轨迹长度 * 反方向
            var sx = cx - met.dirX * met.trailLen * t;
            var sy = cy - met.dirY * met.trailLen * t;

            // 越靠近头，半径越大；越靠近尾端半径越小（渐细）
            var r;
            if (sn === 0) {
              r = headR;  // 头位置用大半径
            } else {
              r = trailRx * (1 - t * 0.5); // 轨迹：从头附近到尾端逐渐减小
            }
            var r2 = r * r;

            // 找范围内最近的一颗星星
            var bestStar = null;
            var bestDist2 = r2;
            for (var si = 0; si < stars.length; si++) {
              var star = stars[si];
              var dx = star.x - sx;
              var dy = star.y - sy;
              var d2 = dx * dx + dy * dy;
              if (d2 < bestDist2) {
                bestDist2 = d2;
                bestStar = star;
              }
            }

            if (bestStar && bestStar.shakeUntil < now) {
              triggerShake(bestStar, now);
              triggeredThisTick = true;
            }
          }

          if (triggeredThisTick) {
            met.nextShakeTime = now + 250;
          }
        }

        requestAnimationFrame(tick);
      }

      // 延迟启动，确保 DOM 已就绪
      setTimeout(function () { requestAnimationFrame(tick); }, 800);
    })();
    </script>
    <!-- 【能量槽悬停提示】跟随鼠标位置的美化提示条（必须放在 initEnergySlotInteraction 之前定义，让 JS 能找到） -->
    <div id="panel-tooltip" data-page-node-id="A7mZXqPVGDb7jULAsJ61YC">
      <span class="tip-kw" data-i18n="morale_kw" data-page-node-id="J8pGJJRAlv3GzPCcZjFGLk">士气值</span><span data-i18n="morale_text">：每回合结束时按当前得分增长</span>
    </div>

    <!-- ====================================================================== -->
    <!-- 【左侧方块计数区】36个空心方块（18红对方+18蓝己方）                -->
    <!-- ====================================================================== -->
    <div class="card-counter-panel" id="card-counter-panel" data-page-node-id="ivEnvreH4gSJoekVw6NAg1">
      <div class="energy-score-label red" id="opponent-energy-score" data-page-node-id="wY1Ey2tiFyHFtLG8aJMtP3">0</div>
      <div class="card-counter-item red" id="energy-red-0" data-page-node-id="heeNqqFHxvN0aJkjTBFAhf"></div>
      <div class="card-counter-item red" id="energy-red-1" data-page-node-id="BSQSajlDTbyaPGzsWsk2Bd"></div>
      <div class="card-counter-item red" id="energy-red-2" data-page-node-id="FogyMU3ekHxfcrt0AksHvg"></div>
      <div class="card-counter-item red" id="energy-red-3" data-page-node-id="Ei2JTmaSy9HLXSDSkd9Zvq"></div>
      <div class="card-counter-item red" id="energy-red-4" data-page-node-id="S3qFdM0pjzQiwm2uFvGF2x"></div>
      <div class="card-counter-item red" id="energy-red-5" data-page-node-id="9fCq37GA8AP8T0cTUGJ6q2"></div>
      <div class="card-counter-item red" id="energy-red-6" data-page-node-id="5eQ5xCRXGkpN6qYCjD8eck"></div>
      <div class="card-counter-item red" id="energy-red-7" data-page-node-id="ddOW2MHSh8tF1CH2Bnkzwa"></div>
      <div class="card-counter-item red" id="energy-red-8" data-page-node-id="fSO0tlQ0jIBJPm6LuF732O"></div>
      <div class="card-counter-item red" id="energy-red-9" data-page-node-id="9Q8qjZE7Z2C15IqExylyAa"></div>
      <div class="card-counter-item red" id="energy-red-10" data-page-node-id="nBIZuyoehsOJEseQAs6CL0"></div>
      <div class="card-counter-item red" id="energy-red-11" data-page-node-id="sY0me6dH9JdFejAqwu4Tle"></div>
      <div class="card-counter-item red" id="energy-red-12" data-page-node-id="vAribVkkTVUIWkRJHRVvRR"></div>
      <div class="card-counter-item red" id="energy-red-13" data-page-node-id="kYNq2JegawcBDRGxWy0g7D"></div>
      <div class="card-counter-item red" id="energy-red-14" data-page-node-id="sDJz9D73t3CDvDTt7VPzEt"></div>
      <div class="card-counter-item red" id="energy-red-15" data-page-node-id="ey1Q6wHNBOwaFGgyFP7XKA"></div>
      <div class="card-counter-item red" id="energy-red-16" data-page-node-id="v1rxEOk4ok9mR0pRBwDVQ1"></div>
      <div class="card-counter-item red" id="energy-red-17" data-page-node-id="4dHujxWbjVnghPcq6WBgQM"></div>
      <div class="energy-divider" data-page-node-id="WEKLD6w9WSiuipGHGAB9NS"></div>
      <div class="card-counter-item blue" id="energy-blue-0" data-page-node-id="dFQBKY4nsU1FXDU5EvMWAr"></div>
      <div class="card-counter-item blue" id="energy-blue-1" data-page-node-id="czrCt76oZVkMXiFIkjRfFn"></div>
      <div class="card-counter-item blue" id="energy-blue-2" data-page-node-id="r5HrHq937IAQMDUxC0G4jK"></div>
      <div class="card-counter-item blue" id="energy-blue-3" data-page-node-id="ZmsxGtvHfdKnUgEi5e6rBJ"></div>
      <div class="card-counter-item blue" id="energy-blue-4" data-page-node-id="u647MVxhSCQVOKBuMRQWkX"></div>
      <div class="card-counter-item blue" id="energy-blue-5" data-page-node-id="ctOMasyCDrjuN6PGjOPdBy"></div>
      <div class="card-counter-item blue" id="energy-blue-6" data-page-node-id="AxCydAIZU776iNLW53n1Bf"></div>
      <div class="card-counter-item blue" id="energy-blue-7" data-page-node-id="vRgwqvLpwaMmkrllb1Z0uL"></div>
      <div class="card-counter-item blue" id="energy-blue-8" data-page-node-id="Rgght3ByH5fLgQLRHiORMP"></div>
      <div class="card-counter-item blue" id="energy-blue-9" data-page-node-id="XJuzaKR70BFfnULMM2kGov"></div>
      <div class="card-counter-item blue" id="energy-blue-10" data-page-node-id="bcxuCH7AwhfE22TBg44zCf"></div>
      <div class="card-counter-item blue" id="energy-blue-11" data-page-node-id="o9iAP7T9fcOFvh86Ha03Hv"></div>
      <div class="card-counter-item blue" id="energy-blue-12" data-page-node-id="oFbcyCeshhmHMeacI58a5e"></div>
      <div class="card-counter-item blue" id="energy-blue-13" data-page-node-id="sG4faoyOCIdkPHKAPhYmMB"></div>
      <div class="card-counter-item blue" id="energy-blue-14" data-page-node-id="yUjS9OQdGovofLdGCFeQcp"></div>
      <div class="card-counter-item blue" id="energy-blue-15" data-page-node-id="oOHWFglr9hlB80shb7IWL9"></div>
      <div class="card-counter-item blue" id="energy-blue-16" data-page-node-id="FPnXDm8AffjnnNVsCnBdK9"></div>
      <div class="card-counter-item blue" id="energy-blue-17" data-page-node-id="fXvRFs4bEzllz3u0G7L4EC"></div>
      <div class="energy-score-label blue" id="player-energy-score" data-page-node-id="h8m5YYnxFNVCHhlgaYuFzH">0</div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-1/8】设置面板区域 -->
    <!-- 包含: 设置按钮、设置面板(全屏/音量/先手/卡背选择) -->
    <!-- ====================================================================== -->
    
    <!-- 设置按钮 - 左上角齿轮图标，点击弹出设置面板 -->
    <button id="settings-btn" class="ui-button absolute top-4 left-4 z-50 game-cursor-hover" style="background: linear-gradient(145deg, #374151, #1f2937); color: white; padding: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.375rem; border: none; transition: all 0.25s ease; box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; align-items: center; justify-content: center;" onmouseover="this.querySelector('.icon-cog').classList.add('gear-spin');this.querySelector('.btn-inner').classList.add('border-rotate');this.style.boxShadow='0 0.375rem 1.25rem rgba(0, 0, 0, 0.4)';" onmouseout="this.querySelector('.icon-cog').classList.remove('gear-spin');this.querySelector('.btn-inner').classList.remove('border-rotate');this.style.boxShadow='0 0.25rem 0.9375rem rgba(0, 0, 0, 0.3)';" data-page-node-id="aAMRx9X8bHef9cmLJkZ9DT">
      <div class="btn-inner" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 0.0625rem solid #4b5563;" data-page-node-id="GUhuhjBaziesZ0ACFoTK6R">
        <span class="icon-cog" style="font-size: 1.25rem; color: #E5E7EB; font-style: normal; display: inline-block;" data-page-node-id="Jw0He2sdQ31JaVuHD7U1aZ">⚙</span>
      </div>
    </button>
    
    <!-- 设置面板遮罩层 - 默认隐藏，点击设置按钮显示，点击遮罩层关闭 -->
    <div id="settings-overlay" class="absolute inset-0 bg-black/30 z-[150] hidden" data-page-node-id="geJEQrmSozALGcC17Djvhd"></div>

    <!-- 设置面板 - 默认隐藏，点击设置按钮显示 -->
    <div id="settings-panel" style="
      position: absolute;
      top: 5rem;
      left: 1rem;
      width: 17.5rem;
      max-height: calc(1080px - 7rem);
      background: linear-gradient(145deg, #1e293b, #0f172a);
      border-radius: 0.75rem;
      border: 0.0625rem solid #334155;
      box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.5);
      padding: 1.25rem;
      padding-bottom: 2rem;
      z-index: 160;
      display: none;
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
    " data-page-node-id="dCbUYZyUJXfnFkCiha3lvd">
      <!-- 设置面板标题栏 -->
      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 0.0625rem solid #334155;
      " data-page-node-id="djFJuPkx7w1J3bUtHpDFC6">
        <h3 style="color: white; font-size: 1rem; font-weight: 600;" data-i18n="set_title" data-page-node-id="MwMFH6adnpbCkHeOVmgwP2">设置</h3>
        <button id="close-settings-btn" class="game-cursor-hover" style="
          background: none;
          border: none;
          color: #94a3b8;
          font-size: 1rem;
        " data-page-node-id="Q4PBwQautpESvEgXuqfhFY">
          <span class="icon-times" style="font-size: 1rem; color: #94a3b8; font-style: normal;" data-page-node-id="PthAovVV8NYrQfV9MzBOV1">✕</span>
        </button>
      </div>
      
      <!-- 显示模式设置 -->
      <div style="margin-bottom: 1.5rem;" data-page-node-id="2LdJXs5SS1VfL1KZtN3KpL">
        <div style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem;" data-i18n="set_fullscreen" data-page-node-id="bQS9xyDLe1wXCtKGwyEOch">显示模式</div>
        <div style="display: flex; gap: 0.5rem;" data-page-node-id="y9ooTxUChC6NL5lIphCCoq">
          <button id="fullscreen-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.875rem;
            transition: all 0.2s ease;
          " onmouseover="onFullscreenBtnHover(this);" onmouseout="updateFullscreenBtnStyle(this);" data-i18n="set_full" data-page-node-id="dOC32FrriWOqge6H2yMjWr">全屏</button>
          <button id="borderless-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            display: none;
          " onmouseover="onBorderlessBtnHover(this);" onmouseout="updateBorderlessBtnStyle(this);" data-i18n="set_borderless">无边框</button>
        </div>
      </div>
      
      <!-- 音效音量设置 -->
      <div style="margin-bottom: 1.5rem;" data-page-node-id="0J4o0TJtgVRenLfbJGlXaQ">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;" data-page-node-id="Lp2JC7qfAzGbHS8CKeTmQ3">
          <span style="color: #94a3b8; font-size: 0.875rem;" data-i18n="set_sound" data-page-node-id="HWNg1tOerQDAm3LEsbZt8B">音效音量</span>
          <span id="sfx-volume-value" style="color: white; font-size: 0.875rem;" data-page-node-id="QG6sZIh6Z9ygUUX4PraSa9">100%</span>
        </div>
        <input type="range" id="sfx-volume-slider" min="0" max="100" value="100" style="
          width: 100%;
          height: 0.375rem;
          border-radius: 0.1875rem;
          background: #334155;
          outline: none;
          -webkit-appearance: none;
          appearance: none;
        " data-page-node-id="9UzTGN226KxlNdkoqTquo1">
      </div>
      
      <!-- 音乐音量设置 -->
      <div style="margin-bottom: 1.5rem;" data-page-node-id="AagDZqreKhgOLFBQJXAAd1">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;" data-page-node-id="YEYojW0jP8eflrTEoLVJdP">
          <span style="color: #94a3b8; font-size: 0.875rem;" data-i18n="set_music" data-page-node-id="rsqYNmOlsMINwUgCL1SJCJ">音乐音量</span>
          <span id="music-volume-value" style="color: white; font-size: 0.875rem;" data-page-node-id="0T3w3S61B1uHEvhK7OAzTi">100%</span>
        </div>
        <input type="range" id="music-volume-slider" min="0" max="100" value="100" style="
          width: 100%;
          height: 0.375rem;
          border-radius: 0.1875rem;
          background: #334155;
          outline: none;
          -webkit-appearance: none;
          appearance: none;
        " data-page-node-id="OsGrDowU3M38hGXukJ340O">
      </div>

      <!-- BGM音量设置 -->
      <div style="margin-bottom: 1.5rem;" data-page-node-id="WOuO8M2YGjjcVUeoNHUn7L">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;" data-page-node-id="14lULUB8fakTW2Ox0OQjI5">
          <span style="color: #94a3b8; font-size: 0.875rem;" data-i18n="set_bgm" data-page-node-id="znh5Rj7cd8AYHFmZEPvnE2">BGM音量</span>
          <span id="bgm-volume-value-settings" style="color: white; font-size: 0.875rem;" data-page-node-id="HoAAJXgWMyjCS2y0q8ClJV">20%</span>
        </div>
        <input type="range" id="bgm-volume-slider-settings" min="0" max="100" value="20" style="
          width: 100%;
          height: 0.375rem;
          border-radius: 0.1875rem;
          background: #334155;
          outline: none;
          -webkit-appearance: none;
          appearance: none;
        " data-page-node-id="JG1uNmvzElgwjqTj8iBadi">
      </div>

      <!-- 语音音量设置 -->
      <div style="margin-bottom: 1.5rem;" data-page-node-id="1PLbaTZXxq4nngd1HDxvoe">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;" data-page-node-id="wunzjmDl4OPe48C9bowSkz">
          <span style="color: #94a3b8; font-size: 0.875rem;" data-i18n="set_voice" data-page-node-id="AE6FYKIKHIJ33GCsHHGxiT">语音音量</span>
          <span id="voice-volume-value-settings" style="color: white; font-size: 0.875rem;" data-page-node-id="h892hc6zxgqFTugBzMhVtF">100%</span>
        </div>
        <input type="range" id="voice-volume-slider-settings" min="0" max="100" value="100" style="
          width: 100%;
          height: 0.375rem;
          border-radius: 0.1875rem;
          background: #334155;
          outline: none;
          -webkit-appearance: none;
          appearance: none;
        " data-page-node-id="nhQuljd8g7sSM1gwzUxghh">
      </div>
      
      <!-- 【风格选择】 -->
      <div style="margin-top: 1.5rem;" data-page-node-id="fyAONtrTRQK7XNQcDwlIzk">
        <div data-i18n="set_style" style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="NI7vKTawBMGUpVgsqUid4w">风格</div>
        <div style="display: flex; gap: 0.5rem;" data-page-node-id="PcbRBev0bTfRPJBEJJ1flD">
          <button id="cardface-normal-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#60a5fa'; this.style.color='#bfdbfe';" onmouseout="updateCardFaceBtnStyle();" data-i18n="set_style_classic" data-page-node-id="drN9gVHdvLM4CWPbye7jPM">经典</button>
          <button id="cardface-glass-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#60a5fa'; this.style.color='#bfdbfe';" onmouseout="updateCardFaceBtnStyle();" data-i18n="set_style_glass" data-page-node-id="j3HcgtACft0D8ZNvxorgGD">玻璃</button>
          <button id="cardface-metal-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#60a5fa'; this.style.color='#bfdbfe';" onmouseout="updateCardFaceBtnStyle();" data-i18n="set_style_metal" data-page-node-id="Tc4EGiXIfONYHhX67MuYYE">金属</button>
          <button id="cardface-cartoon-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#60a5fa'; this.style.color='#bfdbfe';" onmouseout="updateCardFaceBtnStyle();" data-i18n="set_style_cartoon">卡通</button>
        </div>
        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;" data-page-node-id="gu5sEO8f25gWYFv0mRHlk3">
          <button id="style-bg-btn" class="bg-image-btn game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #1e293b;
            color: #94a3b8;
            font-size: 0.75rem;
            text-align: center;
            transition: all 0.2s ease;
          " data-i18n="set_style_off" data-page-node-id="Cvm5KkXvjERvAOH2u0PXKP">关闭</button>
        </div>
      </div>

      <!-- 【元素】选择 -->
      <div style="margin-top: 1.5rem;" data-page-node-id="jwlc0LI9MUSP9IwhDD5BeR">
        <div data-i18n="set_element" style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="BMX3dT9PLyYaCkGxfkut4W">元素</div>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;" data-page-node-id="oCnzPA8qg4vdc7FxG7Hhb6">

          <!-- 星空战场 -->
          <div style="display: flex; gap: 0.5rem; align-items: stretch;" data-page-node-id="usQXAmw2MbhZWKtCbtcfh7">
            <button id="bg-starfield-btn" class="bg-setting-btn game-cursor-hover" data-bg="starfield" style="
              flex: 1;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: linear-gradient(145deg, #0a0a1f 0%, #151538 50%, #1a1a4e 100%);
              color: #E5E7EB;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_starfield" data-page-node-id="AKhOCJzRPkS2YbrXqSTWux">星空战场</button>
            <button id="bg-starfield-anim-btn" class="bg-anim-btn game-cursor-hover" data-bg="starfield" style="
              width: 3.5rem;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: #1e293b;
              color: #94a3b8;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_anim" data-page-node-id="Yjb66eBdLSPvUdsrBm0eYN">动态</button>
          </div>

          <!-- 魔幻森林 -->
          <div style="display: flex; gap: 0.5rem; align-items: stretch;" data-page-node-id="ZLdMOOX8jx0olFmYmF61mj">
            <button id="bg-magicforest-btn" class="bg-setting-btn game-cursor-hover" data-bg="magicforest" style="
              flex: 1;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: linear-gradient(145deg, #0d1f12 0%, #1a2e1f 50%, #1f3a2a 100%);
              color: #E5E7EB;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_magicforest" data-page-node-id="XMDRruAbKSHVk4gH4HmEH4">魔幻森林</button>
            <button id="bg-magicforest-anim-btn" class="bg-anim-btn game-cursor-hover" data-bg="magicforest" style="
              width: 3.5rem;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: #1e293b;
              color: #94a3b8;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_anim" data-page-node-id="o8kQJuqRidrsETShc58ois">动态</button>
          </div>

          <!-- 机械科技 -->
          <div style="display: flex; gap: 0.5rem; align-items: stretch;" data-page-node-id="ih0ssqq5BDwFuK3AwWoYki">
            <button id="bg-tech-btn" class="bg-setting-btn game-cursor-hover" data-bg="tech" style="
              flex: 1;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: linear-gradient(145deg, #0a0f1a 0%, #0d1526 50%, #121a2e 100%);
              color: #E5E7EB;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_tech" data-page-node-id="furlRw5e6yUqTCogefzaFH">机械科技</button>
            <button id="bg-tech-anim-btn" class="bg-anim-btn game-cursor-hover" data-bg="tech" style="
              width: 3.5rem;
              padding: 0.5rem;
              border-radius: 0.5rem;
              border: 0.0625rem solid #475569;
              background: #1e293b;
              color: #94a3b8;
              font-size: 0.65rem;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: all 0.2s ease;
            " data-i18n="set_bg_anim" data-page-node-id="nagXMu6UcBscrmSubPQBry">动态</button>
          </div>

        </div>
      </div>

      <!-- 【AI能力】（需在游戏开始前设置，进入游戏后无法修改；公平=AI守信息规则，全知=AI全信息推演） -->
      <div id="settings-ai-strategy" style="margin-top: 1.5rem;" data-page-node-id="AxvOt1xxF91jyRyvxNOhUS">
        <div data-i18n="set_ai_title" style="color: #E5E7EB; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="EDxeXSCbejsSJAALbZapDw">【AI能力】</div>
        <div style="display: flex; gap: 0.5rem;" data-page-node-id="zOS7wluARkepaOYxfYnxpz">
          <button id="ai-cap-fair-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #4ade80;
            background: #16a34a;
            color: white;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " data-i18n="set_ai_fair" data-page-node-id="6Rk3gGA8WijjYI0NmONJX0">公平</button>
          <button id="ai-cap-omni-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " data-i18n="set_ai_omni" data-page-node-id="7hu9DdPGm8D0MQjHHLhqH1">全知</button>
          <!-- ★ v5.49 全面档（概率型 AI，2026-10-11）：按概率给所有候选落点排序，
               不再用 40+ 维度加权求和；口径见 ai-core/ai/prob-ai.js 头部 -->
          <button id="ai-cap-prob-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " data-i18n="set_ai_prob" data-page-node-id="pR7bKq2LmX9vT4yH1cNwE">全面</button>
        </div>
      </div>

      <!-- 【先手选择】（需在游戏开始前设置，进入游戏后无法修改） -->
      <div id="settings-first-player" style="margin-top: 1.5rem;" data-page-node-id="MTx94hIWLfGXwYJ7BCbwvp">
        <div data-i18n="set_first_title" style="color: #E5E7EB; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="ZwsuoJVBeyhKmGPxpBhv4v">【先手选择】</div>
        <div style="display: flex; gap: 0.5rem;" data-page-node-id="H3UGFM6kbaCDvHmJEmRRQ9">
          <button id="first-random-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="onFirstPlayerBtnHover(this, 'random');" onmouseout="updateFirstPlayerBtnStyle('random');" data-i18n="set_first_random" data-page-node-id="UGDarSgTDojI0FkF6Hva89">随机先手</button>
          <button id="first-player-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="onFirstPlayerBtnHover(this, 'player');" onmouseout="updateFirstPlayerBtnStyle('player');" data-i18n="set_first_mine" data-page-node-id="GAKnmitQ5B2Bkl0RZMSC68">我方先手</button>
          <button id="first-opponent-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="onFirstPlayerBtnHover(this, 'opponent');" onmouseout="updateFirstPlayerBtnStyle('opponent');" data-i18n="set_first_opponent" data-page-node-id="41SCC6KPy4fDJiTfU6kNu2">对方先手</button>
        </div>
      </div>

      <!-- 【叫牌】（开启时：玩家打出暗牌/牌堆放路牌区后，牌下方显示"叫牌"提示） -->
      <div id="settings-call-card" style="margin-top: 1.5rem;" data-page-node-id="grfRkuI9RsUPj4X0aV1R34">
        <div data-i18n="set_callcard_title" style="color: #E5E7EB; font-size: 0.875rem; margin-bottom: 0.25rem;" data-page-node-id="l0jG0f2ZDDHTHwfK0iqoKU">【叫牌】</div>
        <div data-i18n="set_callcard_desc" style="color: #64748b; font-size: 0.6875rem; margin-bottom: 0.5rem; line-height: 1.4;" data-page-node-id="UrGUDxeAvnNaSdpXUxoTFN">预测未知的牌点，成功后可以额外得分</div>
        <div style="display: flex; gap: 0.5rem;" data-page-node-id="uCex4mZeu6m7JrlwTNcnKY">
          <button id="call-card-on-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#60a5fa'; this.style.color='#bfdbfe';" onmouseout="updateCallCardBtnStyle();" data-i18n="set_callcard_on" data-page-node-id="M9iK3mV37yhV2nCI5epH1H">开启</button>
          <button id="call-card-off-btn" class="game-cursor-hover" style="
            flex: 1;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #475569;
            background: #334155;
            color: #94a3b8;
            font-size: 0.75rem;
            transition: all 0.2s ease;
          " onmouseover="this.style.borderColor='#f87171'; this.style.color='#fecaca';" onmouseout="updateCallCardBtnStyle();" data-i18n="set_callcard_off" data-page-node-id="PXa6Vc4OZeCskqzlokVMGj">关闭</button>
        </div>
      </div>

      <!-- 卡背选择设置 -->
      <div style="margin-top: 1.5rem;" data-page-node-id="2IZQhHT4A15Pwk7BP3lUi7">
        <div data-i18n="set_cardback" style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="hrxxi0KBuEeRISoefc6j7p">卡背选择</div>
        
        <div style="margin-bottom: 1rem;" data-page-node-id="I5PQHJJ2DH6cw0w2aBsnml">
          <div data-i18n="set_mine" style="color: #60a5fa; font-size: 0.75rem; margin-bottom: 0.5rem;" data-page-node-id="Nd04L5BriVBzsx9UhbbIuH">我方</div>
          <div id="blue-card-back-options" style="display: flex; gap: 0.5rem;" data-page-node-id="eJDB3NkDcZNTPravnzufZ8">
          </div>
        </div>
        
        <div data-page-node-id="jeMTMoNQ2cRBSnEweiFhKo">
          <div data-i18n="set_opponent" style="color: #f87171; font-size: 0.75rem; margin-bottom: 0.5rem;" data-page-node-id="CyaFCfuoM5AEjc7AzkZjqq">对方</div>
          <div id="red-card-back-options" style="display: flex; gap: 0.5rem;" data-page-node-id="EsEuGdNUg20cbGoMLxZUFB">
          </div>
        </div>
      </div>

      <!-- 栏目管理设置 -->
      <div style="margin-top: 1.5rem;" data-page-node-id="oq4bASFnmd5dCaey23q1DM">
        <div data-i18n="set_columns" style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem;" data-page-node-id="4r5swByMpbWsUlJxzV5G7W">栏目管理</div>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;" data-page-node-id="E9EkmYk8ogPDFKRqn3EOQS">
          <button id="toggle-status-bar" class="game-cursor-hover column-toggle-btn" data-target="battlefield" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="kiGarpCWn3gYtrlNMlJGN1">
            <span data-i18n="set_statusbar" data-page-node-id="J3rGTQ2pHKdnsSZiU13ajA">状态栏</span>
            <span class="column-toggle-state" data-i18n="set_show" data-page-node-id="kEVg05NQhKTOAAvcRWcGl7">显示</span>
          </button>
          <button id="toggle-opponent-type" class="game-cursor-hover column-toggle-btn" data-target="opponent-card-type-section" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="rysAj8JZGsmBExyxucgf1A">
            <span data-i18n="set_opponent_type" data-page-node-id="ptMQDv0caXsV6whdnbDA0G">对方牌型</span>
            <span class="column-toggle-state" data-i18n="set_show" data-page-node-id="EseG9lyR1cYwiD1s6QbV0C">显示</span>
          </button>
          <button id="toggle-score-bar" class="game-cursor-hover column-toggle-btn" data-target="score-bar-container" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="loDysGb6OadPHniDy34751">
            <span data-i18n="set_scorebar" data-page-node-id="RZUgdy3p9FfcXkndg7oGqf">积分栏</span>
            <span class="column-toggle-state" data-i18n="set_show" data-page-node-id="vU99vN9FEKppeK0u9YTL0c">显示</span>
          </button>
          <button id="toggle-player-type" class="game-cursor-hover column-toggle-btn" data-target="player-card-type-section" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="hME7QBO6izVyDTZ0PW2NjY">
            <span data-i18n="set_my_type" data-page-node-id="zlY6lzEsAcE2w3l7cs2c3L">我方牌型</span>
            <span class="column-toggle-state" data-i18n="set_show" data-page-node-id="E97wbCoEaBcgkX3vFQJB0l">显示</span>
          </button>
          <button id="toggle-match-bar" class="game-cursor-hover column-toggle-btn" data-target="center-divider" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="ou7A0Fg2SsACP1bPtoNFSY">
            <span data-i18n="set_pointbar" data-page-node-id="o7YDCttTmMDukpoBOQIhxI">拼点栏</span>
            <span class="column-toggle-state" data-i18n="set_show" data-page-node-id="AyNQSqsWAW7QbtFpH8Y8vH">显示</span>
          </button>
          <div style="height: 0.0625rem; background: rgba(59, 130, 246, 0.2); margin: 0.25rem 0;" data-page-node-id="b2BRXxSneRNRFcpgoCiSUh"></div>
          <button id="toggle-drag-animation" class="game-cursor-hover column-toggle-btn" data-target="drag-animation" style="
            padding: 0.4rem 0.75rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="u6MoGNOEBiV2UmHwrzzCiG">
            <span data-i18n="anim_drag" data-page-node-id="S3ohuUxrLH0tXe6iJQeHrZ">拖牌动画</span>
            <span class="column-toggle-state" data-i18n="set_enable" data-page-node-id="3X319oO0JTNXLJog10AdXQ">启用</span>
          </button>
          <button id="toggle-crash-animation" class="game-cursor-hover column-toggle-btn" data-target="crash-animation" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="WHm8D98kWRgrabb1F7uRNS">
            <span data-i18n="anim_crash" data-page-node-id="OTBAxtib2IdfUMUBgOiSXT">撞牌动画</span>
            <span class="column-toggle-state" data-i18n="set_enable" data-page-node-id="LeMB2yd0BjYfjk8h6Zp6AD">启用</span>
          </button>
          <button id="toggle-support-animation" class="game-cursor-hover column-toggle-btn" data-target="support-animation" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="vwTXvs8bfeCi1Bdi46MrND">
            <span data-i18n="anim_support" data-page-node-id="IjoIQq18Glqc6dz4QnNfD9">援牌动画</span>
            <span class="column-toggle-state" data-i18n="set_enable" data-page-node-id="EqgmHfAIAp04DAsvPSpNMc">启用</span>
          </button>
          <button id="toggle-surround-animation" class="game-cursor-hover column-toggle-btn" data-target="surround-animation" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="9k8FBI0BGTKomzJ7BEZfFB">
            <span data-i18n="anim_surround" data-page-node-id="X7BLfFqg4n4x7lzNa9rUnH">围牌动画</span>
            <span class="column-toggle-state" data-i18n="set_enable" data-page-node-id="Pm9xMK3d5R94zM55pa3JqF">启用</span>
          </button>
          <button id="toggle-deal-animation" class="game-cursor-hover column-toggle-btn" data-target="deal-animation" style="
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #3b82f6;
            background: #1e40af;
            color: white;
            font-size: 0.8rem;
            text-align: left;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
          " onmouseover="onColumnBtnHover(this);" onmouseout="updateColumnBtnStyle(this);" data-page-node-id="1CDQy3ZyTTChMEgV0kbXYF">
            <span data-i18n="anim_deal" data-page-node-id="89JZxElgL812eArpCZM5KJ">发牌动画</span>
            <span class="column-toggle-state" data-i18n="set_enable" data-page-node-id="QTTYndO8z1VEE3FDdSj0bp">启用</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 流程图面板 - 独立的大面板 -->
    <div id="flowchart-panel" style="
      position: absolute;
      top: 4rem;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 1000px;
      max-height: 85vh;
      background: linear-gradient(145deg, #1e293b, #0f172a);
      border-radius: 16px;
      border: 2px solid #334155;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      padding: 2rem;
      z-index: 100;
      display: none;
      overflow-y: auto;
    " data-page-node-id="JnuDAPhQWchMBXfnrDZs82">
      <!-- 流程图标题栏 -->
      <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #475569;
      " data-page-node-id="8Er2XIH0uOTNOYQmfpVbXc">
        <h2 style="color: white; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.75rem;" data-page-node-id="bBrBWrffizW2h2m8Dn17MA">
          🎯 核心模块调用流程图
        </h2>
        <button id="close-flowchart-btn" class="game-cursor-hover" style="
          background: linear-gradient(135deg, #dc2626, #991b1b);
          border: 2px solid #f87171;
          color: white;
          padding: 0.5rem 1rem;
          border-radius: 8px;
          font-size: 0.875rem;
          font-weight: 600;
          transition: all 0.2s ease;
        " onmouseover="this.style.background='linear-gradient(135deg, #ef4444, #dc2626)'; this.style.transform='scale(1.05)';" onmouseout="this.style.background='linear-gradient(135deg, #dc2626, #991b1b)'; this.style.transform='scale(1)';" data-page-node-id="JRayBL0BFCgqBoDdawQsQX">
          ✕ 关闭
        </button>
      </div>

      <!-- 流程图内容容器 -->
      <div id="flowchart-content" style="display: flex; flex-direction: column; gap: 2.5rem;" data-page-node-id="8JhXhP0ECzxFANr4uRQ1AR">

        <!-- 流程图 1: 游戏启动流程 -->
        <div class="flowchart-section" style="
          background: rgba(59, 130, 246, 0.08);
          border: 2px solid #3b82f6;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="jCsbNexvHpiZQdT1QIJMoR">
          <h3 style="color: #60a5fa; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="yNj3yT0W3PCHxELF5VH7Zs">
            🚀 流程图 1: 游戏启动流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="V6rU84vlKMiOMBRatriBcp">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #1e40af, #1e3a8a);
              border: 2px solid #3b82f6;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            " data-page-node-id="A7CU4wjglSH6R657ZnGv8D">
              点击「开始游戏」
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="ACPreFB0rYJ9Aac4NjMj1S">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 180px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="JxYh3UPO4jsXYtYUDpOWbS">
              startGame() 函数
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="OH4Wc6gtoeBxZDHG2b5Hrf">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 180px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="EwjAQsQDilJGAuDne8ERRZ">
              dealCards() 发牌
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="HBcy1Yak3ttMyi5397bqsJ">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 180px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="SoM3wCbMpgOoiW01irEzdQ">
              startTurn() 开始回合
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="Eo6Z31fB6h0lJD0j27XyZy">↓</div>
            <div class="flow-node end-node" style="
              background: linear-gradient(135deg, #059669, #047857);
              border: 2px solid #10b981;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            " data-page-node-id="vQDnFlIgH3LJi4br1o1Pyt">
              🎮 等待玩家操作
            </div>
          </div>
        </div>

        <!-- 流程图 2: 玩家出牌流程 -->
        <div class="flowchart-section" style="
          background: rgba(236, 72, 153, 0.08);
          border: 2px solid #ec4899;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="sErDdymyuPWkSYqUQqDZwU">
          <h3 style="color: #f472b6; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="XMCuWNTLdUlmQStajUEUm4">
            🎴 流程图 2: 玩家出牌流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="ta5zUAKLyvuuy4WPtCUeZ6">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #831843, #9d174d);
              border: 2px solid #ec4899;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
            " data-page-node-id="CMZ6ATYCBygOOBN8GXmvY3">
              点击手牌/牌堆
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="C7cgOI0DupFptom8CYGCHF">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 240px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="LEdFV4ImcT8BT3MWumpTH0">
              handlePlayerHandClick()
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="ykVLJSFrw6zgEZbGXkPvDB">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 240px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="cg05834ZGaF2XdWne28rmq">
              卡牌放入路牌区空位
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="5TKNji4e7cDBzGiBnya3dC">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #78350f, #92400e);
              border: 2px solid #f59e0b;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 240px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
            " data-page-node-id="UFi2PBeYQFlcVfQe50fF1l">
              checkRoadMatchCards() 路牌匹配检测
            </div>
            <div style="display: flex; justify-content: center; gap: 4rem; margin-top: 1rem;" data-page-node-id="Eu8A6nkZ0tntzBnK6tsyyW">
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="Z42NJ1JLczG55SF9DdDkYR">
                <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-i18n="flow_has_match" data-page-node-id="dwQ8dwj8WoGYxRPgk2Wehj">↙ 有匹配</div>
                <div class="flow-node" style="
                  background: linear-gradient(135deg, #dc2626, #991b1b);
                  border: 2px solid #f87171;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 160px;
                  text-align: center;
                  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
                " data-page-node-id="AtlgGbdFyVc3GkhIzhfaPo">
                  performRoadMatch()
                </div>
                <div class="flow-node" style="
                  background: #374151;
                  border: 2px solid #6b7280;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 160px;
                  text-align: center;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                " data-page-node-id="SiUfFWObiapx827MQAIAoE">
                  拖牌/撞牌动画
                </div>
                <div class="flow-node end-node" style="
                  background: linear-gradient(135deg, #059669, #047857);
                  border: 2px solid #10b981;
                  color: white;
                  padding: 0.75rem 2rem;
                  border-radius: 50px;
                  font-weight: 600;
                  min-width: 160px;
                  text-align: center;
                  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
                " data-page-node-id="yWnqvAJI63Uf4nmxIBpuzB">
                  卡牌进入中立区
                </div>
              </div>
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="61s8tMC6AbiJN7vWvL1Grk">
                <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-i18n="flow_no_match" data-page-node-id="8Tefg3XUSxU9pomtNZDpEx">↘ 无匹配</div>
                <div class="flow-node end-node" style="
                  background: linear-gradient(135deg, #374151, #4b5563);
                  border: 2px solid #9ca3af;
                  color: white;
                  padding: 0.75rem 2rem;
                  border-radius: 50px;
                  font-weight: 600;
                  min-width: 160px;
                  text-align: center;
                  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.3);
                " data-page-node-id="hW6FKTsf0DeUu9c6C16PBS">
                  卡牌留在路牌区
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 流程图 3: 撞牌动画流程 -->
        <div class="flowchart-section" style="
          background: rgba(249, 115, 22, 0.08);
          border: 2px solid #f97316;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="6YArnkPbm7fa7dDlhZmYq1">
          <h3 style="color: #fb923c; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="Z4BHPWu5zovcL7lJZpbMvN">
            💥 流程图 3: 撞牌动画流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="TBolWtgemBe4PQURbBG8Vo">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #7c2d12, #9a3412);
              border: 2px solid #f97316;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
            " data-page-node-id="rC1D1dm1zousAdSLhptGxl">
              performRoadMatch('crash')
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="lBeIajG9cHlkkILKr82Dl3">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="NtzCgX01IShHaUvlcbzDZP">
              animateCrashSequence()
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="rBSmXS3LpDkPO85LOnRUNu">↓</div>
            <div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;" data-page-node-id="cm0kMhlFQZtqb2QKKjWHKW">
              <div class="flow-node" style="
                background: linear-gradient(135deg, #422006, #78350f);
                border: 2px solid #f59e0b;
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 150px;
                text-align: center;
                font-size: 0.875rem;
                box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
              " data-page-node-id="3Fsh6LI93aSAhooebl1ISA">
                Phase 1: 蓄力发光
              </div>
              <div class="flow-node" style="
                background: linear-gradient(135deg, #dc2626, #991b1b);
                border: 2px solid #f87171;
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 150px;
                text-align: center;
                font-size: 0.875rem;
                box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
              " data-page-node-id="JH93rmJGdoxhOXQkhm8MLK">
                Phase 2: 冲撞接触
              </div>
              <div class="flow-node" style="
                background: linear-gradient(135deg, #1e40af, #1e3a8a);
                border: 2px solid #60a5fa;
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 150px;
                text-align: center;
                font-size: 0.875rem;
                box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
              " data-page-node-id="TcGfTdwtAZC7rB2ZDk9BxB">
                Phase 3: 粒子扩散
              </div>
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="lZPe282tGWwBFIOOPsPj93">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #581c87, #7e22ce);
              border: 2px solid #a78bfa;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
            " data-page-node-id="ZhHR7N7KT8RFeCGktCZIho">
              剩余牌白光闪烁消失
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="SU8gLZK36AWrqUH0CPjqQz">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #065f46, #047857);
              border: 2px solid #34d399;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
            " data-page-node-id="oIojWp8o1xlrU8IjkoqYuX">
              animateCardMove() 移入中立区
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="rEy1qEKxbofa1mv91dekM5">↓</div>
            <div class="flow-node end-node" style="
              background: linear-gradient(135deg, #059669, #047857);
              border: 2px solid #10b981;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            " data-page-node-id="Hil2XBxV0Ccny5Cw8mx4kL">
              ✅ 撞牌完成
            </div>
          </div>
        </div>

        <!-- 流程图 4: 围牌流程 -->
        <div class="flowchart-section" style="
          background: rgba(139, 92, 246, 0.08);
          border: 2px solid #8b5cf6;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="otStTCWj4BcTwh5fxPvX52">
          <h3 style="color: #a78bfa; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="yO9Pho7LeSuyoTyqX8xUw5">
            🔲 流程图 4: 围牌（援牌）流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="542nDFmIOpj7bBk6Ufpbdk">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #4c1d95, #5b21b6);
              border: 2px solid #8b5cf6;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            " data-page-node-id="T8UGpdPmb721TDX9cPqrPY">
              中立区出现围牌光环
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="rVERY6euZNf0rMZAzfJqd7">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="axVzpsg50iQDqxQ0y0o33h">
              玩家点击围牌光环
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="VXDCqmlc7fmrUyrValXYDv">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #831843, #9d174d);
              border: 2px solid #ec4899;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
            " data-page-node-id="EDRg8FzOKHij1wg404TTi2">
              performNeutralAction()
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="BY0MNHsZE6jREIbMug1rdn">↓</div>
            <div style="display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;" data-page-node-id="iuKZ7mQM3YisgjyyOyPCJG">
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="LGL5KQZeEBKajvvC9nB7hg">
                <div class="flow-node" style="
                  background: linear-gradient(135deg, #1e40af, #1e3a8a);
                  border: 2px solid #3b82f6;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
                " data-page-node-id="E03yml1Cv5bIQDHx4eLxK8">
                  援牌: 1张卡
                </div>
                <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="6Wdr1bwifdBNNTisPyzFGE">↓</div>
                <div class="flow-node" style="
                  background: #374151;
                  border: 2px solid #6b7280;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                " data-page-node-id="HN2h5M8HDVXeBkcfbxrRx9">
                  直接放入路牌
                </div>
              </div>
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="PcqiC8l67nMzD1PZjc52MN">
                <div class="flow-node" style="
                  background: linear-gradient(135deg, #dc2626, #991b1b);
                  border: 2px solid #f87171;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
                " data-page-node-id="2LYEjEDk6BlqlLz6ne922A">
                  围牌: N张卡
                </div>
                <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="GQ5XUCCXtllxUDNFyikblw">↓</div>
                <div class="flow-node" style="
                  background: #374151;
                  border: 2px solid #6b7280;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                " data-page-node-id="xYx1JQplIJF6MVuvZ99a6Y">
                  同时动画移动
                </div>
              </div>
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="IyDPXfjeRiPogzcJHaurbe">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="wRRnrsaCvdWAerA9AH0tpq">
              animateCardMove() 保持中立牌样式
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="OD7KzXwrDPAez0JBPLxQMD">↓</div>
            <div class="flow-node end-node" style="
              background: linear-gradient(135deg, #059669, #047857);
              border: 2px solid #10b981;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            " data-page-node-id="grRVX16KuH9PBJ15ud9um9">
              ✅ 卡牌堆叠在路牌区
            </div>
          </div>
        </div>

        <!-- 流程图 5: AI出牌流程 -->
        <div class="flowchart-section" style="
          background: rgba(14, 165, 233, 0.08);
          border: 2px solid #0ea5e9;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="Bvwar2l3p76yjpE6P0tL3e">
          <h3 style="color: #38bdf8; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="NTnD9NQTJRPyJOeoScQZSI">
            🤖 流程图 5: AI出牌流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="wcnBHrDYzWWDAa5a9PSwl7">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #0c4a6e, #075985);
              border: 2px solid #0ea5e9;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
            " data-page-node-id="UYUUbLkGvMJobuPzAVtPNn">
              玩家回合结束
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="VVWp0dCRTFgGU8wSodmJW1">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="S2IwEb9agETmXTxs1L2yMN">
              switchTurn() 切换回合
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="CA5iKx3CFB87sCCNEb4PBt">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #581c87, #7e22ce);
              border: 2px solid #a78bfa;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
            " data-page-node-id="jwUjIq4Jy5uMWyaBAAZAcr">
              opponentPlayCard() AI决策
            </div>
            <div style="display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.5rem; flex-wrap: wrap;" data-page-node-id="jjlO8d8eorb2Hpx06yqfm1">
              <div class="flow-node" style="
                background: #374151;
                border: 2px solid #6b7280;
                color: white;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 130px;
                text-align: center;
                font-size: 0.8rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
              " data-page-node-id="YOiv1NpAMo6y5xjaCxRLmE">
                分析路牌匹配
              </div>
              <div class="flow-node" style="
                background: #374151;
                border: 2px solid #6b7280;
                color: white;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 130px;
                text-align: center;
                font-size: 0.8rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
              " data-page-node-id="eDwz7zFf7cDxc16EoQ6zfI">
                选择最优出牌
              </div>
              <div class="flow-node" style="
                background: #374151;
                border: 2px solid #6b7280;
                color: white;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                font-weight: 500;
                min-width: 130px;
                text-align: center;
                font-size: 0.8rem;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
              " data-page-node-id="7Y32fjm1Ht4lXlanGCtuHY">
                评估围牌/撞牌价值
              </div>
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="gZI5GMk06HBqxqiJfQE1WF">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="6CHyME4XtTsqa8FfZRCyYC">
              动画出牌 + 音效
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="svgjs2w62lX1SvMyuB7QEH">↓</div>
            <div class="flow-node end-node" style="
              background: linear-gradient(135deg, #059669, #047857);
              border: 2px solid #10b981;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            " data-page-node-id="11w8Cm6nd3LVVHJnM9EEeI">
              🔄 切回玩家回合
            </div>
          </div>
        </div>

        <!-- 流程图 6: 胜负判定流程 -->
        <div class="flowchart-section" style="
          background: rgba(245, 158, 11, 0.08);
          border: 2px solid #f59e0b;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="glZgSDOshOnbUMqlRQctyh">
          <h3 style="color: #fbbf24; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="1Xv61u8L44IC7LAR0u2APB">
            🏆 流程图 6: 胜负判定流程
          </h3>
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="Mqc0XOqGGUVUnEOPmU29eA">
            <div class="flow-node start-node" style="
              background: linear-gradient(135deg, #78350f, #92400e);
              border: 2px solid #f59e0b;
              color: white;
              padding: 1rem 2rem;
              border-radius: 50px;
              font-weight: 600;
              min-width: 200px;
              text-align: center;
              box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            " data-page-node-id="AleDjL0KSzfN1MU3ZVXR7K">
              回合结束/双方终止出牌
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="O8i85MRVv8rWwjtKdH0DAG">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="V7tZntMCwDjiohECuxy0kF">
              遍历5条路牌区
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="QExbASX0sMIWCVPMPwYRdM">↓</div>
            <div class="flow-node" style="
              background: linear-gradient(135deg, #1e40af, #1e3a8a);
              border: 2px solid #3b82f6;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
            " data-page-node-id="YOzS4l3knyVHHFEasIeMnw">
              identifyCardType() 识别牌型
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="qTEYFBAEVsjQ0qbVpouk33">↓</div>
            <div class="flow-node" style="
              background: #374151;
              border: 2px solid #6b7280;
              color: white;
              padding: 0.75rem 1.5rem;
              border-radius: 8px;
              font-weight: 500;
              min-width: 220px;
              text-align: center;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            " data-page-node-id="K0YfRuHDPXnc6rBGj5h3R2">
              updateCardTypeDisplay() 显示牌型
            </div>
            <div class="flow-arrow" style="color: #94a3b8; font-size: 1.5rem; line-height: 1;" data-page-node-id="9jeNGkepwPDOeALTvBxmBI">↓</div>
            <div style="display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 0.5rem;" data-page-node-id="m1FJ9cfDDhKEYuDTimLjRD">
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="2ZIk2Gc6HwBPEa993nt111">
                <div class="flow-node" style="
                  background: linear-gradient(135deg, #dc2626, #991b1b);
                  border: 2px solid #f87171;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
                " data-page-node-id="RE7lwrW6Q22HWptgJxmM9p">
                  比较双方牌型
                </div>
                <div class="flow-node end-node" style="
                  background: linear-gradient(135deg, #dc2626, #991b1b);
                  border: 2px solid #f87171;
                  color: white;
                  padding: 1rem 1.5rem;
                  border-radius: 50px;
                  font-weight: 600;
                  min-width: 140px;
                  text-align: center;
                  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
                " data-page-node-id="ctZyRMwTXq4FFslOVdlunC">
                  胜/负/平局
                </div>
              </div>
              <div style="display: flex; flex-direction: column; align-items: center; gap: 0.75rem;" data-page-node-id="A0FMtW0JN1LTzL1nQsrq1R">
                <div class="flow-node" style="
                  background: linear-gradient(135deg, #065f46, #047857);
                  border: 2px solid #10b981;
                  color: white;
                  padding: 0.75rem 1.5rem;
                  border-radius: 8px;
                  font-weight: 500;
                  min-width: 140px;
                  text-align: center;
                  font-size: 0.875rem;
                  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
                " data-page-node-id="vdHgGsOmpqjk4qArmKcyn8">
                  积分栏高亮显示
                </div>
                <div class="flow-node end-node" style="
                  background: linear-gradient(135deg, #059669, #047857);
                  border: 2px solid #10b981;
                  color: white;
                  padding: 1rem 1.5rem;
                  border-radius: 50px;
                  font-weight: 600;
                  min-width: 140px;
                  text-align: center;
                  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
                " data-page-node-id="3PHzCNiRXV1HekwEPyER8x">
                  播放胜负音乐
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 流程图说明 -->
        <div class="flowchart-section" style="
          background: rgba(100, 116, 139, 0.08);
          border: 2px solid #64748b;
          border-radius: 12px;
          padding: 1.5rem;
        " data-page-node-id="OgfKx9hlmyfHE203VTBIs9">
          <h3 style="color: #94a3b8; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;" data-page-node-id="bQntYwKl79m3pPqerbU7D6">
            📝 流程图说明
          </h3>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); gap: 1rem;" data-page-node-id="EBP6zpRxnp4lhxHTQuZswV">
            <div style="
              background: rgba(59, 130, 246, 0.1);
              padding: 1rem;
              border-radius: 0.5rem;
              border-left: 0.25rem solid #3b82f6;
            " data-page-node-id="5gvZ799r6ZUBaGqRwITAqT">
              <div style="color: #60a5fa; font-weight: 600; margin-bottom: 0.5rem;" data-i18n="tutor_flow" data-page-node-id="h1eHC2N8CsoxogQGz0xO0t">🎯 游戏流程</div>
              <div style="color: #94a3b8; font-size: 0.875rem;" data-page-node-id="YleZWQOGVMiBFKoA5OEuyy">
                游戏开始 → 发牌 → 回合制 → 玩家出牌 → 检测匹配 → 动画执行 → 切换回合 → AI出牌 → 循环直到胜负判定
              </div>
            </div>
            <div style="
              background: rgba(236, 72, 153, 0.1);
              padding: 1rem;
              border-radius: 8px;
              border-left: 4px solid #ec4899;
            " data-page-node-id="lK3LD4y1H0SyJSw4dG1C8B">
              <div style="color: #f472b6; font-weight: 600; margin-bottom: 0.5rem;" data-i18n="tutor_match" data-page-node-id="n2ysRnyc03VHptzZoaT0AY">🎴 匹配类型</div>
              <div style="color: #94a3b8; font-size: 0.875rem;" data-page-node-id="7baONLuZ2cw7aWQYCjV71p">
                <strong data-page-node-id="38FqYsZrSRXZglc4l6f94m">拖牌:</strong> 相邻点数(如3-4)相互吸引<br data-page-node-id="8hZtxVB0oGgYINSZVHGaxj"/>
                <strong data-page-node-id="K5DvEijUxQyp2bYz3FzMfv">撞牌:</strong> 相同点数对撞消除<br data-page-node-id="NVq5TRkmlDmqA5zzBcms6n"/>
                <strong data-page-node-id="uKMyvHlBKJShMIV3G4YLvW">围牌/援牌:</strong> 中立区卡牌增援路牌
              </div>
            </div>
            <div style="
              background: rgba(139, 92, 246, 0.1);
              padding: 1rem;
              border-radius: 8px;
              border-left: 4px solid #8b5cf6;
            " data-page-node-id="qqAkdPpldRrXz82Ng1QGDg">
              <div style="color: #a78bfa; font-weight: 600; margin-bottom: 0.5rem;" data-i18n="tutor_win" data-page-node-id="Z1HvvWF4wGMJFau8U8nlB5">🏆 胜利条件</div>
              <div style="color: #94a3b8; font-size: 0.875rem;" data-page-node-id="7RqqfMenZ72A70r1CDKEjV">
                5条路分别结算胜负<br data-page-node-id="Oe8tk44KYCqPzqfnCTpabZ"/>
                每条路比较双方的牌型<br data-page-node-id="3l0lJUa9zlgl8LECLb7tD3"/>
                高级牌型: 四条 > 三条顺 > 邻三条 > 三条 > 对子 > 单张
              </div>
            </div>
            <div style="
              background: rgba(16, 185, 129, 0.1);
              padding: 1rem;
              border-radius: 8px;
              border-left: 4px solid #10b981;
            " data-page-node-id="O2brBNxzQWOAZjbsvGIlQ4">
              <div style="color: #34d399; font-weight: 600; margin-bottom: 0.5rem;" data-i18n="tutor_anim" data-page-node-id="QPyTOEUEKzDwPOi7VyUWpX">🎨 动画系统</div>
              <div style="color: #94a3b8; font-size: 0.875rem;" data-page-node-id="EcMCmQFGiNTsOG2s0AxDEK">
                所有移动动画统一使用 animateCardMove()<br data-page-node-id="HTiDQalFyYLDvlddEvnvRx"/>
                撞牌使用 animateCrashSequence()<br data-page-node-id="CVDjy5PULUfF7XP0vUTsiT"/>
                可通过栏目管理开关各类动画效果
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- ===== 三个房间 overlay（在 game-container-wrapper 外面，用 JS transform scale 同步） ===== -->
    <!-- 自定义房间设置面板 -->
    <div id="custom-room-overlay" class="custom-room-overlay" data-page-node-id="rPMeUvRZnKB2GLALCAzzCa">
      <div class="custom-room-panel" data-page-node-id="fHgwRcHCjM1CzrvtbKsQfj">
        <div class="custom-room-header" data-page-node-id="ibPDANMQjAprtwqjE3EGpx">
          <div class="custom-room-title" data-i18n="cr_title" data-page-node-id="7GEr29FnEn9QGANuaie01b">自定义房间</div>
          <button class="custom-room-close" onclick="closeCustomRoom()" data-page-node-id="N6oSb3m2g4tAoE4MuHwhPh">✕</button>
        </div>
        <div class="custom-room-options" data-page-node-id="WAWQPnndhrxOV0gu3Axo7Y">
          <!-- 房间名称 -->
          <div class="cr-option-row" data-page-node-id="wKU2oHYQLsXI9tbc8W7G7p">
            <div class="cr-option-label" data-i18n="cr_room_name" data-page-node-id="6qXA10J1AanoF0g9Z3avTH">房间名称</div>
            <div style="flex:1;" data-page-node-id="1JKHM93YsPjPHV4EEChQn8">
              <input type="text" id="cr-room-name" maxlength="16" placeholder="留空则用默认名称" data-i18n-placeholder="ph_room_name"
                style="width:100%; padding:0.45rem 0.6rem; border-radius:0.375rem; border:0.0625rem solid #475569; background:#1e293b; color:#e2e8f0; font-size:0.8rem; outline:none; box-sizing:border-box;" data-page-node-id="0aABHT1dNQGDfMZEx7sQnT" />
            </div>
          </div>
          <!-- 房间密码 -->
          <div class="cr-option-row" data-page-node-id="rEkSz99aGw9v5AVIxNY3mE">
            <div class="cr-option-label" data-i18n="cr_room_pwd" data-page-node-id="asZqv6oDdEoRWGIRyHVPVm">房间密码</div>
            <div style="flex:1;" data-page-node-id="92vXPMKBIH048Tqg9EW0Vx">
              <input type="text" id="cr-room-pwd" maxlength="16" placeholder="留空则无密码" data-i18n-placeholder="ph_room_pwd"
                style="width:100%; padding:0.45rem 0.6rem; border-radius:0.375rem; border:0.0625rem solid #475569; background:#1e293b; color:#e2e8f0; font-size:0.8rem; outline:none; box-sizing:border-box;" data-page-node-id="UsuMR2GdclzYiNcL5irnsQ" />
            </div>
          </div>
          <div class="cr-option-row" data-page-node-id="bIMqXcqPUqBF6d68H2cRMa">
            <div class="cr-option-label" data-i18n="cr_match" data-page-node-id="zvz5D3A46HbG4XJH4I8u6S">对局</div>
            <div class="cr-option-btns" data-group="players" data-page-node-id="xXzySBkCkUF6Db7D683imd">
              <button class="cr-btn active" data-val="2" data-i18n="cr_two" data-page-node-id="gqmOxS8vWFVFgwMGcyLysO">双人</button>
              <button class="cr-btn" data-val="4" data-i18n="cr_four" data-page-node-id="9N9XA3KH2SsxOEFF8r0vYK">四人</button>
            </div>
          </div>
          <div class="cr-option-row" data-page-node-id="684SvkF2iPDfSgItxNvxVY">
            <div class="cr-option-label" data-i18n="cr_callcard" data-page-node-id="6vGhsXMingBW3gXVb6beh9">叫牌</div>
            <div class="cr-option-btns" data-group="callcard" data-page-node-id="LP5rgpqSwMbiw7C9Z4QT6z">
              <button class="cr-btn active green" data-val="on" data-i18n="cr_on" data-page-node-id="cFvzKNt5ICsC3Lu30WWtGF">开启</button>
              <button class="cr-btn" data-val="off" data-i18n="cr_off" data-page-node-id="tycSCTe2WDEIsQWZdkU7Ox">关闭</button>
            </div>
          </div>
          <!-- 牌库/先手选项已移除（牌库默认平分 split；先手由服务器分配座位决定，房间设置保留 deckmode/firstturn 字段以兼容服务器协议） -->
          <div class="cr-option-row" data-page-node-id="ZAgiNxfLDgwQttrsPhmzOC">
            <div class="cr-option-label" data-page-node-id="bIBHcZ7yvuYsyBnUXv1xFP">DLC</div>
            <div class="cr-option-btns" data-group="dlc" data-page-node-id="BKwi2ndlY2YsGgpSSScqdf">
              <button class="cr-btn" data-val="ambush" data-i18n="cr_ambush" data-page-node-id="Bk38OJI77nMUfPiwHHRhzK">伏牌</button>
              <button class="cr-btn" data-val="flag" data-i18n="cr_flag" data-page-node-id="CHJHne8GNJQTpQ8xTBvQmi">旗牌·统牌</button>
            </div>
          </div>
        </div>
        <div class="cr-footer" data-page-node-id="lItK9bGYSl0UETRlCvFVRC">
          <button class="cr-footer-btn cancel" onclick="closeCustomRoom()" data-i18n="cr_cancel" data-page-node-id="2LFwRzakJP4jOMtLWDoux8">取消</button>
          <button class="cr-footer-btn create" id="cr-create-btn" onclick="createCustomRoomNow()" data-i18n="cr_create" data-page-node-id="PeDphyKncFJqWWzscAnAke">创建房间</button>
        </div>
      </div>
    </div>
    <!-- 房间列表面板 -->
    <div id="room-list-overlay" class="room-list-overlay" data-page-node-id="i2bX6zi9ndX6FAAafJeEdA">
      <div class="room-list-panel" data-page-node-id="r5xWJGRKoSCsFkzVgphHGC">
        <div class="room-list-header" data-page-node-id="70uaKEFh6Ck1jkAEGcp0U1">
          <div class="room-list-title" data-i18n="lobby_title" data-page-node-id="oRMuuEA9VUWcLy3onkIt1E">玩家大厅</div>
          <div class="room-list-actions" data-page-node-id="tt079LD3TujsYHXMHo7RtX">
            <input type="text" class="room-list-search" id="room-list-search" placeholder="查找房间ID" data-i18n-placeholder="ph_room_search" onkeydown="if(event.key==='Enter')searchRoomById()" data-page-node-id="AxTnxdAhX09SnDQMuugYR7" />
            <button class="room-list-btn refresh-room" onclick="onRefreshRoomList(this)"><span class="rl-refresh-icon">↻</span><span data-i18n="lobby_refresh">刷新</span></button>
            <button class="room-list-btn create-room" onclick="openCreateRoomPanel()" data-i18n="cr_create" data-page-node-id="x1GmkAMwf41Z27jbibxRqc">创建房间</button>
            <button class="custom-room-close" onclick="closeRoomList()" style="margin-left:4px;" data-page-node-id="gueSg8Iuz08J5biFeBTI4D">✕</button>
          </div>
        </div>
        <div class="room-list-content" id="room-list-content" data-page-node-id="7b6NwChd7IE0VuEs0AQp2y">
          <div class="room-list-empty" data-i18n="lobby_loading" data-page-node-id="cdtCw13wJXTp1MKCoVFmGA">正在加载房间列表...</div>
        </div>
      </div>
    </div>
    <!-- 房间内部界面 -->
    <div id="room-interior-overlay" class="room-interior-overlay" onclick="if(event.target===this)closeRoomInterior()" data-page-node-id="pBsDGWqo4825RREpQd4jF2">
      <div class="room-interior-panel" data-page-node-id="on7lXEQb0PnbedmGBXblc9">
        <div class="room-interior-header" data-page-node-id="iKt7KjRziMStOBhGhmYUy4">
          <div class="room-interior-title" data-i18n="ri_title" data-page-node-id="KYKkWEj2Okscq7Ao4EWCgj">房间</div>
          <div class="room-interior-id" id="ri-room-id" data-page-node-id="ccwrS0I7B56i8sDviqyTfb"></div>
        </div>
        <div class="room-interior-sides" data-page-node-id="griRtMFFpeLYQ27t2mjgGD">
          <div class="ri-side" data-page-node-id="SVB29vDYYCSuj5wUTDqUD7">
            <div class="ri-side-label blue" data-i18n="ri_blue" data-page-node-id="91xc30ZCUvDIDv67n2axvE">蓝方</div>
            <div id="ri-blue-players" data-page-node-id="cE2IuPI2PWccf2NDbwL3ge"></div>
          </div>
          <div class="ri-side" data-page-node-id="fRTfwsc1k5AHV7A1RTxGSR">
            <div class="ri-side-label red" data-i18n="ri_red" data-page-node-id="jC0U2Fmc1iUIkntAc8b3vo">红方</div>
            <div id="ri-red-players" data-page-node-id="UY9xOPWzHhH2O8axLUcX3f"></div>
          </div>
        </div>
        <div class="ri-footer" id="ri-footer" data-page-node-id="BUhuzGMmOfeMpMp1dEYukN">
          <!-- JS动态生成按钮 -->
        </div>
        <!-- 房间邀请好友面板（定位在footer下方） -->
        <div id="room-invite-panel" class="room-invite-panel" onclick="event.stopPropagation()" data-page-node-id="ySGbUnNTUxSHNVShuZBdvG">
          <div class="room-invite-panel-header" data-page-node-id="3imgCNYTrQQtP0dQwPHcTu">
            <div class="room-invite-panel-title" data-i18n="ri_invite_title" data-page-node-id="f2aSeCVPf49SOJGohHqj2a">邀请好友进房</div>
            <button class="room-invite-panel-close" onclick="PBOnline.toggleRoomInvitePanel()" data-page-node-id="1x6Q6i7YaFcG7MDA01Eyaj">&times;</button>
          </div>
          <div class="team-invite-list" id="room-invite-list" data-page-node-id="X2VV8WTDlzigneXQNlyGGc"></div>
        </div>
      </div>
    </div>
    <!-- ===== 房间 overlay 结束 ===== -->

    <!-- ====================================================================== -->
    <!-- 【HTML结构-2/8】状态栏区域 -->
    <!-- 包含: 左侧牌型信息面板、右上角回合显示按钮 -->
    <!-- ====================================================================== -->

    <!-- 左侧状态栏 - 显示双方当前牌型和积分栏（位于双方暗牌中心） -->
    <div class="rank-panel" style="
      position: absolute;
      top: 50%;
      left: calc(50% - 41.75rem);
      transform: translateY(-50%);
      width: 12rem;
      padding: 1.25rem 1rem;
      background: linear-gradient(160deg, rgba(10, 8, 32, 0.75) 0%, rgba(26, 26, 69, 0.75) 50%, rgba(10, 8, 32, 0.75) 100%);
      border-radius: 14px;
      border: 1px solid rgba(139, 92, 246, 0.4);
      box-shadow:
        inset 0 2px 0 rgba(167, 139, 250, 0.25),
        0 8px 0 #201a52,
        0 10px 0 rgba(0, 0, 0, 0.45),
        0 20px 38px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(139, 92, 246, 0.35);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 100;
    " data-page-node-id="rDbvNamedxhLQmAddANVkF">
      <!-- 顶部：对方牌型信息 - 红色标题 -->
      <div id="opponent-card-type-section" data-page-node-id="5tuG9q9uld1TbsaUpbV9EJ">
        <div class="opponent-title" style="
          color: #ef4444;
          font-weight: bold;
          margin-bottom: 0.375rem;
          font-size: 0.8rem;
          text-shadow: 0 1px 0 #7f1d1d, 0 2px 0 #571414, 0 3px 5px rgba(0, 0, 0, 0.65);
          letter-spacing: 1px;
        " data-i18n="opp_hand_type" data-page-node-id="BR06AojILoHaHWXzsE2nDc">对方牌型：</div>
        <div id="opponent-card-type" style="
          color: #ffffff;
          font-size: 0.95rem;
          margin-bottom: 0.25rem;
          font-weight: 600;
        " data-i18n="term_none" data-page-node-id="VXGiop4GusXXrDwG8LDgKm">无</div>
        <div id="opponent-card-details" style="
          color: #9ca3af;
          font-size: 0.75rem;
          line-height: 1.4;
        " data-i18n="term_no_card" data-page-node-id="DasvlyIh8DCk2I2eS2rjAu">无卡牌</div>
      </div>

      <!-- 中间分隔线 -->
      <div style="
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
        margin: 1rem 0;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
      " data-page-node-id="l6CRBjOLDCHuMehaT7etxL"></div>

      <!-- 中间：积分栏 - 从大到小显示各种牌型及其分数 -->
      <div id="score-bar-container" data-page-node-id="ex6qx6Fnn4RYAayrX4uJnQ">
        <div class="score-title" style="
          color: #c9a96e;
          font-weight: bold;
          text-align: center;
          margin-bottom: 0.75rem;
          font-size: 0.8rem;
          text-shadow: 0 1px 0 #6e5310, 0 2px 0 #55400c, 0 3px 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(219, 186, 116, 0.25);
          letter-spacing: 3px;
          position: relative;
        " data-page-node-id="EeNGhK7F6PqO0NPjUT2t84">
          <span style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, #c9a96e);" data-page-node-id="sMAwTI8Zvkfs5xsDGydVwl"></span>
          <span data-i18n="score_bar_title" data-page-node-id="nUkOY9dAulDMOiN14uGFCe">积分栏</span>
          <span style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1px; background: linear-gradient(270deg, transparent, #c9a96e);" data-page-node-id="pgD9nDqKbqfCrADroSMhFp"></span>
        </div>
        <div style="
          display: flex;
          flex-direction: column;
          gap: 0.35rem;
          font-size: 0.78rem;
          color: #c7c9e0;
        " data-page-node-id="SiwFOEZHPjnoj75X2nmaZU">
          <div id="score-row-flowerTripleStraight" class="score-row" data-score="150" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="42dkI2PQWxXRaNq27WmznM">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_t3straight" data-page-node-id="uM99zpaKpvr6TbF9ger0Ea">花牌3条顺</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="p7NgXgqcVRrMALiSFu8JsV">150</span>
          </div>
          <div id="score-row-tripleStraight" class="score-row" data-score="120" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="4l5QRNXYKVkRlMDmX3zWsm">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_straight3" data-page-node-id="unu8lrTfCQd2p0H1qRiSaO">3条顺</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="r6GYtSVLNTEw4fRBoa9XMN">120</span>
          </div>
          <div id="score-row-adjacentTriples" class="score-row" data-score="100" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="yqLaCG8HGWVj1XeoxVnLrU">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_adjacent3" data-page-node-id="5fqkBdg9LBSSXgcd248lPE">邻三条</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="fwxpoHXf3WmNJvHIOGpGCy">100</span>
          </div>
          <div id="score-row-fourOfAKind" class="score-row" data-score="90" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="q77yPcpfaYU0FB7hEGht4A">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_four" data-page-node-id="b83A5Bl5ub4JFi6Xf8Gk4C">四条</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="y35BCr1XKCdNput30SZlXe">90</span>
          </div>
          <div id="score-row-fivePairStraight" class="score-row" data-score="80" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="dUieidVywBZHfVrB43AmpJ">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_pair5" data-page-node-id="FpHjb8jexwURqiAnn7CyDu">5连对</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="t43XlybXjXnrgjJdRxrdGJ">80</span>
          </div>
          <div id="score-row-twoTriples" class="score-row" data-score="70" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="B4HXMlTZ0w0YGmc3540WSY">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_double3" data-page-node-id="I92kWu8XowYnY60RLbC5HZ">对3条</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="cWrNGkh4dDXfEJrGBHyBR5">70</span>
          </div>
          <div id="score-row-threePairStraight" class="score-row" data-score="60" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="lOsXFAXcQraovzuM1r7BRv">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_pair3" data-page-node-id="bXI7d31vd6dvIoJlapfgMa">3连对</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="Kj3ydlMWcJ9Dqls3I3ATu4">60</span>
          </div>
          <div id="score-row-threeOfAKind" class="score-row" data-score="50" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="Xz5bjd6FWyVDyApvnZMjei">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_triple" data-page-node-id="vsYDwCEGTBG9FCNVNPxYW0">三条</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="e3JxPSuDpcL5I4vpWomp30">50</span>
          </div>
          <div id="score-row-fiveStraight" class="score-row" data-score="40" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="Q3jG8NLE8Iw4QXIm21qqIY">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_straight5" data-page-node-id="zoziPdjVsxwtB9bPtj3rtc">5连顺</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="KsJlOqmUmjd5SIEb4M5RYX">40</span>
          </div>
          <div id="score-row-threeStraight" class="score-row" data-score="30" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="SDioy0a19t0mg2xxg4KbvQ">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_straight3b" data-page-node-id="ZW4GdsIVfc1keCHXpCH7Dj">3连顺</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="s2BPSkI11vbAu0CncnzhXO">30</span>
          </div>
          <div id="score-row-pair" class="score-row" data-score="20" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="UdYckOVai1uZEV9GpRIvFp">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_pair" data-page-node-id="flPmuB7Df6vxp78do72jcF">对子</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="EHgpUt7bzxTcmqSy9UeECU">20</span>
          </div>
          <div id="score-row-single" class="score-row" data-score="10" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.3rem 0.5rem 0.3rem 0.75rem;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45));
            box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
          " data-page-node-id="1lE1y57db2dMfkptfqcBJb">
            <span class="score-type" style="color: #e0e0f5; font-weight: 600;" data-i18n="term_highcard" data-page-node-id="9VtIOPCXqpsHfv9po1OLF9">单张</span>
            <span class="score-score" style="color: #e8c98a; font-weight: 700; font-size: 0.85rem; text-shadow: 0 0 8px rgba(139,92,246,0.45);" data-page-node-id="oCvWddHosoEENs2EV8Blgw">10</span>
          </div>
        </div>
      </div>

      <!-- 中间分隔线 -->
      <div style="
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
        margin: 1rem 0;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
      " data-page-node-id="sa27rLdrceETrdiufbXoWU"></div>

      <!-- 底部：我方牌型信息 - 蓝色标题 -->
      <div id="player-card-type-section" data-page-node-id="gPOSaNBzdvCq0JUbdtv9h1">
        <div class="player-title" style="
          color: #3b82f6;
          font-weight: bold;
          margin-bottom: 0.375rem;
          font-size: 0.8rem;
          text-shadow: 0 1px 0 #1e40af, 0 2px 0 #16307c, 0 3px 5px rgba(0, 0, 0, 0.65);
          letter-spacing: 1px;
        " data-i18n="my_hand_type" data-page-node-id="LG6Cs029FtvJOCptxvd4tM">我方牌型：</div>
        <div id="player-card-type" style="
          color: #ffffff;
          font-size: 0.95rem;
          margin-bottom: 0.25rem;
          font-weight: 600;
        " data-i18n="term_none" data-page-node-id="sfLGBWplNUrzCXxS8OzRKt">无</div>
        <div id="player-card-details" style="
          color: #9ca3af;
          font-size: 0.75rem;
          line-height: 1.4;
        " data-i18n="term_no_card" data-page-node-id="0m02SfhgQzHZgiKihzkwjM">无卡牌</div>
      </div>
    </div>

    <!-- 回合显示按钮 - 右上角显示当前回合信息（带翻页悬停动画） -->
    <button id="turn-display-btn" class="turn-page-btn absolute top-4 right-4 game-cursor-hover" onclick="toggleTurnHistoryPanel()" data-page-node-id="VU6r8YtmM0JE5gvCtLzsqh">
      <span id="current-turn-text" class="turn-page-text" data-i18n="turn_init" data-page-node-id="S1m4NTpeT3uVpq0RwGvfyb">回合 1 - 我方</span>
      <span class="turn-page-overlay" data-page-node-id="DDjhL1h2mKR4aemcqHfH2F"></span>
    </button>

    <!-- 回合记录面板 -->
    <div id="turn-history-overlay" class="absolute inset-0 hidden" style="z-index: 100000; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);" data-page-node-id="6DlHpmtBtdWXFpo4DGOMzn">
      <div id="turn-history-panel" class="absolute top-4 right-4 w-[420px] h-[calc(100%-2rem)] text-white p-4 rounded-xl border border-gray-700/50 overflow-y-auto shadow-2xl flex flex-col" style="z-index: 100001; background: rgba(17, 24, 39, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);" data-page-node-id="h6WRmoIVCP23h1aZ9kklXu">
        <div class="flex justify-between items-center mb-4 border-b border-gray-700/50 pb-3" data-page-node-id="QVehuO41wd3k82NZ1Qfsxc">
          <div class="flex items-center gap-2" data-page-node-id="jx0Sj0SazjTuQUNcifVOVT">
            <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-page-node-id="LNzO4VNqUDFAXyJLWtyIga">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" data-page-node-id="qlYx7Q3OUZQTkqflBHIbJY"></path>
            </svg>
            <div class="font-bold text-lg" data-i18n="turn_record" data-page-node-id="6UbC5WcIFMuYGG0xM9A7I7">回合记录</div>
          </div>
          <button id="close-turn-history-btn" class="p-1.5 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors text-sm" data-page-node-id="5AChXBCIcFUlnG2aTOP99W">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-page-node-id="frcGAjFDD2S9vq6ROXEoR6">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-page-node-id="jjb5yqHv4UkaAUhNRgYP5C"></path>
            </svg>
          </button>
        </div>
        <div id="turn-history-content" class="space-y-3 flex-1 overflow-y-auto pr-1" data-page-node-id="e9YyAd3gyDYYItwBbG02EE">
          <div class="text-center text-gray-500 text-sm py-8" data-page-node-id="EZ99bsLiFLWLk9MjbnnULF">
            <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-page-node-id="BMKJ1KhXnnAZRBbyynDnWO">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" data-page-node-id="fXfMaFdHhmFK6xe1M72zJB"></path>
            </svg>
            <div data-i18n="turn_no_record" data-page-node-id="ZZDwhmIy2E0uqGrBcXHUBW">暂无回合记录</div>
            <div class="text-xs text-gray-600 mt-1" data-i18n="turn_record_hint" data-page-node-id="AJcVdW8uFBivFGCm8EFN3s">游戏开始后将自动记录</div>
          </div>
        </div>

        <!-- 牌库统计 -->
        <div id="turn-history-deck-stats" class="mt-4 pt-4 border-t border-gray-700/50 bg-gray-800/30 rounded-xl p-3" data-page-node-id="Qk3bGed5GRWEmhqNvlKMR7">
          <div class="flex items-center gap-2 mb-3" data-page-node-id="2KUDBhWa47ewHDj5LHKY8B">
            <svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-page-node-id="BOUyWPkavTwUXncHfpcsCp">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" data-page-node-id="sqkVwWYLFFg39qJUiXExjK"></path>
            </svg>
            <div class="text-sm text-gray-300 font-semibold" data-i18n="deck_stat" data-page-node-id="KeS0wcOJkjMC8EA9ueks1W">牌库统计</div>
          </div>
          <div style="display: flex; flex-wrap: nowrap; justify-content: space-between;" data-page-node-id="1r1XeE4J9f7JYmPZZbjhHM">
            <div id="th-container-A" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="TlHhFPeC222JiVYWMYtbRl">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="VXaUldpUrqbQylbhXgjnPo">A</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="mwIL03ElEXa3avpRecZD5S">
                <span id="th-count-A" style="color: #60a5fa;" data-page-node-id="6MD7OMj0Ef4NAH5zOaFaXm">0</span><span style="color: #60a5fa;" data-page-node-id="uMSWezTI5ukLeWDvrCfolo">/4</span>
              </div>
            </div>
            <div id="th-container-2" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="qN5XAEEQIEIucGqv7MIlDq">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="YGb6NQea7JYFVzJmDfRR5i">2</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="Ch36lnz5Rv8hpSDy9HCPvV">
                <span id="th-count-2" style="color: #60a5fa;" data-page-node-id="Dss2UG4OtFQ3Z9vhRjX4rn">0</span><span style="color: #60a5fa;" data-page-node-id="1X2qJDHQ1wqyBekBna319F">/4</span>
              </div>
            </div>
            <div id="th-container-3" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="FuC9WGwROsmuw89OpZvb8K">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="p1FQOHEn56a0SItW05BxBa">3</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="okqDDd8FITBuEsMf1j4n6F">
                <span id="th-count-3" style="color: #60a5fa;" data-page-node-id="UyFtKiGc8kdG4CT9SRzFjQ">0</span><span style="color: #60a5fa;" data-page-node-id="9yflHmK20hd9pfFOYnDz0t">/4</span>
              </div>
            </div>
            <div id="th-container-4" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="ZyqI6DSxaNHDagMAEMmXCD">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="YpoqpUPufpQGx6a2KnX8dF">4</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="WgAqHWw4jPEC3VW7NmJE3q">
                <span id="th-count-4" style="color: #60a5fa;" data-page-node-id="rX1yhArbCGup5NwNzIndAD">0</span><span style="color: #60a5fa;" data-page-node-id="Dwg0Bcg8ZbKu2aVUpZBU9A">/4</span>
              </div>
            </div>
            <div id="th-container-5" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="Q2KT8vWGOnA4pegzRwE3zg">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="CI8FG5Dddrojlw3YbctUxX">5</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="msNzqwbovkHmb29c86dlkk">
                <span id="th-count-5" style="color: #60a5fa;" data-page-node-id="tLdMavxT7xiZLuGUKAPbbk">0</span><span style="color: #60a5fa;" data-page-node-id="L9tZIEIt85veNR83MXcj11">/4</span>
              </div>
            </div>
            <div id="th-container-6" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="7EJUy801Q0dts9clEhp81b">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="sqhfIZxXAr3XB0hTyOAEIl">6</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="CmGAE1SvsyJ6grHkRvg9L0">
                <span id="th-count-6" style="color: #60a5fa;" data-page-node-id="pkXhFBC6SEkdmsCqbUITts">0</span><span style="color: #60a5fa;" data-page-node-id="qzAzVFcTcmqoBpcmMMAMyR">/4</span>
              </div>
            </div>
            <div id="th-container-7" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="lhC4aN0zzx03a3KWD2cVMi">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="SgB5cl4JH1VWtB1OxrYz78">7</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="uqRb6uLUISEMoCny18OdAy">
                <span id="th-count-7" style="color: #60a5fa;" data-page-node-id="1iVwyKgJ317yslacEF9OCO">0</span><span style="color: #60a5fa;" data-page-node-id="ZB5Fzo2R0hMnV0AXL3dsqk">/4</span>
              </div>
            </div>
            <div id="th-container-8" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="6fVyrAcPwlntktuOfm3dDk">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="5ep7fcyGGLMZnflsXmPvqU">8</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="xjE2AmLNThUIkOukWfZtpw">
                <span id="th-count-8" style="color: #60a5fa;" data-page-node-id="5KCJniSb3xZWLBjMD4Ve23">0</span><span style="color: #60a5fa;" data-page-node-id="9LWnj0Hj8KhRz0UYlX1kuy">/4</span>
              </div>
            </div>
            <div id="th-container-9" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="DUSmsKxrlT36HKC5ecU8XX">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="fftkggZYPHcVZIL4w2hciB">9</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="QVfpTXkgnCv7nDsygxxtIC">
                <span id="th-count-9" style="color: #60a5fa;" data-page-node-id="l5DrDQQsEUdaz6OkioD9Vd">0</span><span style="color: #60a5fa;" data-page-node-id="vHs6J1qGuNRbK2DAs3Bb9v">/4</span>
              </div>
            </div>
            <div id="th-container-10" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="uRxgX1an1ws2DHK5atlfsd">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="OjBoDkRpki5T1F7ZcwrtI8">10</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="TbqUu4MzFAkZgbYnHszwIY">
                <span id="th-count-10" style="color: #60a5fa;" data-page-node-id="9I2idmBQIEKGMHegwoj4lg">0</span><span style="color: #60a5fa;" data-page-node-id="U9BATrWjzoVyQJusTqrlaK">/4</span>
              </div>
            </div>
            <div id="th-container-J" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="nHnM7VmhrDEJevj4RCQ67v">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="iyBcwNCD4s7n7paAKW8dqv">J</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="x9hqFa8fRdqQmwaSwHgcWu">
                <span id="th-count-J" style="color: #60a5fa;" data-page-node-id="7aKB3IVzCrBMVT0irXApBj">0</span><span style="color: #60a5fa;" data-page-node-id="1Ec04hRl4sB8JJFgpRHR5D">/4</span>
              </div>
            </div>
            <div id="th-container-Q" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="XpYmJprIi77tLaBfKGPdeu">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="6Cn9DY0IsEbBf6McFYibQS">Q</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="d7azqpWBqV4rB86DIaDPZ6">
                <span id="th-count-Q" style="color: #60a5fa;" data-page-node-id="dyclJcerbBKwvqshJtd7lh">0</span><span style="color: #60a5fa;" data-page-node-id="9ekoJSThifHcpcqPE32zrR">/4</span>
              </div>
            </div>
            <div id="th-container-K" style="display: flex; flex-direction: column; align-items: center; flex: 1; border: 0.0625rem solid rgba(100, 100, 120, 0.5); border-radius: 0.25rem; padding: 0.125rem;" data-page-node-id="6Bc10903Mx8BxDkA2Cv5Wy">
              <div style="font-size: 0.625rem; color: #9ca3af; margin-bottom: 0.125rem;" data-page-node-id="H88euvDBlyexfOkpxxRPeb">K</div>
              <div style="font-size: 0.625rem; font-weight: bold;" data-page-node-id="9FkGafEsDf8dK8Jj3JrRCD">
                <span id="th-count-K" style="color: #60a5fa;" data-page-node-id="C6RYkFSSmbdCWS0OgQMtSv">0</span><span style="color: #60a5fa;" data-page-node-id="H8yABUN7Eq8luCoD2baCSm">/4</span>
              </div>
            </div>
          </div>
          <div class="mt-3 flex justify-between text-xs" data-page-node-id="7nGRrfzOC7RaBWOnUgrb6M">
            <div class="flex items-center gap-2" data-page-node-id="otXfR5Jv7ZoDdWagualWi0">
              <span class="text-gray-400" data-i18n="deck_played" data-page-node-id="NVdvUkN4riFCXYrlbP3RNE">已打出:</span>
              <span id="th-total-played" class="text-green-400 font-bold" data-page-node-id="uA1zAcyG8QpJDXQ3tdOhyf">0</span>
            </div>
            <div class="flex items-center gap-2" data-page-node-id="KHgnqU4o8z6HEf2ClxpmbX">
              <span class="text-gray-400" data-i18n="deck_remain" data-page-node-id="QorzeWcCfVDt90XILYKHf2">剩余:</span>
              <span id="th-total-remaining" class="text-blue-400 font-bold" data-page-node-id="hlJz5I1DwX22E4SNQTsIRy">52</span>
            </div>
            <div class="flex items-center gap-2" data-page-node-id="GbpvNMwtwb7eFR1yh8Dpw4">
              <span class="text-gray-400" data-i18n="deck_done" data-page-node-id="sNyzgPu929RqEhtA7vFlfc">完成:</span>
              <span id="th-completed-sets" class="text-purple-400 font-bold" data-page-node-id="7y4XjXM6fl6MHor2wOmVMS">0</span>
              <span class="text-gray-500" data-i18n="deck_group" data-page-node-id="yPypU0gD1G2VLUkl5pnoi2">组</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-3/8】对方功能区 -->
    <!-- 包含: 暗牌区(5张)、手牌区(6张)、明牌区(3张) -->
    <!-- 位置: 游戏界面顶部 -->
    <!-- ====================================================================== -->
    <div class="opponent-function-area w-full" data-page-node-id="ZiJMJHPV80uTLf9tQudOuX">
      <!-- 对方暗牌区 - 5张，双方不可见，只能叠加打出 -->
      <div id="opponent-dark-cards" class="absolute flex" style="top: 16px; left: calc(50% - 748px); gap: 8px;" data-page-node-id="hRhzxsMrlXUmtuYQIrZWIu">
        <div class="opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="0" data-page-node-id="oR7HZ2dRGV3dfOBdTIV7dL"></div>
        <div class="opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="1" data-page-node-id="H7SMEvaZ17sqSKze0XPNe8"></div>
        <div class="opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="2" data-page-node-id="HxHT3x7eIMzCi1RiLxRHvg"></div>
        <div class="opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="3" data-page-node-id="s4DN4emU2dgOod5BgyPouB"></div>
        <div class="opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="4" data-page-node-id="rPSZnYSXGACmnmssZ4CkxG"></div>
      </div>

      <!-- 对方手牌区 - 6张，仅对方可见，点击即打出到空位 -->
      <div id="opponent-hand" class="absolute flex" style="top: 16px; left: 50%; transform: translateX(-50%); gap: 8px;" data-page-node-id="EWiwkshemocSJ5IxF8HGMI">
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="0" data-page-node-id="ySS56C4boa8t5zdfIpm6qQ"></div>
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="1" data-page-node-id="hiHWkEa2CNjhXhTjyXSAhb"></div>
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="2" data-page-node-id="nTVcNI8UwQx1RBGCyFEDqU"></div>
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="3" data-page-node-id="zr2VlGZZzYzSF6uvIUHxBw"></div>
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="4" data-page-node-id="ywnyEaZwYAY6Y03WSciEZu"></div>
        <div class="opponent-hand-slot bg-secondary rounded card-shadow" style="width: 64px; height: 96px;" data-hand-slot="5" data-page-node-id="0gosjCBlshTRK9S3srCLLr"></div>
      </div>

      <!-- 对方明牌区 - 3张，双方可见，可选择空位或叠加打出 -->
      <div id="opponent-revealed-cards" class="absolute flex pointer-events-auto" style="top: 16px; right: calc(12% + 120px); gap: 8px;" data-page-node-id="AoRRPOX0DbI87CeUcWBYca">
        <div class="opponent-revealed-slot border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="0" data-page-node-id="Hj3I1RmmtymRzpcCKdXVLM"></div>
        <div class="opponent-revealed-slot border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="1" data-page-node-id="gtEenuZdRWreR4lmd7Nbwv"></div>
        <div class="opponent-revealed-slot border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="2" data-page-node-id="TxHV8CgFDIdA6tP0AG6IcH"></div>
      </div>

      <!-- ★ 四人模式：对方右侧玩家区域（暗牌4+手牌1+明牌2） -->
      <div id="opponent-dark-cards-right" class="absolute flex four-player-only" style="display:none; top: 16px; left: calc(50% + 100px); gap: 8px;" data-page-node-id="TjUqbDjODY4csUJhpNYhmY"></div>
      <div id="opponent-hand-right" class="absolute flex four-player-only" style="display:none; top: 16px; left: calc(50% + 460px); gap: 8px;" data-page-node-id="GZn5JazWHMPelBJ6Apnlda"></div>
      <div id="opponent-revealed-cards-right" class="absolute flex pointer-events-auto four-player-only" style="display:none; top: 16px; left: calc(50% + 604px); gap: 8px;" data-page-node-id="9rDd07hKDjMh8TuFZsLnq1"></div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-4/8】战场状态栏 -->
    <!-- 位于对方功能区和中央对战区之间，显示当前游戏状态 -->
    <!-- ====================================================================== -->
    <div id="battlefield" style="
      position: absolute;
      left: 50%;
      top: 134.4px;
      transform: translateX(-50%) translateY(-50%);
      padding: 7px 20px;
      border-radius: 7px;
      border: 1.2px solid #805ad5;
      background: linear-gradient(145deg, #2d1f4e, #1a1033);
      box-shadow: 
        0 5px 20px rgba(128, 90, 213, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 -2px 6px rgba(0, 0, 0, 0.4) inset;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 30;
    " data-page-node-id="qnDmfNG9AE60SG0TYBsg7M">
      <p id="game-status" style="
        color: #fff;
        text-align: center;
        font-weight: 600;
        text-shadow: 0 1.2px 2.5px rgba(0, 0, 0, 0.4);
        letter-spacing: 0.6px;
        margin: 0;
        font-size: 13.6px;"
        data-i18n="game_ready" data-page-node-id="98vcHgQZHJFLgZDrU3P9cu">游戏准备就绪</p>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-5/8】中央对战区域 -->
    <!-- 包含: 对方路牌区(5路)、拼点栏(5格)、我方路牌区(5路) -->
    <!-- 每路包含: 场牌区(前方)、叠牌区(后方) -->
    <!-- ====================================================================== -->
    <div class="center-area" data-page-node-id="BElq70roH0Evl4fDnFxpZc">
      <!-- 对方路牌区 + 对方得分栏（同一容器，得分栏顶部对齐路牌区顶部） -->
      <div style="position: relative; width: 100%; display: flex; justify-content: center;" data-page-node-id="b2tuXjRJYKR62xbq3PUJyo">
        <div id="opponent-road-area" class="road-area" style="margin-bottom: 8px;" data-page-node-id="lH2gHPjU9RpIOF4ifo0tLa">
          <div class="road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic" data-road-slot="0" data-page-node-id="AHpeQbw5qqFjbDtFDosBLV"></div>
          <div class="road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic" data-road-slot="1" data-page-node-id="SVhcVT3LRq0VJ9jLOSvFGJ"></div>
          <div class="road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic" data-road-slot="2" data-page-node-id="hmC3ouXFCl1GyRiFrPRrln"></div>
          <div class="road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic" data-road-slot="3" data-page-node-id="vLefcM7O0YUA37ojU5PmTn"></div>
          <div class="road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic" data-road-slot="4" data-page-node-id="sK9KW7Ukxe2LzgRlLfMxoa"></div>
        </div>
        <!-- 对方得分栏：right: 12%（水平位置不变），top: 0（顶部对齐对方路牌区尾部） -->
        <div id="opponent-score-bar" class="score-bar-container score-bar-opponent" style="position: absolute; right: 12%; top: 0;" data-page-node-id="Ws5GnzXFGsMtVSdCxniC5f">
          <div class="score-row score-row-detail" data-page-node-id="VvGSAV5UJdqxzAkgFfC1qU">
            <div class="score-box score-box-compact" data-page-node-id="wsZIForCkYXhE4kDuHcc0Q">
              <div class="score-label" data-i18n="score_win" data-page-node-id="8tIijwauCLQMyVYKi1IpYW">获胜路数</div>
              <div class="score-value" id="opponent-winning-roads" data-page-node-id="fXpyCs4vmBzKwC81DkVSfe">0</div>
              <div class="score-range" data-page-node-id="nZXhwgkDLtGR65G5c5LwOB">(1-5)</div>
            </div>
            <div class="score-operator" data-page-node-id="3h6XLkifeT6CRV4VZfwua9">+</div>
            <div class="score-box score-box-compact" data-page-node-id="DPIJFomVPC2neZCELrpBIS">
              <div class="score-label" data-i18n="score_neutral" data-page-node-id="bCYDuDZSazVCGiMyb8gbdm">中立牌路数</div>
              <div class="score-value" id="opponent-neutral-roads" data-page-node-id="oUPU4ydYAuyuurAenxDe0s">0</div>
              <div class="score-range" data-page-node-id="IwsxtwEo1rPF2JGYnyPyJS">(1-7)</div>
            </div>
            <div class="score-operator" data-page-node-id="pVPqwwwtRsAtIICXUGgZc1">×</div>
            <div class="score-box score-box-compact" data-page-node-id="AmwNritmvi35G1LuWvQoEc">
              <div class="score-label" data-i18n="score_hand" data-page-node-id="EuS6aIqUL65YPlREHHe1XR">有效牌型得分</div>
              <div class="score-value" id="opponent-card-score" data-page-node-id="AfLKOV2C4KlSXz5gVL5bO5">0</div>
              <div class="score-range" data-page-node-id="XTDRGJoGPKH59Eq9RIjpJG">(10-150)</div>
            </div>
            <div class="score-operator" data-page-node-id="2oELBTqNzB4cKewxR6co5M">=</div>
            <div class="score-box score-box-total" data-page-node-id="3SvazuWU7cyGymlGHaCWZ6">
              <div class="score-label" data-i18n="score_total" data-page-node-id="gz90uu6X9w2CVFp3HDhyPt">总分</div>
              <div class="score-value score-value-total" id="opponent-total-score" data-page-node-id="77EBswkSAKTrtGc1Y2HI1J">0</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 拼点栏 - 5格，显示每路拼点结果 -->
      <!-- 蓝色✓: 我方获胜 | 红色×: 对方获胜 | 灰色-: 未分胜负 | 空格: 无牌 -->
      <div id="center-divider" class="flex" style="gap: 8px; margin-top: 8px; margin-bottom: 8px;" data-page-node-id="HTj9EKAg7GbLuNNl6H5mZ2">
        <div class="result-slot border border-accent rounded flex items-center justify-center" style="width: 73.6px; height: 32px;" data-slot="0" data-page-node-id="JWmNsHC0PGZMS4UJn6tNlc"></div>
        <div class="result-slot border border-accent rounded flex items-center justify-center" style="width: 73.6px; height: 32px;" data-slot="1" data-page-node-id="qGA23ZFdY3c3eqAE7kBLSw"></div>
        <div class="result-slot border border-accent rounded flex items-center justify-center" style="width: 73.6px; height: 32px;" data-slot="2" data-page-node-id="ioeQ3UvbuIZCKXBlPg89Wo"></div>
        <div class="result-slot border border-accent rounded flex items-center justify-center" style="width: 73.6px; height: 32px;" data-slot="3" data-page-node-id="qHJnoSR4mEFxIvagADogXA"></div>
        <div class="result-slot border border-accent rounded flex items-center justify-center" style="width: 73.6px; height: 32px;" data-slot="4" data-page-node-id="XGD51v7tdPWpwKMSZYhYnh"></div>
      </div>

      <!-- 我方路牌区 + 我方得分栏（同一容器，得分栏底部对齐路牌区底部） -->
      <div style="position: relative; width: 100%; display: flex; justify-content: center;" data-page-node-id="J6eXcFRRmQSx6PBotnsem0">
        <div id="player-road-area" class="road-area" style="margin-top: 8px;" data-page-node-id="p19Plr2SGvJLgV7ladUxPz">
          <div class="road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic" data-road-slot="0" data-page-node-id="9iRWiK1GJwYIEyz64ZBgRM"></div>
          <div class="road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic" data-road-slot="1" data-page-node-id="hL1v6KN6rqj59WOBDBl0pX"></div>
          <div class="road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic" data-road-slot="2" data-page-node-id="groK3RjoxrJEU2ocHagJuR"></div>
          <div class="road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic" data-road-slot="3" data-page-node-id="vQkeIRuKPqjrnHgdtHM93i"></div>
          <div class="road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic" data-road-slot="4" data-page-node-id="BvA5R58Sh8GuGrN7B8CRj9"></div>
        </div>
        <!-- 我方得分栏：right: 12%（水平位置不变），bottom: 0（底部对齐我方路牌区尾部） -->
        <div id="player-score-bar" class="score-bar-container score-bar-player" style="position: absolute; right: 12%; bottom: 0;" data-page-node-id="jsCXlmUKeMJNizMrBCvHGs">
          <div class="score-row score-row-detail" data-page-node-id="6zgyOJCkzvGO1pgaTc065R">
            <div class="score-box score-box-compact" data-page-node-id="YaqqXKCFzfMJRH0hQo4oFe">
              <div class="score-label" data-i18n="score_win" data-page-node-id="GIA2rACBxYkFSe9XVrJF3J">获胜路数</div>
              <div class="score-value" id="player-winning-roads" data-page-node-id="xsK1eJEAj92ZmXfTO4g9Jo">0</div>
              <div class="score-range" data-page-node-id="ivWi2OjQT15pH2ZHYdX1of">(1-5)</div>
            </div>
            <div class="score-operator" data-page-node-id="1sqjsavQy4AcYijbc7HtMk">+</div>
            <div class="score-box score-box-compact" data-page-node-id="xVSEH95IwTrEkEl54PmDf9">
              <div class="score-label" data-i18n="score_neutral" data-page-node-id="oPtDIOjqP5WeBDiMXA2rko">中立牌路数</div>
              <div class="score-value" id="player-neutral-roads" data-page-node-id="P93pysMZfBmxF7IxHw1bGG">0</div>
              <div class="score-range" data-page-node-id="jf2oDuBLKONG8mDsyhutlB">(1-7)</div>
            </div>
            <div class="score-operator" data-page-node-id="c10tFSKapKkUMci0jwVQJG">×</div>
            <div class="score-box score-box-compact" data-page-node-id="AqlG2qKLbC7aHGyHjWCqi3">
              <div class="score-label" data-i18n="score_hand" data-page-node-id="HbyZW3FMeEfSk1Ig5fiZ6q">有效牌型得分</div>
              <div class="score-value" id="player-card-score" data-page-node-id="ZnPKr96jMAo82DoWETVbDU">0</div>
              <div class="score-range" data-page-node-id="AHi33Uxe1TGfrNAr5jDAkv">(10-150)</div>
            </div>
            <div class="score-operator" data-page-node-id="F7FlNV9YU6tssNGnCmsq4y">=</div>
            <div class="score-box score-box-total" data-page-node-id="ABzN8Al21IDZmeKRtdOZEt">
              <div class="score-label" data-i18n="score_total" data-page-node-id="9lbGHMRacLrSEVwQagtH1V">总分</div>
              <div class="score-value score-value-total" id="player-total-score" data-page-node-id="Ubq2dLdrPb4WlgngP2q6vJ">0</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-6/8】我方功能区 -->
    <!-- 包含: 暗牌区(5张)、手牌区(6张)、明牌区(3张) -->
    <!-- 位置: 游戏界面底部 -->
    <!-- ====================================================================== -->
    <div class="player-function-area w-full" data-page-node-id="GgDjTktSFY7bZpAas8k6JR">
      <!-- 我方暗牌区 - 5张，双方不可见，只能叠加打出 -->
      <div id="player-dark-cards" class="absolute flex" style="bottom: 16px; left: calc(50% - 748px); gap: 8px;" data-page-node-id="GuREzxNchzb9rBAUsf0AKo">
        <div class="player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="0" data-page-node-id="u7dfueGTUCAZ42rUna7I16"></div>
        <div class="player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="1" data-page-node-id="leWBAPEeoH55uH9uy2HUYy"></div>
        <div class="player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="2" data-page-node-id="XuVDGpyZu9bjh7PUSoNafN"></div>
        <div class="player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="3" data-page-node-id="UUJK5lSeKGM6DRA2Wnx22t"></div>
        <div class="player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot" style="width: 64px; height: 96px;" data-dark-slot="4" data-page-node-id="nOEJV3QlJQjqGeuA8k9UbL"></div>
      </div>

      <!-- 我方手牌区 - 6张，仅我方可见，点击即打出到空位 -->
      <div id="player-hand" class="absolute flex" style="bottom: 16px; left: 50%; transform: translateX(-50%); gap: 8px;" data-page-node-id="uLnb9BHVNuB0nrfwyDxkmD">
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="0" data-page-node-id="vuET4EqO8VwXZMyGJS1ecx"></div>
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="1" data-page-node-id="57BZrZUvmbfeSzAVXmAFMp"></div>
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="2" data-page-node-id="Q7w4Fx74FbO7D7D8kfKcFC"></div>
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="3" data-page-node-id="WXr9cc8gzxL54BMjVIxlvG"></div>
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="4" data-page-node-id="ApjJ85R1FNcuzWMxmZZdWK"></div>
        <div class="player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center" style="width: 64px; height: 96px;" data-hand-slot="5" data-page-node-id="jqgQu8D4QEMVlbaNqofLbe"></div>
      </div>

      <!-- 我方明牌区 - 3张，双方可见，可选择空位或叠加打出 -->
      <div id="player-revealed-cards" class="absolute flex pointer-events-auto" style="bottom: 16px; right: calc(12% + 120px); gap: 8px;" data-page-node-id="UVgkJFLxEEtNHmokvSuoTm">
        <div class="player-revealed-slot border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="0" data-page-node-id="FMYadnttHdPnahey8cNFvW"></div>
        <div class="player-revealed-slot border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="1" data-page-node-id="CjfMBiUcH5gCBBD3CpsqrZ"></div>
        <div class="player-revealed-slot border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot" style="width: 64px; height: 96px;" data-revealed-slot="2" data-page-node-id="D9CTxOScbfRuUMsy1chm83"></div>
      </div>

      <!-- ★ 四人模式：我方右侧玩家区域（暗牌4+手牌1+明牌2） -->
      <div id="player-dark-cards-right" class="absolute flex four-player-only" style="display:none; bottom: 16px; left: calc(50% + 100px); gap: 8px;" data-page-node-id="u0G3tytQQUbImgscZnTgtM"></div>
      <div id="player-hand-right" class="absolute flex four-player-only" style="display:none; bottom: 16px; left: calc(50% + 460px); gap: 8px;" data-page-node-id="Ba2huLxijWX8FTIEcbt98d"></div>
      <div id="player-revealed-cards-right" class="absolute flex pointer-events-auto four-player-only" style="display:none; bottom: 16px; left: calc(50% + 604px); gap: 8px;" data-page-node-id="vxIYTEWTPcNDgwIDUUXBa0"></div>

      <!-- ★ 四人模式练习：我方座位区（左/右各一个，点击加入，右键离开） -->
      <div id="practice-seat-left" class="practice-seat four-player-only" style="display:none;" data-seat="0" data-page-node-id="jViHyx8nQlF8o0V6OkP5pP">
        <div class="practice-seat-plus" data-page-node-id="JTVCOOtHBz9xXTKP7b2Hk3">+</div>
      </div>
      <div id="practice-seat-right" class="practice-seat four-player-only" style="display:none;" data-seat="1" data-page-node-id="Xgz9gqGPYyAzHb0qg0PZjw">
        <div class="practice-seat-plus" data-page-node-id="WxXxr3xEHA61ybZQCFBXdx">+</div>
      </div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-7/8】中立区与牌堆区域 -->
    <!-- 位置: 游戏界面右侧 -->
    <!-- 中立区: 7路，每路双方各最多4张 -->
    <!-- 牌堆: 双方各26张，点击抽牌 -->
    <!-- ====================================================================== -->
    
    <!-- 中立牌区 - 右侧中间位置 -->
    <div class="absolute flex flex-col items-center z-10" style="top: 50%; right: 12%; transform: translateY(-50%); gap: 8px;" data-page-node-id="zndNDLlKV3tX7RF5xVyECE">
      <div class="slot-label text-secondary" style="margin-bottom: 16px;" data-i18n="opp_neutral" data-page-node-id="CdfBhBnRYjGQgkzL9UciUE">对方中立区</div>
      <div id="opponent-neutral-area" class="neutral-area" data-page-node-id="Itw1l3t3WFNmr8ILlcArLY">
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="0" data-page-node-id="wZb3V5EWT64ntzbvJbRFe0"></div>
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="1" data-page-node-id="JECNFq3rPQdXt2kFpsECZ8"></div>
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="2" data-page-node-id="F6GYXXyzYiLjHhe87nl9DL"></div>
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="3" data-page-node-id="qF5KjdDvU8fZ50vn0vtf6i"></div>
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="4" data-page-node-id="hWUe0peM0TcS89YdMCx5Xo"></div>
        <div class="opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="5" data-page-node-id="ceQDDKIkkYt7gEaZcZ37tq"></div>
        <div class="opponent-neutral-slot flex-1 h-full flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic" data-slot="6" data-page-node-id="7cS8hpQRakKT2UmCCjNPt3"></div>
      </div>

      <div id="player-neutral-area" class="neutral-area" data-page-node-id="phnE4EL3nORJg7ND4ocMUV">
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="0" data-page-node-id="sk8Tw9FHIissJwVRcfmUqm"></div>
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="1" data-page-node-id="w79lVTb2jz1k50rCTlYc0e"></div>
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="2" data-page-node-id="Ps6VW2WUbtXBk9c2FmPyw5"></div>
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="3" data-page-node-id="W7Y0nRWRZBU3FYfIKSXlNq"></div>
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="4" data-page-node-id="xgYOhhs1Ut7k6Tw93zGyy7"></div>
        <div class="player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="5" data-page-node-id="mREt2VDGy2QwpDpTFNA9hq"></div>
        <div class="player-neutral-slot flex-1 h-full flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic" data-slot="6" data-page-node-id="XxRzTOqZ0BfLKjstuscbey"></div>
      </div>
      <div class="slot-label text-primary" style="margin-top: 16px;" data-i18n="my_neutral" data-page-node-id="jwSBrQMbVn2LXStBRTFmaS">我方中立区</div>
    </div>

    <!-- 右侧牌堆区域 - 最右侧，上下排列双方牌堆 -->
    <div class="absolute flex flex-col items-center z-10" style="top: 50%; right: 16px; transform: translateY(-50%); gap: 32px;" data-page-node-id="63j2RNSrOGLQX0SrnK8zfe">
      <div class="slot-label text-secondary" data-i18n="opp_deck" data-page-node-id="6DEXwmJVQuKw6CGVvnlRKW">对方牌堆</div>
      <!-- 对方牌堆 - 红色主题，显示剩余牌数 -->
      <div id="opponent-deck" class="deck-container game-cursor-hover no-hover-anim" data-page-node-id="bwG2CdcgbnHSmOjWN54okM"></div>

      <!-- 我方牌堆 - 蓝色主题，可点击抽牌，显示剩余牌数 -->
      <div id="player-deck" class="deck-container game-cursor-hover card-hover" data-page-node-id="ErLZcOA5ElIsd9Cjm4B0Q8"></div>
      <div class="slot-label text-primary" data-i18n="my_deck" data-page-node-id="gDMuAlh6rFDIWnqHled7LH">我方牌堆</div>
    </div>

    <!-- ====================================================================== -->
    <!-- 【HTML结构-8/8】游戏规则面板与控制按钮 -->
    <!-- 规则面板: 左下角按钮触发，显示游戏规则和设定 -->
    <!-- 控制按钮: 右下角(开始/终止/重新开始) -->
    <!-- ====================================================================== -->
    
    <!-- 游戏规则按钮 - 左下角，点击弹出规则/设定面板
         背景色/边框风格与设置按钮一致（深灰渐变 + 浅灰边框）
         悬停视觉：黄色光晕从中心向外连续延伸（CSS :hover 伪类 + transition 平滑过渡）
         悬停机制：纯 CSS :hover（浏览器原生管理，100% 可靠，不会偶尔不触发）
         按钮位置固定不动，悬停时不移动 -->
    <button id="game-rules-btn" class="ui-button game-cursor-hover rules-btn-base" data-page-node-id="k1x98q4ddrGHDXlBXpGfbZ">
      <span class="lightbulb-icon" data-page-node-id="HSTFHBnTPfUQ4PTv0A0GbW">💡</span>
    </button>

    <!-- 游戏规则面板 - 半透明遮罩 + 左侧面板 -->
    <div id="game-rules-overlay" class="absolute inset-0 bg-black/50 z-[150] hidden" data-page-node-id="1SdenYIhEAmPMt5eQygsD0">
      <!-- 规则面板主体 - 包含规则内容和设定内容(可切换) -->
      <div id="game-rules-panel" class="absolute top-4 left-4 w-[600px] h-[calc(100%-2rem)] bg-gray-900/95 text-white p-4 rounded-lg border border-amber-500 z-[160] overflow-y-auto shadow-2xl" data-page-node-id="AWFyNJpnS4WyfJaIeT2lu6">
        <!-- 面板标题栏 - 标题 + 切换按钮 + 关闭按钮 -->
        <div class="flex justify-between items-center mb-4 border-b border-gray-700 pb-2" data-page-node-id="49JEHzwpddUPrVDMwiftLI">
          <h2 class="text-xl font-bold text-amber-400" id="rules-panel-title" data-i18n="rule_title" data-page-node-id="UO8trHCiT1cAEXst39xqMa">📜 游戏规则</h2>
          <div class="flex items-center gap-2" data-page-node-id="DiyYiIZMqts6SckUEPDQzS">
            <button id="toggle-settings-btn" class="game-cursor-hover" style="background: none; border: none; color: #a78bfa; font-size: 1.25rem; transition: all 0.25s ease;" onmouseover="this.style.transform='scale(1.1)';this.style.color='#c4b5fd';" onmouseout="this.style.transform='scale(1)';this.style.color='#a78bfa';" title="游戏设定" data-i18n-title="title_game_settings" data-page-node-id="NaOEN73GCf7Fpg7Pwc1DkL">🧠</button>
            <button id="close-game-rules-btn" class="game-cursor-hover" style="background: none; border: none; color: #9ca3af; font-size: 1.25rem;" data-page-node-id="nqrImyirWuoGmf4lv1PL05">✕</button>
          </div>
        </div>
        
        <!-- 规则内容区域 - 包含胜负判定、拼点规则、牌型大小等 -->
        <div id="game-rules-content" class="space-y-6 text-sm" data-page-node-id="eVKFg9bjFRgg6Lnk0LLvDf">
          <!-- 胜负判定 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-amber-500" data-page-node-id="7tCjkQExxl5PARF5GXSB57">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="YYlE5EWN0wuPDOsSSVzI9Q">
              <span class="text-xl" data-page-node-id="fvRllNplXSrgTwjrz1C1Vm">🏆</span>
              <h3 class="font-bold text-amber-400 text-base" data-i18n="rule_win" data-page-node-id="u13vgdy6kDgtbzmAdHugge">胜负判定</h3>
            </div>
            <ul class="space-y-1.5 text-gray-300 pl-6" data-page-node-id="oQbiF9Y3nqBJma6k3eTcb0">
              <li data-i18n="rule_tactical_win" data-page-node-id="q3tDhnOBH23cS0DZMkXxh2">战术胜利：率先赢得5路的一方，游戏结束，获得胜利</li>
              <li data-i18n="rule_strategic_win" data-page-node-id="xRDTBCJ35ACLtQIulRCjEw">战略胜利：双方都无法出牌时，比较双方场上所有牌的最大牌型</li>
              <li data-i18n="rule_all_cards" data-page-node-id="UkxCUTpzC3uzqL4OjZN8xB">  - 场上所有牌包括：场牌、叠牌、中立区归属卡牌</li>
              <li data-i18n="rule_neutral_claim" data-page-node-id="mtft1iJEGNmDNyTfA0Dron">  - 中立区归属：某路中立区卡牌数量多的一方获得该路所有卡牌</li>
              <li data-i18n="rule_same_hand_type" data-page-node-id="DtiWTvGqYYZtPml8G0gInf">  - 双方最大牌型相同时，比较最大牌型中的最大牌点</li>
              <li data-i18n="rule_still_draw" data-page-node-id="QA1zdjx4LqruWRx6Dkq0NN">  - 还是相同时，双方平局</li>
            </ul>
          </div>
          
          <!-- 拼点规则 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-blue-500" data-page-node-id="rNmEGgcdIcGAqHolZTkJLJ">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="RAJpZcDUSiNNThBOkq1lU7">
              <span class="text-xl" data-page-node-id="HtXk17FuIKEnZQSoONbB4E">⚖️</span>
              <h3 class="font-bold text-blue-400 text-base" data-i18n="rule_point" data-page-node-id="4OFb9MRoEWBCI9wElC8SeW">拼点规则</h3>
            </div>
            <ul class="space-y-1.5 text-gray-300 pl-6" data-page-node-id="7LQTjW4rDrSM67rvvZDqBe">
              <li data-i18n="rule_point_compare" data-page-node-id="DK1Vt0hv3mvNb3xm0fZxCU">每路比较双方的最大牌点（场牌和叠牌中的最大值）</li>
              <li data-i18n="rule_point_higher" data-page-node-id="kHJYQI0Ec31Jm6DGnV7Sfx">点数大的一方赢得该路</li>
              <li data-i18n="rule_point_tie" data-page-node-id="viHrEtJvvbBz6Z4l7pJyJI">点数相等时，该路为平局</li>
              <li data-i18n="rule_point_auto" data-page-node-id="5UWWetkZHmLLzVgg7Lo2cw">每次放置卡牌后自动进行拼点判定</li>
            </ul>
          </div>
          
          <!-- 卡牌值系统 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-green-500" data-page-node-id="IKaSyl91eTqmNk7a4I4qFI">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="GSsSpAI0SPD8iZOTSOb6Cm">
              <span class="text-xl" data-page-node-id="ZKef5xAgNvkcFinhoWx7gu">🃏</span>
              <h3 class="font-bold text-green-400 text-base" data-i18n="rule_card_value" data-page-node-id="P1v83MqBDl5eT1NQp9Gl71">卡牌值系统</h3>
            </div>
            <ul class="space-y-1.5 text-gray-300 pl-6" data-page-node-id="ZZPzrJLxSLFjPgi6zUFY7n">
              <li data-i18n="rule_card_values" data-page-node-id="RrbhtMRFv4bknIprzAbPxM">3=3点 | 4=4点 ... | 10=10点 | J=11点 | Q=12点 | K=13点 | A=1点 | 2=2点</li>
              <li data-i18n="rule_ak_adjacent" data-page-node-id="XG4x6dudrAVFHWFtDJf8Za">A和K是相邻关系（A可拖K，K可拖A）</li>
            </ul>
          </div>
          
          <!-- 牌型大小 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-purple-500" data-page-node-id="F14KgXjNsTrdC4eDUPM81a">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="qgH88kI9Dd5p8U9ZoKApVO">
              <span class="text-xl" data-page-node-id="hpCBIRhbsdwSGDxTMXxEml">🃏</span>
              <h3 class="font-bold text-purple-400 text-base" data-i18n="rule_hand_rank" data-page-node-id="Ml78L4sl0bQ5jgqTLXUDcH">牌型大小（战略胜利时比较）</h3>
            </div>
            <table class="w-full text-sm text-white" data-page-node-id="gN2FG3RqnQHF3Fbp6GSaEZ">
              <thead data-page-node-id="YX7ULnC9AGpgkzE8ejqx2s">
                <tr class="border-b border-gray-700" data-page-node-id="IsAt5SFI6mHXMgvzGpi7Z3">
                  <th class="text-left py-2 px-2 text-amber-400" data-i18n="rule_rank" data-page-node-id="ccX9oHYwjHBNjTaEw33zUD">排名</th>
                  <th class="text-left py-2 px-2 text-amber-400" data-i18n="rule_hand_type" data-page-node-id="r4HUqkDpmsoJwc2NcuGDRF">牌型</th>
                  <th class="text-left py-2 px-2 text-amber-400" data-i18n="rule_example" data-page-node-id="g5X7RNzVAqK2TcKRdOJRIN">示例</th>
                </tr>
              </thead>
              <tbody data-page-node-id="Rr4lzSU1e9Tpt5653YEBwC">
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="xh9LQBRHSojsso3VwAymJJ">
                  <td class="py-1.5 px-2" data-page-node-id="ep9qKl1LesqHjqOvNSR5rq">1</td>
                  <td class="py-1.5 px-2" data-page-node-id="OV67haiiMcH4q3UQyeE4MX"><span class="text-green-400" data-i18n="term_t3straight" data-page-node-id="OrzxxeAJwRFzyEAd6T7jY3">花牌3条顺</span><span class="text-gray-400" data-page-node-id="qBjKISsIDGIlIu93UriBTw">（9张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="FGo4eBguBwAj7lpscayR1w">JJJ-QQQ-KKK</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="EGTBhTWrHSX2S4E9GhZzES">
                  <td class="py-1.5 px-2" data-page-node-id="KQP1Qqvza9xZBH4LtEKCc6">2</td>
                  <td class="py-1.5 px-2" data-page-node-id="09zHLlEGmumrpOJuiXE4lk"><span class="text-green-400" data-i18n="term_straight3" data-page-node-id="QYDiJvMzJG1RAauZCkQ4KZ">3条顺</span><span class="text-gray-400" data-page-node-id="CpxACHcmqNH5M20nvr9Aiy">（9张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="eyr0HCOFZlDEn4zHvnjN2G">333-444-555</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="nqS3bBffZHbnDs4OB9zRb4">
                  <td class="py-1.5 px-2" data-page-node-id="t1NfXY0IMrEjbl2fOACsBn">3</td>
                  <td class="py-1.5 px-2" data-page-node-id="JfT6d3UMox4mQeSzGG8Kry"><span class="text-green-400" data-i18n="term_adjacent3" data-page-node-id="mWYlacQSFHY9zLi7GgNt83">邻三条</span><span class="text-gray-400" data-page-node-id="5BGHdaPmnNcGGzvDsjEN4d">（6张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="BPUDjXorVx1JotLIEt3BfH">333-444</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="Kns7rJo3VBamtsx7X9ws7v">
                  <td class="py-1.5 px-2" data-page-node-id="pyRDzU5AnZ7J35UjtHF8Tv">4</td>
                  <td class="py-1.5 px-2" data-page-node-id="ibiY0f77ksSVQbalzix2sC"><span class="text-green-400" data-i18n="term_four" data-page-node-id="86BUwcEfI9sapkYrZ4lhmo">四条</span><span class="text-gray-400" data-page-node-id="BuytN2hTU7v9msWVLBt3xU">（4张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="2ZchefxsV1jFkDoH19iafN">AAAA</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="iQDMrWGSvNg9XLnB1p9wVI">
                  <td class="py-1.5 px-2" data-page-node-id="5XxtHAmYogAxaIdZj6H83l">5</td>
                  <td class="py-1.5 px-2" data-page-node-id="OZs4XJUr7kwLchyiU2h5I1"><span class="text-green-400" data-i18n="term_pair5" data-page-node-id="Bcr5Y7hAnbAdjy1D6LCCO2">5连对</span><span class="text-gray-400" data-page-node-id="2WoClD8C1NppgFGxXCTWO1">（10张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="NlEznSNOlnlLraxFlFQirx">33-44-55-66-77</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="i9hAdFwteWsNhFsa9ghEI8">
                  <td class="py-1.5 px-2" data-page-node-id="UdsgKaDNphJaUHHhdBv61P">6</td>
                  <td class="py-1.5 px-2" data-page-node-id="rxYLUEEzKtCRw1BwFsoanj"><span class="text-green-400" data-i18n="term_double3" data-page-node-id="Z8oAwGAp3Hrlcptd1VLueh">对3条</span><span class="text-gray-400" data-page-node-id="UqOFCzgjQ9CG2SysZ4YNWP">（6张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="E9x4WE7Dv6XhQfFGP1Dp8w">333-555</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="vbH4YTHbg3f506MagqoZNx">
                  <td class="py-1.5 px-2" data-page-node-id="rukk24ibH2t7xYJb2oksdJ">7</td>
                  <td class="py-1.5 px-2" data-page-node-id="GxfFZBmAG0NxshKIJOUh8m"><span class="text-green-400" data-i18n="term_3consec_pair" data-page-node-id="l48oIhuEdtyZ3ND7CfQGCT">3连对</span><span class="text-gray-400" data-page-node-id="Xl16xmDqDp56ziJfpvA9mT">（6张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="FyNGdPEl0LFAWCJUKa8eQV">33-44-55</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="My5tAer6l7K9Xo5lBW5uop">
                  <td class="py-1.5 px-2" data-page-node-id="S5mhm7iQyBiyihfRiIcQVi">8</td>
                  <td class="py-1.5 px-2" data-page-node-id="kOawqA1ijAcbjehLiCly3a"><span class="text-green-400" data-i18n="term_triple" data-page-node-id="3PnFDyIStd77dsCEw6zkF0">三条</span><span class="text-gray-400" data-page-node-id="1aSCBwXwNo85CDypamW1ak">（3张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="bjoOoQdO0XpglOzy211bfJ">KKK</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="o3Juwyn78EItxmSRnuTqEL">
                  <td class="py-1.5 px-2" data-page-node-id="HYUq6aPznkKng1IzNIuHUR">9</td>
                  <td class="py-1.5 px-2" data-page-node-id="C83sHWrPdxN719iauyquuw"><span class="text-green-400" data-i18n="term_straight5" data-page-node-id="ywnPDxU4Y78rIRAyVoEYX1">5连顺</span><span class="text-gray-400" data-page-node-id="AOl1VaxJysl1RiiM2sqRHD">（5张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="rB8UZUw3kjMS5EkJHMR4Jn">3-4-5-6-7</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="54sBSuZVdq0oHmxlXekstH">
                  <td class="py-1.5 px-2" data-page-node-id="BqYw4igJ4PKGoJhe00CQJj">10</td>
                  <td class="py-1.5 px-2" data-page-node-id="11rExhteDpGjVsqxzmLXiH"><span class="text-green-400" data-i18n="term_3straight" data-page-node-id="26BELa44cDLjNtgwB1cjE1">3连顺</span><span class="text-gray-400" data-page-node-id="BcEHkeqNmMyYICkA6AFLm0">（3张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="nqWcaUH3DDvhcYhlwIhGIl">J-Q-K</td>
                </tr>
                <tr class="border-b border-gray-800 hover:bg-gray-700/30" data-page-node-id="taBYkZintaJ0pWnqrB8wPU">
                  <td class="py-1.5 px-2" data-page-node-id="vw4C1SKMmze8Y6DNU9FSOp">11</td>
                  <td class="py-1.5 px-2" data-page-node-id="JxrlZGanvUyyoUFSMN7tTz"><span class="text-green-400" data-i18n="term_pair" data-page-node-id="hHRD2bfWYK1ujn0EpXPiUC">对子</span><span class="text-gray-400" data-page-node-id="MluWwzH2mxdpYucujWzMZJ">（2张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="fuHKWEoVFuU3EXOlGZTuQQ">QQ</td>
                </tr>
                <tr class="hover:bg-gray-700/30" data-page-node-id="alBzQHn4NF1BecyDayy7qn">
                  <td class="py-1.5 px-2" data-page-node-id="bGzlOlr7L88tBFmE8hFPv7">12</td>
                  <td class="py-1.5 px-2" data-page-node-id="ew8CmN1N2z0DT3BM5RvC1p"><span class="text-green-400" data-i18n="term_highcard" data-page-node-id="3MpxwRmzNTu7dl5adFlgTT">单张</span><span class="text-gray-400" data-page-node-id="8TlcJxn5yjPUA6Qoo0kssO">（1张）</span></td>
                  <td class="py-1.5 px-2" data-page-node-id="O22bDcZEwnUFQeWgmcvxQE">K</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 区域规则 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-green-500" data-page-node-id="XnqaXa1KrKXGT5CTu4UDnO">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="nJLgeI3HRDSamhSJaFO7fo">
              <span class="text-xl" data-page-node-id="QM9JFGo5uTFr8Z7sWsFHqQ">📍</span>
              <h3 class="font-bold text-green-400 text-base" data-i18n="rule_zone" data-page-node-id="dG5pixGDRfHgjcY3alwSnp">区域规则</h3>
            </div>
            <ul class="space-y-1.5 text-gray-300 pl-6" data-page-node-id="2QnHRk788I8JhsJvJkDCzi">
              <li data-page-node-id="2sMCTwW9bpLIDCOYpcNA7J"><strong class="text-green-300" data-i18n="rule_zone_road_label" data-page-node-id="5B1sMyzaP4W6YatsqffIXD">路牌区：</strong><span data-i18n="rule_zone_road_rest" data-page-node-id="m2P5bzKx5JI9mljTqQ63CA">游戏界面中央区域，从左到右分为5条路，在此区域放置的牌统称为：路牌</span></li>
              <li data-i18n="rule_zone_order" data-page-node-id="Hfc76eSfJmWDDvYEnc6nK9">  - （我方路牌按照从上到下顺序排列，对方路牌则是从下到上顺序排列）</li>
              <li data-i18n="rule_field_stack" data-page-node-id="Vxytf3kDbiWRHAQqYMVX3I">  - （每条路排序第一的路牌，另称为场牌，其他排序的路牌，另称为叠牌）</li>
              <li data-i18n="rule_lane_max" data-page-node-id="XVq7LKa808OaBzGdlfltz8">  - （每条路≥9张牌时，无法在此路再打出牌）</li>
              <li data-page-node-id="GhFXK6gRB0MxySp4iyZsgU">&nbsp;</li>
              <li data-page-node-id="RCtTq8DTTO8cMJ42F9wDFR"><strong class="text-green-300" data-i18n="rule_zone_neutral_label" data-page-node-id="SYhe3jj8btQmwncjDVqiHU">中立区：</strong><span data-i18n="rule_zone_neutral_rest" data-page-node-id="TfhxFJtTIRi6EPl5WkzU8M">界面中央右侧区域，分为7条路，在此区域放置的牌统称为：中立牌</span></li>
              <li data-i18n="rule_neutral_max" data-page-node-id="lbjVLoQNx5D0vfIAYnAmOh">  - （每条路双方各自最多放置4张中立牌）</li>
              <li data-i18n="rule_neutral_claim_detail" data-page-node-id="yJ54KsoBdJ8YvZWDQJZiJo">  - （每条路的中立牌数量多于对方时，那一条路的双方中立牌，全部算入己方牌面，参与牌型组合）</li>
            </ul>
          </div>
          
          <!-- 出牌规则 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-orange-500" data-page-node-id="Dv8F71BwjjSe9GEgriM04C">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="ecKOvUot0Ai4PfYOpvbEVL">
              <span class="text-xl" data-page-node-id="1D6ZgSS4IcAOiM3RJxtvWk">🎯</span>
              <h3 class="font-bold text-orange-400 text-base" data-i18n="rule_play" data-page-node-id="ZsovNeCuT5ZbRuxxCLToD6">出牌规则</h3>
            </div>
            <ul class="space-y-1.5 text-gray-300 pl-6" data-page-node-id="IWrni243sswcTqWzfL5R97">
              <li data-page-node-id="QqDVFTARAvRBkrbdBYFpw4"><strong class="text-orange-300" data-i18n="rule_play_play_label" data-page-node-id="q3LUYN2BRLCJAZtAnqe1RC">出牌：</strong><span data-i18n="rule_play_play_rest" data-page-node-id="E7ILpBiTVT4EpudzGhgWYj">双方每回合必须选择一种功能牌打出，完成放置后，自动转入对方回合。</span></li>
              <li data-i18n="rule_play_match_note" data-page-node-id="s4M9yJn3YAHkPtTiHjmGIH">  - （打出的功能牌算作放置，但在触发匹配操作时，只有取消/执行匹配操作后，才算作放置）</li>
              <li data-i18n="rule_play_recalc" data-page-node-id="1Xh2ZaUVP4AgfgIabvIqen">  - （打出的功能牌无论放置在哪，都在本回合其打出的那一路重新计算拼点）</li>
              <li data-page-node-id="9s2Qt4NhTn8BKPHnaLN4cS">&nbsp;</li>
              <li data-page-node-id="tcwmJG2E96jDBWzJDlYtpX"><strong class="text-orange-300" data-i18n="rule_hand_label" data-page-node-id="RDRuozrnf8clmgEJr9u9Uf">手牌：</strong><span data-i18n="rule_hand_rest" data-page-node-id="w43tugwX8EPjC20SFrVU1r">6张，仅己方可见，点击即打出</span></li>
              <li data-i18n="rule_hand_order" data-page-node-id="e6PTheDdISxQHrPJXASVZF">  - （手牌只能按照路牌区从左到右的空位顺序打出）</li>
              <li data-page-node-id="begKUO9Vs1ASGlxyfD36Eo">&nbsp;</li>
              <li data-page-node-id="Nu3Eo0n85zgkplHAWSVDlM"><strong class="text-orange-300" data-i18n="rule_deck_label" data-page-node-id="XmpJeCbxi8ED3CinXX2pKk">牌堆：</strong><span data-i18n="rule_deck_rest" data-page-node-id="YqL1Xii5J55rImWnNtRFtH">初始26张，双方不可见，点击即抽牌打出</span></li>
              <li data-i18n="rule_deck_order" data-page-node-id="hcrcIxyh8D1qfxjNbKALCD">  - （从牌堆抽取的牌只能按照路牌区从左到右的空位顺序打出）</li>
              <li data-page-node-id="6yXqjcD4sMIDrpF9z9gTul">&nbsp;</li>
              <li data-page-node-id="UDK5ggeNWlrrhIuIzcuwBu"><strong class="text-orange-300" data-i18n="rule_revealed_label" data-page-node-id="WxYbQ7Tvkfy1wofj4AtduU">明牌：</strong><span data-i18n="rule_revealed_rest" data-page-node-id="oFdMBcj2qUYEXDpZmL2UFE">3张，双方可见，点击选择一路空位打出或叠加打出</span></li>
              <li data-i18n="rule_revealed_stack" data-page-node-id="uXcoW2pYHC0J9bwWMi1ARt">  - （明牌可以选择路牌区从左到右的空位顺序打出，也可以选择在已有牌的路后叠加打出）</li>
              <li data-page-node-id="SpSg2uT8ESFLInJwnaPOfI">&nbsp;</li>
              <li data-page-node-id="CFhKZLpDMJXRzl2HyWW988"><strong class="text-orange-300" data-i18n="rule_dark_label" data-page-node-id="cKnwEr76NqKG9EJ5GE90PA">暗牌：</strong><span data-i18n="rule_dark_rest" data-page-node-id="X1AH1YkKUnNheV3IS7JvcE">5张，双方不可见，点击选择一路叠加打出</span></li>
              <li data-i18n="rule_dark_stack" data-page-node-id="YjrMYOBTEXFHQDzGnE7jN4">  - （暗牌只能在已有牌的路后叠加打出）</li>
              <li data-page-node-id="m9JQt0rnzo7GlFw6Ff6or3">&nbsp;</li>
              <li data-page-node-id="M1zYkamO6WvShdAaytk00N"><strong class="text-orange-300" data-i18n="rule_stop_play_label" data-page-node-id="wugnhDs3UDhnuD1XD1U5qh">终止出牌：</strong><span data-i18n="rule_stop_play_rest" data-page-node-id="z35imwERZmSHisYG2DgVgQ">在己方回合可选择终止出牌</span></li>
              <li data-i18n="rule_stop_condition" data-page-node-id="Rys1bD72EcdNzuPmnIvVE7">  - 条件：没有可打出的牌</li>
              <li data-i18n="rule_stop_effect" data-page-node-id="zEtUAy9lSCvkOO6tgE0zdJ">  - 效果：终止后轮到对方出牌，双方都终止时按战略胜利判定</li>
            </ul>
          </div>
          
          <!-- 匹配操作规则 -->
          <div class="bg-gray-800/60 rounded-lg p-4 border-l-4 border-red-500" data-page-node-id="v11nbwwYtwe2UVttaFjkwD">
            <div class="flex items-center gap-2 mb-3" data-page-node-id="PEjxUq244tzmF06RPE9ZTm">
              <span class="text-xl" data-page-node-id="fETRqlNqACmZm371gC521i">⚔️</span>
              <h3 class="font-bold text-red-400 text-base" data-i18n="rule_match" data-page-node-id="5mEpfaFTJvgA3GcFGLF9Bz">匹配操作规则</h3>
            </div>
            <div class="space-y-3 text-gray-300 pl-6" data-page-node-id="QaPSj12Vd2MFToENQchxSd">
              <div data-page-node-id="ImbeVOlGsYLX50tdFgIHdi">
                <li class="mb-1.5" data-page-node-id="qD2Vt9hBFisT5KJHBrWTS4"><strong class="text-red-300" data-i18n="rule_drag_label" data-page-node-id="t8ksFPChpRpBXIf491MeCn">拖牌：</strong><span data-i18n="rule_drag_text" data-page-node-id="l5PiC9rEtGyoHhfrTg6Adv">拖取对路的相邻牌点</span></li>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_drag_cond" data-page-node-id="8JKr6niVg9eCccxyZAUawO">条件：刚打出的牌点与对路牌点相邻（差1），A与K相邻</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_drag_effect" data-page-node-id="yyte88aFmGtVMUhEiO5hef">效果：双方匹配的那两张牌点都移入各自的中立区</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_drag_example" data-page-node-id="gA3nx6O4RO8mtyEmlHzwJw">示例：打出6拖7、打出J拖Q、打出A拖K、打出K拖A</div>
              </div>
              <div data-page-node-id="3crGKceozRsTQMKxED5Bkh">
                <li class="mb-1.5" data-page-node-id="KRxUwAyFhz5ZjWd1hxOBFk"><strong class="text-red-300" data-i18n="rule_crash_label" data-page-node-id="Bzz0WUH2m1AJ2MEOe6po13">撞牌：</strong><span data-i18n="rule_crash_text" data-page-node-id="GH42nOxuEkEuiFDoMQQENW">与对路的相同牌点对撞</span></li>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_crash_cond" data-page-node-id="vCCBj1wTgN2PdliYskqcCM">条件：刚打出的牌点与对路牌点相同</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_crash_effect" data-page-node-id="SqdQ01qBP35xAiBpPwHzEj">效果：双方匹配的那两张牌点都移入各自的中立区，该路剩余所有卡牌消失</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_crash_example" data-page-node-id="hwrHBULaSOFDZWgpQ5ja0O">示例：打出8撞8、打出K撞K</div>
              </div>
              <div data-page-node-id="5O9zxzEzxnPMQCQAG0P2M6">
                <li class="mb-1.5" data-page-node-id="aVTkMWLfCzTqKFzIhxIcFx"><strong class="text-red-300" data-i18n="rule_support_label" data-page-node-id="msIskNCm1cGZTjEhIH1VDt">援牌：</strong><span data-i18n="rule_support_text" data-page-node-id="guAiku0DXuw5IjzuGk76Ql">将打出的相邻/相同牌点移入中立区</span></li>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_support_cond1" data-page-node-id="UaxL20n1xK9O7q9kXaWUFD">条件1：刚打出的牌点与我方中立牌点相邻（且那一路，对方没有其他同点的中立牌）</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_support_cond2" data-page-node-id="xNhcDtJLnWDDYnidBReW3c">条件2：刚打出的牌点与我方中立牌点相同（且那一路，对方没有其他不同点的中立牌）</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_support_effect" data-page-node-id="LD0bWWYqFxRTM5kHEZ8CR1">效果：从路牌区去除刚打出的牌，移入我方中立区</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_support_ex1" data-page-node-id="pWMBNzPIoMhRog9ULnZtFa">示例1：打出8，移入（6-7）那一路形成（6-7-8）</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_support_ex2" data-page-node-id="90hk1OxoSTl5EvWf37QFyu">示例2：打出Q，移入（Q-Q）那一路形成（Q-Q-Q）</div>
              </div>
              <div data-page-node-id="xY3c6XGXYg8pTaTuBNV64D">
                <li class="mb-1.5" data-page-node-id="qtU0tEfoU9BRebnIz9apBX"><strong class="text-red-300" data-i18n="rule_surround_label" data-page-node-id="gVJs9qM9WHQV2KpgEWErHZ">围牌：</strong><span data-i18n="rule_surround_text" data-page-node-id="HaYfJfwPDF4ptk0jQN2wRH">用相邻/相同牌点转移中立牌</span></li>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_surround_cond1" data-page-node-id="koeoS0OZGbAOgiL4s04N9s">条件1：刚打出的牌点与对方中立牌点相邻（且那一路，我方没有其他同点的中立牌）</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_surround_cond2" data-page-node-id="9gY8jMY1bzbuJX9xWbdM00">条件2：刚打出的牌点与对方中立牌点相同（且那一路，我方没有其他不同点的中立牌）</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_surround_effect" data-page-node-id="FhyYsrJdQMyD58BSmUkZz1">效果：清空中立区该路双方卡牌，全部移入玩家刚打出的牌的同一路</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_surround_ex1" data-page-node-id="YtSeD3p5VthoPdIrxbpHf4">示例1：打出5，转移（6-7）至5的那一路</div>
                <div class="text-sm text-gray-400 ml-4 pl-2 border-l border-gray-600" data-i18n="rule_surround_ex2" data-page-node-id="IJ8n05aWCWNH9I1UfY8iMC">示例2：打出A，转移（A-A）至A的那一路</div>
              </div>
            </div>
          </div>
        </div>
        
        <div id="game-settings-content" class="space-y-3 text-sm hidden" data-page-node-id="9iOF80G5zAWf5kziLtIm9m">
          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-purple-500 overflow-hidden" data-page-node-id="apIwKyXFEHE6yMOXgx6alG">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="ksVsLqabZ9JBBgghEsQDlO">
              <span class="text-lg" data-page-node-id="0SVeX9e7DmBMRNM6t12lXm">🎮</span>
              <span class="font-bold text-purple-400" data-i18n="rule_buttons" data-page-node-id="LdBzW8JyoUNo78W2QmpHOI">按钮</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="s24FcTSGPXE8ajP83UkrED">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="Mys9XcuarUN2PYQPwxXnO1">
              <ul class="space-y-2 text-gray-300 pl-6" data-page-node-id="6aKuzoWEfFFEam361Gp6qV">
                <li data-page-node-id="bKI7oX0AB1Ul01L2JCdDtl"><strong class="text-purple-300" data-i18n="rule_btn_main" data-page-node-id="6ddAxz59g1uIbOx9QZ7EQi">主菜单按钮：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_entertainment" data-page-node-id="9vE9tYKzBI2pJhHfukEwro">  - 娱乐模式（btn-entertainment）：暂未开放</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_online" data-page-node-id="cu7riVUpnty4uDvSgEuXZE">  - 联机模式（btn-online）：展开子菜单（单人匹配/双人匹配/自定义房间）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_practice" data-page-node-id="GOfDtDvcKqUQAJbbt9xV8o">  - 人机练习（btn-practice）：展开子菜单（单人1v1/人机2v1）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_tutorial" data-page-node-id="Fjl2lhti2bmr6wD6sBmD7D">  - 教程（btn-tutorial）：展开子菜单（拼点和牌型/功能牌/匹配操作）</li>
                <li data-page-node-id="R3OfjIcdyredjXJvfdmKMz"><strong class="text-purple-300" data-i18n="rule_btn_ui" data-page-node-id="Gx87AyVqFECzeVj4MSTRA5">UI按钮：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_settings" data-page-node-id="ZUPclT1s1m4GZPBKjVMlX5">  - 设置按钮（settings-btn）：左上角齿轮图标，弹出设置面板</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_turn" data-page-node-id="JOx4umNHVx24U7Aoumx2KA">  - 回合显示按钮（turn-display-btn）：右上角回合信息，点击展开回合记录</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_rules" data-page-node-id="EH63rJnztZqJwGxNoa5Nt4">  - 游戏规则按钮（game-rules-btn）：左下角💡图标，弹出规则/设定面板</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_friend" data-page-node-id="z4yzMZ0yVTK2Wa1LUggSIg">  - 好友按钮（friend-btn）：头像下方，展开好友列表（联机模式）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_team" data-page-node-id="7Qn7McbP67KX1AD80IeGQ8">  - 组队按钮（team-plus）：头像右侧，展开组队邀请面板（联机模式）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_server" data-page-node-id="gaSfjUctS76h7lNfXh0OvB">  - 服务器负载（server-stats-btn）：右上角，显示在线人数和服务器状态</li>
                <li data-page-node-id="wH7GMzuoVXqRk31QrVLVfd"><strong class="text-purple-300" data-i18n="rule_btn_ctl" data-page-node-id="LFRLDnh4oPAzdPisjxxAaa">游戏控制按钮：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_start_ctl" data-page-node-id="7CHqJzMS5LkyL8KGv3vUkg">  - 开始游戏（start-game）：启动游戏</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_stop_ctl" data-page-node-id="s0PBVAJpSxl09QivJN4Ycq">  - 终止出牌（stop-playing）：结束当前回合</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_exit_ctl" data-page-node-id="WP0HnxH9BXexCifp4uYUjF">  - 退出练习（restart-game）：退出当前练习模式</li>
                <li data-page-node-id="Eii3OA8myTx7T0T6im4Dim"><strong class="text-purple-300" data-i18n="rule_btn_settings_panel" data-page-node-id="bV2K5osh1HyqMn1TtPB4uO">设置面板按钮：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_close_settings" data-page-node-id="WKsdtEoz3C60Tj1oFT3VAV">  - 关闭设置（close-settings-btn）：关闭设置面板</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_fullscreen" data-page-node-id="oloetvCEzBqZeKr8kga9OB">  - 全屏切换（fullscreen-btn）：切换全屏/窗口模式</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_cardface" data-page-node-id="GirpypnbHrX86Nvix1QHea">  - 卡面选择（cardface-normal/glass/metal-btn）：切换卡面风格（经典/玻璃/金属）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_bg_style" data-page-node-id="F2UuGQeFwvEi4KwQPEh78q">  - 风格背景（style-bg-btn）：切换游戏背景主题（星空战场/魔法森林/机械科技）</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_ai_tactical" data-page-node-id="NFIhTwua3pRskExVHfSpFe">  - AI战术开关（ai-tactical-on/off-btn）：开启/关闭AI战术策略</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_ai_strategic" data-page-node-id="3X0Ax5AGypwR8TqKG7LFFl">  - AI战略开关（ai-strategic-on/off-btn）：开启/关闭AI战略策略</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_first" data-page-node-id="QCjSFH7DIuabCtSzkoyAGd">  - 先手选择（first-random/player/opponent-btn）：随机/我方/对方先手</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_callcard" data-page-node-id="L6hxG1eqTqWgPdKvpgAT0f">  - 叫牌开关（call-card-on/off-btn）：开启/关闭叫牌功能</li>
                <li data-page-node-id="w5MVtKls81KtbjRWyCSZe3"><strong class="text-purple-300" data-page-node-id="uAQDFOIgpmBYHHdHj2c1kM">面板按钮：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_close_rules" data-page-node-id="qYWzDZ2gfnR5HAQezHxvRi">  - 关闭规则按钮（close-game-rules-btn）：规则面板关闭</li>
                <li class="text-sm text-gray-400" data-i18n="rule_btn_toggle" data-page-node-id="d1XlGpz3mHXiws8Og9ssmm">  - 切换设定按钮（toggle-settings-btn）：规则界面显示🧠，设定界面显示📋</li>
              </ul>
            </div>
        </div>
        
        <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-indigo-500 overflow-hidden" data-page-node-id="9FVAaoQ5USsobRbYM6nRUy">
          <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="ZEsxv4CEZ22cGOvEEH4d8M">
            <span class="text-lg" data-page-node-id="JnBq4aXPpibCcZI7MVWCMP">📊</span>
            <span class="font-bold text-indigo-400" data-i18n="rule_panels" data-page-node-id="EK3hBbUmugWhAF8F0LQ6MO">栏目</span>
            <span class="ml-auto text-gray-400 text-sm" data-page-node-id="8h9ENWitIyOKccq0h8O5Vo">▼</span>
          </button>
          <div class="accordion-content hidden px-3 pb-3" data-page-node-id="LKiY9cdvN8KTe5FguqQSHL">
            <ul class="space-y-2 text-gray-300 pl-6" data-page-node-id="7QmCdDbL3ipbqZ3RkSgvXD">
              <li data-page-node-id="BU2RnCtbj8I91BlA9eOmG6"><strong class="text-indigo-300" data-i18n="rule_panel_status" data-page-node-id="5CSTJKD6kdxREVfArWMEvm">状态栏：</strong></li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_pos" data-page-node-id="yFJXhw9m3umSo3ZGe0d9wK">  - 位置：中央对战区域顶部（紫色面板）</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_func" data-page-node-id="ORGhVDbfYozjbHbXH1Tps3">  - 功能：播报游戏操作信息，提示当前游戏状态</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_content" data-page-node-id="IznzmziWkaCgMWFVkDRKHA">  - 信息内容：</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_ready" data-page-node-id="3e2LZzM1XDJxgMseWIKydR">    • 准备阶段：游戏准备就绪，请点击开始游戏</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_deal" data-page-node-id="1B2Yt2HEw3gA16Ki7GPgxY">    • 发牌阶段：正在发牌...</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_turn" data-page-node-id="GF4uLFPmX5DG96T7UhPljs">    • 回合开始：游戏开始！我方回合/对方回合</li>
              <li class="text-sm text-gray-400" data-i18n="rule_status_stop" data-page-node-id="aOv4w7sZvi2kwYw7D6jsbG">    • 终止出牌：我方终止出牌，轮到对方回合</li>
              <li data-page-node-id="HPUvpE4KmfL2L59gdUKReW">&nbsp;</li>
              <li data-page-node-id="zodmypR0NUCvCtXo6HE74f"><strong class="text-indigo-300" data-i18n="rule_panel_hand" data-page-node-id="KNR29F3bwoF16fLAc68hwq">牌型栏：</strong></li>
              <li class="text-sm text-gray-400" data-i18n="rule_hand_pos" data-page-node-id="HBx6iPQbxuVRxrSEAIwnip">  - 位置：游戏界面左侧中央面板</li>
              <li class="text-sm text-gray-400" data-i18n="rule_hand_top" data-page-node-id="SDPl8O2uAeRLcrhUOpVbUR">  - 上方：对方牌型（红色标题）</li>
              <li class="text-sm text-gray-400" data-i18n="rule_hand_bot" data-page-node-id="r87MDaVb0ALNN00xfapXsH">  - 下方：我方牌型（蓝色标题）</li>
              <li class="text-sm text-gray-400" data-i18n="rule_hand_show" data-page-node-id="4olCFcizKhzLCQRR6mjdfr">  - 显示：牌型名称和详情</li>
              <li data-page-node-id="88gH4DkeAGWEoyPircBHDS">&nbsp;</li>
              <li data-page-node-id="QFHv0Dr7GJCRoCOSg72eoq"><strong class="text-indigo-300" data-i18n="rule_panel_score" data-page-node-id="GDOxHjkfIYx7Y25FvACsYC">积分栏：</strong></li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_pos" data-page-node-id="DYABQGNU7HTrYIrMshD0B8">  - 位置：左侧中央面板，对方牌型与我方牌型之间</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_content" data-page-node-id="CpFbUVVdUlZS9ylBWVUQw0">  - 内容：从上到下显示各种牌型及其对应分数</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_high" data-page-node-id="VLNZWjGcgAtnizZldT00DV">  - 高分牌型（3条顺、5连对、四条、对三条）显示在上部</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_low" data-page-node-id="SXE1TDk5tPzgDQuEFnNLdH">  - 低分牌型（3连顺、对子、单张）显示在下部</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_my" data-page-node-id="1YaE5hCPz8bn10F3DZU3tL">  - 左侧蓝色括号：标记我方当前牌型所在行</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_opp" data-page-node-id="GkLr2QlQHziSVVmTFiHqHD">  - 右侧红色括号：标记对方当前牌型所在行</li>
              <li class="text-sm text-gray-400" data-i18n="rule_score_highlight" data-page-node-id="DLrCNh5nfCy4HBxfbeVnpK">  - 动态高亮：双方牌型一致时，整行显示蓝红渐变背景</li>
              <li data-page-node-id="RAoaTxEPc16DHKDO96UbEw">&nbsp;</li>
              <li data-page-node-id="9xHcOtWkAjOR0A1LSTWPI1"><strong class="text-indigo-300" data-i18n="rule_panel_point" data-page-node-id="nuVdXEnTui70MOQmpMPvP4">拼点栏：</strong></li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_pos" data-page-node-id="ghuEfsU9BtRZxtbnkraXBI">  - 位置：中央对战区域分隔线处</li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_content" data-page-node-id="gXyqZBz2slh4JBjOzyffcu">  - 内容：五个金色方格，显示每路拼点结果</li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_my" data-page-node-id="z1JHVKqCL9d26rxKcJxh5D">  - 蓝色✓：我方获胜</li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_opp" data-page-node-id="PyKZIOTmWZZJ7kPHteiJey">  - 红色×：对方获胜</li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_pending" data-page-node-id="xzMORXpum4Ar9SGG79C80y">  - 灰色-：双方有牌未分胜负</li>
              <li class="text-sm text-gray-400" data-i18n="rule_pointbar_empty" data-page-node-id="fyS1PGqyFICqfbxMii6fAM">  - 空格：该路无牌</li>
              <li data-page-node-id="j9lLcKXJ0xjfQQGHtNzao7">&nbsp;</li>
              <li data-page-node-id="5ASvQdWpOmYUoDsKZAytS4"><strong class="text-indigo-300" data-i18n="rule_anim_toggle" data-page-node-id="JSEtwItu6y2lispzS0T8yP">动画开关（ColumnVisibilityConfig）：</strong></li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_pos" data-page-node-id="HCqJpnJU46WsHfdaQC5i3S">  - 位置：设置面板内，可通过localStorage持久化保存</li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_drag" data-page-node-id="3jHngqJX9tqtmsKefiunFb">  - 拖牌动画（drag-animation）：开启/关闭拖牌匹配动画</li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_crash" data-page-node-id="35jFUqDRL54rnNXJCjRCmU">  - 撞牌动画（crash-animation）：开启/关闭撞牌匹配动画</li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_support" data-page-node-id="aY8IcTfz4E7RLjBcpkXzwj">  - 援牌动画（support-animation）：开启/关闭援牌匹配动画</li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_surround" data-page-node-id="70eBWuVephavJWRDNBYKS1">  - 围牌动画（surround-animation）：开启/关闭围牌匹配动画</li>
              <li class="text-sm text-gray-400" data-i18n="rule_anim_deal" data-page-node-id="1Re7IZq11hBUYl4dlo0lLn">  - 发牌动画（deal-animation）：开启/关闭发牌动画</li>
            </ul>
          </div>
        </div>

        <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-yellow-500 overflow-hidden" data-page-node-id="ccWeX3HwDRjIa5d3UdD1ga">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="kI1BJ3eHWajEIz9TPoCFtD">
              <span class="text-lg" data-page-node-id="ASAU7mt4OtFEfcwB4J5sua">🎯</span>
              <span class="font-bold text-yellow-400" data-i18n="rule_call_card" data-page-node-id="coNbWPX49F9CGH9VQkRczF">叫牌</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="6kKTbTC4coG2y6G7n2H3QH">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="95ep7bHiZUGX3tgJ4xsCEX">
              <ul class="space-y-2 text-gray-300 pl-6" data-page-node-id="pFEwkNiCGME3Wn9PFLLN83">
                <li data-page-node-id="YcotGzoROuVaGaBoU1xuzM"><strong class="text-yellow-300" data-page-node-id="OTAkTrXgpPHmFMx4ashVPi">触发条件：</strong></li>
                <li class="text-sm text-gray-400" data-i18n="rule_ai_t_d_4_1_play" data-page-node-id="pxpiKLLR5f0X1YIBpbP78M">  - 叫牌开关开启时，玩家打出暗牌或牌堆放路牌区后触发</li>
                <li class="text-sm text-gray-400" data-page-node-id="fjE8Ki9ZDIBcALLyDJfeju">  - 卡牌保持背面，下方弹出"叫牌"提示</li>
                <li data-page-node-id="c7BqlaI3UrQXyL3mknAdME">&nbsp;</li>
                <li data-page-node-id="rLWW6HolRgkwkDQzbV9cKO"><strong class="text-yellow-300" data-page-node-id="Vb2BJ0wYQ3xaaL9KhRLOFb">叫牌规则：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="I7GfUxkEh5929JZyGAnKvb">  - 叫牌的点数与实际暗牌/牌堆翻开显示的点数一致时，为总分永久添加对应分数</li>
                <li class="text-sm text-gray-400" data-page-node-id="ZwLfSoYqEUMPpyBdTC045s">  - 叫牌成功才增加叫牌输入数量，输入数量最多5个</li>
                <li data-page-node-id="HwosM7ULv5CsPgF7Xrd5br">&nbsp;</li>
                <li data-page-node-id="oRErzaRtGNYuTTMimkIYeb"><strong class="text-yellow-300" data-page-node-id="B6o7GlRj15vIE7LK9ZuhEn">成功奖励与功能变化：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="iwOsa2DvGl7XMWxtB35cHX">  - 第1次成功：+150分，+1次叫牌数量（下次需输入2个牌点）</li>
                <li class="text-sm text-gray-400" data-page-node-id="Qb2lRJskGYh09LCDpYlABl">  - 第2次成功：+120分，+1次叫牌数量（下次需输入3个牌点）</li>
                <li class="text-sm text-gray-400" data-page-node-id="JBAJQvVGBUcJEHzg7NKKzd">  - 第3次成功：+100分，+1次叫牌数量（下次需输入4个牌点）</li>
                <li class="text-sm text-gray-400" data-page-node-id="yF5N17huJlaFZEmdsEzeUq">  - 第4次成功：+90分，+1次叫牌数量（下次需输入5个牌点）</li>
                <li class="text-sm text-gray-400" data-page-node-id="pXUYM1zgkb7h7ptC9CZRq4">  - 第5次成功：+80分，叫牌数量已达上限（保持5个）</li>
                <li class="text-sm text-gray-400" data-page-node-id="rWyuwKDD2roIMiaEM70ZsC">  - 第6次及以后：不增加叫牌数量，每次有效牌型永久+30分</li>
                <li data-page-node-id="0c2RtwAz8wlKNs9rEdCPFg">&nbsp;</li>
                <li data-page-node-id="wUR9lehy9tqN4aLyn9yDWG"><strong class="text-yellow-300" data-page-node-id="vKLYoXorEHYXXnzvOld6vm">特殊效果：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="JSQJ1kFH9tYLDBDEgopVH4">  - 叫牌成功后总分变为金色显示</li>
                <li class="text-sm text-gray-400" data-page-node-id="Qlj97dx0nUgt5r6VTek7Xw">  - 牌型加分后牌型得分也变为金色显示</li>
              </ul>
            </div>
          </div>

          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-pink-500 overflow-hidden" data-page-node-id="63VFeGJcnMCkIn7xLiLkX9">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="1pcWNpDhZktM7CfSw0Vbcz">
              <span class="text-lg" data-page-node-id="sY9eD8UmlYlvp9ArjOUCEq">✨</span>
              <span class="font-bold text-pink-400" data-i18n="rule_animation" data-page-node-id="UewXqD9NyEVueu2CRrvO6E">动画效果</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="kMAyGOW7GKw8QzGdfjBl9F">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="CLv5JZanL2BqyFx3FlT4BQ">
              <ul class="space-y-2 text-gray-300 pl-6" data-page-node-id="x23kRWZe5kytJOxa9ccGgW">
                <li data-page-node-id="Gv7fO0pLyNyi2IwbMGpq6c"><strong class="text-pink-300" data-page-node-id="WQcT4mrxwQGhQRmDxivcxj">CardAnimationConfig（统一动画配置）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="tCB8PVYYCQIfaXchZs6Wja">  - 统一管理九种移动类型的动画参数，便于调整和维护</li>
                <li class="text-sm text-gray-400" data-page-node-id="KSDOWhj8QrRbTw0eBKg3Ol">  - 配置属性：duration(时长)、rotate(旋转)、scale(缩放)、brightness(亮度)、glow(发光)、particleType(粒子类型)</li>
                <li data-page-node-id="RObxyUUZJOeXHEwpS03HjM">&nbsp;</li>
                <li data-page-node-id="2gnX0PrnyKTtcOsiBrQt1l"><strong class="text-pink-300" data-page-node-id="VODArYBJaKQxN4RB7axjO2">createParticleSystem（粒子系统）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="HCCUi6MSwpgbtEMDrKmdXP">  - 根据配置自动创建对应类型的粒子效果（dust/smoke/fire/meteor/none）</li>
                <li data-page-node-id="9sMeKth2tSnsACAPWOfs5D">&nbsp;</li>
                <li data-page-node-id="N9hv4PsMrCwyXRWMCUXNPt"><strong class="text-pink-300" data-page-node-id="Hh06HXjr5qrAKInGMbjxv6">手牌动画（moveType: 'hand'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="ffvjlV8Om1cUqjIDFIxNsd">  - 粒子类型：灰尘轨迹（dust），25个，蓝色(玩家)/红色(对方)</li>
                <li class="text-sm text-gray-400" data-page-node-id="z856l4yOIho8IyHACNdky0">  - 动画时长：400ms，不旋转</li>
                <li data-page-node-id="4b18ILl9zAMKb3ljlAzRFU">&nbsp;</li>
                <li data-page-node-id="n8O1oR7WBFfmdYU0qHmHuV"><strong class="text-pink-300" data-page-node-id="0BPQ0JR43eFK9k5IhS79Pg">牌堆动画（moveType: 'fromDeck'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="MJvcXh6eDO3qsA3ewurEwm">  - 粒子类型：烟雾轨迹（smoke），20个，灰色</li>
                <li class="text-sm text-gray-400" data-page-node-id="GX3OEEG3Q4mHJ6UTQojxA7">  - 动画时长：400ms，不旋转</li>
                <li data-page-node-id="HhcxYCs1sMBFyzPVebiRvP">&nbsp;</li>
                <li data-page-node-id="BicdsLHkB7uyemiASN1KHb"><strong class="text-pink-300" data-page-node-id="J3YQpZC07WrKcYCe2uOxWV">明牌动画（moveType: 'revealed'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="fMdkqoIchbd5OzOpmA786q">  - 粒子类型：火焰粒子（fire），30个，橙红色系</li>
                <li class="text-sm text-gray-400" data-page-node-id="HXiyCWHM3k8BtDznsWEF6T">  - 动画时长：400ms，不旋转</li>
                <li data-page-node-id="kZUdVr3IWSEIpgTMPvpxIQ">&nbsp;</li>
                <li data-page-node-id="g5GMtCuGcD0XgQ18oGBADn"><strong class="text-pink-300" data-page-node-id="A1tu8UN12Y9CSmKmJkARC0">暗牌发牌动画（moveType: 'darkDeal'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="X3zZdLGdmF5iLgeAJCTnl5">  - 粒子类型：流星轨迹点（meteor），16个，蓝色(玩家)/红色(对方)</li>
                <li class="text-sm text-gray-400" data-page-node-id="7ENpfJO5lg0jAp3ncbBCXF">  - 动画时长：400ms，旋转1440°(4圈)</li>
                <li data-page-node-id="xKNXxdzAhDtsBePRqR627b">&nbsp;</li>
                <li data-page-node-id="nABuVXt3fn5Ljz4pEtB0xE"><strong class="text-pink-300" data-page-node-id="BFKtuuG0BuzxGcNigavjX1">暗牌出牌动画（moveType: 'dark'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="peQ17I5OCvlUkai5jYN8aj">  - 粒子类型：流星轨迹点（meteor），8个，蓝色(玩家)/红色(对方)</li>
                <li class="text-sm text-gray-400" data-page-node-id="6gz6vu9lqj457dBPrReZGZ">  - 动画时长：800ms，旋转720°(2圈)</li>
                <li data-page-node-id="nDEB3bZhvCw4gYAgAxhLzL">&nbsp;</li>
                <li data-page-node-id="Xm3Tv5rsVyM6xA3xfbAmj3"><strong class="text-pink-300" data-page-node-id="UJWDQ21kqchjsiBwZxQB9G">拖牌动画（moveType: 'drag'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="adBGDTLHdEcktv4pE5O1Hy">  - 粒子类型：灰尘轨迹（dust），20个，金色(玩家)/橙色(对方)</li>
                <li class="text-sm text-gray-400" data-page-node-id="GX83yRGmvW1yG4rr696LeO">  - 动画时长：900ms，旋转360°(1圈)</li>
                <li data-page-node-id="dPnM3UPY5KpmXt4TCJsK4f">&nbsp;</li>
                <li data-page-node-id="QR5WCWnFHJKwVDb6TU0yQY"><strong class="text-pink-300" data-page-node-id="Alnwsve0d3qRwEmEEHA32d">撞牌动画（moveType: 'crash'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="62QyCblHxwJR7RfPewTSaJ">  - 粒子类型：火焰粒子（fire），35个，紫色/粉色/金色/红色混合</li>
                <li class="text-sm text-gray-400" data-page-node-id="4DnGlUtRgtxKsQpCAkpko1">  - 动画时长：500ms，旋转360°(1圈)</li>
                <li data-page-node-id="OepyWPsGjRevCLjjrR4ivx">&nbsp;</li>
                <li data-page-node-id="UvvWCvGlxjblCZpJxl7SF2"><strong class="text-pink-300" data-page-node-id="THFlnB6bZ7fefRyAgDE9oT">援牌动画（moveType: 'support'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="kGuyhbe4CeAhFWuBdYAKQ3">  - 粒子类型：无（none），500ms，不旋转</li>
                <li data-page-node-id="hUhO4FjmnPqIlBlMyXM4xT">&nbsp;</li>
                <li data-page-node-id="xSzzatAIxsyWd7Nv4jUsDd"><strong class="text-pink-300" data-page-node-id="S7I1IA7Y55kr6yu134GIDg">围牌动画（moveType: 'surround'）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="jMmC5F2OFuEPdErYNRVzEs">  - 粒子类型：无（none），600ms，不旋转</li>
              </ul>
            </div>
          </div>
          
          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-pink-500 overflow-hidden" data-page-node-id="MdxRLHlvEcPEcgluNI4kRp">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="gkBF92DtzGqVSYTeHPFQJa">
              <span class="text-lg" data-page-node-id="iCYVb7FuJsBQqFAlFBh0bJ">⚔️</span>
              <span class="font-bold text-pink-400" data-page-node-id="QILebhBsXu1wh0EXGkR5ns">AI战略</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="E5nd16LGgJJCADJw7Kjpg1">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="hze2U8zjQ5BY5SC0B08irr">
              <div class="space-y-4 text-gray-300 text-sm" data-page-node-id="h2tuHBWQ3p61bmr0bt9heR">
                <div class="bg-gray-700/30 rounded p-3 border border-pink-500/30" data-page-node-id="ALYU9KudisumixfL8xKoyG">
                  <div class="text-pink-300 font-bold mb-2" data-i18n="rule_ai_strategic_trigger" data-page-node-id="94smoikwKvCaoLf0eEfUlU">【战略触发条件】</div>
                  <div class="text-gray-400 text-xs space-y-2 pl-2" data-page-node-id="TTeYpubDYj8ABFMbJ2Tjh9">
                    <div data-i18n="rule_ai_strategic_cond" data-page-node-id="MXhRGWNFhWdAoGYhsGdqMi">"双方都无法达成五路全胜"时，转为战略策略</div>
                    <div class="pt-2" data-page-node-id="qf6Hx9HKb1UxNcPj7CGSvh"><strong class="text-pink-300" data-i18n="rule_ai_strategic_check" data-page-node-id="7SPBTAo8jWBpOxAxrSNkjN">判定条件（需经过2处检测）：</strong></div>
                    <div class="pl-4 space-y-1" data-page-node-id="nWW7RMEdAlNMCPxAbwuh8Y">
                      <div data-i18n="rule_ai_t_r_3_1_unwon" data-page-node-id="AweggoqszbEejhKI8gTxbF">• 第一处：ai方"有效功能牌"数量 &lt; 未获胜路数量</div>
                      <div data-page-node-id="7WcXAKTRlP7TbVHssRfcoH">• 第二处：玩家方"有效功能牌"数量 &lt; 未获胜路数量</div>
                    </div>
                    <div class="pt-2" data-page-node-id="Iu2rhvC2qvPqcvQjd7QBgH"><strong class="text-pink-300" data-i18n="rule_ai_effective_def" data-page-node-id="kRNxNxKGNLjPQOmFE68tIh">"有效功能牌"定义：</strong></div>
                    <div class="pl-4 space-y-2" data-page-node-id="2C3ee6BCTgugBZo160W989">
                      <div data-i18n="rule_ai_eff_def1" data-page-node-id="1rRG5ChISVsoGgIWKprUGn">1. 在未获胜路中，选择对方最大牌点中最小的一路，放置可以让此路优势的明牌</div>
                      <div data-i18n="rule_ai_eff_def2" data-page-node-id="rGByl2Udf2O84HUsNm6T31">2. 在未获胜路中，打出可以执行匹配操作的明牌；此明牌需要具备以下条件之一，否则不算有效功能牌：</div>
                      <div class="pl-4 space-y-1" data-page-node-id="FuEbntrDe4ghDNqycjhGPT">
                        <div data-i18n="rule_ai_eff_cond1" data-page-node-id="GHujGLHAf9gBfxktm0QqlC">• 围牌增加我方此路最大牌点并获得优势</div>
                        <div data-i18n="rule_ai_eff_cond2" data-page-node-id="P2rFbik6aGuGfitLI3ZRPL">• 拖走对方此路的最大牌点</div>
                        <div data-i18n="rule_ai_eff_cond3" data-page-node-id="BGpyzzkC3wB92UGUiir7Xi">• 撞牌</div>
                      </div>
                      <div data-i18n="rule_ai_eff_def3" data-page-node-id="lTgWdGvm8lNhcHVKmViwkd">3. 暗牌数量</div>
                      <div data-i18n="rule_ai_eff_def4" data-page-node-id="5Y59mYIYNBOwm6jLsVifKc">4. 路牌区空位数量</div>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-purple-500/30" data-page-node-id="2QOlpppKIgDfIwNshzWVZH">
                  <div class="text-purple-300 font-bold mb-2" data-i18n="rule_ai_strategic_principles" data-page-node-id="aAmBX2qJfudeWnKtoDtQD8">【战略总原则】</div>
                  <ul class="space-y-1 pl-4 text-gray-400 text-xs" data-page-node-id="deTuEPkXzGj69LYJT1lsr5">
                    <li data-i18n="rule_ai_sp1" data-page-node-id="Ju2cVAvebakVFPBTdVfNfp">1. 战略策略总原则包含战术策略所有总原则</li>
                    <li data-i18n="rule_ai_sp2" data-page-node-id="3mFHcOHonj4JUhq5QoGg3E">2. ai方转入战略策略后，不再需要执行战术策略</li>
                  </ul>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-blue-500/30" data-page-node-id="GC0gCJ0axCe3H1JrzsQnXF">
                  <div class="text-blue-300 font-bold mb-2" data-i18n="rule_ai_s_hand" data-page-node-id="uEFPqLuNUZqMt8jSlZ3jlZ">1.0 【手牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="e6larHa4dxnVbmVeojhLQk">
                    <div class="flex items-start gap-2" data-page-node-id="FaLvaTfJdI0hbHxjbnLs4r">
                      <span class="text-blue-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_hand_1_1" data-page-node-id="tmJX0Tun4uzqM2lMNmu818">1.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_hand_1_1_desc" data-page-node-id="zYFP4zzD3sbhl62VdhFn60">ai方放置可以组成更高牌型的手牌</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="2HyLCpuZqvg2ZSb0Fz3KkJ">
                      <span class="text-blue-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_hand_1_2" data-page-node-id="pcXKMZMR5UHbOGf6B4vBZm">1.2：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_hand_1_2_desc" data-page-node-id="4p7yBHnZdO9TkYPgIH88SA">ai方打出可以执行匹配操作的手牌，此手牌需要具备以下条件之一，否则跳过此策略：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="09JqQAEDXG4ru8QzAxdVva">
                      <div data-i18n="rule_ai_sup_no_surround" data-page-node-id="DjQomZbc8v7DjxKv8aMGLr">• 援牌，且执行援牌后，无法被对方明牌执行围牌</div>
                      <div data-page-node-id="UXf52yAZOk6SDuzbmsAIBG">• 围牌</div>
                      <div data-i18n="rule_ai_drag_key" data-page-node-id="jgS976acAX3NRJQDPFVqSx">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-i18n="rule_ai_crash_key" data-page-node-id="f5XA6G2QG3pdZV99yJAFFS">• 对对方的"关键牌点"执行撞牌</div>
                      <div class="pt-1" data-page-node-id="AdDnJnAld3uK3iZRug8Bb2"><strong class="text-amber-300" data-page-node-id="KG5I57Dk1Q9UNvBtuLX24j">关键牌点：</strong>最大牌面中存在的牌点；"关键牌点"具有优先级：相同点数越少的关键牌点，被执行的优先级越高</div>
                      <div data-i18n="rule_ai_crash_when_lower" data-page-node-id="osHX0fDGptrxOVtsZOZWF7">• 牌面小于对方时，执行撞牌</div>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-green-500/30" data-page-node-id="LlzXRDGpdPMObQJgFol5My">
                  <div class="text-green-300 font-bold mb-2" data-i18n="rule_ai_s_deck" data-page-node-id="pKspH5H3Vk8rVsJYlZs0lb">2.0 【牌堆策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="P99QyB1msu7td9vbRpnuRp">
                    <div class="flex items-start gap-2" data-page-node-id="DCbkmy1hLOnmAAPnwQUTl2">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_deck_2_1" data-page-node-id="HIKMofYG7HM4asnzJHHE9W">2.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_deck_2_1_desc" data-page-node-id="WAIEszVOUu7nTLoF2udxej">ai方抽取牌堆打出；此牌堆可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="6anAQ6Tnm0iUO7CUJ0Fhu0">
                      <div data-page-node-id="Apd03DlwYqPGRnffzLcDbv">• 援牌，且执行援牌后，无法被对方明牌执行围牌</div>
                      <div data-page-node-id="Is3aFC3bKbqEbcJ0nRDDyB">• 围牌</div>
                      <div data-page-node-id="dHHj2LOl8asjHGYn2hTq48">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-page-node-id="MVbVn6BTp018GxF8AGR6Yi">• 牌面小于对方时，执行撞牌</div>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-orange-500/30" data-page-node-id="oEYkxtr5r0ODBa2o94kXBl">
                  <div class="text-orange-300 font-bold mb-2" data-i18n="rule_ai_s_dark" data-page-node-id="04LaDl1JAEBhyD9ASGAbJY">3.0 【暗牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="AAo1LzBLiWvhSOyBBZ4EDi">
                    <div class="flex items-start gap-2" data-page-node-id="BnJ4eM61LaO0tpXG2HH9e8">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_dark_3_1" data-page-node-id="4F6FzyoQ9PRqCXQ9zvMHIc">3.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_dark_3_1_desc" data-page-node-id="bM5H8t841pzIs3AzOK93MD">ai方优先选择对方"关键牌点"数量最多/次选对方存在最高级"关键牌点"/末选自己关键牌点数量最少的一路，打出暗牌；此暗牌可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="1rS4Fg4U3jIHNEwSsGy5gy">
                      <div data-page-node-id="l5vmsg6pFnb60O5GXXf8Ui">• 援牌，且执行援牌后，无法被对方明牌执行围牌</div>
                      <div data-page-node-id="OsmP8gh90Arn51BXt9vDka">• 围牌</div>
                      <div data-page-node-id="WN6O2IaJhw0oImJYqi2td6">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-page-node-id="52JeTKu6ldkn09Dfyqmw5M">• 牌面小于对方时，执行撞牌</div>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-red-500/30" data-page-node-id="poAWKjT0i5wqk84hCsRVVZ">
                  <div class="text-red-300 font-bold mb-2" data-i18n="rule_ai_s_revealed" data-page-node-id="r3p3SlU82eOUYz7gzQlL1T">4.0 【明牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="vGD6bpZ8GuoYn6WQrg0Kgl">
                    <div class="flex items-start gap-2" data-page-node-id="HqRdgjCDQ3iMRVCEqjEzsz">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_rev_4_1" data-page-node-id="mJErEoJLJGlhBlaBedJCxh">4.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_rev_4_1_desc" data-page-node-id="IIpOEN3JE4iKTSFzqxDCPp">ai方选择对方"关键牌点"数量最多的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="GApbQkrEfrIbkQuDKRmihk">
                      <div data-page-node-id="GV6uJ5mkyVkcGT05ijaVJI">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-page-node-id="9gRlyVd60LcUpbFOe6vT9y">• 牌面小于对方时，执行撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="pB6sjs4iGstfcZDFucH9wa">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_rev_4_2" data-page-node-id="J8vstthkRSR0ocKzRKhzB4">4.2：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_rev_4_2_desc" data-page-node-id="H9AHzOBYXD7QFfKrjM3Iwi">ai方选择对方存在最高级"关键牌点"（相同点数最少的关键牌点）的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="M9AKA7Hl6EjFZQd8Ttc4uH">
                      <div data-page-node-id="uO9GSolvMZAvO3eG4yQBfV">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-page-node-id="lABtKlUxfPDysOSzpPRxps">• 牌面小于对方时，执行撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="O8YsnCWXKEpuDNi8N0amUl">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_rev_4_3" data-page-node-id="YAJr9OBCtoaSyHielAEMU8">4.3：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_rev_4_3_desc" data-page-node-id="83piXlbLpl4gmnT7wPct0d">ai方选择自己关键牌点数量最少的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="lLntuIIPewxmCjPviM3oNH">
                      <div data-page-node-id="QwUWFqODxG6y7pagReD6UX">• 援牌，且执行援牌后，无法被对方明牌执行围牌</div>
                      <div data-page-node-id="KFj1AlYb5JSaHjwg3snfBG">• 围牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="dD9lnbBkdlgeIvuBaVUyBW">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_rev_4_4" data-page-node-id="QxFFXR6JM6nptjFDHO8E4u">4.4：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_rev_4_4_desc" data-page-node-id="Uo07RY9hkwvvYnvIKVsqRu">ai方选择可以触发以下任意条件的一路，打出明牌并执行其中一项匹配操作：</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="aEpkCK2LoJ9zByTbmGAFt2">
                      <div data-page-node-id="QlREgtVGSE0yaQ2MuboBoI">• 援牌，且执行援牌后，无法被对方明牌执行围牌</div>
                      <div data-page-node-id="BhGpA7uwo4kvXCFPcWXYBG">• 围牌</div>
                      <div data-page-node-id="tJhWpBCluqdkAdFQuPG8Tg">• 对对方的"关键牌点"执行拖牌</div>
                      <div data-page-node-id="3pQnDJYaGwDVb5nnPB86rR">• 牌面小于对方时，执行撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="Ks8Vg6o1y5O3ZVvTbX2UFt">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_s_rev_4_5" data-page-node-id="As6Wmeou3UTm0ASrVvpHiH">4.5：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_s_rev_4_5_desc" data-page-node-id="2fL8Jjwm6HFNbrtkatkGQt">ai方选择任意一路，放置明牌</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-yellow-500 overflow-hidden" data-page-node-id="K66lnBa1IpCf2F18j2GcWs">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="PHWCRqkhtf0OXdREsAV4Jm">
              <span class="text-lg" data-page-node-id="WEgwVbdO2iHeQeqOYwavRo">🎯</span>
              <span class="font-bold text-yellow-400" data-i18n="rule_ai_tactical_title" data-page-node-id="scMiNEhk6Vatd6ZonTTMxu">AI战术</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="JtTunuBC5Wim9tZEG7CTmp">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="XsYjLzVlfLOzCd1gtdq5dG">
              <div class="space-y-4 text-gray-300 text-sm" data-page-node-id="udsZR15jv5EdYrYGMYAnYo">
                <div class="bg-gray-700/30 rounded p-3 border border-blue-500/30" data-page-node-id="etlcEgtAzmPMK7L7OEOfJW">
                  <div class="text-blue-300 font-bold mb-2" data-i18n="rule_ai_t_principles" data-page-node-id="x9HHK9GANM2IF2MVLW4E3p">【总原则】</div>
                  <ul class="space-y-1 pl-4 text-gray-400 text-xs" data-page-node-id="iYTyI0TP4nQJmdR26RdB8H">
                    <li data-i18n="rule_ai_t_p1a" data-page-node-id="RVEIpyj6OvqQpMlmv1sUrF">1. ai方的路牌区存在空位时，每次出牌始终从<strong class="text-blue-300" data-i18n="rule_ai_t_p1a_strategy" data-page-node-id="SLOWupLPnaBrMsoyqApC0P">手牌策略1.0</strong>开始执行条件</li>
                    <li data-i18n="rule_ai_t_p2a" data-page-node-id="lcw1kBJO660pNeomiG9urD">2. ai根据优先级顺序执行策略，<strong class="text-blue-300" data-i18n="rule_ai_t_p2_stage" data-page-node-id="N6us7h8LBx7MOtaTBeFuFr">1.0、2.0、3.0、4.0是阶</strong>，<strong class="text-blue-300" data-i18n="rule_ai_t_p2_level" data-page-node-id="OfbQHtvgtgQ6J7EtIFYKvd">1.1、1.2、1.3...是级</strong></li>
                    <li data-i18n="rule_ai_t_p3a" data-page-node-id="O0tlCxZrikmAytVPW2kkz0">3. ai方当前优先级条件不满足时，<strong class="text-blue-300" data-i18n="rule_ai_t_p3_next_level" data-page-node-id="VBvUN4rFO20iaEdksGz1uJ">自动转入下一级策略</strong>；最后一级策略无法执行时，<strong class="text-blue-300" data-i18n="rule_ai_t_p3_next_stage" data-page-node-id="fdfM0R3BHHYKVvJfFg0pbG">自动转入下一阶策略</strong></li>
                    <li data-i18n="rule_ai_t_p4a" data-page-node-id="PYnsTgewBDCofgVFQrLFdL">4. ai方自动转入下一阶策略时，<strong class="text-blue-300" data-i18n="rule_ai_t_p4_from" data-page-node-id="YIRSJcf9AxON4ZrJNWG4VR">从X.1策略开始执行</strong>（如：自动转入牌堆策略时，从2.1策略开始执行）</li>
                    <li data-i18n="rule_ai_t_p5a" data-page-node-id="RBWxNf3pQai4rE9CriXNrm">5. ai方每次出牌根据<strong class="text-blue-300" data-i18n="rule_ai_t_p5_prev_type" data-page-node-id="RqKmzidKD5Ss9lyNy6Yr4N">上回合打出/放置的功能牌类型</strong>，从<strong class="text-blue-300" data-i18n="rule_ai_t_p5_same_stage" data-page-node-id="FxJyAQTCyR2W4dv1Iat0CY">同类策略X.0</strong>开始执行（如：上回合打出的是明牌，则此次从明牌策略3.0开始执行）</li>
                    <li data-i18n="rule_ai_t_p6a" data-page-node-id="Pq4Z1QrA8bJlMXyMwVDrJJ">6. ai方任意一种功能牌=0时，<strong class="text-blue-300" data-i18n="rule_ai_t_p6_no_affect" data-page-node-id="5BjvMSe6w5pqAuMwVauHPG">不影响转入策略</strong>，继续按照优先级执行即可</li>
                  </ul>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-green-500/30" data-page-node-id="cRsN7e8mydsRDy5ZdB0yxy">
                  <div class="text-green-300 font-bold mb-2" data-page-node-id="CvD9VlJeZWslq1ILAhO8KN">1.0 【手牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="RmCSnTkWcanmJRi6XanGsX">
                    <div class="flex items-start gap-2" data-page-node-id="WxF6Y5Cyk74EB71PPlclPC">
                      <span class="text-amber-300 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_defend" data-page-node-id="wiQeWunnxCDpz6SefuIgYX">防守：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_defend_cond" data-page-node-id="JJPwCWLu2vFxq4PaEO3Npu">（ai方劣势路≥3时，且路牌区空位数量≤2时，<strong class="text-amber-300" data-i18n="rule_ai_t_defend_trans" data-page-node-id="6cjwgY0bl9SYDWv1bwuDld">转入明牌3.5策略</strong>）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="XOFoSyeBXtwZESI5mhYrLw">
                      <span class="text-amber-300 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_bide" data-page-node-id="mC45HhDIuZZBWiqzHtyYgX">隐忍：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_bide_cond" data-page-node-id="5NkAjNdXPldv9NjGUGO0O7">（ai方优势路=3时，且路牌区空位=1时，且手牌保留"花牌"时，<strong class="text-amber-300" data-i18n="rule_ai_t_bide_trans" data-page-node-id="Dlf0d6YA4qv2jz6IRZQDaa">转入明牌3.1策略</strong>）"花牌"：JQK</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="A5MXHFVpREhCdsgAq5z88f">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-page-node-id="Qm7b5loRrMpsDDAO2PmCTP">1.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_h_1_1_cond" data-page-node-id="WVZ3RQkDGdJkGn4BP8B34A">ai方即将出牌的位置，其对路无牌时，<strong class="text-green-300" data-i18n="rule_ai_t_h_1_1_action" data-page-node-id="TZoIG88UHrA6XwsNQ7RhPF">随机放置≥8点的手牌</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="wU3P3MVcxCqF7bg5UzBTtF">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-page-node-id="BWLC7tVh3fThXFkdnYm6QC">1.2：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_h_1_2_cond" data-page-node-id="dKwOOfSS1YqT2OgeBzBIX3">ai方即将出牌的位置，其对路有牌时，<strong class="text-green-300" data-i18n="rule_ai_t_h_1_2_place" data-page-node-id="YtiCHwJuKCgcOySZRbTnRA">"放置"可以让此路获胜的手牌</strong>；"放置"：不执行匹配操作</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="cnZ2mvbqCUrPXFSOM5VFkl">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_h_1_3" data-page-node-id="tNTVxGqDC0aFhgQSaEmrlS">1.3：</span>
                      <span class="text-gray-400" data-page-node-id="O3TnIwJLibSAW0LEgYApGe">ai方即将出牌的位置，其对路有牌时，<strong class="text-green-300" data-i18n="rule_ai_t_h_1_3_play" data-page-node-id="8paDG0FfMh2AXgD4EWOb4i">打出可以触发匹配操作的"手牌"</strong>；此"手牌"需要具备以下条件之一，否则跳过此策略</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="yn2hIz6oOvNnpvirPxcQd2">
                      <div data-page-node-id="tn62ggyU9bJxOasg6RQCoT">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="LqZOWNZhx40WEIAfVQofmD">• 围牌增加我方此路最大牌点并获得优势</div>
                      <div data-page-node-id="0Q7WGuwTtkaFfhF62Ecuvf">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="EWcTwnABz1cA0O6vXJeK1V">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_h_1_4" data-page-node-id="89KUqHDSVQv7ah1CLwDOOx">1.4：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_h_1_4_cond" data-page-node-id="rUVFogOWq7L5Gzz4Lf1lCp">（ai方优势路=4时，且明牌数>0时，<strong class="text-amber-300" data-page-node-id="T0IkAk20HFPiwo5vbI3l9J">转入明牌3.1策略</strong>）</span>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-green-500/30" data-page-node-id="Q928GQRiyETD0rTrzZIYmV">
                  <div class="text-green-300 font-bold mb-2" data-page-node-id="7JhjCV85sM5yOmBPh9jmGT">2.0 【牌堆策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="xLCMGvtFGQ9dMGRruDaWXN">
                    <div class="flex items-start gap-2" data-page-node-id="RuO2CMbekIv1Jt3y7BOYMd">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-page-node-id="BMDAwi4vABYliCDsbgwP3b">2.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_d_2_1_cond" data-page-node-id="8QgrP56p7MAq7zoSHoIMQl">ai方的路牌区有空位时，<strong class="text-green-300" data-page-node-id="QQHndUNZBTqd2M51prUYjl">抽取牌堆打出</strong>（此牌堆未使得此路获胜时，转入下方备注）</span>
                    </div>
                    <div class="pl-4 border-l-2 border-amber-500/40 space-y-1 text-gray-400" data-page-node-id="FerIS3oh4BeIpFYPgov2ql">
                      <div data-page-node-id="tKNvw3xJqddeGzCEFYMbSY"><strong class="text-amber-300" data-i18n="rule_ai_t_note" data-page-node-id="spcFQQARVKdTTRZX1UUnZ0">备注：</strong>此牌堆可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行</div>
                      <div data-page-node-id="CgO2LOqhxNf5oTvPdjITcw">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="wJFZ57Ds5jNyCqQMgVLsF4">• 围牌增加我方此路最大牌点</div>
                      <div data-page-node-id="mFGQVGoGc6Zut09a25VyMV">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="YUByetJizrplfYdTTWkCP7">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_d_2_3" data-page-node-id="OhjDkOzn616ypEVkMOU08y">2.3：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_d_2_3_cond" data-page-node-id="ZMPuiw8qIQCaWxRyPc60PB">（ai方劣势路=4时，<strong class="text-amber-300" data-page-node-id="h14SAqvdkSfy8ZFJFSFXNa">转入明牌3.5策略</strong>）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="3dA9Cfd7jmrxOaKLHkcvCA">
                      <span class="text-green-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_d_2_4" data-page-node-id="4nSxLLdgXAFUOO3fAVt5lx">2.4：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_d_2_4_cond" data-page-node-id="joABYtEaPnimb4VS1WSEx2">（ai方劣势路=3时，<strong class="text-amber-300" data-i18n="rule_ai_t_d_2_4_trans" data-page-node-id="pUF9OojWXYPiPNmWjkl99N">转入暗牌4.3策略</strong>）</span>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-orange-500/30" data-page-node-id="wPu4zh0qtcWMGoD98BY8jK">
                  <div class="text-orange-300 font-bold mb-2" data-i18n="rule_ai_t_revealed" data-page-node-id="YTkf1oPOjbpyXZqtif01T0">3.0 【明牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="jmrBlfGaLOSs4R1T6ZdTey">
                    <div class="flex items-start gap-2" data-page-node-id="fQdE8Zrn4mmLhlF5BDw3We">
                      <span class="text-amber-300 font-semibold whitespace-nowrap" data-page-node-id="853mGwWdXkZVXElELlWkiX">防守：</span>
                      <span class="text-gray-400" data-page-node-id="Em5FAXNzFlFNFZgpUpXg5m">（ai方劣势路≥3时，<strong class="text-amber-300" data-page-node-id="9WeXI12G0rBO6u5PrIAo1f">转入明牌3.5策略</strong>；3.5失败后继续执行3.6策略；3.6失败后转入暗牌4.3策略）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="ocqHRrFbUondt1jHFYmnXk">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-page-node-id="SzeO4xaYi4lV7qmcDRMsHe">3.1：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_r_3_1_a" data-page-node-id="Vy2hb5dHlHSpZRGCmSDhwJ">ai方在<strong class="text-orange-300" data-page-node-id="CIUKSUHYHtTgz8I8r6synf">未获胜</strong>的那些路中，选择<strong class="text-orange-300" data-i18n="rule_ai_t_r_3_1_opp_max" data-page-node-id="ty4QPO2eGGx3HwaVK6H17M">对方牌点最大</strong>的一路，<strong class="text-orange-300" data-i18n="rule_ai_t_r_3_1_place" data-page-node-id="1BFN9cy8D8ZBv8XNLLwpJQ">放置可以让此路获胜的明牌</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="dc5WzxDDn1dPdtCAGCW2Zs">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_2" data-page-node-id="bNxq6PkMWLdb9T6ftDlHae">3.2：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_r_3_2_a" data-page-node-id="SJAe341S8jwhVLu9tcHTwW">ai方在未获胜路，<strong class="text-orange-300" data-page-node-id="5En2wVJAzTrnNicf77mF48">打出可以执行匹配操作的明牌</strong>；此明牌需要具备以下条件之一，否则跳过此策略</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="3WRQJvyhiYtOiTtMNZBmsO">
                      <div data-page-node-id="LUz50CthpRVqHCaNqdCzHy">• 围牌增加我方此路最大牌点并获得优势</div>
                      <div data-page-node-id="yOqWg53Pc1r3cvfbjIsNaJ">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="WdmGGJDscRAnIObErHtA8N">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="HtBXZUr9099IraKyaYaDZ7">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_3" data-page-node-id="5VvBH24DQ8AixYZFsN888I">3.3：</span>
                      <span class="text-gray-400" data-page-node-id="X4VccAiAvTc98x369NP1BE">ai方<strong class="text-orange-300" data-i18n="rule_ai_t_r_3_3_has_dark" data-page-node-id="HzrCkW0hdPojEmSyxy2WSq">有暗牌</strong>时，<strong class="text-amber-300" data-i18n="rule_ai_t_r_3_3_trans" data-page-node-id="BHMCgdF1YIO2FLXhUSnAWE">转入暗牌4.1策略</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="KICvJg06yGwD2wGQbbw27b">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_4" data-page-node-id="UySzdk0wmv2Rh9fDE4qYVV">3.4：</span>
                      <span class="text-gray-400" data-page-node-id="uQ8vMFD5qsjxwAZKogDZPi">ai方在<strong class="text-orange-300" data-page-node-id="4GhrsRgcTTQr2mTmCWcRc1">未获胜路</strong>中，<strong class="text-orange-300" data-page-node-id="x46vL0t2jpyRAmYS0kLPXi">放置明牌</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="yKHME7eVwU6Jf5oNQG1bjt">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_5" data-page-node-id="eXmHoqjlvxOn9mdCQBXX68">3.5：</span>
                      <span class="text-gray-400" data-page-node-id="mUy7BUpTWMpADHsxS6bYFr">ai方在<strong class="text-orange-300" data-page-node-id="pXCKAEWvAoEp6U5G9VIJ03">劣势路</strong>中，选择<strong class="text-orange-300" data-page-node-id="8l0bEZKzYD6ruI3hZRILjV">对方最大牌点中最小</strong>的一路，<strong class="text-orange-300" data-i18n="rule_ai_t_r_3_5_place" data-page-node-id="A48BqhcByMJJgYcAzdp4Or">放置可以让此路平势/优势的明牌</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="ICllMCSF87Y3dSmbTus7fb">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_6" data-page-node-id="jC0UlBhMyckwjDYMUZHIw5">3.6：</span>
                      <span class="text-gray-400" data-page-node-id="cXmP9WYuW3Zy2UsH7mPA9f">ai方在<strong class="text-orange-300" data-page-node-id="gnYjMR4VT4Vish3wM0Sz3Q">劣势路</strong>中，<strong class="text-orange-300" data-page-node-id="82jyeAaIWfgvFw7PZ3qwZq">打出可以执行匹配操作的明牌</strong>；此明牌需要具备以下条件之一，否则跳过此策略</span>
                    </div>
                    <div class="pl-6 space-y-1 text-gray-400" data-page-node-id="WoH4CVUPBlqNJx5gis8ej3">
                      <div data-page-node-id="vydmyBRURo9j6BbLCwIgji">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="lWPYRhUHEOJT114TNAMHPM">• 围牌增加我方此路最大牌点并获得优势</div>
                      <div data-page-node-id="FTBBQVXVTTpVrSIrMxEONU">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="g2DxPFkAYaLDPx8fEwBFAe">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_7" data-page-node-id="c8PqeWwcJxEEjijEnEMNul">3.7：</span>
                      <span class="text-gray-400" data-page-node-id="8zxIUjJSXckyfQby0QJWYv">ai方<strong class="text-amber-300" data-page-node-id="AvUl7eAyawcHdnCzsfnMAP">转入暗牌4.3策略</strong>（无条件）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="IQ50k4TUjnJ68M4vpBEA1b">
                      <span class="text-orange-400 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_r_3_8" data-page-node-id="xU0k5ir4z6Qt2QlMdVKpG1">3.8：</span>
                      <span class="text-gray-400" data-page-node-id="jCwgk3sMmgrd8auBuIVTH1">ai方在<strong class="text-orange-300" data-page-node-id="cZ8AH8upPMQXXPBi7zgz0E">劣势路</strong>中，<strong class="text-orange-300" data-page-node-id="nJJFkFAucJrelLCYOWDjgn">放置明牌</strong></span>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-red-500/30" data-page-node-id="kAMaQLHGSs2EmbQjsCVMJn">
                  <div class="text-red-300 font-bold mb-2" data-i18n="rule_ai_t_dark" data-page-node-id="pagJx8q5ETV4COKBL1Ettk">4.0 【暗牌策略】</div>
                  <div class="space-y-2 pl-2 text-xs" data-page-node-id="kgCPNnCKzTp8Bch6RAK4KU">
                    <div class="flex items-start gap-2" data-page-node-id="A2WSQ4T4NYTne5pxljcChx">
                      <span class="text-amber-300 font-semibold whitespace-nowrap" data-page-node-id="SwfBPxF3LSjqETdAosgnNt">防守：</span>
                      <span class="text-gray-400" data-page-node-id="DtFbNx6uocsrkzW5s5ui6j">（ai方劣势路≥3时，<strong class="text-amber-300" data-page-node-id="VMZyJBIWFJDcUT4EHsvZDl">转入明牌3.5策略</strong>）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="q6l8C2VCzMS1ftVRARFkZI">
                      <span class="text-blue-300 font-semibold whitespace-nowrap" data-i18n="rule_ai_t_attack" data-page-node-id="Bj0zSYm4PjAe03isA5shwl">进攻：</span>
                      <span class="text-gray-400" data-i18n="rule_ai_t_attack_cond" data-page-node-id="588s4S7BhPFIaQYgNpUSXa">（ai方优势路≥3时，<strong class="text-blue-300" data-page-node-id="iLRvBpiOuY0QZQqamCsKZe">转入明牌3.1策略</strong>）</span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="yFKAtLBuOCduDlJNva49Cg">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-page-node-id="CJDxXBoWY8yzCybJPSvxTI">4.1：</span>
                      <span class="text-gray-400" data-page-node-id="gGKxSBfscwRVynEixLT8Ya">ai方在<strong class="text-red-300" data-page-node-id="sasJfF4oaYBBGJLoZ5b4k2">未获胜路</strong>中选择<strong class="text-red-300" data-page-node-id="htPwf6skF81FCAAXzrzt6T">对方牌点最大</strong>的一路，<strong class="text-red-300" data-page-node-id="jbthpxKOB3M8oOB6PvagSn">打出暗牌</strong>（若此暗牌可以触发匹配操作，则转入备注）</span>
                    </div>
                    <div class="pl-4 border-l-2 border-amber-500/40 space-y-1 text-gray-400" data-page-node-id="s27Kw6Iq6EmrEGI7CjrcOB">
                      <div data-page-node-id="lkj8fnpemtA6YeMXoudR9U"><strong class="text-amber-300" data-page-node-id="PZKK7xtBjpd6Ek3IplntYJ">备注：</strong>此暗牌<strong class="text-amber-300" data-page-node-id="wRaBHPOE3uwSdLLt6cy714">未使得此路获胜时</strong>（暗牌点数 ≤ 对方此路最大牌点），检查以下条件，满足其中之一则执行匹配操作，没有则不执行</div>
                      <div data-page-node-id="DMJVRp6kF604Fxfz0z8OYq">• 围牌增加我方此路最大牌点</div>
                      <div data-page-node-id="Ut9hqUBhJG5tuJE8r9oI64">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="74hDRfC2XybDFCAjTAzpv5">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="nFTseoDnexZ8DRf5oxBeV1">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-page-node-id="sqTqhBwzwdy2FQZxiyKLCw">4.2：</span>
                      <span class="text-gray-400" data-page-node-id="wDlMxiX1EQPiva6MWcXWr7">ai方<strong class="text-amber-300" data-page-node-id="wn5fsPdsezjtuMOnIgOqFd">转入明牌3.1策略</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="D7qjuWvPQDA5JOkNk6r9Ky">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-page-node-id="8V3wFqvxOzIu0mATMNfNY3">4.3：</span>
                      <span class="text-gray-400" data-page-node-id="vkyA3xrKuZLCLfBx56mOzA">ai方<strong class="text-red-300" data-i18n="rule_ai_t_d_4_3_slots" data-page-node-id="1eGAkYYEubzDOYMe8LIEAw">路牌区空位≥1</strong>时，<strong class="text-amber-300" data-i18n="rule_ai_t_d_4_3_trans" data-page-node-id="daHBGJT0Jo1wH7kbICzCLr">转入手牌1.1策略</strong></span>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="TU1lB3UIWVAjnKADwoRFnY">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-page-node-id="yzji0MPBAeZ2CDdYxoEOUl">4.4：</span>
                      <span class="text-gray-400" data-page-node-id="z95Or5b8VuymuXTCMW8ohS">ai方在<strong class="text-red-300" data-page-node-id="BM00qB65UwIt9PQHsN8iCP">劣势路</strong>中优先选择<strong class="text-red-300" data-i18n="rule_ai_t_d_4_4_opp_low" data-page-node-id="Em0Xus3gnZrKuXcTOShCxc">对方最大牌点≤6</strong>的一路/次选<strong class="text-red-300" data-i18n="rule_ai_t_d_4_4_variety" data-page-node-id="sHe6AUsBMPqUnDVtBzTpzu">不同牌点数量≥5</strong>的一路/末选<strong class="text-red-300" data-page-node-id="TuqFKbYohYdEheQHYHIPCC">最大牌点中最小</strong>的一路，<strong class="text-red-300" data-page-node-id="EHjdAoguHI3q9iDhCggEtr">打出暗牌</strong>（此暗牌未使得此路平势/优势时，转入下方备注）</span>
                    </div>
                    <div class="pl-4 border-l-2 border-amber-500/40 space-y-1 text-gray-400" data-page-node-id="3Pnl7MxAFcijsQudlfe9xU">
                      <div data-page-node-id="5nxrJsDAMSzrwETV4ojx7Q"><strong class="text-amber-300" data-page-node-id="8Tos6ltIs1H72y2SlQWig6">备注：</strong>此暗牌可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行</div>
                      <div data-page-node-id="9qPS5SgLKW8UTK6AlEUza8">• 拖走对方此路的最大牌点</div>
                      <div data-page-node-id="Gk6cHxRAqgQuZBT00x0xIg">• 围牌增加我方此路最大牌点</div>
                      <div data-page-node-id="Y45pdT58hnk0ho8raHsWMf">• 撞牌</div>
                    </div>
                    <div class="flex items-start gap-2" data-page-node-id="FYMr3xPzOAFnirMGc6MgMa">
                      <span class="text-red-400 font-semibold whitespace-nowrap" data-page-node-id="cb9LRUPhFDl92Bt8rw5ZTY">4.5：</span>
                      <span class="text-gray-400" data-page-node-id="072yAnn93iSydocbVq6nNF">ai方<strong class="text-amber-300" data-i18n="rule_ai_t_d_4_5_trans" data-page-node-id="ymenO4B6JD9QIDceWPRM1H">转入明牌3.8策略</strong></span>
                    </div>
                  </div>
                </div>

                <div class="bg-gray-700/30 rounded p-3 border border-purple-500/30" data-page-node-id="L65GvqYGi1ZCBNhy7wA1GZ">
                  <div class="text-purple-300 font-bold mb-2" data-page-node-id="XVfl2tY8tdWvr3uHrX87Zf">【策略优先级图示】</div>
                  <div class="text-xs text-gray-400 pl-2 space-y-1" data-page-node-id="hGERBCpi5YpmUJ2dbDbBee">
                    <div class="flex items-center gap-2" data-page-node-id="rNJVXka6XyNQGABSelKivP">
                      <span class="text-green-400" data-page-node-id="UqRivRmjsFjvgHWKG1zI1h">1阶(手牌)</span>
                      <span class="text-gray-500" data-page-node-id="Neg3uKDAKWRRsScRvZEOEy">→</span>
                      <span class="text-green-400" data-page-node-id="ZwzdX9VWqRwAHn5diPx0vM">2阶(牌堆)</span>
                      <span class="text-gray-500" data-page-node-id="95KTn0NkIaq2JFexQAAkg3">→</span>
                      <span class="text-orange-400" data-page-node-id="piXHnUPLzDDrf8hk7nZFjz">3阶(明牌)</span>
                      <span class="text-gray-500" data-page-node-id="BOJ9OmfSNtyrxhTfqXq2Qi">→</span>
                      <span class="text-red-400" data-page-node-id="FKZU63G4cDMJXzHvKDaJ0T">4阶(暗牌)</span>
                    </div>
                    <div class="text-gray-400 mt-2" data-page-node-id="XmCk8QKNErwldlUMF7eQBQ">每阶内部按级顺序执行：1.0 → 1.1 → 1.2 → ... → 1.n，若1.n无符合条件的牌，则进入2.1</div>
                    <div class="text-gray-400" data-page-node-id="mfTz9Qw0hxCO0i94ZllcHm">上回合打出的牌类型决定本回合起始阶，有路牌区空位则强制从1阶开始</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-cyan-500 overflow-hidden" data-page-node-id="Fy5wX88coj8i14NCxKLwEe">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="9YmqSNwYqthJctbelxsPTd">
              <span class="text-lg" data-page-node-id="QkKam8U9z2oPfpLJf7eHwE">⚙️</span>
              <span class="font-bold text-cyan-400" data-page-node-id="MWzForXWbo8shWoLGOElfe">游戏配置参数</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="pVwmXR9AKGUjJgOgQWQ5Ef">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="x2VRorfC1JZoAsMLgItQ3W">
              <table class="w-full text-sm text-white" data-page-node-id="pjgNGDtD13EVwQITCaKgXj">
                <thead data-page-node-id="nmNvkqdmyuzFLFYZB7LGRY">
                  <tr class="border-b border-gray-700" data-page-node-id="lNwmk7KKbCjQLaQBrfEBu3">
                    <th class="text-left py-2 px-2 text-cyan-400" data-page-node-id="MVnIzbU5SimG3vAQtSYntg">参数名</th>
                    <th class="text-left py-2 px-2 text-cyan-400" data-page-node-id="DUu5I78KdnRcxFGXIDTKxd">代码值</th>
                    <th class="text-left py-2 px-2 text-cyan-400" data-page-node-id="elBZUQi3HBWQvr0aifMlFV">规则值</th>
                    <th class="text-left py-2 px-2 text-cyan-400" data-page-node-id="11phYAq2zlO8wrVF0xtoOW">说明</th>
                  </tr>
                </thead>
                <tbody data-page-node-id="EJmA1zpeE4RHB2EZcxMGWK">
                  <tr class="border-b border-gray-800" data-page-node-id="GQwszCP0yR5FvCwfZNPVwA">
                    <td class="py-1 px-2" data-page-node-id="gRRklCnXtgcoYRp8CNJlTT">PLAYER_COLOR</td>
                    <td class="py-1 px-2" data-page-node-id="0E7zAwnMniPZnY0XFjFpcS">#3B82F6</td>
                    <td class="py-1 px-2" data-page-node-id="4BuXYc3oYgjeh1i9kOz3e1">#3B82F6</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="6QcNO6hDDEPGoDYAFLcpA7">我方配色</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="odDaN1FKf7aHHPTapslz4v">
                    <td class="py-1 px-2" data-page-node-id="4PpAZGLGQxNb313wACsQf5">OPPONENT_COLOR</td>
                    <td class="py-1 px-2" data-page-node-id="4zUffkbg1kHz1TeivHMtgK">#EF4444</td>
                    <td class="py-1 px-2" data-page-node-id="SXGDAcmi0VGM9DAdwwjBYQ">#EF4444</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="NFA8AcetV0GpDXsXoaCKs3">对方配色</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="FbypbGUIfHeugJtPtG4tX9">
                    <td class="py-1 px-2" data-page-node-id="jb8Bdk9cT2F1NPoKarD6Vs">NEUTRAL_COLOR</td>
                    <td class="py-1 px-2" data-page-node-id="7DyR2LwwoGkr8UAmaAyniz">#A855F7</td>
                    <td class="py-1 px-2" data-page-node-id="MxWFzw5em6fJUWunDAgdPB">#A855F7</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="RrW5z10csNBjVnk3cBMWVa">中立区配色</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="TbiYuJTCbVpWiJJBqfGI9Z">
                    <td class="py-1 px-2" data-page-node-id="9DMAQw1bOuWAHI4gNLM0Gs">ACCENT_COLOR</td>
                    <td class="py-1 px-2" data-page-node-id="iTkTxwuYwe4IFnUV8TZplk">#FBBF24</td>
                    <td class="py-1 px-2" data-page-node-id="RI5Nt1lZ7dt3f3tUZsviH2">#FBBF24</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="UwEcO2FacwFNow30RKsEvc">强调色（金色）</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="PbbSLg05ZmutNEAjJG63NI">
                    <td class="py-1 px-2" data-page-node-id="qUzsiX6RmpS6d1WbATGNkf">HAND_SLOTS</td>
                    <td class="py-1 px-2" data-page-node-id="ZjcE6cOzaLaHuyJiA1LDcE">6</td>
                    <td class="py-1 px-2" data-page-node-id="sbAc0uZmHYG7yRCSe6bI4u">6</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="FWVGBwnQ4T5nnjOZN0H1Lj">手牌槽位数</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="XtJgFQxJfuIfaeAxt0mmDj">
                    <td class="py-1 px-2" data-page-node-id="yYeOGttivJMzjiGgn0oBaM">DARK_CARD_SLOTS</td>
                    <td class="py-1 px-2" data-page-node-id="SclUPdolUZG2vidhbxPQr9">5</td>
                    <td class="py-1 px-2" data-page-node-id="ro72W1CZssrPCpgcx5ENQU">5</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="6Ui8FGIg29GWymrfYiCNoT">暗牌槽位数</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="kf3xI9jqGfEQ7B5mXupLa6">
                    <td class="py-1 px-2" data-page-node-id="aVgkajYYEoHpVRNZXw4P5Q">REVEALED_CARD_SLOTS</td>
                    <td class="py-1 px-2" data-page-node-id="dVCe5bhJgPuUcl7xVDie9j">3</td>
                    <td class="py-1 px-2" data-page-node-id="LnVRpX114CSxLz9OXyWduN">3</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="mSmjajfU8q1PhiWNzGL9HQ">明牌槽位数</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="3NkOVMRIqC7JuFHd1IAlEI">
                    <td class="py-1 px-2" data-page-node-id="cFaJf9GWnU6xnBgAHlbmx9">ROAD_SLOTS</td>
                    <td class="py-1 px-2" data-page-node-id="0Uv5x9poXy1cxXhG5lBTrV">5</td>
                    <td class="py-1 px-2" data-page-node-id="bP4GHd2wjoxWYYCJ6UAdLy">5</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="neO14FBLUCexcd0v3Si1DB">路牌区路数</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="q357ScfWXpJfo6ahKlCdTP">
                    <td class="py-1 px-2" data-page-node-id="ZfXKh7kBwaK2R5AU9Kc6TZ">ROAD_HEIGHT</td>
                    <td class="py-1 px-2" data-page-node-id="mRhuGB1BiUfocNye5YLkw7">720</td>
                    <td class="py-1 px-2" data-page-node-id="CpB02I2XBDFYf2eobg2AS9">720</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="pbpO1cOcl5Ffi58L8dkfsf">路牌区总高度（像素）</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="oEXuubnEUYwpMP5KPY5HsZ">
                    <td class="py-1 px-2" data-page-node-id="87OfFKSJRcNCw5Ncp5GZ7G">FIELD_SLOT_HEIGHT</td>
                    <td class="py-1 px-2" data-page-node-id="UQ0A3lTUxGglJHYRn8NLvy">240</td>
                    <td class="py-1 px-2" data-page-node-id="DTyqPbLQI2mHXUThMtZhtk">240</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="PSybmJ9uhtdKqUdpwoMp8W">场牌槽位高度（像素）</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="4Nu0mltkG1bHyjcEtwFzAK">
                    <td class="py-1 px-2" data-page-node-id="7THh5J3fq7iBc4jyZ7kroG">STACK_SLOT_HEIGHT</td>
                    <td class="py-1 px-2" data-page-node-id="82d5dZacKZdBnOI02Cdppy">480</td>
                    <td class="py-1 px-2" data-page-node-id="mh0gyJFgnTHjuBPnAHJqj5">480</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="FgmVNohCCwmiyDODNonPmb">叠牌槽位高度（像素）</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="bAv8imsbGMSH2SFkP2cM40">
                    <td class="py-1 px-2" data-page-node-id="F0PzrQAHr07cSrCCliYiRA">NEUTRAL_SLOTS</td>
                    <td class="py-1 px-2" data-page-node-id="mBY87ov2IQQ9SBxJdt98lj">7</td>
                    <td class="py-1 px-2" data-page-node-id="At4fP7Wp1zoKGAnzwC37fW">7</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="GBqyq5Gwnlgz2IkHiiW5Qm">中立区路数</td>
                  </tr>
                  <tr class="border-b border-gray-800" data-page-node-id="p0I4i9FdhJENdKCHn9fGUw">
                    <td class="py-1 px-2" data-page-node-id="hI3HXQoQ4wXSnEHTpxJcb3">MAX_STACK_CARDS</td>
                    <td class="py-1 px-2" data-page-node-id="IRC88eajDp8aF4r73SWe1A">8</td>
                    <td class="py-1 px-2" data-page-node-id="R7e0ds1RUYYCZ52xhOYEB9">8</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="S3mgf1MEBLPCj041pxmemt">每路最大叠牌数（场牌+叠牌=9张）</td>
                  </tr>
                  <tr data-page-node-id="hhickOEcBQnU89lGETRSrG">
                    <td class="py-1 px-2" data-page-node-id="7sUp2rdbaxD1AQ2Hdh1A99">INITIAL_DECK_SIZE</td>
                    <td class="py-1 px-2" data-page-node-id="Snrk3Sz6xknUrsDLs3413Q">26</td>
                    <td class="py-1 px-2" data-page-node-id="ijOqvFJteQFf1owF9EkFzK">26</td>
                    <td class="py-1 px-2 text-gray-400" data-page-node-id="joIwJumNqnTjJWM98uuLRv">初始牌堆大小</td>
                  </tr>
                </tbody>
              </table>
              <div class="mt-3 text-xs text-gray-500 border-t border-gray-700 pt-2" data-page-node-id="GosNoGpBcpLAcEOjstplia">
                <strong class="text-cyan-400" data-page-node-id="vxXjQaLcOtSqWE7itZrkef">AIConfig 参数：</strong>
                <span class="text-gray-400" data-page-node-id="tBG5eNeUGCkOkxbRflWKqc">strategy.thinkDelay=1000ms | strategy.playDelay=1000ms | strategy.initialDelay=500ms | strategy.useAdvancedAI=true | strategy.randomFactor=0.3 | animation.enabled=true | animation.moveType='hand' | road.preferEmptyRoad=true | road.stackLimit=8</span>
              </div>
              <div class="mt-2 text-xs text-gray-500" data-page-node-id="hojABQP7g1D7XwpTxbzNZZ">
                <strong class="text-cyan-400" data-page-node-id="6XZAig5Fez0QhtF7KEcRdm">ColumnVisibilityConfig：</strong>
                <span class="text-gray-400" data-page-node-id="ISbrhGIsm8vf0lpLG639hm">状态栏/对方牌型/积分栏/我方牌型/拼点栏（display类型）+ 拖牌/撞牌/援牌/围牌/发牌动画（feature类型），默认全部可见，localStorage持久化</span>
              </div>
            </div>
          </div>
          
          <div class="accordion-item bg-gray-800/60 rounded-lg border-l-4 border-green-500 overflow-hidden" data-page-node-id="cMLojq4SZPLFUDFjFKMjuD">
            <button class="accordion-header w-full flex items-center gap-2 p-3 game-cursor-hover hover:bg-gray-700/50 transition-colors text-left" data-page-node-id="LfaXhaHkjKZFKxeQwVW4dk">
              <span class="text-lg" data-page-node-id="yHkieZ4nVwtvsnrvFQakG7">📁</span>
              <span class="font-bold text-green-400" data-page-node-id="F4HwcyshQJLK22dAxbsdNE">代码结构说明</span>
              <span class="ml-auto text-gray-400 text-sm" data-page-node-id="ZPVENaozvi4tNDdw97UuEo">▼</span>
            </button>
            <div class="accordion-content hidden px-3 pb-3" data-page-node-id="DVm3xYqkfMrnOzhRrWPJI5">
              <ul class="space-y-2 text-gray-300 pl-6" data-page-node-id="eu8XGj1SiVVG2HH7vtpzGE">
                <li data-page-node-id="x6w7O5wEROyfdiLF6zKfLa"><strong class="text-green-300" data-page-node-id="XA7h91mI9qteXTuBxtXi8N">代码文件结构（index.html 37571行 + online-client.js 7172行）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="qZP9G0ifCD6XLPKTWDlmQu">  - 第1-11182行：CSS/HTML部分（Tailwind配置、全局样式、主菜单、游戏界面、规则面板、设置面板）</li>
                <li class="text-sm text-gray-400" data-page-node-id="ZkFKar1bvGD2JBQ9BrtDz3">  - 第11183-12282行：JS-1/10 游戏数据配置（GameConfig、SoundConfig、AIConfig、音效播放引擎、DOM引用、GameState）</li>
                <li class="text-sm text-gray-400" data-page-node-id="TNxtCDTj8zGDMRfRIMArAR">  - 第12283-15278行：JS-2~3/10 视觉配置与卡牌渲染（CardFaceConfig、CardBackConfig、CardAnimationConfig、ColumnVisibilityConfig、卡牌渲染函数、游戏缩放工具、叫牌系统）</li>
                <li class="text-sm text-gray-400" data-page-node-id="my6QTL0mHVWaPjep3UiD84">  - 第15279-17314行：JS-4/10 UI交互系统（UI工具函数、规则/设置面板交互、光标/先手/AI策略设置、战场位置/拼点结果/状态栏、回合显示系统）</li>
                <li class="text-sm text-gray-400" data-page-node-id="30qJfXNwVpR5Vf69a0KSI1">  - 第17315-17899行：JS-5/10 游戏状态更新（状态重置、卡牌管理、回合管理、胜负判定）</li>
                <li class="text-sm text-gray-400" data-page-node-id="J6yVvKRhvc0u4ZuAdaDhKR">  - 第17900-18188行：JS-6/10 卡牌管理系统（卡牌创建/洗牌、卡牌放置、拼点计算）</li>
                <li class="text-sm text-gray-400" data-page-node-id="bCVlVxA1IUuE3TI18aS4lk">  - 第18189-22106行：JS-7/10 动画效果系统（火球特效、灰尘轨迹、animateCardMove、animateCrashSequence、粒子系统、能量波特效、匹配提示）</li>
                <li class="text-sm text-gray-400" data-page-node-id="aDiAsKgHgRgNDOpq1UWhaA">  - 第22107-26832行：JS-8/10 游戏核心逻辑（发牌流程、牌型识别、路牌匹配检测/执行、AI匹配执行、AI决策引擎AIDecisionEngine、四人模式回合管理）</li>
                <li class="text-sm text-gray-400" data-page-node-id="s2CLK6qI0SCtjiOEZTKXUF">  - 第26833-28228行：JS-9/10 出牌管理系统（AI出牌、玩家出牌、中立区操作、终止出牌、拼点判定、回合切换）</li>
                <li class="text-sm text-gray-400" data-page-node-id="GGNBEkl21LL8SAhLR6qmgj">  - 第28229-37091行：JS-10/10 UI更新与联机/练习系统（updateUI、得分显示、四人布局、startGame、事件监听、人机练习入口、人机2v1模式、服务器负载、好友/组队系统）</li>
                <li class="text-sm text-gray-400" data-page-node-id="N6YWvkwWCmMYmTdJEUnw1e">  - online-client.js（7172行）：联机客户端（WebSocket通信、匹配系统、房间管理、2v2同步、1v1语音信令、好友/组队API）</li>
                <li data-page-node-id="c46arvwMQrFBZqNfeJ0CB6">&nbsp;</li>
                <li data-page-node-id="hm53yAXnJajNlvCUl1rnch"><strong class="text-green-300" data-page-node-id="4a4ObPcDoaDM2zO4Vplnqz">核心功能模块：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="XTTxqrTgvzlWgf6TzvqzPi">  - PBAIBridge：AI决策桥（ai-core 引擎：规则引擎+离线冠军策略，同源联机AI玩家），公平/全知双档（2026-10-04 全面替换旧战术/战略链）；AIDecisionEngine 仅保留规则工具（合法路/路状态评估）</li>
                <li class="text-sm text-gray-400" data-page-node-id="xJd9adtnu9XKK2CCvuqK8j">  - 匹配动画与我方一致（金色match-glow光环+1.5秒等待+animateCardMove/animateCrashSequence）</li>
                <li class="text-sm text-gray-400" data-page-node-id="V20w2KhYvd2WaNQHVE2vEC">  - 四人模式：2v2人机练习/2v2联机匹配，支持选座、队友同步、回合顺序生成、背景切换</li>
                <li data-page-node-id="cvoF97Hj2bBBNCkYAQJP2W">&nbsp;</li>
                <li data-page-node-id="iZZXv3GTnKtr3vWceJxojM"><strong class="text-green-300" data-page-node-id="KFEKGm2t7ck3FmMm8cwlcs">音效系统配置：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="54OhmjGLDRsCs15ifueP8O">  - SoundConfig：游戏音效/UI音效/危机音乐/胜负音乐统一配置（Web Audio API实时合成）</li>
                <li class="text-sm text-gray-400" data-page-node-id="WphoGrPSLw57coF77rriA0">  - playSound统一入口，支持静音切换和音量控制</li>
                <li class="text-sm text-gray-400" data-page-node-id="R54vpruu7k4l1X6PdsGDBG">  - 音量夹逼保护：所有音量赋值使用 Math.max(0, Math.min(1, ...)) </li>
                <li data-page-node-id="m4zZBeox7h02bNLWd4j2QX">&nbsp;</li>
                <li data-page-node-id="Ea66i9x2KvhZWRK86uyYER"><strong class="text-green-300" data-page-node-id="tWCnFNNwe7mmYmE1aAHIzV">统一配置对象：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="QgZNyRFHTssi9TjiXDRptm">  - GameConfig：游戏规则参数（颜色/槽位数/路数/叠牌上限等）</li>
                <li class="text-sm text-gray-400" data-page-node-id="mHK9s77M6NAn9YVMJQ5MxU">  - CardAnimationConfig：卡牌动画参数（9种移动类型：hand/fromDeck/revealed/darkDeal/dark/drag/crash/support/surround）</li>
                <li class="text-sm text-gray-400" data-page-node-id="cgQqrLjmfB9LTHecTCSRvJ">  - AIConfig：AI出牌逻辑参数（strategy/sound/animation/road/cardType）</li>
                <li class="text-sm text-gray-400" data-page-node-id="K4PsleaPot2Ib99blPSFLk">  - CardFaceConfig/CardBackConfig：卡面/卡背样式统一配置（经典/玻璃/金属三种风格）</li>
                <li class="text-sm text-gray-400" data-page-node-id="GMKdOy97SHfs6tyxh7Fb5D">  - ColumnVisibilityConfig：栏目管理配置（状态栏/牌型/积分/拼点栏 + 5种动画开关，localStorage持久化）</li>
                <li data-page-node-id="4MG1XGUnqZBqQbGqGmcHWY">&nbsp;</li>
                <li data-page-node-id="cn5o96ErqrtgsNoR8Bkiiy"><strong class="text-green-300" data-page-node-id="gXHCvwiJpJyHvWU69jtG9O">联机系统（online-client.js）：</strong></li>
                <li class="text-sm text-gray-400" data-page-node-id="FECmnMCLxH0JmUbuI4dajj">  - WebSocket连接管理（connect/disconnect/reconnect）</li>
                <li class="text-sm text-gray-400" data-page-node-id="pVclwNPHwcp1jZXgr4BFby">  - 匹配系统：单人匹配/双人匹配（2v2队列自动检查）</li>
                <li class="text-sm text-gray-400" data-page-node-id="LWkXSZlENLUBTSBDKT4Btb">  - 房间系统：自定义房间创建/加入/退出/解散、选座切换、房主权限</li>
                <li class="text-sm text-gray-400" data-page-node-id="EcDVI2rFO1fNXUkczSKSKY">  - 游戏同步：牌组同步(sendDeckSync)、回合同步、出牌同步、匹配操作同步、悬停同步</li>
                <li class="text-sm text-gray-400" data-page-node-id="6EA8lQAgeB3WpsAzZVHl5M">  - 1v1语音信令（WebRTC）：仅单人匹配可用，2v2模式已禁用语音防止作弊</li>
                <li class="text-sm text-gray-400" data-page-node-id="oEO9LzgBKS9EKP1ZNPSIxK">  - 社交系统：好友列表、组队邀请、服务器负载显示、Toast通知</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 游戏控制按钮 - 右下角，纵向排列
         样式说明：
         统一使用 CSS 类（game-ctrl-btn + game-ctrl-btn-颜色）
         立体悬停效果：纯 CSS :hover 伪类（浏览器原生管理，100% 可靠）
         悬停视觉：按钮上浮 + 放大 + 多层阴影增强立体感 -->
    <div id="game-ctrl-panel" class="absolute bottom-4 right-4 flex flex-col gap-2 z-20" data-page-node-id="afBMRmSOMmbAGURp7jhL6a">
      <!-- 对局时间计时器 - 1v1+2v2联机模式显示，位于控制按钮上方
           随 .game-container 整体缩放（位于容器内，遵守缩放规则）
           ★ data-i18n 放在内部标签 span 上，避免 i18n 的 el.textContent= 
             整体覆盖外层 div 导致 #match-timer-text 时间 span 被清掉（对局时间不显示的根因） -->
      <div id="match-timer-display" class="match-timer-display" style="display:none;" data-page-node-id="yYhOAjZsWB4Jx5azJk3Tib"><span class="match-timer-label" data-i18n="match_timer" data-page-node-id="9k3blHDbrtssxsNjolnB4Z">对局时间</span> <span id="match-timer-text" data-page-node-id="3zA8ezRyOsvaw2Ei8d5S62">00:00</span></div>
      <!-- ★ 2026-10-16 概率测试工具（人机模式专用）：悬停展开六类概率按钮，点击在场上显示对应概率 -->
      <div id="prob-test-wrap" style="position: relative; display: none;">
        <button id="prob-test-btn" class="game-cursor-hover" style="
          width: 100%;
          padding: 0.45rem 0.75rem;
          border-radius: 0.5rem;
          border: 0.0625rem solid #a855f7;
          background: linear-gradient(145deg, #6b21a8, #4c1d95);
          color: #e9d5ff;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        " onmouseover="this.style.background='linear-gradient(145deg,#7e22ce,#5b21b6)'" onmouseout="this.style.background='linear-gradient(145deg,#6b21a8,#4c1d95)'">概率测试 ▾</button>
        <div id="prob-test-menu" style="display: none; position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 0.35rem; background: rgba(30, 27, 75, 0.96); border: 0.0625rem solid #7c3aed; border-radius: 0.5rem; padding: 0.3rem; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,0.5);">
          <button class="prob-cat-btn game-cursor-hover" data-cat="tRisk" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #f87171;background:#7f1d1d;color:#fecaca;font-size:0.72rem;cursor:pointer;">战术风险值</button>
          <button class="prob-cat-btn game-cursor-hover" data-cat="tFlip" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #4ade80;background:#14532d;color:#bbf7d0;font-size:0.72rem;cursor:pointer;">战术翻盘值</button>
          <button class="prob-cat-btn game-cursor-hover" data-cat="tPot" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #60a5fa;background:#1e3a8a;color:#bfdbfe;font-size:0.72rem;cursor:pointer;">战术潜力值</button>
          <button class="prob-cat-btn game-cursor-hover" data-cat="sRisk" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #fb923c;background:#7c2d12;color:#fed7aa;font-size:0.72rem;cursor:pointer;">战略风险值</button>
          <button class="prob-cat-btn game-cursor-hover" data-cat="sFlip" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #2dd4bf;background:#134e4a;color:#99f6e4;font-size:0.72rem;cursor:pointer;">战略翻盘值</button>
          <button class="prob-cat-btn game-cursor-hover" data-cat="sPot" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0;border-radius:0.35rem;border:0.0625rem solid #c084fc;background:#581c87;color:#e9d5ff;font-size:0.72rem;cursor:pointer;">战略潜力值</button>
          <button id="prob-test-close" class="game-cursor-hover" style="width:100%;padding:0.32rem 0.5rem;margin:0.12rem 0 0;border-radius:0.35rem;border:0.0625rem solid #64748b;background:#334155;color:#cbd5e1;font-size:0.72rem;cursor:pointer;">关闭显示</button>
        </div>
      </div>
      <!-- 开始游戏按钮 - 金色，点击开始新游戏(发牌+回合) -->
      <button id="start-game" class="game-cursor-hover game-ctrl-btn game-ctrl-btn-gold ui-button game-ctrl-btn-classic-start" data-i18n="btn_start" data-page-node-id="MrDGpjSq2SIqQjIS5TjpaR">开始游戏</button>
      
      <!-- 重新开始按钮 - 灰色，随时可用，中断当前游戏并重新开始 -->
      <button id="restart-game" class="game-cursor-hover game-ctrl-btn game-ctrl-btn-gray ui-button game-ctrl-btn-classic-exit" data-i18n="btn_exit_practice" data-page-node-id="CEmwWbOwlYgXwXR5dwcndE">退出练习</button>
    </div>
    </div>

  </div>
  </div>

  <script>
    // ============================================================================
    // 【JS-1/10】游戏数据配置
    // ============================================================================
    // 包含: 卡牌基础数据、游戏配置参数、音效配置、DOM元素引用
    // 作用: 统一管理游戏所有静态配置，便于调整和维护
    
    // ----------------------------------------------------------------------------
    // 【卡牌基础数据】
    // ----------------------------------------------------------------------------
    // suits:    花色符号数组 (黑桃♠、红心♥、梅花♣、方块♦)
    // ranks:    点数数组，按游戏规则排列(3最小，2最大)
    // values:   点数到数值的映射，用于卡牌比较大小
    //           特殊规则: A=1(最小), K=13, A与K相邻
    const suits = ['♠', '♥', '♣', '♦'];
    const ranks = ['3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A', '2'];
    const values = {
      '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10,
      'J': 11, 'Q': 12, 'K': 13, 'A': 1, '2': 2
    };

    // ----------------------------------------------------------------------------
    // 【游戏配置参数】
    // ----------------------------------------------------------------------------
    // 可调整的游戏规则和界面参数，修改后无需改动其他核心代码
    //   PLAYER_COLOR:       我方主题色(蓝色)
    //   OPPONENT_COLOR:     对方主题色(红色)
    //   NEUTRAL_COLOR:      中立区主题色(紫色)
    //   ACCENT_COLOR:       强调色(金色)
    //   HAND_SLOTS:         手牌槽位数(6张)
    //   DARK_CARD_SLOTS:    暗牌槽位数(5张)
    //   REVEALED_CARD_SLOTS:明牌槽位数(3张)
    //   ROAD_SLOTS:         路牌区路数(5路)
    //   ROAD_HEIGHT:        路牌区总高度(像素)
    //   FIELD_SLOT_HEIGHT:  场牌槽位高度(像素)
    //   STACK_SLOT_HEIGHT:  叠牌槽位高度(像素)
    //   NEUTRAL_SLOTS:      中立区路数(7路)
    //   MAX_STACK_CARDS:    每路最大叠牌数(8张，场牌+叠牌=9张)
    //   INITIAL_DECK_SIZE:  初始牌堆大小(26张)
    const GameConfig = {
      PLAYER_COLOR: '#3B82F6',
      OPPONENT_COLOR: '#EF4444',
      NEUTRAL_COLOR: '#A855F7',
      ACCENT_COLOR: '#FBBF24',
      HAND_SLOTS: 6,
      DARK_CARD_SLOTS: 5,
      REVEALED_CARD_SLOTS: 3,
      ROAD_SLOTS: 5,
      ROAD_HEIGHT: 720,
      FIELD_SLOT_HEIGHT: 240,
      STACK_SLOT_HEIGHT: 480,
      NEUTRAL_SLOTS: 7,
      MAX_STACK_CARDS: 8,
      INITIAL_DECK_SIZE: 26,
    };

    // ============================================================================
    // 【音效系统 · SoundConfig】统一管理所有声音资源
    // ============================================================================
    //
    // 技术架构:
    //   ├── 实时合成音效: Web Audio API (OscillatorNode + GainNode)，无需外部文件
    //   ├── 外部音乐播放: HTML5 Audio 对象，播放根目录 MP3 文件
    //   └── 浏览器策略: 音频上下文需用户手势激活，首次交互后解锁
    //
    // 模块分类:
    //   ┌──────────────────────────────────────────────────────────────┐
    //   │  A. 游戏音效（Game SFX） —— 游戏事件触发的声音             │
    //   │     clickSound         按钮/卡牌点击（轻短促音）            │
    //   │     cardPlaceSound     卡牌放置（轻脆落点）                  │
    //   │     dealSound          发牌（上升音阶）                      │
    //   │     startSound         游戏开始（渐升和弦，新局启动感）      │
    //   │     dragSound          拖牌（能量流动，400→200Hz 平滑下降） │
    //   │     neutralPlaceSound  中立区放牌（柔和上升）                │
    //   │     supportCardSound   援牌（能量注入，低→高 4音阶上升）     │
    //   │     surroundCardSound  围牌（沉重放置，sawtooth 低频三跳）   │
    //   │     crashSound         撞牌（强力冲击，碰撞瞬间触发）        │
    //   │     winSound           胜利（欢快上升和弦）                  │
    //   │     loseSound          失败（低沉下降）                      │
    //   │     drawSound          平局（平稳无变化）                    │
    //   ├──────────────────────────────────────────────────────────────┤
    //   │  B. UI 音效（Interface SFX） —— 界面交互触发的声音         │
    //   │     uiClickSound       普通按钮点击（开始、终止、重新开始）  │
    //   │     gameStartSound     开始游戏 - 复古街机风格                │
    //   │     uiOpenSound        打开面板（设置、规则、回合记录）      │
    //   │     uiCloseSound       关闭面板（设置、规则、回合记录）      │
    //   │     uiToggleSound      规则↔设定切换（三音循环 C-E-C）       │
    //   │     uiPageSound        翻页音效（回合记录翻页）              │
    //   ├──────────────────────────────────────────────────────────────┤
    //   │  C. 外部音乐文件（External MP3）                            │
    //   │     末局计时.mp3       任意一方达到 4 路获胜时播放           │
    //   │     对局获胜.mp3       玩家胜利时播放                        │
    //   │     对局失败.mp3       玩家失败时播放                        │
    //   └──────────────────────────────────────────────────────────────┘
    //
    // 合成音效配置字段:
    //   type         波形类型: sine(正弦) / triangle(三角) / sawtooth(锯齿) / square(方波)
    //   startFreq    【频率斜坡模式】起点频率（Hz），与 endFreq 成对使用
    //   endFreq      【频率斜坡模式】终点频率（Hz）
    //   frequencies  【离散跳变模式】[[频率Hz, 时间点秒], ...]
    //   gain         基础音量系数 (0-1)，实际播放时再乘以 sfxVolume
    //   duration     音效总持续时间（秒）
    //
    // 全局音量控制:
    //   sfxVolume    合成音效总音量 (0-1)，设置面板滑块调整
    //   musicVolume  外部音乐总音量 (0-1)，设置面板滑块调整
    //   isMuted      全局静音标志，true 时所有声音静默
    // ============================================================================
    const SoundConfig = {
      isMuted: false,
      sfxVolume: 1.0,
      musicVolume: 1.0,
      bgmVolume: 0.2,
      voiceVolume: 1.0,
      dealSoundMuted: false, // 临时：开始游戏音效播放期间屏蔽发牌音效
      sounds: {
        // === A. 游戏音效 ===
        clickSound: {           // 按钮/卡牌点击（轻短促音）
          type: 'sine',
          frequencies: [[800, 0], [400, 0.05]],
          gain: 0.3,
          duration: 0.05
        },
        cardPlaceSound: {       // 卡牌放置（轻脆落点）
          type: 'triangle',
          frequencies: [[600, 0], [300, 0.1]],
          gain: 0.2,
          duration: 0.1
        },
        dealSound: {            // 发牌音效（上升音阶，流畅愉悦）
          type: 'sine',
          frequencies: [[523.25, 0], [659.25, 0.05], [783.99, 0.1]],
          gain: 0.25,
          duration: 0.15
        },
        startSound: {           // 游戏开始（短促启动音，卡牌发牌准备声）
          type: 'triangle',
          startFreq: 660,
          endFreq: 330,
          gain: 0.18,
          duration: 0.2
        },
        dragSound: {            // 拖牌音效（能量流动）- 400→200Hz 平滑下降
          type: 'triangle',
          startFreq: 400,
          endFreq: 200,
          gain: 0.12,
          duration: 0.25
        },
        neutralPlaceSound: {    // 中立区放牌音效（柔和上升）
          type: 'sine',
          frequencies: [[329.63, 0], [440, 0.05], [523.25, 0.1]],
          gain: 0.15,
          duration: 0.2
        },
        supportCardSound: {     // 援牌音效（能量注入）- 低→高 4音阶上升
          type: 'triangle',
          frequencies: [[261.63, 0], [329.63, 0.0625], [392, 0.125], [523.25, 0.1875]],
          gain: 0.2,
          duration: 0.25
        },
        surroundCardSound: {    // 围牌音效（沉重放置）- sawtooth 低频三跳
          type: 'sawtooth',
          frequencies: [[196, 0], [261.63, 0.0833], [329.63, 0.1667]],
          gain: 0.18,
          duration: 0.25
        },
        crashSound: {           // 撞牌音效（强力冲击，卡牌碰撞瞬间触发）
          type: 'sawtooth',
          frequencies: [[200, 0], [100, 0.3]],
          gain: 0.1,
          duration: 0.3
        },
        glowBellSound: {        // 匹配光环音效（神圣钟鸣：低音跳八度，用户从试听页选中 2026-9-19）
          type: 'sine',
          frequencies: [[880, 0], [1760, 0.12]],
          gain: 0.25,
          duration: 0.5
        },
        callCardSound: {       // 叫牌成功音效（金色闪光：高频快速扫过 + 高八度泛音）
          type: 'sine',
          // 快速上升频率序列：C6 → E6 → G6 → C7 → E7 → G7
          frequencies: [[1046.50, 0], [1318.51, 0.08], [1567.98, 0.16], [2093.00, 0.24], [2637.02, 0.32], [3135.96, 0.40]],
          gain: 0.3,
          duration: 0.55
        },
        winSound: {             // 胜利音效（欢快上升和弦）
          type: 'sine',
          frequencies: [[523.25, 0], [659.25, 0.1], [783.99, 0.2], [1046.50, 0.3]],
          gain: 0.25,
          duration: 0.5
        },
        loseSound: {            // 失败音效（低沉下降）
          type: 'sine',
          frequencies: [[440, 0], [349.23, 0.15], [293.66, 0.3]],
          gain: 0.25,
          duration: 0.5
        },
        drawSound: {            // 平局音效（平稳无变化）
          type: 'sine',
          frequencies: [[440, 0], [440, 0.1], [440, 0.2]],
          gain: 0.2,
          duration: 0.3
        },
        // ==============================
        // B. UI 音效（Interface SFX）
        // ==============================
        uiClickSound: {          // 普通按钮点击（开始、终止、重新开始）
          type: 'sine',
          frequencies: [[659.25, 0], [523.25, 0.05]],
          gain: 0.18,
          duration: 0.12
        },
        gameStartSound: {        // 开始游戏 - 复古街机风格（方波快速琶音）
          type: 'square',
          frequencies: [[523.25, 0], [659.25, 0.04], [783.99, 0.08], [1046.50, 0.12]],
          gain: 0.2,
          duration: 0.22
        },
        uiOpenSound: {           // 打开面板（设置、规则、回合记录）- 300→700Hz 上升
          type: 'triangle',
          startFreq: 300,
          endFreq: 700,
          gain: 0.18,
          duration: 0.18
        },
        countdownTickSound: {    // 倒计时滴答声（每秒提醒）- 短促清脆
          type: 'sine',
          frequencies: [[880, 0], [880, 0.05]],
          gain: 0.2,
          duration: 0.08
        },
        countdownUrgentSound: {  // 倒计时紧急音（10秒以下）- 高频警报
          type: 'square',
          frequencies: [[1000, 0], [1000, 0.1], [1000, 0.2]],
          gain: 0.15,
          duration: 0.3
        },
        uiCloseSound: {          // 关闭面板（设置、规则、回合记录）- 700→300Hz 下降
          type: 'triangle',
          startFreq: 700,
          endFreq: 300,
          gain: 0.16,
          duration: 0.18
        },
        uiToggleSound: {         // 规则↔设定切换（三音循环 C-E-C）
          type: 'sine',
          frequencies: [[523.25, 0], [659.25, 0.06], [523.25, 0.12]],
          gain: 0.18,
          duration: 0.2
        },
        uiPageSound: {           // 翻页音效（800→200Hz，用于回合记录翻页）
          type: 'sawtooth',
          startFreq: 800,
          endFreq: 200,
          gain: 0.15,
          duration: 0.25
        }
      }
    };

    // ============================================================================
    // 【AI 配置 · AIConfig】统一管理对手出牌的节奏参数
    // ============================================================================
    //
    // 模块化结构:
    //   ┌─────────────────────────────────────────────────────┐
    //   │  strategy      出牌节奏（延迟参数）                │
    //   │    thinkDelay       思考延迟(ms)，模拟人类决策     │
    //   │    playDelay        出牌延迟(ms)                   │
    //   │    initialDelay     首次出牌前额外等待             │
    //   │                                                      │
    //   │  sound         音效映射（AI触发的声音）           │
    //   │  animation     动画配置（移动类型、粒子开关）     │
    //   │  road          出牌位置策略（偏好空路/堆叠上限） │
    //   │  cardType      牌型权重（手牌/明牌/暗牌/牌堆）    │
    //   └─────────────────────────────────────────────────────┘
    //
    // ★ 2026-10-04：出牌决策已全面移交 PBAIBridge（ai-core 引擎），
    //   旧策略字段（useAdvancedAI/randomFactor/scoreWeights）随之删除。
    // ============================================================================
    const AIConfig = {
      strategy: {
        thinkDelay: 1000,
        playDelay: 1000,
        initialDelay: 500
      },
      sound: {
        playCard: 'cardPlaceSound',
        moveCard: 'cardMoveSound',
        selectCard: 'cardSelectSound'
      },
      animation: {
        enabled: true,
        moveType: 'hand',
        showParticles: true
      },
      road: {
        preferEmptyRoad: true,
        stackLimit: 8,
        checkAdjacent: true
      },
      cardType: {
        hand: { weight: 1.0, canPlay: true },
        revealed: { weight: 0.8, canPlay: true },
        dark: { weight: 0, canPlay: false },
        deck: { weight: 10, canPlay: false }
      }
    };

    // ============================================================================
    // 【音效播放引擎】统一入口
    // ============================================================================
    //
    // 核心函数索引:
    //   ┌─────────────────────────────────────────────────────────────┐
    //   │  initAudioContext()  惰性初始化/恢复 AudioContext           │
    //   │  playSound(soundId)  根据配置播放合成音效                   │
    //   │  setSoundVolume(v)   设置音效音量 (0-1)                     │
    //   │  toggleMute()        切换全局静音                           │
    //   │  playCrisisMusic()   播放末局计时音乐（4路获胜时）           │
    //   │  stopCrisisMusic()   淡出停止末局计时音乐                   │
    //   │  resetCrisisMusicState() 重置危机音乐触发标志               │
    //   │  playEndGameMusic(fileName)  播放胜负音乐（内部函数）       │
    //   │  playVictoryMusic()  播放『对局获胜.mp3』                   │
    //   │  playDefeatMusic()   播放『对局失败.mp3』                   │
    //   └─────────────────────────────────────────────────────────────┘
    //
    // 浏览器策略: AudioContext 必须在用户手势（点击/触摸）后
    //            从 suspended 状态激活为 running 状态
    // ============================================================================
    let audioContext = null;

    /**
     * 惰性初始化 Web Audio API 上下文
     * 浏览器自动播放策略：必须在用户交互后才能创建/恢复音频上下文
     */
    function initAudioContext() {
      if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioContext.state === 'suspended') {
        audioContext.resume();
      }
    }

    /**
     * 播放一个合成音效
     * @param {string} soundId - 对应 SoundConfig.sounds 中的 key
     *
     * 支持两种频率配置模式:
     *   【模式A: 频率斜坡】 startFreq → endFreq 用 exponentialRamp 平滑过渡
     *   【模式B: 离散跳变】 frequencies = [[freqHz, timeSec], ...] 在指定时间点设置频率
     *
     * 音量包络: 起始设置为 gain * sfxVolume，结束时以 exponentialRamp 衰减至 0.01
     * 容错: soundId 无效时降级为 440Hz 0.1s 提示音；异常捕获不阻塞游戏
     */
    function playSound(soundId) {
      if (SoundConfig.isMuted || SoundConfig.sfxVolume <= 0) return;
      if (soundId === 'dealSound' && SoundConfig.dealSoundMuted) return;
      initAudioContext();
      try {
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        const soundConfig = SoundConfig.sounds[soundId];
        if (soundConfig) {
          oscillator.type = soundConfig.type;

          // --- 两种频率配置二选一 ---
          if (soundConfig.startFreq !== undefined && soundConfig.endFreq !== undefined) {
            // 模式A: 指数斜坡（能量流动风格）
            oscillator.frequency.setValueAtTime(soundConfig.startFreq, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(
              soundConfig.endFreq,
              audioContext.currentTime + soundConfig.duration
            );
          } else if (soundConfig.frequencies) {
            // 模式B: 离散时间点跳变（传统风格）
            soundConfig.frequencies.forEach(([freq, time]) => {
              oscillator.frequency.setValueAtTime(freq, audioContext.currentTime + time);
            });
          }

          // --- 音量包络 ---
          gainNode.gain.setValueAtTime(soundConfig.gain * SoundConfig.sfxVolume, audioContext.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + soundConfig.duration);

          oscillator.start();
          oscillator.stop(audioContext.currentTime + soundConfig.duration);
        } else {
          // --- 降级：未配置时的提示音 ---
          oscillator.type = 'sine';
          oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
          gainNode.gain.setValueAtTime(0.1 * SoundConfig.sfxVolume, audioContext.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
          oscillator.start();
          oscillator.stop(audioContext.currentTime + 0.1);
        }
      } catch (e) {
        console.error('播放音效失败:', e);
      }
    }

    /**
     * 播放开始游戏音效（复古街机风格，与 sound-preview.html 中 retro_arcade 一致）
     * 使用 AudioBuffer 程序化合成，1.2 秒两阶段结构：主琶音 + 结尾跳音
     */
    let gameStartSource = null;
    let gameStartGain = null;

    function playGameStartMusic() {
      if (SoundConfig.isMuted || SoundConfig.sfxVolume <= 0) return;
      initAudioContext();
      try {
        // 播放开始游戏音效期间，暂时屏蔽发牌音效
        SoundConfig.dealSoundMuted = true;

        // 停止前一个播放（如果有）
        stopGameStartMusic();

        // 1.2 秒短促音效（与 sound-preview 中的 short instruments 一致）
        const duration = 1.2;
        const bufferSize = audioContext.sampleRate * duration;
        const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
        const data = buffer.getChannelData(0);

        for (let i = 0; i < bufferSize; i++) {
          const t = i / audioContext.sampleRate;

          // 风格8：复古街机 - 8-bit芯片音，经典街机开局
          const arpeggioNotes = [523.25, 659.25, 783.99, 1046.50];
          const arpIdx = Math.floor(t * 10) % arpeggioNotes.length;
          const chip = Math.sin(2 * Math.PI * arpeggioNotes[arpIdx] * t) * 0.18 * Math.exp(-(t * 10 % 1) * 4);
          const squareWave = (Math.sin(2 * Math.PI * arpeggioNotes[arpIdx] * t) > 0 ? 1 : -1) * 0.1 * Math.exp(-(t * 10 % 1) * 4);
          // 结束快速跳音：C E G C 快速上升
          const endT = t - 0.8;
          if (t >= 0.8 && endT < 0.4) {
            const endFreq = 523.25 + Math.floor(endT * 15) * 80;
            const endChip = Math.sin(2 * Math.PI * endFreq * endT) * 0.16 * Math.exp(-(endT * 15 % 1) * 5);
            data[i] = chip + squareWave + endChip;
          } else {
            data[i] = chip + squareWave;
          }
        }

        const source = audioContext.createBufferSource();
        source.buffer = buffer;
        source.loop = false;

        const gainNode = audioContext.createGain();
        gainNode.gain.setValueAtTime(0, audioContext.currentTime);
        // 短促音效：快速启动，快速衰减（与 sound-preview 中的 short envelope 一致）
        gainNode.gain.linearRampToValueAtTime(0.5 * SoundConfig.sfxVolume, audioContext.currentTime + 0.02);
        gainNode.gain.setValueAtTime(0.5 * SoundConfig.sfxVolume, audioContext.currentTime + 0.8);
        gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 1.2);

        source.connect(gainNode);
        gainNode.connect(audioContext.destination);

        // 播放完毕后恢复发牌音效
        source.onended = function() {
          SoundConfig.dealSoundMuted = false;
        };

        source.start();
        source.stop(audioContext.currentTime + 1.2);

        gameStartSource = source;
        gameStartGain = gainNode;

        // 额外保护：1.3 秒后强制恢复（防止 onended 未触发）
        setTimeout(function() {
          SoundConfig.dealSoundMuted = false;
        }, 1300);
      } catch (e) {
        console.error('播放开始游戏音效失败:', e);
        SoundConfig.dealSoundMuted = false;
      }
    }

    function stopGameStartMusic() {
      // 停止开始游戏音效时确保恢复发牌音效
      SoundConfig.dealSoundMuted = false;
      if (gameStartSource) {
        try { gameStartSource.stop(); } catch (e) {}
        gameStartSource.disconnect();
        gameStartSource = null;
      }
      if (gameStartGain) {
        gameStartGain.disconnect();
        gameStartGain = null;
      }
    }

    /**
     * 设置音效音量（不影响 musicVolume）
     * @param {number} volume - 0~1
     */
    function setSoundVolume(volume) {
      SoundConfig.sfxVolume = Math.max(0, Math.min(1, volume));
    }

    /**
     * 切换全局静音
     * @returns {boolean} 切换后的静音状态
     */
    function toggleMute() {
      SoundConfig.isMuted = !SoundConfig.isMuted;
      // ★ 静音状态变化时同步 BGM 播放/暂停
      if (typeof syncBGMWithMute === 'function') syncBGMWithMute();
      return SoundConfig.isMuted;
    }

    // ============================================================================
    // 【危机音乐系统】末局计时音乐（任意一方达到 4 路获胜时）
    // ============================================================================
    //
    // 触发条件: 任意一方累积胜路达到 4 路时（仅首次触发，保持不重复）
    // 音源文件: 我方4路获胜(优势)→bgm/【优势】提示_前10秒.mp3；对方4路获胜(劣势)→bgm/末局计时.mp3
    // 音量曲线: 20% → 30% → 40% → 50% → 60%（每秒递增一档，营造紧迫感）
    // 播放模式: 单次播放不循环；触发时独立音乐（若在播）让位停止
    //
    // 状态变量:
    //   ┌─────────────────────────────────────────────────────┐
    //   │  crisisMusicAudio      末局计时 Audio 对象（可复用）│
    //   │  crisisMusicPlaying    当前是否正在播放             │
    //   │  crisisMusicTriggered  本次 4 路获胜是否已触发标志  │
    //   └─────────────────────────────────────────────────────┘
    //
    // 相关函数:
    //   playCrisisMusic()        阶梯式递增音量播放末局计时
    //   stopCrisisMusic()        0.3 秒淡出后停止
    //   resetCrisisMusicState() 重置 triggered 标志
    // ============================================================================
    let crisisMusicAudio = null;
    let crisisMusicPlaying = false;
    let crisisMusicTriggered = false;
    let crisisMusicSrc = '';   // 当前 crisisMusicAudio 已加载的音源文件名（避免重复重设 src）

    /**
     * 重置危机音乐触发标志（游戏重新开始时调用）
     * 当一局游戏重新开始后，允许下一次达到 4 路获胜时再次播放
     */
    function resetCrisisMusicState() {
      crisisMusicTriggered = false;
      // ★ 同步重置独立优势/劣势音乐（共用此重置入口，所有游戏重置点自动覆盖）
      if (typeof resetIndependentMusicState === 'function') resetIndependentMusicState();
    }

    // ============================================================================
    // 【独立优势/劣势音乐系统】对方终止出牌后，按我方牌面优劣势单独播放（2026-9-10）
    // ============================================================================
    // 触发条件: 对方终止出牌（我方尚未终止，游戏继续）时，仅首次触发
    // 音源文件: 我方牌面优势→bgm/独立优势.mp3；我方牌面劣势→bgm/独立劣势.mp3
    // 播放方式: ★ 循环播放，持续压制轮换 BGM，直至游戏结束——结算音乐（playEndGameMusic）
    //           播放时经 resetIndependentMusicState 自动停止并解除压制（2026-9-30 用户规则）
    // 优势判定: 获胜路数多者为优；路数相同比最大牌型（identifyCardType 的 level→maxValue，
    //           与战略胜利判定 checkWinCondition 完全同构，2026-9-30 FIX）；仍相同则不播放
    let independentMusicAudio = null;
    let independentMusicPlaying = false;
    let independentMusicTriggered = false;

    function resetIndependentMusicState() {
      independentMusicTriggered = false;
      if (independentMusicPlaying) {
        independentMusicPlaying = false;
        // ★ 解除对轮换 BGM 的屏蔽（恢复正常 BGM）
        if (typeof unblockBGMForIndependent === 'function') unblockBGMForIndependent();
        else if (typeof restoreBGM === 'function') restoreBGM();
      }
      if (independentMusicAudio) {
        try { independentMusicAudio.pause(); } catch (e) {}
        independentMusicAudio = null;
      }
    }

    /**
     * 播放独立优势/劣势音乐（对方终止出牌后给"仍在出牌的我方"播放一次）
     * 优势判定：
     *   1. 我方获胜路数 > 对方 → 优势
     *   2. 我方获胜路数 < 对方 → 劣势
     *   3. 路数相同 → 比较双方牌型总分（calculatePlayerScore）
     *   4. 仍相同 → 不播放
     */
    function playIndependentMusic() {
      if (independentMusicTriggered) return;
      if (GameState.isGameInterrupted || GameState.gamePhase !== 'playing') return;
      if (SoundConfig.isMuted || SoundConfig.musicVolume <= 0) return;

      // ★ 优势判定：先比获胜路数，再比最大牌型（2026-9-30 FIX：与战略胜利判定 checkWinCondition
      //   完全同构——identifyCardType 的 level→maxValue 两级比较。旧逻辑路数相同时比 totalScore
      //   分数总和，但"牌型大≠分数高"，导致我方牌型优势却播独立劣势）
      var pWins = GameState.playerWins.filter(function(w) { return w; }).length;
      var oWins = GameState.opponentWins.filter(function(w) { return w; }).length;
      var advantage;
      if (pWins > oWins) {
        advantage = true;
      } else if (pWins < oWins) {
        advantage = false;
      } else {
        try {
          var pType = identifyCardType(getPlayerAllCards());
          var oType = identifyCardType(getOpponentAllCards());
          if (pType.level > oType.level) advantage = true;
          else if (oType.level > pType.level) advantage = false;
          else if (pType.maxValue > oType.maxValue) advantage = true;
          else if (oType.maxValue > pType.maxValue) advantage = false;
        } catch (e) { /* 判定失败则不播放 */ }
      }
      if (advantage === undefined) return; // 完全平手，不播放

      independentMusicTriggered = true;
      // ★ 完全屏蔽我方其余 BGM（暂停轮换 BGM + 阻止阶段切换，结束后自动恢复）
      if (typeof blockBGMForIndependent === 'function') blockBGMForIndependent();
      else if (typeof duckBGM === 'function') duckBGM();

      try {
        const audio = new Audio(advantage ? 'BGM/独立优势.mp3' : 'BGM/独立劣势.mp3');
        audio.loop = true;   // ★ 2026-9-30 用户规则：循环播放直至游戏结束（结算音乐播放时经 resetIndependentMusicState 停止）
        audio.preload = 'auto';
        audio.volume = Math.max(0, Math.min(1, SoundConfig.musicVolume));
        independentMusicAudio = audio;
        independentMusicPlaying = true;

        // 循环模式下 ended 理论不触发，保留作为异常兜底（解除 BGM 屏蔽）
        audio.addEventListener('ended', function onEnded() {
          if (independentMusicAudio === audio) {
            independentMusicPlaying = false;
            independentMusicAudio = null;
          }
          audio.removeEventListener('ended', onEnded);
          if (typeof unblockBGMForIndependent === 'function') unblockBGMForIndependent();
          else if (typeof restoreBGM === 'function') restoreBGM();
        });

        const playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise.catch(function(err) {
            console.warn('独立音乐播放失败:', err);
            if (independentMusicAudio === audio) {
              independentMusicPlaying = false;
              independentMusicAudio = null;
            }
            if (typeof unblockBGMForIndependent === 'function') unblockBGMForIndependent();
            else if (typeof restoreBGM === 'function') restoreBGM();
          });
        }
      } catch (e) {
        console.warn('播放独立音乐失败:', e);
        independentMusicPlaying = false;
        if (typeof unblockBGMForIndependent === 'function') unblockBGMForIndependent();
        else if (typeof restoreBGM === 'function') restoreBGM();
      }
    }

    /**
     * 播放末局计时音乐
     * - 阶梯式递增音量：0-1s=20%、1-2s=30%、2-3s=40%、3-4s=50%、4s后=60%
     * - 仅在首次进入 4 路获胜状态时播放，不循环
     * - 音量受 SoundConfig.musicVolume 和 isMuted 控制
     * ★ 音源区分（用户规则）：
     *   isAdvantage=true  → 我方 4 路获胜（优势）→ 播放【优势】提示_前10秒.mp3
     *   isAdvantage=false → 对方 4 路获胜（我方劣势）→ 播放末局计时.mp3（不变）
     * @param {boolean} isAdvantage - 是否我方 4 路获胜（优势触发）
     */
    function playCrisisMusic(isAdvantage) {
      if (crisisMusicPlaying) return;
      if (crisisMusicTriggered) return;
      if (SoundConfig.isMuted || SoundConfig.musicVolume <= 0) return;

      crisisMusicTriggered = true;
      // ★ 2026-9-19：触发提示音乐时，独立音乐（若在播）让位停止，BGM 压制到 10%
      if (typeof resetIndependentMusicState === 'function') resetIndependentMusicState();
      if (typeof duckBGM === 'function') duckBGM();

      try {
        if (!crisisMusicAudio) {
          crisisMusicAudio = new Audio();
          crisisMusicAudio.loop = false;
          crisisMusicAudio.preload = 'auto';
        }
        // ★ 2026-9-19 音源更换（用户指定）：四路获胜→四路获胜.mp3；四路失败→四路失败.mp3
        const targetSrc = isAdvantage ? 'BGM/四路获胜.mp3' : 'BGM/四路失败.mp3';
        if (crisisMusicSrc !== targetSrc) {
          crisisMusicAudio.src = targetSrc;
          crisisMusicSrc = targetSrc;
        }
        // 确保 volume 在 [0, 1] 范围
        crisisMusicAudio.volume = Math.max(0, Math.min(1, SoundConfig.musicVolume * 0.2));
        crisisMusicAudio.currentTime = 0;

        // 立即设置 playing 标志（在 play() 之前），这样 stopCrisisMusic() 能及时捕获
        crisisMusicPlaying = true;
        const playPromise = crisisMusicAudio.play();

        if (playPromise !== undefined) {
          playPromise.then(() => {
            // 检查是否在播放过程中已被停止（用户可能在加载期间点击了重新开始/结束）
            if (!crisisMusicPlaying || !crisisMusicAudio) {
              crisisMusicAudio.pause();
              crisisMusicAudio.currentTime = 0;
              return;
            }

            const startTime = performance.now();
            const finalVolume = Math.max(0, Math.min(1, SoundConfig.musicVolume));

            /** 每帧根据当前 elapsed 时间选择音量档位 */
            function volumeStep(now) {
              if (!crisisMusicPlaying || !crisisMusicAudio) return;
              const elapsed = now - startTime;
              let vol;
              if (elapsed < 1000) {
                vol = finalVolume * 0.2;
              } else if (elapsed < 2000) {
                vol = finalVolume * 0.3;
              } else if (elapsed < 3000) {
                vol = finalVolume * 0.4;
              } else if (elapsed < 4000) {
                vol = finalVolume * 0.5;
              } else {
                vol = finalVolume * 0.6;
              }
              // Math.max(0, Math.min(1, ...)) 确保 volume 在有效范围，
              // 避免浮点精度导致的越界错误
              crisisMusicAudio.volume = Math.max(0, Math.min(1, vol));
              requestAnimationFrame(volumeStep);
            }
            requestAnimationFrame(volumeStep);

            // 音乐播完后清理 playing 标志
            crisisMusicAudio.addEventListener('ended', function onEnded() {
              crisisMusicPlaying = false;
              crisisMusicAudio.removeEventListener('ended', onEnded);
              // ★ 提示音乐自然播完时，恢复 BGM 到正常音量
              if (typeof restoreBGM === 'function') restoreBGM();
              // ★ 2026-9-21 FIX（四路劣势后 BGM 不恢复）：restoreBGM 渐变可能被独立音乐接替等
              //   逻辑中断，或落下音量残留/暂停。两次延时校验自愈：
              //   非静音、非新压制、非独立接替、非已结算的前提下，BGM 音量残留低值 → 拉回全量；
              //   BGM 处于暂停 → 走 syncBGMWithMute 恢复播放
              var _pbVerifyRestore = function (delay) {
                setTimeout(function () {
                  try {
                    if (SoundConfig.isMuted || SoundConfig.bgmVolume <= 0) return;
                    if (typeof GameState !== 'undefined' && GameState && GameState.gamePhase !== 'playing') return; // 已结算/回主页由各自逻辑管理
                    if (typeof _bgmDucking === 'undefined' || _bgmDucking) return;  // 新一轮压制中，属正常
                    if (typeof _bgmIndependentPaused !== 'undefined' && _bgmIndependentPaused) return;  // 独立音乐接替中，由其结束逻辑恢复
                    if (!bgmAudio) return;
                    var _want = Math.max(0, Math.min(1, SoundConfig.bgmVolume));
                    if (bgmAudio.paused) {
                      if (typeof syncBGMWithMute === 'function') syncBGMWithMute();
                    } else if (Math.abs(bgmAudio.volume - _want) > 0.05) {
                      bgmAudio.volume = _want;
                    }
                  } catch (e) {}
                }, delay);
              };
              _pbVerifyRestore(2300);  // 覆盖 restoreBGM 的 2 秒渐变窗口
              _pbVerifyRestore(4500);  // 二次校验（独立音乐快速结束时前一次可能仍被压制判定拦截）
            });
          }).catch((err) => {
            console.error('提示音乐播放失败:', err);
            crisisMusicPlaying = false;
            // ★ 播放失败时 BGM 已被 duckBGM 压制 → 必须恢复，否则 BGM 卡在 60% 音量
            if (typeof restoreBGM === 'function') restoreBGM();
          });
        }
      } catch (e) {
        console.error('播放提示音乐失败:', e);
        crisisMusicPlaying = false;
      }
    }

    /**
     * 停止危机音乐（2026-9-19 起统一为停止独立音乐并解除 BGM 压制）
     * 供游戏重置/结算/切歌等所有旧调用点使用
     */
    function stopCrisisMusic() {
      // ★ 2026-9-20：提示音乐（四路获胜/失败）快速淡出停止（0.8 秒过渡），
      //   防止瞬间掐断或与结算音乐长时间叠加；同时交叉恢复 BGM 音量（2 秒渐变）
      if (crisisMusicAudio && crisisMusicPlaying) {
        var _promptAudio = crisisMusicAudio;
        crisisMusicPlaying = false;
        var _startVol = _promptAudio.volume;
        var _startTime = performance.now();
        var _fadeOut = function (now) {
          var t = (now - _startTime) / 800;
          if (t >= 1) {
            try { _promptAudio.pause(); _promptAudio.currentTime = 0; } catch (e) {}
            return;
          }
          try { _promptAudio.volume = Math.max(0, _startVol * (1 - t)); } catch (e) {}
          requestAnimationFrame(_fadeOut);
        };
        requestAnimationFrame(_fadeOut);
      } else if (crisisMusicAudio) {
        try { crisisMusicAudio.pause(); crisisMusicAudio.currentTime = 0; } catch (e) {}
      }
      if (typeof restoreBGM === 'function') restoreBGM();
      // ★ 2026-9-19：危机音乐旧代码删除——统一停止独立音乐并解除 BGM 压制
      if (independentMusicAudio) {
        try {
          independentMusicAudio.pause();
          independentMusicAudio.currentTime = 0;
        } catch (e) {}
      }
      independentMusicPlaying = false;
      independentMusicAudio = null;
      if (typeof unblockBGMForIndependent === 'function') unblockBGMForIndependent();
      else if (typeof restoreBGM === 'function') restoreBGM();
    }

    // ============================================================================
    // 【胜负音乐系统】对局结束音乐
    // ============================================================================
    //
    // 触发时机: 游戏正式结束（任意一方 5 路获胜 / 战略胜利）
    // 不播放场景: 平局、双方同时结算的特殊规则
    // 音源文件: 对局获胜.mp3（胜利） / 对局失败.mp3（失败）
    // 播放特点: 每次重新创建 Audio 对象确保从头播放；0.3 秒淡入避免突兀
    // 停止场景: 游戏重新开始 / 手动终止后重置
    //
    // 调用链:
    //   checkRoadResult() / checkStrategicVictory()
    //     └─> playVictoryMusic() 或 playDefeatMusic()
    //           └─> playEndGameMusic(fileName) （实际播放）
    //   restart-game 点击
    //     └─> stopEndGameMusic() （淡出停止）
    // ============================================================================
    let endGameMusicAudio = null;
    // 记录上次播放的胜负音乐类型：'victory' 或 'defeat'
    let lastEndGameType = null;

    /**
     * 停止当前播放的胜负音乐（重新开始/终止游戏时调用）
     * 同时恢复星空战场到正常状态（停止加速流星/让星星消失）
     */
    function stopEndGameMusic() {
      // 记录类型供恢复逻辑使用
      const type = lastEndGameType;

      if (endGameMusicAudio) {
        try {
          const targetAudio = endGameMusicAudio;
          endGameMusicAudio = null;
          const startVolume = targetAudio.volume;
          const fadeStart = performance.now();
          const fadeDuration = 300;

          function fadeStep(now) {
            if (!targetAudio) return;
            const elapsed = now - fadeStart;
            const progress = Math.min(elapsed / fadeDuration, 1);
            targetAudio.volume = Math.max(0, Math.min(1, startVolume * (1 - progress)));
            if (progress < 1) {
              requestAnimationFrame(fadeStep);
            } else {
              targetAudio.pause();
              targetAudio.currentTime = 0;
            }
          }
          requestAnimationFrame(fadeStep);
        } catch (e) {
          console.error('停止胜负音乐失败:', e);
          if (endGameMusicAudio) {
            endGameMusicAudio.pause();
            endGameMusicAudio.currentTime = 0;
          }
          endGameMusicAudio = null;
        }
      }

      // 关键修复：不要在停止音乐时立刻清掉胜利计时器！
      // 胜利场景下 applyStarfieldWinMode 刚启动 setInterval，紧接着 playEndGameMusic 里又 stopEndGameMusic
      // 此时不应该立刻走 restoreStarfieldNormal()，否则胜利模式的"每秒额外5颗流星"只出现1秒就停了。
      // 正确的做法：由 audio 的 ended 事件中才走恢复；这里保留音乐停止但不移除胜利/失败状态。
    }

    /**
     * 通用胜负音乐播放函数（内部使用）
     * @param {string} fileName - bgm 文件夹内的文件名，如 '对局获胜.mp3'
     * @param {string} type - 'victory' 或 'defeat'（用于星空战场动画结束回调）
     */
    function playEndGameMusic(fileName, type) {
      if (SoundConfig.isMuted || SoundConfig.musicVolume <= 0) {
        // 静音状态下也应用动画（但时间稍短）
        lastEndGameType = type;
        setTimeout(function() {
          if (lastEndGameType === type) {
            if (type === 'defeat') {
              if (typeof triggerTechDefeatShorten === 'function') {
                triggerTechDefeatShorten();
                setTimeout(function() {
                  if (typeof restoreTechNormal === 'function') restoreTechNormal();
                }, 1500);
              } else {
                if (typeof restoreTechNormal === 'function') restoreTechNormal();
              }
            } else {
              if (typeof restoreTechNormal === 'function') restoreTechNormal();
            }
            if (type === 'defeat' && typeof fadeOutLoseStars === 'function') fadeOutLoseStars();
            else if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
            if (type === 'defeat' && typeof isMagicForestTheme === 'function' && isMagicForestTheme()) {
              if (typeof fadeOutForestLose === 'function') fadeOutForestLose();
            } else {
              if (typeof restoreForestNormal === 'function') restoreForestNormal();
            }
          }
        }, 2500);
        return;
      }

      lastEndGameType = type;

      // 播放新音乐前先停止之前可能还在播放的胜负音乐（避免两首叠加）
      stopEndGameMusic();
      // ★ 播放胜利/失败音乐时，停止背景音乐（BGM）
      if (typeof stopBGM === 'function') stopBGM();
      // ★ 2026-9-19：停止独立音乐并解除 BGM 压制（防止与结算音乐叠加）
      if (typeof resetIndependentMusicState === 'function') resetIndependentMusicState();
      // ★ 2026-9-20：提示音乐（四路获胜/失败）快速淡出停止（0.8 秒过渡），防止与结算音乐叠加
      if (typeof stopCrisisMusic === 'function') stopCrisisMusic();
      if (typeof restoreBGM === 'function') restoreBGM();

      try {
        const endGameAudio = new Audio('BGM/' + fileName);
        endGameAudio.loop = false;
        endGameAudio.preload = 'auto';
        endGameAudio.volume = Math.max(0, Math.min(1, 0.01));

        endGameMusicAudio = endGameAudio;

        // 音乐自然结束后：恢复主题正常状态
        endGameAudio.addEventListener('ended', function onEnded() {
          if (type === 'defeat') {
            if (typeof triggerTechDefeatShorten === 'function') {
              triggerTechDefeatShorten();
              setTimeout(function() {
                if (typeof restoreTechNormal === 'function') restoreTechNormal();
              }, 1500);
            } else {
              if (typeof restoreTechNormal === 'function') restoreTechNormal();
            }
          } else {
            if (typeof restoreTechNormal === 'function') restoreTechNormal();
          }
          if (typeof isStarfieldTheme === 'function' && isStarfieldTheme()) {
            if (type === 'defeat') {
              if (typeof fadeOutLoseStars === 'function') fadeOutLoseStars();
            } else {
              if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
            }
          }
          if (typeof isMagicForestTheme === 'function' && isMagicForestTheme()) {
            if (type === 'defeat') {
              if (typeof fadeOutForestLose === 'function') fadeOutForestLose();
            } else {
              if (typeof restoreForestNormal === 'function') restoreForestNormal();
            }
          } else {
            if (typeof restoreForestNormal === 'function') restoreForestNormal();
          }
          endGameAudio.removeEventListener('ended', onEnded);
        });

        endGameAudio.addEventListener('canplaythrough', function onReady() {
          if (endGameMusicAudio !== endGameAudio) {
            endGameAudio.pause();
            endGameAudio.currentTime = 0;
            return;
          }
          const playPromise = endGameAudio.play();
          if (playPromise !== undefined) {
            playPromise.then(() => {
              // 0.3 秒平滑淡入到目标音量
              const fadeStart = performance.now();
              const fadeDuration = 300;
              const targetVolume = Math.max(0, Math.min(1, SoundConfig.musicVolume));
              function fadeStep(now) {
                if (!endGameAudio) return;
                const elapsed = now - fadeStart;
                const progress = Math.min(elapsed / fadeDuration, 1);
                endGameAudio.volume = Math.max(0, Math.min(1, 0.01 + (targetVolume - 0.01) * progress));
                if (progress < 1) requestAnimationFrame(fadeStep);
              }
              requestAnimationFrame(fadeStep);
            }).catch((err) => {
              console.error(fileName + ' 播放失败:', err);
            });
          }
          endGameAudio.removeEventListener('canplaythrough', onReady);
        });
      } catch (e) {
        console.error('播放' + fileName + '失败:', e);
      }
    }

    /** 播放『对局获胜.mp3』（玩家胜利时调用）— 同时触发星空战场/机械科技/魔幻森林胜利模式 */
    function playVictoryMusic() {
      if (typeof applyStarfieldWinMode === 'function') applyStarfieldWinMode();
      if (typeof applyTechWinMode === 'function') applyTechWinMode();
      if (typeof applyForestWinMode === 'function') applyForestWinMode();
      playEndGameMusic('对局获胜.mp3', 'victory');
    }

    /** 播放『对局失败.mp3』（玩家失败时调用）— 同时触发星空战场/机械科技/魔幻森林失败模式 */
    function playDefeatMusic() {
      if (typeof applyStarfieldLoseMode === 'function') applyStarfieldLoseMode();
      if (typeof applyTechLoseMode === 'function') applyTechLoseMode();
      if (typeof applyForestLoseMode === 'function') applyForestLoseMode();
      playEndGameMusic('对局失败.mp3', 'defeat');
    }

    // ----------------------------------------------------------------------------
    // 【BGM 背景音乐系统】
    // ----------------------------------------------------------------------------
    // 主页背景音乐（主界面.mp3 等），循环播放，音量受 SoundConfig.bgmVolume 控制
    //   bgmAudio      当前 BGM Audio 对象
    //   bgmPlaying    当前是否正在播放
    //   bgmFileName   当前 BGM 文件名（避免重复播放同一首）
    let bgmAudio = null;
    let bgmPlaying = false;
    let bgmFileName = '';
    // ★ 主菜单是否处于可见状态（决定 BGM 是否应播放）
    // 页面加载时主菜单默认可见，故初始为 true；hideMainMenu 置 false，showMainMenu 置 true
    let bgmMenuActive = true;

    /**
     * 播放背景音乐（循环），支持淡入过渡
     * @param {string} fileName - BGM 文件夹内的文件名，如 '主界面.mp3'
     * @param {number} fadeInMs - 淡入时长(毫秒)，>0 时音量从 0 逐渐增大到设定音量
     */
    function playBGM(fileName, fadeInMs) {
      if (!fileName) return;
      if (bgmFileName === fileName && bgmPlaying && bgmAudio) return; // 已在播放同一首
      stopBGM();
      if (SoundConfig.isMuted || SoundConfig.bgmVolume <= 0) {
        bgmFileName = fileName;
        return;
      }
      try {
        const audio = new Audio('BGM/' + fileName);
        audio.loop = true;
        // 不使用 preload='auto'，避免暂停时浏览器中断加载请求触发 ERR_ABORTED
        audio.preload = 'none';
        // ★ 2026-9-22 FIX：提示音乐压制（duck）期间切歌（如压制中跨入末局阶段触发
        //   checkPhaseBGM 换曲），新曲必须继承 10% 压制——否则 duck 被切歌绕过、
        //   末局 BGM 全量盖过提示音乐（用户实锤：提示音乐与 13 回合末局音乐齐播未降低）
        const targetVol = Math.max(0, Math.min(1, SoundConfig.bgmVolume * ((_bgmIndependentPaused || _bgmDucking) ? 0.1 : 1)));
        audio.volume = (fadeInMs > 0) ? 0 : targetVol;
        // 音频加载失败（如 file:// 协议被浏览器安全策略阻止）时静默降级，
        // 不向控制台刷 ERR_ABORTED；用户交互后由 tryStartMenuBGM 重新触发播放
        audio.addEventListener('error', function() {
          bgmPlaying = false;
        });
        bgmAudio = audio;
        bgmFileName = fileName;
        bgmPlaying = true;
        const playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise.catch(function(err) {
            // 自动播放被浏览器策略阻止（NotAllowedError）属正常现象，
            // 等待用户首次交互后重新播放，不视为失败报错
            if (err && err.name === 'NotAllowedError') {
              bgmPlaying = false;
            } else {
              console.warn('BGM播放失败:', err);
              bgmPlaying = false;
            }
          });
        }
        // 淡入：音量从 0 逐渐增大到目标音量（不超过设定音量）
        if (fadeInMs > 0 && targetVol > 0) {
          clearBGMFade();
          const steps = 24;
          let i = 0;
          bgmFadeTimer = setInterval(function() {
            i++;
            const t = Math.min(1, i / steps);
            if (bgmAudio === audio) {
              audio.volume = targetVol * t;
            }
            if (t >= 1) {
              clearInterval(bgmFadeTimer);
              bgmFadeTimer = null;
            }
          }, fadeInMs / steps);
        }
      } catch (e) {
        console.warn('BGM播放失败:', e);
        bgmPlaying = false;
      }
    }

    // BGM 音量淡入淡出定时器
    let bgmFadeTimer = null;
    function clearBGMFade() {
      if (bgmFadeTimer) {
        clearInterval(bgmFadeTimer);
        bgmFadeTimer = null;
      }
    }

    /** 停止背景音乐 */
    function stopBGM() {
      clearBGMFade();
      if (bgmAudio) {
        try {
          bgmAudio.pause();
          bgmAudio.currentTime = 0;
        } catch (e) {}
        bgmAudio = null;
      }
      bgmPlaying = false;
    }

    /** 淡出当前背景音乐并停止，完成后回调 */
    function fadeOutBGM(duration, callback) {
      clearBGMFade();
      if (!bgmAudio) {
        bgmPlaying = false;
        if (typeof callback === 'function') callback();
        return;
      }
      const audio = bgmAudio;
      const startVol = Math.max(0, audio.volume || 0);
      const steps = 24;
      let i = 0;
      bgmFadeTimer = setInterval(function() {
        i++;
        const t = Math.min(1, i / steps);
        if (bgmAudio === audio) {
          audio.volume = Math.max(0, startVol * (1 - t));
        }
        if (t >= 1) {
          clearInterval(bgmFadeTimer);
          bgmFadeTimer = null;
          try {
            audio.pause();
            audio.currentTime = 0;
          } catch (e) {}
          if (bgmAudio === audio) {
            bgmAudio = null;
            bgmPlaying = false;
          }
          if (typeof callback === 'function') callback();
        }
      }, duration / steps);
    }

    /** 设置 BGM 音量 (0-1)，实时应用到正在播放的 BGM */
    function setBGMVolume(v) {
      SoundConfig.bgmVolume = Math.max(0, Math.min(1, v));
      if (SoundConfig.bgmVolume <= 0) {
        // 音量设为0时，仅暂停音频保留对象，不销毁（避免 ERR_ABORTED 中断网络请求）
        if (bgmAudio) {
          try {
            bgmAudio.volume = 0;
            bgmAudio.pause();
          } catch (e) {}
        }
        bgmPlaying = false;
      } else {
        // 先更新音量（★ 独立音乐压制期间保持 10% 音量，2026-9-19 用户要求）
        // ★ 2026-9-22 FIX：提示音乐压制（duck）期间同理保持 10%——setBGMVolume
        //   此前只认 _bgmIndependentPaused，用户调音量时会把 BGM 从压制中抬回全量
        if (bgmAudio) {
          bgmAudio.volume = Math.max(0, Math.min(1, SoundConfig.bgmVolume * ((_bgmIndependentPaused || _bgmDucking) ? 0.1 : 1)));
        }
        // 从静音恢复：如果有音频对象且处于暂停，则直接继续播放
        if (bgmAudio && bgmAudio.paused) {
          try {
            bgmAudio.play().catch(function() {});
            bgmPlaying = true;
          } catch (e) {}
        } else if (bgmFileName && !bgmPlaying) {
          // ★ 2026-9-10 修复：对局中从 0% 恢复音量时，bgmFileName 可能仍停留在
          //   主页曲目（音量为 0 期间 checkPhaseBGM 直接 return，从未记录对局曲目），
          //   直接 playBGM(bgmFileName) 会在对局里响起主页 BGM。
          //   此时改为恢复"当前对局阶段"的 BGM（开局/中局/末局随机曲）。
          //   注意：主页时 gamePhase 恒为 'setup'（showMainMenu 置位），不会误触此分支。
          if (typeof GameState !== 'undefined' && GameState && GameState.gamePhase === 'playing') {
            _lastBGMPhase = '';
            checkPhaseBGM();
            return;
          }
          // 没有音频对象或未暂停，则重新创建播放
          playBGM(bgmFileName);
        }
      }
    }

    // BGM 音量压制（ducking）：危机音乐播放时降低 BGM 音量
    //   _bgmBaseVolume  危机音乐前的 BGM 基准音量(0-1)
    //   _bgmDucking     当前是否处于压制状态
    var _bgmBaseVolume = null;
    var _bgmDucking = false;
    // ★ 2026-9-19：提示音乐结束后的 BGM 音量平滑衔接（从 10% 渐变回正常，避免瞬间跳变）
    var _bgmRestoreRaf = null;
    function cancelBGMRestoreRamp() {
      if (_bgmRestoreRaf !== null) {
        try { cancelAnimationFrame(_bgmRestoreRaf); } catch (e) {}
        _bgmRestoreRaf = null;
      }
    }
    /** 降低 BGM 音量到基准音量的 10%（提示音乐播放时调用）
     *  ★ 2026-9-19 FIX：基准改为"当前实际音量与配置取小"——独立音乐接替期间
     *    触发提示音乐时不会把音量反向抬高，压制可正确叠加 */
    function duckBGM() {
      if (_bgmDucking && _bgmBaseVolume !== null) return; // 已压制
      cancelBGMRestoreRamp(); // ★ 渐变恢复途中再次触发压制 → 立即中止渐变
      var _cur = (bgmAudio && typeof bgmAudio.volume === 'number') ? bgmAudio.volume : SoundConfig.bgmVolume;
      _bgmBaseVolume = Math.min(SoundConfig.bgmVolume, Math.max(0, _cur));
      _bgmDucking = true;
      if (bgmAudio) {
        bgmAudio.volume = Math.max(0, Math.min(1, _bgmBaseVolume * 0.1));
      }
    }
    /** 恢复 BGM 到正常音量（提示音乐结束时调用）
     *  ★ 2026-9-19 FIX：独立音乐压制期间恢复时保持 10% 压制（不抬回全量）
     *  ★ 2026-9-19 过渡衔接：从当前压制音量（10%）约 2 秒渐变回目标音量，
     *    期间若检测到静音/切歌/独立接替等外部音量改动，立即放弃渐变交给该逻辑 */
    function restoreBGM() {
      if (!_bgmDucking) return;
      _bgmDucking = false;
      if (bgmAudio && _bgmBaseVolume !== null) {
        var _rv = Math.max(0, Math.min(1, _bgmBaseVolume));
        if (_bgmIndependentPaused) _rv = Math.max(0, Math.min(1, _rv * 0.1));
        var _from = Math.max(0, Math.min(1, bgmAudio.volume));
        if (Math.abs(_rv - _from) < 0.01) {
          // 音量几乎无差异，无需渐变
          bgmAudio.volume = _rv;
        } else {
          cancelBGMRestoreRamp();
          var _start = performance.now();
          var _lastSet = _from;
          var rampStep = function (now) {
            if (_bgmRestoreRaf === null) return; // 已被取消
            if (_bgmDucking || !bgmAudio) { _bgmRestoreRaf = null; return; } // 再次压制/无音频
            // 期间有其他逻辑改过音量（静音/切歌/独立接替等）→ 放弃渐变
            if (Math.abs(bgmAudio.volume - _lastSet) > 0.02) { _bgmRestoreRaf = null; return; }
            var t = Math.min(1, (now - _start) / 2000);
            var v = Math.max(0, Math.min(1, _from + (_rv - _from) * t));
            bgmAudio.volume = v;
            _lastSet = v;
            if (t >= 1) { _bgmRestoreRaf = null; return; }
            _bgmRestoreRaf = requestAnimationFrame(rampStep);
          };
          _bgmRestoreRaf = requestAnimationFrame(rampStep);
        }
      }
      _bgmBaseVolume = null;
    }

    // ★ 独立优势/劣势音乐机制（2026-9-10 用户规则；2026-9-19 用户澄清）：
    //   独立音乐与 BGM 同类——时机到了会"接替"其他 BGM 播放：独立音乐响起时暂停当前
    //   轮换 BGM（保留曲目记录，不销毁对象），阻止阶段切换，结束后自动恢复同一首。
    //   （提示音乐则不同：四路获胜/失败时叠加播放，BGM 压制到 10%，结束后约 2 秒渐变恢复）
    var _bgmIndependentPaused = false;
    /** 接替轮换 BGM（独立音乐开始播放时调用）：暂停当前 BGM，让独立音乐顶替其位置 */
    function blockBGMForIndependent() {
      if (_bgmIndependentPaused) return;
      _bgmIndependentPaused = true;
      cancelBGMRestoreRamp(); // ★ 渐变恢复途中独立音乐接替 → 中止渐变，由接替逻辑接管
      if (bgmAudio) {
        try { bgmAudio.pause(); } catch (e) {}
        bgmPlaying = false;  // 标记未播放，便于结束后由 syncBGMWithMute 逻辑恢复同一首
      }
    }
    /** 交还轮换 BGM（独立音乐结束/停止/重置时调用）：恢复被接替的原曲 */
    function unblockBGMForIndependent() {
      if (!_bgmIndependentPaused) return;
      _bgmIndependentPaused = false;
      if (typeof syncBGMWithMute === 'function') syncBGMWithMute();
    }

    /** 前一个游戏阶段 BGM 阶段标识（避免重复切换） */
    var _lastBGMPhase = '';

    /** 游戏阶段 BGM 配置：开局/中局/末局 */
    var _phaseBGMConfig = {
      'open': { files: ['开局1.mp3', '开局2.mp3'], range: [1, 5] },
      'mid':  { files: ['中局1.mp3', '中局2.mp3', '中局3.mp3'], range: [6, 13] },
      'end':  { files: ['末局1.mp3', '末局2.mp3'], range: [14, Infinity] }
    };

    /** 根据当前回合数确定 BGM 阶段标志 */
    function getBGMPhase(turnNum) {
      for (var key in _phaseBGMConfig) {
        var cfg = _phaseBGMConfig[key];
        if (turnNum >= cfg.range[0] && turnNum <= cfg.range[1]) return key;
      }
      return 'end';
    }

    /** 检查是否需要切换阶段 BGM，若需要则淡出当前 + 淡入新阶段随机曲目 */
    function checkPhaseBGM() {
      if (window._replayModeActive) return;  // ★ 回放模式绝不触发阶段 BGM（回放期间 gamePhase 被强制为 'playing'）
      if (SoundConfig.isMuted || SoundConfig.bgmVolume <= 0) return;
      if (_bgmIndependentPaused) return;  // ★ 独立音乐屏蔽期间不切换阶段 BGM
      if (GameState.gamePhase !== 'playing') return;
      var phase = getBGMPhase(GameState.turnNumber || 1);
      if (phase === _lastBGMPhase) return;
      _lastBGMPhase = phase;
      var cfg = _phaseBGMConfig[phase];
      var pick = cfg.files[Math.floor(Math.random() * cfg.files.length)];
      // 淡出当前（800ms）后淡入新曲（1200ms）
      fadeOutBGM(800, function() {
        playBGM(pick, 1200);
      });
    }
    function syncBGMWithMute() {
      if (SoundConfig.isMuted || SoundConfig.bgmVolume <= 0) {
        if (bgmAudio) {
          try { bgmAudio.pause(); } catch (e) {}
        }
        bgmPlaying = false;
      } else if (bgmFileName && !bgmPlaying && !_bgmIndependentPaused) {  // ★ 独立音乐屏蔽期间不恢复
        // ★ 2026-9-10 修复：对局中解除静音时，bgmFileName 可能仍是主页曲目
        //   （静音期间阶段 BGM 从未被记录），恢复为当前对局阶段 BGM 而非主页曲
        if (typeof GameState !== 'undefined' && GameState && GameState.gamePhase === 'playing') {
          _lastBGMPhase = '';
          checkPhaseBGM();
          return;
        }
        playBGM(bgmFileName);
      }
    }

    // ----------------------------------------------------------------------------
    // 【DOM元素引用】
    // ----------------------------------------------------------------------------
    // 统一管理所有游戏界面元素的引用，避免重复查询DOM
    // 结构: player/opponent/center/ui 四个分组
    const GameElements = {
      player: {
        hand: document.getElementById('player-hand'),           // 我方手牌区(6张)
        darkCards: document.getElementById('player-dark-cards'), // 我方暗牌区(5张，背面朝上)
        revealedCards: document.getElementById('player-revealed-cards'), // 我方明牌区(3张，正面朝上)
        roadArea: document.getElementById('player-road-area'),   // 我方路牌区(5路)
        neutralArea: document.getElementById('player-neutral-area'), // 我方中立区(7路)
        deck: document.getElementById('player-deck'),           // 我方牌堆显示
        deckCount: document.getElementById('player-deck-count'), // 我方牌堆数量显示
      },
      opponent: {
        hand: document.getElementById('opponent-hand'),         // 对方手牌区(6张)
        darkCards: document.getElementById('opponent-dark-cards'), // 对方暗牌区(5张)
        revealedCards: document.getElementById('opponent-revealed-cards'), // 对方明牌区(3张)
        roadArea: document.getElementById('opponent-road-area'), // 对方路牌区(5路)
        neutralArea: document.getElementById('opponent-neutral-area'), // 对方中立区(7路)
        deck: document.getElementById('opponent-deck'),         // 对方牌堆显示
        deckCount: document.getElementById('opponent-deck-count'), // 对方牌堆数量显示
      },
      ui: {
        gameStatus: document.getElementById('game-status'),     // 顶部状态栏文字(显示当前状态)
        startBtn: document.getElementById('start-game'),       // 右下角开始游戏按钮
        stopBtn: { disabled: false, style: { opacity: '1', cursor: 'pointer' }, addEventListener: function(){}, removeEventListener: function(){}, click: function(){}, classList: { add: function(){}, remove: function(){}, toggle: function(){} } },  // ★ 2026-9-2: 终止出牌按钮已移除，全自动判定，mock 对象兜底所有旧引用
        restartBtn: document.getElementById('restart-game'),    // 右下角重新开始按钮
        turnText: document.getElementById('current-turn-text'), // 顶部回合文字(显示回合数)
        battlefield: document.getElementById('battlefield'),    // 游戏战场主区域
        rulesBtn: document.getElementById('game-rules-btn'),    // 左下角规则按钮(💡)
        rulesOverlay: document.getElementById('game-rules-overlay'), // 规则面板遮罩层
        closeRulesBtn: document.getElementById('close-game-rules-btn'), // 规则面板关闭按钮
      }
    };

    // ============================================================================
    // 【游戏状态 · GameState】统一管理所有运行时数据
    // ============================================================================
    //
    // 字段分组与说明:
    //   ┌──────────────────────────────────────────────────────────────┐
    //   │  ■ 阶段与回合（Phase & Turn）                              │
    //   │     gamePhase              setup/playing/ended             │
    //   │     currentTurn            'player' / 'opponent'           │
    //   │     turnNumber             回合编号(从 1 开始)             │
    //   │     firstPlayerSetting     设置面板选择的先手方            │
    //   │     firstPlayer            实际先手方（开始时确定）        │
    //   │                                                             │
    //   │  ■ 胜负与终止（Win & Stop）                               │
    //   │     playerWins[5]          我方每路胜负状态                │
    //   │     opponentWins[5]        对方每路胜负状态                │
    //   │     playerStoppedPlaying   我方是否终止出牌                │
    //   │     opponentStoppedPlaying 对方是否终止出牌                │
    //   │                                                             │
    //   │  ■ 我方卡牌（Player Cards）                               │
    //   │     playerDeck[]           牌库（剩余未发）                │
    //   │     playerHand[]           手牌（6张，可打出）             │
    //   │     playerRevealedCards[]  明牌区（3张，正面朝上）         │
    //   │     playerDarkCards[]      暗牌区（5张，背面朝上）         │
    //   │     playerField[5]         五路场牌（每路 1 张）           │
    //   │     playerStack[5][]       五路叠牌（每路最多 8 张）       │
    //   │     playerNeutralCards[7][]  我方中立区（7格）             │
    //   │                                                             │
    //   │  ■ 对方卡牌（Opponent Cards）                             │
    //   │     opponentDeck/Hand/RevealedCards/DarkCards             │
    //   │     opponentField[5]       对方五路场牌                    │
    //   │     opponentStack[5][]     对方五路叠牌                    │
    //   │     opponentNeutralCards[7][]  对方中立区（7格）           │
    //   │                                                             │
    //   │  ■ 回合与记录（Turn History）                             │
    //   │     cardPlayedThisTurn     本回合是否出过牌（每回合 1 张）│
    //   │     turnHistory[]          回合历史（用于回退/复盘）       │
    //   │     lastPlayedCard         最后打出的牌（用于特效）        │
    //   │     playedCardsCount{}     已打出卡牌统计（用于判断牌型）  │
    //   │                                                             │
    //   │  ■ 中断与计时（Interrupt & Timers）                       │
    //   │     isDealingCards         是否正在发牌阶段（防重复触发）  │
    //   │     timers[]               定时器 ID 数组（中断时清除）    │
    //   │     playableHintTimer      可出牌提示光环的自动消失定时器 │
    //   │     isGameInterrupted      游戏中断标志（重新开始设 true）│
    //   └──────────────────────────────────────────────────────────────┘
    // ============================================================================
    const GameState = {
      // === 阶段与回合 ===
      gamePhase: 'setup',
      currentTurn: 'player',
      turnNumber: 1,
      firstPlayerSetting: 'random',
      firstPlayer: 'player',
      callCardEnabled: false,
      pendingCallCard: null,
      // === 叫牌成功追踪 ===
      callCardSuccessCount: 0,  // 成功叫牌次数（影响奖励递减）
      callCardBonusScore: 0,    // 叫牌成功累计奖励分数（加入总分）
      callCardCardTypeBonus: 0, // 叫牌成功累计牌型加分（超过5次后每次+30，永久加入牌型得分）
      callCardHasSuccess: false, // 是否有过叫牌成功（总分金色显示）
      // === 胜负与终止 ===
      playerWins: [false, false, false, false, false],
      opponentWins: [false, false, false, false, false],
      playerStoppedPlaying: false,
      opponentStoppedPlaying: false,
      // === 我方卡牌 ===
      playerDeck: [],
      playerHand: [],
      playerRevealedCards: [],
      playerDarkCards: [],
      playerField: [null, null, null, null, null],
      playerStack: [[], [], [], [], []],
      playerNeutralCards: [[], [], [], [], [], [], []],
      // === 对方卡牌 ===
      opponentDeck: [],
      opponentHand: [],
      opponentRevealedCards: [],
      opponentDarkCards: [],
      opponentField: [null, null, null, null, null],
      opponentStack: [[], [], [], [], []],
      opponentNeutralCards: [[], [], [], [], [], [], []],
      // === 回合与记录 ===
      isDealingCards: false,
      cardPlayedThisTurn: false,
      turnHistory: [],
      lastPlayedCard: null,
      playedCardsCount: {},
      // === 本地打出状态（打出→放置期间拦截拼点）===
      //   localCardPlayPending: true=卡牌处于"打出状态"（已打出但未确认放置）
      //   覆盖所有子状态：叫牌中、匹配光环中、已打出未放置
      //   唯一真相源：超时时据此判断强制放置还是发起投票
      localCardPlayPending: false,
      localCardPlayRoadIndex: -1,
      // === 中断与计时 ===
      timers: [],
      playableHintTimer: null,
      isGameInterrupted: false,
      // === 2026-08-28修复：超时投票竞态防护 ===
      // 玩家出牌瞬间设为true，handleTimeoutTrigger 检测到后跳过超时投票
      timeoutSuppressed: false,
      // === AI 战术策略记忆（按红框三条总原则）===
      // opponentLastSourceType = 'hand' | 'deck' | 'revealed' | 'dark' | null
      // 用于实现"根据上回合打出/放置的功能牌类型，定位同类策略"的总原则
      opponentLastSourceType: null,
      // === 匹配操作状态（拖牌/撞牌/援牌/围牌）===
      adjacentCards: [],
      isDraggingCard: false,
      draggedCard: null,
      draggedCardSource: null,
      matchActionPerformedThisTurn: false,
      pendingRoadIndex: null,
      pendingMatchCard: null,
      matchCancelHandler: null,
      neutralCancelHandler: null,
      // === 四人模式状态 ===
      // fourPlayerActive: 是否处于四人模式
      fourPlayerActive: false,
      // fourPlayerSubTurn: 当前子玩家索引 (0=玩家A左, 1=AI_A左, 2=AI_B右, 3=玩家B右)
      fourPlayerSubTurn: 0,
      // fourPlayerTurnOrder: 回合顺序数组，如 [0,1,3,2]（蓝左→红左→红右→蓝右）
      fourPlayerTurnOrder: [0, 1, 3, 2],
      // fourPlayerTurnIndex: 当前在 turnOrder 中的位置
      fourPlayerTurnIndex: 0,
      // fourPlayerAIStopped: AI是否已终止出牌 [false, false] (A, B)
      fourPlayerAIStopped: [false, false],
      // fourPlayerPlayerStopped: 玩家是否已终止出牌 [false, false] (A, B)
      fourPlayerPlayerStopped: [false, false],
    };
    
    // ============================================================================
    // 【定时器管理与游戏中断】异步操作的统一生命周期管理
    // ============================================================================
    //
    // 设计目的: 所有异步操作（发牌动画、AI思考、UI延迟）都通过此处
    //          注册定时器，确保游戏重新开始时能彻底中断所有运行中
    //          的操作，防止残留的定时器引起状态错乱。
    //
    // 核心函数:
    //   addTimer(timerId)       注册定时器 ID 到 GameState.timers
    //   clearAllTimers()        清除所有已注册的定时器
    //   interruptGame()         中断游戏：清定时器 + 移除动画卡牌 + 置标志
    //   delay(ms)               带注册的 Promise 式延迟（替代 setTimeout）
    // ============================================================================
    function addTimer(timerId) {
      GameState.timers.push(timerId);
    }
    
    function clearAllTimers() {
      GameState.timers.forEach(timerId => clearTimeout(timerId));
      GameState.timers = [];
    }
    
    function interruptGame() {
      GameState.isGameInterrupted = true;
      clearAllTimers();
      const animCards = document.querySelectorAll('.animation-card');
      animCards.forEach(card => card.remove());
    }
    
    function delay(ms) {
      return new Promise(resolve => {
        const timerId = setTimeout(resolve, ms);
        addTimer(timerId);
      });
    }

    // ============================================================================
    // 【工具函数 · 可中断等待】interruptedDelay
    // ============================================================================
    // 2026-9-1: 为 4 个 match 函数提供"可被新 chain 中断"的等待
    //   - 每 50ms 步进一次
    //   - 每步检查 GameState._matchChainGen 是否仍等于传入的 gen
    //   - 若已被新 chain 覆盖 → resolve({ interrupted: true })
    //   - 若达到目标时间 → resolve({ interrupted: false })
    // 返回：Promise<{ interrupted: boolean, actualMs: number }>
    function interruptedDelay(targetMs, myGen) {
      return new Promise(resolve => {
        var startTime = Date.now();
        console.log('%c[MATCH] interruptedDelay START gen=' + myGen + ' targetMs=' + targetMs,
          'color:#0a0;background:#afa;font-weight:bold');
        function step() {
          // 被新 chain 覆盖 → 中断
          if (typeof GameState !== 'undefined'
              && GameState._matchChainGen !== undefined
              && GameState._matchChainGen !== myGen) {
            console.log('%c[MATCH] ⚠ INTERRUPTED! myGen=' + myGen + ' curGen=' + GameState._matchChainGen + ' waited=' + (Date.now() - startTime) + 'ms',
              'color:#fff;background:#f50;font-weight:bold');
            resolve({ interrupted: true, actualMs: Date.now() - startTime });
            return;
          }
          // 达到目标时间 → 完成
          if (Date.now() - startTime >= targetMs) {
            console.log('%c[MATCH] ✅ COMPLETE gen=' + myGen + ' waited=' + (Date.now() - startTime) + 'ms',
              'color:#000;background:#0ff;font-weight:bold');
            resolve({ interrupted: false, actualMs: Date.now() - startTime });
            return;
          }
          // 继续
          var t = setTimeout(step, 50);
          if (typeof addTimer === 'function') addTimer(t);
        }
        step();
      });
    }

    // ★ 2026-9-1: 暴露 GameState._matchChainGen（match chain 总锁）
    //   每次进入 4 个 match 函数之一，先 ++ 此值；
    //   interruptedDelay 每 50ms 步进检查一次，若发现已被新 chain 覆盖则提前 return。
    if (typeof GameState !== 'undefined') {
      if (typeof GameState._matchChainGen !== 'number') GameState._matchChainGen = 0;
    }

    // ============================================================================
    // 【工具函数 · Utilities】通用辅助方法
    // ============================================================================
    //   isRoyalCard(display)  判断是否为 J/Q/K 花牌（有特殊边框与护盾）
    // ============================================================================

    function isRoyalCard(display) {
      return ['J', 'Q', 'K'].includes(display);
    }

    // ============================================================================
    // 【卡牌匹配规则 · Match Rules】相邻/相同点数判断的核心逻辑
    // ============================================================================
    //
    // 规则定义:
    //   isCardsAdjacent(v1, v2)   点数差 1 视为相邻；A(1) 与 K(13) 特殊相邻
    //   isCardsSame(v1, v2)       点数完全相同（拖牌/撞牌的基本条件）
    //   isCardsMatch(v1, v2)      相邻 OR 相同（综合判断）
    //
    // 用途: 拖牌/撞牌操作的前置判断；AI 决策时评估匹配机会
    // ============================================================================
    
    // isCardsAdjacent: 判断两个点数是否相邻(A与K相邻)
    // 返回: true(相邻) / false(不相邻)
    function isCardsAdjacent(value1, value2) {
      return Math.abs(value1 - value2) === 1 ||
             (value1 === 1 && value2 === 13) ||
             (value1 === 13 && value2 === 1);
    }

    // isCardsSame: 判断两个点数是否相同
    // 返回: true(相同) / false(不相同)
    function isCardsSame(value1, value2) {
      return value1 === value2;
    }

    // isCardsMatch: 判断两个点数是否匹配(相邻或相同)
    // 返回: true(匹配) / false(不匹配)
    function isCardsMatch(value1, value2) {
      return isCardsAdjacent(value1, value2) || isCardsSame(value1, value2);
    }

    // ============================================================================
    // 【JS-3/10】卡牌渲染系统
    // ============================================================================
    // 包含: 卡面配置、卡背配置、卡面/卡背/护盾边框生成函数
    // 移植来源: 牌兵布阵（规则）.html 的立体化卡面和卡背效果
    
    // ----------------------------------------------------------------------------
    // 【卡面配置】
    // ----------------------------------------------------------------------------
    // 定义我方和对方卡牌的颜色、边框、光晕等视觉样式
    // 移植来源: 牌兵布阵（规则）.html 的立体化卡面效果
    // 配置结构:
    //   normal:    普通卡牌样式(非皇家)
    //   royal:     皇家卡牌样式(J/Q/K)，带护盾边框
    //   small:     小号卡牌样式(叠牌区使用)
    //   smallRoyal:小号皇家卡牌样式
    const CardFaceConfig = {
      player: {
        gradient: 'linear-gradient(145deg, #1e40af, #3b82f6)',
        borderColor: '#60a5fa',
        borderWidth: '2px',
        borderRadius: '10px',
        fontSize: '2rem',
        shadow: '0 4px 15px rgba(59, 130, 246, 0.4)',
        innerShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
        royal: {
          borderWidth: '3px',
          borderRadius: '12px',
          shadow: '0 0 25px rgba(96, 165, 250, 0.4), 0 4px 15px rgba(59, 130, 246, 0.4)',
          innerShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa'
        },
        small: {
          borderWidth: '2px',
          borderRadius: '10px',
          shadow: '0 1px 3px rgba(59, 130, 246, 0.3)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '3px',
          borderRadius: '12px',
          shadow: '0 0 6px rgba(96, 165, 250, 0.3), 0 1px 3px rgba(59, 130, 246, 0.3)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa',
          fontSize: '1rem'
        }
      },
      opponent: {
        gradient: 'linear-gradient(145deg, #991b1b, #ef4444)',
        borderColor: '#f87171',
        borderWidth: '2px',
        borderRadius: '10px',
        fontSize: '2rem',
        shadow: '0 4px 15px rgba(239, 68, 68, 0.4)',
        innerShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
        royal: {
          borderWidth: '3px',
          borderRadius: '12px',
          shadow: '0 0 25px rgba(248, 113, 113, 0.4), 0 4px 15px rgba(239, 68, 68, 0.4)',
          innerShadow: 'inset 0 1px 0 rgba(255,255,255,0.15)',
          shieldFill: '#991b1b',
          shieldStroke: '#f87171'
        },
        small: {
          borderWidth: '2px',
          borderRadius: '10px',
          shadow: '0 1px 3px rgba(239, 68, 68, 0.3)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '3px',
          borderRadius: '12px',
          shadow: '0 0 6px rgba(248, 113, 113, 0.3), 0 1px 3px rgba(239, 68, 68, 0.3)',
          shieldFill: '#991b1b',
          shieldStroke: '#f87171',
          fontSize: '1rem'
        }
      }
    };

    // 金属卡面样式配置
    const MetalCardFaceConfig = {
      player: {
        gradient: 'linear-gradient(180deg, #3b82f6 0%, #2563eb 20%, #1d4ed8 40%, #1e40af 60%, #1e3a8a 80%, #1e3a8a 100%)',
        borderColor: '#60a5fa',
        borderWidth: '6px',
        borderRadius: '14px',
        fontSize: '2rem',
        shadow: '0 15px 40px rgba(0,0,0,0.8), 0 5px 20px rgba(59,130,246,0.4), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -4px 10px rgba(0,0,0,0.6)',
        innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(59,130,246,0.12)',
        metalOverlay: 'background: linear-gradient(110deg, rgba(255,255,255,0.4) 0%, rgba(200,220,255,0.12) 15%, rgba(150,180,230,0.06) 30%, transparent 50%, rgba(0,0,0,0.1) 70%, rgba(50,80,150,0.05) 85%, rgba(255,255,255,0.2) 100%);',
        edgeHighlight: 'background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.3) 30%, rgba(200,220,255,0.1) 50%, rgba(150,180,230,0.05) 70%, rgba(100,130,200,0) 100%);',
        metalTexture: 'background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.02) 3px, rgba(255,255,255,0.02) 6px);',
        archColor: '#60a5fa',
        archInnerColor: '#1e40af',
        metalBorder: 'background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%);',
        royal: {
          borderWidth: '7px',
          borderRadius: '16px',
          shadow: '0 0 60px rgba(96,165,250,0.4), 0 15px 40px rgba(59,130,246,0.3), 0 5px 15px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -4px 10px rgba(0,0,0,0.6)',
          innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(59,130,246,0.1)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa'
        },
        small: {
          borderWidth: '5px',
          borderRadius: '12px',
          shadow: '0 8px 25px rgba(0,0,0,0.7), 0 3px 12px rgba(59,130,246,0.3), inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 4px 10px rgba(255,255,255,0.1), inset 0 -6px 12px rgba(0,0,0,0.4)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '5px',
          borderRadius: '14px',
          shadow: '0 0 35px rgba(96,165,250,0.3), 0 8px 25px rgba(59,130,246,0.25), 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 4px 10px rgba(255,255,255,0.1), inset 0 -6px 12px rgba(0,0,0,0.4)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa',
          fontSize: '1rem'
        }
      },
      opponent: {
        gradient: 'linear-gradient(180deg, #ef4444 0%, #dc2626 20%, #b91c1c 40%, #991b1b 60%, #7f1d1d 80%, #7f1d1d 100%)',
        borderColor: '#f87171',
        borderWidth: '6px',
        borderRadius: '14px',
        fontSize: '2rem',
        shadow: '0 15px 40px rgba(0,0,0,0.8), 0 5px 20px rgba(239,68,68,0.4), inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -4px 10px rgba(0,0,0,0.6)',
        innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.12), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(239,68,68,0.12)',
        metalOverlay: 'background: linear-gradient(110deg, rgba(255,255,255,0.35) 0%, rgba(255,180,180,0.1) 15%, rgba(255,120,120,0.05) 30%, transparent 50%, rgba(0,0,0,0.1) 70%, rgba(150,50,50,0.05) 85%, rgba(255,255,255,0.15) 100%);',
        edgeHighlight: 'background: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(255,200,200,0.25) 30%, rgba(255,150,150,0.08) 50%, rgba(200,100,100,0.03) 70%, rgba(150,50,50,0) 100%);',
        metalTexture: 'background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.02) 3px, rgba(255,255,255,0.02) 6px);',
        archColor: '#f87171',
        archInnerColor: '#991b1b',
        metalBorder: 'background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%);',
        royal: {
          borderWidth: '7px',
          borderRadius: '16px',
          shadow: '0 0 60px rgba(255,107,107,0.4), 0 15px 40px rgba(220,20,60,0.3), 0 5px 15px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -4px 10px rgba(0,0,0,0.6)',
          innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.12), inset 0 -8px 20px rgba(0,0,0,0.5), inset 0 0 40px rgba(220,20,60,0.1)',
          shieldFill: '#991b1b',
          shieldStroke: '#ff6b6b'
        },
        small: {
          borderWidth: '5px',
          borderRadius: '12px',
          shadow: '0 8px 25px rgba(0,0,0,0.7), 0 3px 12px rgba(220,20,60,0.3), inset 0 1px 2px rgba(255,255,255,0.2), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 4px 10px rgba(255,255,255,0.08), inset 0 -6px 12px rgba(0,0,0,0.4)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '5px',
          borderRadius: '14px',
          shadow: '0 0 35px rgba(255,107,107,0.3), 0 8px 25px rgba(220,20,60,0.25), 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.2), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 4px 10px rgba(255,255,255,0.08), inset 0 -6px 12px rgba(0,0,0,0.4)',
          shieldFill: '#991b1b',
          shieldStroke: '#ff6b6b',
          fontSize: '1rem'
        }
      }
    };

    // 玻璃卡面样式配置
    const GlassCardFaceConfig = {
      player: {
        gradient: 'linear-gradient(145deg, #1e40af, #3b82f6)',
        borderColor: '#60a5fa',
        borderWidth: '4px',
        borderRadius: '10px',
        fontSize: '2rem',
        shadow: '0 12px 28px rgba(0,0,0,0.6), 0 6px 18px rgba(59,130,246,0.18), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -5px 12px rgba(0,0,0,0.5)',
        innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -12px 30px rgba(0,0,0,0.7), inset 0 0 40px rgba(59,130,246,0.1)',
        metalOverlay: 'background: linear-gradient(110deg, rgba(255,255,255,0.3) 0%, rgba(200,220,255,0.12) 15%, rgba(150,180,230,0.06) 30%, transparent 50%, rgba(0,0,0,0.08) 70%, rgba(50,80,150,0.08) 85%, rgba(255,255,255,0.15) 100%);',
        edgeHighlight: 'background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 15%, rgba(230,245,255,0.2) 30%, rgba(200,225,255,0.1) 50%, rgba(180,210,250,0.05) 70%, transparent 100%);',
        glassTopHighlight: 'background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 20%, rgba(230,245,255,0.15) 40%, rgba(200,225,255,0.08) 60%, transparent 85%);',
        metalTexture: 'background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);',
        metalBorder: 'background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%);',
        royal: {
          borderWidth: '5px',
          borderRadius: '12px',
          shadow: '0 12px 28px rgba(0,0,0,0.6), 0 6px 18px rgba(96, 165, 250, 0.18), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -5px 12px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.15), inset 0 -12px 30px rgba(0,0,0,0.7), inset 0 0 40px rgba(59,130,246,0.1)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa'
        },
        small: {
          borderWidth: '3px',
          borderRadius: '10px',
          shadow: '0 6px 14px rgba(0,0,0,0.5), 0 3px 8px rgba(59, 130, 246, 0.15), inset 0 1px 2px rgba(255,255,255,0.15), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 2px 5px rgba(255,255,255,0.1), inset 0 -4px 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(59,130,246,0.08)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '4px',
          borderRadius: '12px',
          shadow: '0 6px 14px rgba(0,0,0,0.5), 0 3px 8px rgba(96, 165, 250, 0.18), inset 0 1px 2px rgba(255,255,255,0.15), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 2px 5px rgba(255,255,255,0.1), inset 0 -4px 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(59,130,246,0.08)',
          shieldFill: '#1e40af',
          shieldStroke: '#60a5fa',
          fontSize: '1rem'
        }
      },
      opponent: {
        gradient: 'linear-gradient(145deg, #991b1b, #ef4444)',
        borderColor: '#f87171',
        borderWidth: '4px',
        borderRadius: '10px',
        fontSize: '2rem',
        shadow: '0 12px 28px rgba(0,0,0,0.6), 0 6px 18px rgba(220,20,60,0.18), inset 0 2px 4px rgba(255,255,255,0.18), inset 0 -5px 12px rgba(0,0,0,0.5)',
        innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.12), inset 0 -12px 30px rgba(0,0,0,0.7), inset 0 0 40px rgba(220,20,60,0.1)',
        metalOverlay: 'background: linear-gradient(110deg, rgba(255,255,255,0.25) 0%, rgba(255,180,180,0.1) 15%, rgba(255,120,120,0.05) 30%, transparent 50%, rgba(0,0,0,0.08) 70%, rgba(150,50,50,0.08) 85%, rgba(255,255,255,0.12) 100%);',
        edgeHighlight: 'background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 15%, rgba(255,220,220,0.2) 30%, rgba(255,180,180,0.1) 50%, rgba(255,160,160,0.05) 70%, transparent 100%);',
        glassTopHighlight: 'background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 20%, rgba(255,220,220,0.15) 40%, rgba(255,180,180,0.08) 60%, transparent 85%);',
        metalTexture: 'background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px);',
        metalBorder: 'background: linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%);',
        royal: {
          borderWidth: '5px',
          borderRadius: '12px',
          shadow: '0 12px 28px rgba(0,0,0,0.6), 0 6px 18px rgba(248, 113, 113, 0.18), inset 0 2px 4px rgba(255,255,255,0.18), inset 0 -5px 12px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 6px 15px rgba(255,255,255,0.12), inset 0 -12px 30px rgba(0,0,0,0.7), inset 0 0 40px rgba(220,20,60,0.1)',
          shieldFill: '#991b1b',
          shieldStroke: '#f87171'
        },
        small: {
          borderWidth: '3px',
          borderRadius: '10px',
          shadow: '0 6px 14px rgba(0,0,0,0.5), 0 3px 8px rgba(220,20,60,0.15), inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 2px 5px rgba(255,255,255,0.08), inset 0 -4px 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(220,20,60,0.08)',
          fontSize: '0.875rem'
        },
        smallRoyal: {
          borderWidth: '4px',
          borderRadius: '12px',
          shadow: '0 6px 14px rgba(0,0,0,0.5), 0 3px 8px rgba(248, 113, 113, 0.18), inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -3px 6px rgba(0,0,0,0.5)',
          innerShadow: 'inset 0 2px 5px rgba(255,255,255,0.08), inset 0 -4px 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(220,20,60,0.08)',
          shieldFill: '#991b1b',
          shieldStroke: '#f87171',
          fontSize: '1rem'
        }
      }
    };

    // 卡通卡面样式配置（果冻立体卡通风：白/队色牌面+粗描边+底部硬厚度+皇家盾牌）
    const CartoonCardFaceConfig = {
      player: {
        gradient: 'linear-gradient(180deg, #ffffff 0%, #f2f9ff 52%, #dcecff 100%)',
        borderColor: '#3e8de0',
        borderWidth: '3px',
        borderRadius: '14px',
        fontSize: '2rem',
        shadow: 'inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28)',
        innerShadow: '',
        ringColor: 'rgba(62,141,224,.35)',
        pipColor: '#2e6fc0',
        pipShadowBig: '-2px -2px 0 #43315e, 2px -2px 0 #43315e, -2px 2px 0 #43315e, 2px 2px 0 #43315e, -2.5px 0 0 #43315e, 2.5px 0 0 #43315e, 0 -2.5px 0 #43315e, 0 2.5px 0 #43315e, 0 4px 0 rgba(67,49,94,.3)',
        pipShadowSmall: '-1px -1px 0 #43315e, 1px -1px 0 #43315e, -1px 1px 0 #43315e, 1px 1px 0 #43315e, 0 2px 0 rgba(67,49,94,.3)',
        royal: {
          borderWidth: '3px',
          borderRadius: '16px',
          shadow: 'inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28)',
          innerShadow: '',
          shieldFill: '#3a7ce0',
          shieldFillB: '#2050ae',
          shieldStroke: '#7db8f5'
        },
        small: {
          borderWidth: '2.5px',
          borderRadius: '12px',
          shadow: 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)',
          fontSize: '0.875rem',
          background: 'linear-gradient(180deg, #ffffff 0%, #fbfdff 55%, #eef6ff 100%)',
          pipColor: '#2e6fc0'
        },
        smallRoyal: {
          borderWidth: '2.5px',
          borderRadius: '12px',
          shadow: 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)',
          shieldFill: '#3a7ce0',
          shieldFillB: '#2050ae',
          shieldStroke: '#7db8f5',
          fontSize: '1rem'
        }
      },
      opponent: {
        gradient: 'linear-gradient(180deg, #ffffff 0%, #fff1f6 52%, #ffdbe9 100%)',
        borderColor: '#ef5d8f',
        borderWidth: '3px',
        borderRadius: '14px',
        fontSize: '2rem',
        shadow: 'inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28)',
        innerShadow: '',
        ringColor: 'rgba(239,93,143,.35)',
        pipColor: '#d13f74',
        pipShadowBig: '-2px -2px 0 #43315e, 2px -2px 0 #43315e, -2px 2px 0 #43315e, 2px 2px 0 #43315e, -2.5px 0 0 #43315e, 2.5px 0 0 #43315e, 0 -2.5px 0 #43315e, 0 2.5px 0 #43315e, 0 4px 0 rgba(67,49,94,.3)',
        pipShadowSmall: '-1px -1px 0 #43315e, 1px -1px 0 #43315e, -1px 1px 0 #43315e, 1px 1px 0 #43315e, 0 2px 0 rgba(67,49,94,.3)',
        royal: {
          borderWidth: '3px',
          borderRadius: '16px',
          shadow: 'inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28)',
          innerShadow: '',
          shieldFill: '#d94370',
          shieldFillB: '#b22a52',
          shieldStroke: '#ff9cb8'
        },
        small: {
          borderWidth: '2.5px',
          borderRadius: '12px',
          shadow: 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)',
          fontSize: '0.875rem',
          background: 'linear-gradient(180deg, #ffffff 0%, #fffafc 55%, #fff2f7 100%)',
          pipColor: '#d13f74'
        },
        smallRoyal: {
          borderWidth: '2.5px',
          borderRadius: '12px',
          shadow: 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)',
          shieldFill: '#d94370',
          shieldFillB: '#b22a52',
          shieldStroke: '#ff9cb8',
          fontSize: '1rem'
        }
      }
    };

        function getCardFaceHTML(playerType, card, isSmall = false) {
      const baseConfig = selectedCardFaceStyle === 'metal'
        ? (playerType === 'player' ? MetalCardFaceConfig.player : MetalCardFaceConfig.opponent)
        : selectedCardFaceStyle === 'glass'
        ? (playerType === 'player' ? GlassCardFaceConfig.player : GlassCardFaceConfig.opponent)
        : selectedCardFaceStyle === 'cartoon'
        ? (playerType === 'player' ? CartoonCardFaceConfig.player : CartoonCardFaceConfig.opponent)
        : (playerType === 'player' ? CardFaceConfig.player : CardFaceConfig.opponent);
      const config = baseConfig;
      const isRoyal = isRoyalCard(card.display);
      const dataIdAttr = `data-card-id="${card.id}"`;

      const useMetalEffect = selectedCardFaceStyle === 'metal' || selectedCardFaceStyle === 'glass';

      const metalOverlayHTML = useMetalEffect
        ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${config.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>`
        : '';

      const edgeHighlightHTML = selectedCardFaceStyle === 'glass'
        ? `<div style="position:absolute;top:0;left:0;width:100%;height:35%;${config.edgeHighlight}pointer-events:none;z-index:3;border-radius:${config.borderRadius} ${config.borderRadius} 0 0;"></div><div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${config.edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${config.borderRadius} ${config.borderRadius};transform:rotate(180deg);"></div>`
        : '';

      const glassTopHighlightHTML = selectedCardFaceStyle === 'glass'
        ? `<div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${config.glassTopHighlight}pointer-events:none;z-index:2.5;border-radius:${config.borderRadius} ${config.borderRadius} 0 0;"></div>`
        : '';

      const metalTextureHTML = useMetalEffect
        ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${config.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div><div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>`
        : '';

      const border3DHTML = selectedCardFaceStyle === 'metal'
        ? `<div style="position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border:5px solid #d4d4d4;border-radius:${parseInt(config.borderRadius)+6}px;pointer-events:none;z-index:3;background:linear-gradient(135deg, #ffffff 0%, #e8e8e8 30%, #c0c0c0 50%, #a0a0a0 70%, #808080 100%);box-shadow:inset 0 3px 6px rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.5);"></div><div style="position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:2px solid #f5f5f5;border-radius:${parseInt(config.borderRadius)+3}px;pointer-events:none;z-index:2;"></div>`
        : '';

      const archFrameHTML = selectedCardFaceStyle === 'metal'
        ? (() => {
            const gradPrefix = playerType === 'player' ? 'p' : 'o';
            const grad1Id = `archGrad1_${gradPrefix}`;
            const grad2Id = `archGrad2_${gradPrefix}`;
            const grad3Id = `archGrad3_${gradPrefix}`;
            const glowId = `archGlow_${gradPrefix}`;
            return `<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;">
             <svg viewBox="0 0 200 300" preserveAspectRatio="none" style="width:100%;height:100%;">
               <defs>
                 <linearGradient id="${grad1Id}" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="${config.archInnerColor}"/>
                   <stop offset="20%" stop-color="${config.archColor}"/>
                   <stop offset="35%" stop-color="#fff"/>
                   <stop offset="50%" stop-color="${config.archColor}"/>
                   <stop offset="70%" stop-color="${config.archColor}"/>
                   <stop offset="100%" stop-color="${config.archInnerColor}"/>
                 </linearGradient>
                 <linearGradient id="${grad2Id}" x1="0%" y1="0%" x2="0%" y2="100%">
                   <stop offset="0%" stop-color="#fff"/>
                   <stop offset="20%" stop-color="${config.archColor}"/>
                   <stop offset="50%" stop-color="${config.archColor}"/>
                   <stop offset="80%" stop-color="${config.archInnerColor}"/>
                   <stop offset="100%" stop-color="#111"/>
                 </linearGradient>
                 <linearGradient id="${grad3Id}" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="#333"/>
                   <stop offset="50%" stop-color="#555"/>
                   <stop offset="100%" stop-color="#333"/>
                 </linearGradient>
                 <filter id="${glowId}">
                   <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
                   <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                 </filter>
               </defs>
               <path d="M10 50 Q100 -20 190 50 L190 270 L10 270 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 54 Q100 -15 186 54 L186 266 L14 266 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 58 Q100 -10 182 58 L182 262 L18 262 Z" fill="none" stroke="url(#${grad1Id})" stroke-width="6" filter="url(#${glowId})"/>
               <path d="M24 65 Q100 -2 176 65 L176 256 L24 256 Z" fill="none" stroke="url(#${grad2Id})" stroke-width="4"/>
               <path d="M30 72 Q100 8 170 72 L170 250 L30 250 Z" fill="none" stroke="url(#${grad3Id})" stroke-width="2"/>
               <path d="M10 250 Q100 320 190 250 L190 30 L10 30 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 246 Q100 315 186 246 L186 34 L14 34 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 242 Q100 310 182 242 L182 38 L18 38 Z" fill="none" stroke="url(#${grad1Id})" stroke-width="6" filter="url(#${glowId})"/>
               <path d="M24 235 Q100 302 176 235 L176 44 L24 44 Z" fill="none" stroke="url(#${grad2Id})" stroke-width="4"/>
               <path d="M30 228 Q100 292 170 228 L170 50 L30 50 Z" fill="none" stroke="url(#${grad3Id})" stroke-width="2"/>
               <g fill="#888">
                 <circle cx="22" cy="22" r="4"/>
                 <circle cx="178" cy="22" r="4"/>
                 <circle cx="22" cy="278" r="4"/>
                 <circle cx="178" cy="278" r="4"/>
               </g>
               <g fill="#666">
                 <circle cx="28" cy="28" r="2"/>
                 <circle cx="172" cy="28" r="2"/>
                 <circle cx="28" cy="272" r="2"/>
                 <circle cx="172" cy="272" r="2"/>
               </g>
               <line x1="10" y1="28" x2="28" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="28" x2="190" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="10" y1="272" x2="28" y2="272" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="272" x2="190" y2="272" stroke="#555" stroke-width="1"/>
               <line x1="28" y1="10" x2="28" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="10" x2="172" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="28" y1="272" x2="28" y2="290" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="272" x2="172" y2="290" stroke="#555" stroke-width="1"/>
             </svg>
           </div>`;
          })()
        : '';

      if (isSmall) {
        const smallConfig = isRoyal ? config.smallRoyal : config.small;

        if (isRoyal) {
          if (selectedCardFaceStyle === 'cartoon') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;--ct-bdc:${config.borderColor};--ct-rad:${smallConfig.borderRadius};background:${config.gradient};border:${smallConfig.borderWidth} solid var(--ct-bdc, ${config.borderColor});border-radius:${smallConfig.borderRadius};box-shadow:${smallConfig.shadow};position:relative;overflow:hidden;">
                ${getShieldBorderHTML(playerType === 'player', card.display, true, 'cartoon')}
                <span style="pointer-events:none;position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:900;color:#fff;font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;width:100%;height:100%;">${card.display}</span>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'metal') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${archFrameHTML}
                    ${getShieldBorderHTML(playerType === 'player', card.display, true, selectedCardFaceStyle)}
                    <span style="pointer-events:none;text-shadow:-1px -1px 0 rgba(255,255,255,0.8), 0px -1px 0 rgba(255,255,255,0.6), -1px 0px 0 rgba(255,255,255,0.6), 1px 1px 0 rgba(0,0,0,0.7), 2px 2px 0 rgba(0,0,0,0.5), 3px 3px 0 rgba(0,0,0,0.3), 4px 4px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,255,255,0.3);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:#f0f0f0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;">${card.display}</span>
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'glass') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};${smallConfig.innerShadow || ''};position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${glassTopHighlightHTML}
                    ${getShieldBorderHTML(playerType === 'player', card.display, true, selectedCardFaceStyle)}
                    <span style="pointer-events:none;text-shadow:0 0 3px rgba(255,255,255,0.5), 0 0 6px rgba(255,255,255,0.3), 0 0 10px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.7), 0 3px 3px rgba(0,0,0,0.5);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:#fff;display:flex;align-items:center;justify-content:center;width:100%;height:100%;">${card.display}</span>
                    ${edgeHighlightHTML}
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="background:${config.gradient};border:${smallConfig.borderWidth} solid ${smallConfig.shieldStroke};border-radius:${smallConfig.borderRadius};box-shadow:${smallConfig.shadow};position:relative;overflow:hidden;">
                ${getShieldBorderHTML(playerType === 'player', card.display, true, selectedCardFaceStyle)}
                <span style="pointer-events:none;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.3);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:white;display:flex;align-items:center;justify-content:center;width:100%;height:100%;">${card.display}</span>
              </div>
            `;
          }
        } else {
          if (selectedCardFaceStyle === 'cartoon') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;--ct-bdc:${config.borderColor};--ct-rad:${smallConfig.borderRadius};background:${smallConfig.background};border:${smallConfig.borderWidth} solid var(--ct-bdc, ${config.borderColor});border-radius:${smallConfig.borderRadius};box-shadow:${smallConfig.shadow};display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                <span class="ct-pip" style="pointer-events:none;position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:900;--ct-pipc:${smallConfig.pipColor};color:var(--ct-pipc, ${smallConfig.pipColor});font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;">${card.display}</span>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'metal') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${archFrameHTML}
                    <span style="pointer-events:none;text-shadow:-1px -1px 0 rgba(255,255,255,0.8), 0px -1px 0 rgba(255,255,255,0.6), -1px 0px 0 rgba(255,255,255,0.6), 1px 1px 0 rgba(0,0,0,0.7), 2px 2px 0 rgba(0,0,0,0.5), 3px 3px 0 rgba(0,0,0,0.3), 4px 4px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,255,255,0.3);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:#f0f0f0;">${card.display}</span>
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'glass') {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};${smallConfig.innerShadow || ''};display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${glassTopHighlightHTML}
                    <span style="pointer-events:none;text-shadow:0 0 3px rgba(255,255,255,0.5), 0 0 6px rgba(255,255,255,0.3), 0 0 10px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.7), 0 3px 3px rgba(0,0,0,0.5);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:#fff;">${card.display}</span>
                    ${edgeHighlightHTML}
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else {
            return `
              <div class="card card-small game-cursor-hover card-hover" ${dataIdAttr} style="background:${config.gradient};border:${smallConfig.borderWidth} solid ${config.borderColor};border-radius:${smallConfig.borderRadius};box-shadow:${smallConfig.shadow};display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                <span style="pointer-events:none;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.3);position:relative;z-index:3;font-size:${smallConfig.fontSize};font-weight:bold;color:white;">${card.display}</span>
              </div>
            `;
          }
        }
      } else {
        const largeConfig = isRoyal ? config.royal : config;

        if (isRoyal) {
          if (selectedCardFaceStyle === 'cartoon') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;--ct-bdc:${config.borderColor};--ct-rad:${largeConfig.borderRadius};background:${config.gradient};border:${largeConfig.borderWidth} solid var(--ct-bdc, ${config.borderColor});border-radius:${largeConfig.borderRadius};box-shadow:${largeConfig.shadow};position:relative;overflow:hidden;">
                ${getShieldBorderHTML(playerType === 'player', card.display, false, 'cartoon')}
                <div style="pointer-events:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:bold;position:relative;z-index:3;">
                  <span style="pointer-events:none;font-size:${config.fontSize};font-weight:900;color:#fff;font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;text-shadow:${config.pipShadowBig};">${card.display}</span>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'metal') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${largeConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(largeConfig.borderRadius)-2}px;box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${archFrameHTML}
                    ${getShieldBorderHTML(playerType === 'player', card.display, false, selectedCardFaceStyle)}
                    <div style="pointer-events:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#e0e0e0;font-weight:bold;position:relative;z-index:4;">
                      <span style="pointer-events:none;font-size:${config.fontSize};text-shadow:-1px -1px 0 rgba(255,255,255,0.9), 0px -1px 0 rgba(255,255,255,0.7), -1px 0px 0 rgba(255,255,255,0.7), 1px 1px 0 rgba(0,0,0,0.8), 2px 2px 0 rgba(0,0,0,0.6), 3px 3px 0 rgba(0,0,0,0.4), 4px 4px 8px rgba(0,0,0,0.6), 5px 5px 12px rgba(0,0,0,0.4), 0 0 10px rgba(255,255,255,0.4);">${card.display}</span>
                    </div>
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'glass') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${largeConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(largeConfig.borderRadius)-2}px;box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${glassTopHighlightHTML}
                    ${getShieldBorderHTML(playerType === 'player', card.display, false, selectedCardFaceStyle)}
                    <div style="pointer-events:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#f0f0f0;font-weight:bold;position:relative;z-index:3;">
                      <span style="pointer-events:none;font-size:${config.fontSize};text-shadow:0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.35), 0 0 14px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.6), 0 2px 2px rgba(0,0,0,0.8), 0 4px 4px rgba(0,0,0,0.6), 0 6px 6px rgba(0,0,0,0.4);">${card.display}</span>
                    </div>
                    ${edgeHighlightHTML}
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;background:${config.gradient};border:${largeConfig.borderWidth} solid ${largeConfig.shieldStroke};border-radius:${largeConfig.borderRadius};box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};position:relative;overflow:hidden;">
                ${getShieldBorderHTML(playerType === 'player', card.display, false, selectedCardFaceStyle)}
                <div style="pointer-events:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;position:relative;z-index:3;">
                  <span style="pointer-events:none;font-size:${config.fontSize};text-shadow:0 2px 4px rgba(0,0,0,0.5);">${card.display}</span>
                </div>
              </div>
            `;
          }
        } else {
          if (selectedCardFaceStyle === 'cartoon') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;--ct-bdc:${config.borderColor};--ct-rad:${config.borderRadius};background:${config.gradient};border:${config.borderWidth} solid var(--ct-bdc, ${config.borderColor});border-radius:${config.borderRadius};box-shadow:${config.shadow};position:relative;overflow:hidden;">
                <div class="ct-ring" style="position:absolute;inset:4px;border-radius:${parseInt(config.borderRadius)-4}px;--ct-rgc:${config.ringColor};border:2px solid var(--ct-rgc, ${config.ringColor});pointer-events:none;z-index:2;"></div>
                <div style="pointer-events:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:bold;position:relative;z-index:3;">
                  <span class="ct-pip" style="pointer-events:none;font-size:${config.fontSize};font-weight:900;--ct-pipc:${config.pipColor};color:var(--ct-pipc, ${config.pipColor});font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;text-shadow:${config.pipShadowBig};">${card.display}</span>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'metal') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${largeConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(largeConfig.borderRadius)-2}px;box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};display:flex;align-items:center;justify-content:center;color:#e0e0e0;font-weight:bold;position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${archFrameHTML}
                    <span style="pointer-events:none;position:relative;z-index:3;font-size:${config.fontSize};text-shadow:-1px -1px 0 rgba(255,255,255,0.9), 0px -1px 0 rgba(255,255,255,0.7), -1px 0px 0 rgba(255,255,255,0.7), 1px 1px 0 rgba(0,0,0,0.8), 2px 2px 0 rgba(0,0,0,0.6), 3px 3px 0 rgba(0,0,0,0.4), 4px 4px 8px rgba(0,0,0,0.6), 5px 5px 12px rgba(0,0,0,0.4), 0 0 10px rgba(255,255,255,0.4);">${card.display}</span>
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else if (selectedCardFaceStyle === 'glass') {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;position:relative;">
                <div style="width:100%;height:100%;${config.metalBorder};border-radius:${largeConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.3);">
                  <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(largeConfig.borderRadius)-2}px;box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};display:flex;align-items:center;justify-content:center;color:#f0f0f0;font-weight:bold;position:relative;overflow:hidden;">
                    ${metalTextureHTML}
                    ${glassTopHighlightHTML}
                    <span style="pointer-events:none;position:relative;z-index:3;font-size:${config.fontSize};text-shadow:0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.35), 0 0 14px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.6), 0 2px 2px rgba(0,0,0,0.8), 0 4px 4px rgba(0,0,0,0.6), 0 6px 6px rgba(0,0,0,0.4);">${card.display}</span>
                    ${edgeHighlightHTML}
                    ${metalOverlayHTML}
                  </div>
                </div>
              </div>
            `;
          } else {
            return `
              <div class="card game-cursor-hover card-hover" ${dataIdAttr} style="width:100%;height:100%;background:${config.gradient};border:${largeConfig.borderWidth} solid ${largeConfig.borderColor};border-radius:${largeConfig.borderRadius};box-shadow:${largeConfig.shadow};${largeConfig.innerShadow};display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;position:relative;overflow:hidden;">
                <span style="pointer-events:none;position:relative;z-index:3;font-size:${config.fontSize};text-shadow:0 2px 4px rgba(0,0,0,0.3);">${card.display}</span>
              </div>
            `;
          }
        }
      }
    }

    // ----------------------------------------------------------------------------
    // 【卡背设计数据】
    // ----------------------------------------------------------------------------
    const cardBackDesigns = {
      blue: [
        {
          id: 'blue1',
          name: '皇家徽记',
          background: 'radial-gradient(circle at 40% 28%, #2c4380, #101f47 78%, #091230)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="v2base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="v2base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <!-- 卡底：左上光源径向渐变（中央隆起感） -->
              <radialGradient id="v2base" cx="40%" cy="28%" r="95%">
                <stop offset="0%" stop-color="#2c4380"/>
                <stop offset="42%" stop-color="#1a2f63"/>
                <stop offset="78%" stop-color="#101f47"/>
                <stop offset="100%" stop-color="#091230"/>
              </radialGradient>
              <!-- 暗角（vignette） -->
              <radialGradient id="v2gem" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#ff97a6"/>
                <stop offset="35%" stop-color="#e14b5e"/>
                <stop offset="70%" stop-color="#b32b3e"/>
                <stop offset="100%" stop-color="#7a1626"/>
              </radialGradient>
              <radialGradient id="v2gemB" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#dbeafe"/>
                <stop offset="30%" stop-color="#93c5fd"/>
                <stop offset="65%" stop-color="#3b82f6"/>
                <stop offset="100%" stop-color="#1e40af"/>
              </radialGradient>
<radialGradient id="v2vig" cx="50%" cy="46%" r="75%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/>
                <stop offset="100%" stop-color="rgba(0,0,10,0.55)"/>
              </radialGradient>
              <!-- 金属边框：竖向渐变模拟上亮下暗反光 -->
              <linearGradient id="v2frame" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#f8e3ab"/>
                <stop offset="26%" stop-color="#dbba74"/>
                <stop offset="54%" stop-color="#9a7a3a"/>
                <stop offset="78%" stop-color="#c8a760"/>
                <stop offset="100%" stop-color="#6f5527"/>
              </linearGradient>
              <!-- 徽章金属圆盘 -->
              <radialGradient id="v2disc" cx="36%" cy="28%" r="82%">
                <stop offset="0%" stop-color="#fdf2cc"/>
                <stop offset="32%" stop-color="#e7c985"/>
                <stop offset="68%" stop-color="#aa8742"/>
                <stop offset="100%" stop-color="#63491f"/>
              </radialGradient>
              <!-- 徽章内盘（深蓝凹陷） -->
              <radialGradient id="v2inner" cx="42%" cy="30%" r="85%">
                <stop offset="0%" stop-color="#223a72"/>
                <stop offset="60%" stop-color="#142449"/>
                <stop offset="100%" stop-color="#0b1530"/>
              </radialGradient>
              <!-- 皇冠金色渐变 -->
              <linearGradient id="v2crown" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fff3cf"/>
                <stop offset="45%" stop-color="#e9c87e"/>
                <stop offset="100%" stop-color="#97742f"/>
              </linearGradient>
              <!-- 对角高光带 -->
              <linearGradient id="v2shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/>
                <stop offset="38%" stop-color="rgba(255,255,255,0.05)"/>
                <stop offset="55%" stop-color="rgba(255,255,255,0)"/>
                <stop offset="100%" stop-color="rgba(0,0,0,0.18)"/>
              </linearGradient>
              <filter id="v2drop" x="-40%" y="-40%" width="180%" height="180%">
                <feDropShadow dx="2.5" dy="3.5" stdDeviation="3.5" flood-color="#000000" flood-opacity="0.6"/>
              </filter>
            </defs>

            <!-- 卡底 -->
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2base-rs)"/>
            <!-- 细密菱格纹理（低调，增加材质感） -->
            <g opacity="0.05" stroke="#cdd9f5" stroke-width="1">
              <path d="M-40 0 L150 190 M0 0 L190 190 M40 0 L230 190 M80 0 L270 190 M120 0 L310 190 M160 0 L350 190 M-40 86 L150 276 M0 86 L190 276 M40 86 L230 276 M80 86 L270 276 M120 86 L310 276 M-40 -104 L150 86 M0 -104 L190 86 M40 -104 L230 86 M-40 190 L150 380 M0 190 L190 380 M40 190 L230 380"/>
            </g>

            <!-- 立体斜面边框：外黑压边 → 金属金框 → 内亮线 → 内凹槽 -->
            <rect x="1.5" y="1.5" width="187" height="273" rx="23" fill="none" stroke="#04060f" stroke-width="3"/>
            <rect x="3" y="3" width="184" height="270" rx="22" fill="none" stroke="url(#v2frame)" stroke-width="5"/>
            <rect x="6.5" y="6.5" width="177" height="263" rx="20" fill="none" stroke="rgba(255,244,206,0.55)" stroke-width="1.2"/>
            <rect x="9" y="9" width="172" height="258" rx="18" fill="none" stroke="rgba(4,8,24,0.85)" stroke-width="2.4"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="rgba(147,177,235,0.35)" stroke-width="1"/>

            <!-- 四角宝石装饰（红宝石，向内收） -->
            <g filter="url(#v2drop)">
              <g transform="translate(28,28)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemB)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(162,28)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemB)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(28,248)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemB)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(162,248)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemB)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
            </g>

            <!-- 中央徽章（立体浮雕） -->
            <g filter="url(#v2drop)">
              <!-- 外金属盘 -->
              <circle cx="95" cy="132" r="56" fill="url(#v2disc)"/>
              <path d="M 41 118 A 56 56 0 0 1 149 118" fill="none" stroke="rgba(255,250,225,0.75)" stroke-width="2.2"/>
              <!-- 内凹深蓝盘 -->
              <circle cx="95" cy="132" r="47" fill="url(#v2inner)"/>
              <circle cx="95" cy="132" r="47" fill="none" stroke="url(#v2frame)" stroke-width="2.6"/>
              <circle cx="95" cy="132" r="42" fill="none" stroke="rgba(147,177,235,0.4)" stroke-width="1"/>
              <!-- 放射线（内盘装饰） -->
              <g stroke="rgba(147,177,235,0.16)" stroke-width="1.5">
                <path d="M95 90 L95 100 M95 164 L95 174 M53 132 L63 132 M127 132 L137 132 M65 102 L72 109 M118 155 L125 162 M125 102 L118 109 M72 155 L65 162"/>
              </g>
              <!-- 立体皇冠（金渐变 + 描边 + 底座） -->
              <g filter="url(#v2drop)">
                <path d="M70 148 L70 122 L82.5 133 L95 112 L107.5 133 L120 122 L120 148 Z"
                      fill="url(#v2crown)" stroke="#4a3410" stroke-width="1.6" stroke-linejoin="round"/>
                <circle cx="70" cy="119" r="3.6" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <circle cx="95" cy="107.5" r="4.4" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <circle cx="120" cy="119" r="3.6" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <!-- 冠上宝石：红宝石（中）+ 蓝宝石（侧） -->
                <circle cx="95" cy="136" r="4.2" fill="#d43d4f" stroke="#5c1520" stroke-width="1"/>
                <circle cx="93.6" cy="134.6" r="1.2" fill="rgba(255,220,220,0.95)"/>
                <circle cx="80.5" cy="136" r="2.6" fill="#3b82f6" stroke="#12275c" stroke-width="0.9"/>
                <circle cx="109.5" cy="136" r="2.6" fill="#3b82f6" stroke="#12275c" stroke-width="0.9"/>
                <!-- 皇冠底座（缎带） -->
                <rect x="66" y="148" width="58" height="9" rx="3" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1.4"/>
                <rect x="66" y="149.2" width="58" height="2.6" rx="1.3" fill="rgba(255,250,225,0.4)"/>
              </g>
            </g>

            <!-- 对角高光带 + 暗角（立体光影收尾） -->
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2vig)"/>
          </svg>`
        },
        {
          id: 'blue2',
          name: '星际罗盘',
          background: 'radial-gradient(circle at 50% 40%, #1a2a5e, #101c40 42%, #060b1c)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nB2Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nB2Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <radialGradient id="nB2Base" cx="50%" cy="40%" r="78%">
                <stop offset="0%" stop-color="#1a2a5e"/><stop offset="42%" stop-color="#101c40"/>
                <stop offset="76%" stop-color="#0a1229"/><stop offset="100%" stop-color="#060b1c"/>
              </radialGradient>
              <radialGradient id="nB2Core" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="rgba(255,255,255,0.95)"/><stop offset="45%" stop-color="rgba(219,234,254,0.55)"/>
                <stop offset="100%" stop-color="rgba(147,197,253,0)"/>
              </radialGradient>
              <radialGradient id="nB2Orb1T" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#3b82f6"/><stop offset="100%" stop-color="#1e40af"/>
              </radialGradient>
              <radialGradient id="nB2Orb2T" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#bfdbfe"/><stop offset="100%" stop-color="#60a5fa"/>
              </radialGradient>
              <radialGradient id="nB2Orb1D" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#2563eb"/><stop offset="100%" stop-color="#1e40af"/>
              </radialGradient>
              <radialGradient id="nB2Orb2D" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#60a5fa"/><stop offset="100%" stop-color="#3b82f6"/>
              </radialGradient>
              <linearGradient id="nB2Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/><stop offset="40%" stop-color="rgba(255,255,255,0.03)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(2,6,23,0.4)"/>
              </linearGradient>
              <radialGradient id="nB2Vig" cx="50%" cy="46%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(2,5,18,0.62)"/>
              </radialGradient>
              <filter id="nB2Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB2Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB2Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB2Base-rs)"/>

            <!-- 五角星：双层挤出暗影 + 五层嵌套 + 棱线 + 白热核心（整组边缘光晕） -->
            <g transform="translate(95,138)" filter="url(#nB2Glow)">
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#020613" opacity="0.65" transform="translate(4,5.5)"/>
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#04091c" opacity="0.9" transform="translate(2,2.8)"/>
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#0f172a" opacity="0.9"/>
              <polygon points="0,-76 11.4,-26.6 76,-26.6 26.6,11.4 45.6,76 0,41.8 -45.6,76 -26.6,11.4 -76,-26.6 -11.4,-26.6" fill="#1e40af" opacity="0.95"/>
              <polygon points="0,-64.6 11.4,-22.8 64.6,-22.8 22.8,9.5 38,64.6 0,34.2 -38,64.6 -22.8,9.5 -64.6,-22.8 -11.4,-22.8" fill="#3b82f6"/>
              <polygon points="0,-49.4 9.5,-15.2 49.4,-15.2 19,7.6 30.4,49.4 0,26.6 -30.4,49.4 -19,7.6 -49.4,-15.2 -9.5,-15.2" fill="#60a5fa"/>
              <polygon points="0,-34.2 7.6,-9.5 34.2,-9.5 15.2,5.7 22.8,34.2 0,19 -22.8,34.2 -15.2,5.7 -34.2,-9.5 -7.6,-9.5" fill="#93c5fd" opacity="0.95"/>
              <polygon points="0,-19 3.8,-5.7 19,-5.7 9.5,3.8 13.3,19 0,11.4 -13.3,19 -9.5,3.8 -19,-5.7 -3.8,-5.7" fill="#fff" opacity="0.9"/>
              <!-- 星臂棱线（宝石切面感） -->
              <g stroke="rgba(255,255,255,0.16)" stroke-width="1">
                <path d="M0 0 L0 -85.5 M0 0 L85.5 -30.4 M0 0 L53.2 85.5 M0 0 L-53.2 85.5 M0 0 L-85.5 -30.4"/>
              </g>
              <circle r="26" fill="url(#nB2Core)"/>
              <circle r="3.2" fill="#fff"/>
            </g>

            <!-- 四圈轨道：暗影圈(偏移) + 主圈 + 左上高光弧（浮在星星上方） -->
            <g fill="none">
              <circle cx="95" cy="138" r="91" stroke="#030716" stroke-width="4.75" stroke-dasharray="19,11.4" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="91" stroke="#16244d" stroke-width="4.75" stroke-dasharray="19,11.4"/>
              <circle cx="95" cy="138" r="76" stroke="#030716" stroke-width="3.8" stroke-dasharray="15.2,7.6" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="76" stroke="#1e40af" stroke-width="3.8" stroke-dasharray="15.2,7.6"/>
              <path d="M20.2 124.8 A76 76 0 0 1 108.2 63.2" stroke="rgba(147,197,253,0.5)" stroke-width="1.6"/>
              <circle cx="95" cy="138" r="60.8" stroke="#030716" stroke-width="2.85" stroke-dasharray="11.4,5.7" transform="translate(0,2)"/>
              <circle cx="95" cy="138" r="60.8" stroke="#3b82f6" stroke-width="2.85" stroke-dasharray="11.4,5.7" opacity="0.9"/>
              <path d="M35.1 127.4 A60.8 60.8 0 0 1 105.6 78.1" stroke="rgba(191,219,254,0.45)" stroke-width="1.2"/>
              <circle cx="95" cy="138" r="45.6" stroke="#60a5fa" stroke-width="1.9" opacity="0.55"/>
            </g>

            <!-- 四角星徽圆扣：暗窝 + 三层渐变色环 + 高光（上层白热芯 / 下层冷色） -->
            <g transform="translate(34.2,53.2)">
              <circle r="13" fill="#04091c" stroke="#0f172a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nB2Orb1T)"/>
              <circle r="4.75" fill="url(#nB2Orb2T)"/>
              <circle r="2.4" fill="#fff"/>
              <circle r="9.5" fill="none" stroke="rgba(147,197,253,0.5)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.85)"/>
            </g>
            <g transform="translate(155.8,53.2)">
              <circle r="13" fill="#04091c" stroke="#0f172a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nB2Orb1T)"/>
              <circle r="4.75" fill="url(#nB2Orb2T)"/>
              <circle r="2.4" fill="#fff"/>
              <circle r="9.5" fill="none" stroke="rgba(147,197,253,0.5)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.85)"/>
            </g>
            <g transform="translate(34.2,231.8)">
              <circle r="13" fill="#04091c" stroke="#0f172a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nB2Orb1D)"/>
              <circle r="4.75" fill="url(#nB2Orb2D)"/>
              <circle r="2.4" fill="#60a5fa"/>
              <circle r="9.5" fill="none" stroke="rgba(147,197,253,0.4)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.3)"/>
            </g>
            <g transform="translate(155.8,231.8)">
              <circle r="13" fill="#04091c" stroke="#0f172a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nB2Orb1D)"/>
              <circle r="4.75" fill="url(#nB2Orb2D)"/>
              <circle r="2.4" fill="#60a5fa"/>
              <circle r="9.5" fill="none" stroke="rgba(147,197,253,0.4)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.3)"/>
            </g>

            <!-- 十字定位柱：暗影柱 + 亮柱 + 柱头亮点 -->
            <g stroke-linecap="round">
              <path d="M96.5 9.5 L96.5 31" stroke="#030716" stroke-width="6.4"/>
              <path d="M95 8 L95 30" stroke="#93c5fd" stroke-width="4.4" opacity="0.9"/>
              <circle cx="95" cy="8" r="2" fill="#fff" opacity="0.85"/>
              <path d="M96.5 249 L96.5 271" stroke="#030716" stroke-width="6.4"/>
              <path d="M95 248 L95 270" stroke="#60a5fa" stroke-width="4.4" opacity="0.8"/>
              <path d="M9.5 139.5 L31 139.5" stroke="#030716" stroke-width="6.4"/>
              <path d="M8 138 L30 138" stroke="#93c5fd" stroke-width="4.4" opacity="0.9"/>
              <circle cx="8" cy="138" r="2" fill="#fff" opacity="0.85"/>
              <path d="M160 139.5 L181.5 139.5" stroke="#030716" stroke-width="6.4"/>
              <path d="M161 138 L183 138" stroke="#60a5fa" stroke-width="4.4" opacity="0.8"/>
            </g>

            <!-- 星光散点 -->
            <g fill="rgba(224,242,254,0.8)">
              <circle cx="30" cy="120" r="1.4"/><circle cx="163" cy="105" r="1.2"/>
              <circle cx="52" cy="248" r="1.3"/><circle cx="140" cy="28" r="1.2"/>
            </g>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#0d1531" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#1e40af" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#3b82f6" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#60a5fa" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(147,197,253,0.65)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(147,197,253,0.4)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB2Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB2Vig)"/>
          </svg>`
        },
        {
          id: 'blue3',
          name: '深海漩涡II',
          background: 'linear-gradient(180deg, #093a52, #031c2c 55%, #06344c)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nB3Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nB3Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <linearGradient id="nB3Base" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#093a52"/><stop offset="30%" stop-color="#052c40"/>
                <stop offset="55%" stop-color="#031c2c"/><stop offset="80%" stop-color="#04263a"/>
                <stop offset="100%" stop-color="#06344c"/>
              </linearGradient>
              <radialGradient id="nB3Trench" cx="50%" cy="50%" r="60%">
                <stop offset="0%" stop-color="#0d4a66"/><stop offset="50%" stop-color="#072e44"/>
                <stop offset="82%" stop-color="rgba(3,15,24,0.9)"/><stop offset="100%" stop-color="rgba(3,15,24,0)"/>
              </radialGradient>
              <radialGradient id="nB3Orb" cx="50%" cy="46%" r="55%">
                <stop offset="0%" stop-color="rgba(234,253,255,0.95)"/><stop offset="30%" stop-color="rgba(165,243,252,0.75)"/>
                <stop offset="60%" stop-color="rgba(34,211,238,0.45)"/><stop offset="85%" stop-color="rgba(8,145,178,0.18)"/>
                <stop offset="100%" stop-color="rgba(8,145,178,0)"/>
              </radialGradient>
              <linearGradient id="nB3Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/><stop offset="40%" stop-color="rgba(255,255,255,0.03)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(2,12,20,0.4)"/>
              </linearGradient>
              <radialGradient id="nB3Vig" cx="50%" cy="48%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(1,10,18,0.62)"/>
              </radialGradient>
              <filter id="nB3Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB3Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB3Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB3Base-rs)"/>

            <!-- 上下弧形水流：暗影层 + 主层 + 上缘高光 -->
            <g fill="none" stroke-linecap="round">
              <path d="M47.5 85.5 Q95 47.5 142.5 85.5" stroke="#021620" stroke-width="4.75" transform="translate(0,2.5)"/>
              <path d="M47.5 85.5 Q95 47.5 142.5 85.5" stroke="#22d3ee" stroke-width="3.8" opacity="0.6"/>
              <path d="M47.5 82 Q95 45 142.5 82" stroke="rgba(224,253,255,0.35)" stroke-width="1"/>
              <path d="M57 66.5 Q95 38 133 66.5" stroke="#67e8f9" stroke-width="2.85" opacity="0.5"/>
              <path d="M47.5 199.5 Q95 237.5 142.5 199.5" stroke="#021620" stroke-width="4.75" transform="translate(0,2.5)"/>
              <path d="M47.5 199.5 Q95 237.5 142.5 199.5" stroke="#06b6d4" stroke-width="3.8" opacity="0.55"/>
              <path d="M47.5 203 Q95 241 142.5 203" stroke="rgba(165,243,252,0.28)" stroke-width="1"/>
              <path d="M57 218.5 Q95 247 133 218.5" stroke="#22d3ee" stroke-width="2.85" opacity="0.4"/>
            </g>

            <!-- 漩涡海沟：暗盘地基 -->
            <circle cx="95" cy="138" r="86" fill="url(#nB3Trench)"/>

            <!-- 漩涡环：暗影环(偏移) + 主环 + 高光弧（海沟纵深，整组光晕） -->
            <g fill="none" filter="url(#nB3Glow)">
              <circle cx="95" cy="138" r="76" stroke="#021019" stroke-width="5.7" stroke-dasharray="22.8,15.2" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="76" stroke="#0c4a6e" stroke-width="5.7" stroke-dasharray="22.8,15.2"/>
              <circle cx="95" cy="138" r="60.8" stroke="#021019" stroke-width="3.8" stroke-dasharray="15.2,11.4" transform="translate(0,2)"/>
              <circle cx="95" cy="138" r="60.8" stroke="#0891b2" stroke-width="3.8" stroke-dasharray="15.2,11.4"/>
              <path d="M34.9 127.4 A60.8 60.8 0 0 1 105.6 77.9" stroke="rgba(165,243,252,0.5)" stroke-width="1.4"/>
              <circle cx="95" cy="138" r="45.6" stroke="#021019" stroke-width="2.85" stroke-dasharray="11.4,7.6" transform="translate(0,1.5)"/>
              <circle cx="95" cy="138" r="45.6" stroke="#06b6d4" stroke-width="2.85" stroke-dasharray="11.4,7.6"/>
              <path d="M49.7 130 A45.6 45.6 0 0 1 103 92.7" stroke="rgba(224,253,255,0.4)" stroke-width="1.2"/>
              <circle cx="95" cy="138" r="30.4" stroke="#22d3ee" stroke-width="1.9" opacity="0.85"/>
            </g>
            <!-- 细密虚线（漩涡水纹，带光晕） -->
            <g fill="none" filter="url(#nB3Glow)">
              <circle cx="95" cy="138" r="72.2" stroke="#0c4a6e" stroke-width="1.9" opacity="0.45" stroke-dasharray="5.7,3.8"/>
              <circle cx="95" cy="138" r="57" stroke="#06b6d4" stroke-width="1.5" opacity="0.5" stroke-dasharray="3.8,2.4"/>
            </g>

            <!-- 中央之眼：眼球底光 + 上下眼睑（圆心对齐 138，与瞳孔同心） -->
            <g filter="url(#nB3Glow)">
              <path d="M28.5 138 Q95 109.5 161.5 138 Q95 166.5 28.5 138 Z" fill="rgba(34,211,238,0.1)"/>
              <path d="M28.5 138 Q95 109.5 161.5 138" fill="none" stroke="#22d3ee" stroke-width="2.85" stroke-linecap="round" opacity="0.8"/>
              <path d="M48.5 127.5 Q95 113.5 141.5 127.5" fill="none" stroke="rgba(165,243,252,0.5)" stroke-width="1.1" stroke-linecap="round"/>
              <path d="M28.5 138 Q95 166.5 161.5 138" fill="none" stroke="#06b6d4" stroke-width="2.85" stroke-linecap="round" opacity="0.65"/>
            </g>

            <!-- 中心光球（白热深海之眼） -->
            <g filter="url(#nB3Glow)">
              <circle cx="95" cy="138" r="30" fill="url(#nB3Orb)"/>
              <circle cx="95" cy="138" r="8" fill="rgba(234,253,255,0.95)"/>
              <circle cx="95" cy="136" r="3.2" fill="#fff"/>
            </g>

            <!-- 四角玻璃气泡 -->
            <g transform="translate(38,66.5)">
              <circle r="9.5" fill="rgba(103,232,249,0.12)" stroke="rgba(103,232,249,0.45)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(34,211,238,0.35)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(240,253,255,0.9)"/>
            </g>
            <g transform="translate(152,66.5)">
              <circle r="9.5" fill="rgba(103,232,249,0.1)" stroke="rgba(103,232,249,0.4)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(34,211,238,0.28)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(240,253,255,0.75)"/>
            </g>
            <g transform="translate(38,218.5)">
              <circle r="9.5" fill="rgba(34,211,238,0.1)" stroke="rgba(34,211,238,0.4)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(34,211,238,0.28)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(240,253,255,0.7)"/>
            </g>
            <g transform="translate(152,218.5)">
              <circle r="9.5" fill="rgba(34,211,238,0.12)" stroke="rgba(6,182,212,0.5)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(34,211,238,0.35)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(240,253,255,0.9)"/>
            </g>

            <!-- 上下小三角浪峰 -->
            <polygon points="95,85.5 110.2,110.2 79.8,110.2" fill="#22d3ee" opacity="0.5"/>
            <polygon points="95,91.2 104.5,106.4 85.5,106.4" fill="#67e8f9" opacity="0.5"/>
            <polygon points="95,199.5 110.2,174.8 79.8,174.8" fill="#06b6d4" opacity="0.45"/>
            <polygon points="95,193.8 104.5,178.6 85.5,178.6" fill="#22d3ee" opacity="0.45"/>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#061a2c" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#0c4a6e" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#0891b2" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#06b6d4" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(34,211,238,0.6)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(103,232,249,0.35)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB3Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB3Vig)"/>
          </svg>`
        },
        {
          id: 'blue5',
          name: '冰霜之盾',
          background: 'linear-gradient(150deg, #0a3a55, #062b42 40%, #031a2c)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nB5Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nB5Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <linearGradient id="nB5Base" x1="0" y1="0" x2="0.3" y2="1">
                <stop offset="0%" stop-color="#0a3a55"/><stop offset="40%" stop-color="#062b42"/>
                <stop offset="100%" stop-color="#031a2c"/>
              </linearGradient>
              <radialGradient id="nB5Gem" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#ffffff"/><stop offset="30%" stop-color="#e0f2fe"/>
                <stop offset="60%" stop-color="#7dd3fc"/><stop offset="85%" stop-color="#0ea5e9"/>
                <stop offset="100%" stop-color="#0369a1"/>
              </radialGradient>
              <linearGradient id="nB5P1" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#0a5a88"/><stop offset="100%" stop-color="#053a5a"/>
              </linearGradient>
              <linearGradient id="nB5P2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#0ea5e9"/><stop offset="100%" stop-color="#0668a0"/>
              </linearGradient>
              <linearGradient id="nB5P3" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0a7fb8"/>
              </linearGradient>
              <linearGradient id="nB5P4" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#7dd3fc"/><stop offset="100%" stop-color="#38bdf8"/>
              </linearGradient>
              <linearGradient id="nB5P5" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#e0f2fe"/><stop offset="100%" stop-color="#7dd3fc"/>
              </linearGradient>
              <filter id="nB5Drop" x="-30%" y="-30%" width="160%" height="160%">
                <feDropShadow dx="0" dy="3.5" stdDeviation="3" flood-color="#010a14" flood-opacity="0.55"/>
              </filter>
              <linearGradient id="nB5Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.18)"/><stop offset="40%" stop-color="rgba(255,255,255,0.04)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(2,16,28,0.4)"/>
              </linearGradient>
              <radialGradient id="nB5Vig" cx="50%" cy="48%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(1,12,22,0.6)"/>
              </radialGradient>
              <filter id="nB5Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="4.5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB5Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB5Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB5Base-rs)"/>

            <!-- 内衬细框 -->
            <rect x="24.7" y="24.7" width="140.6" height="226.6" rx="5.7" fill="none" stroke="#38bdf8" stroke-width="1" opacity="0.3"/>

            <!-- 六边盾：整体一块，向心逐层凸起（越往中间越高），层间落影，整组光晕 -->
            <g stroke-linejoin="round" filter="url(#nB5Glow)">
              <polygon points="95,46.8 161.5,84 161.5,192 95,229.2 28.5,192 28.5,84" fill="url(#nB5P1)" filter="url(#nB5Drop)"/>
              <path d="M28.5 84 L95 46.8 L161.5 84" fill="none" stroke="rgba(186,230,253,0.5)" stroke-width="1.3"/>
              <path d="M161.5 192 L95 229.2 L28.5 192" fill="none" stroke="rgba(2,16,24,0.6)" stroke-width="1.6"/>
              <polygon points="95,62 148.2,100 148.2,176 95,214 41.8,176 41.8,100" fill="url(#nB5P2)" filter="url(#nB5Drop)"/>
              <path d="M41.8 100 L95 62 L148.2 100" fill="none" stroke="rgba(186,230,253,0.45)" stroke-width="1.1"/>
              <polygon points="95,77.2 137.8,107.6 137.8,168.4 95,198.8 52.2,168.4 52.2,107.6" fill="url(#nB5P3)" filter="url(#nB5Drop)"/>
              <path d="M52.2 107.6 L95 77.2 L137.8 107.6" fill="none" stroke="rgba(224,242,254,0.4)" stroke-width="1"/>
              <polygon points="95,92.4 125.4,115.2 125.4,160.8 95,183.6 64.6,160.8 64.6,115.2" fill="url(#nB5P4)" filter="url(#nB5Drop)"/>
              <path d="M64.6 115.2 L95 92.4 L125.4 115.2" fill="none" stroke="rgba(240,250,255,0.45)" stroke-width="1"/>
              <polygon points="95,107.6 114,122.8 114,153.2 95,168.4 76,153.2 76,122.8" fill="url(#nB5P5)" filter="url(#nB5Drop)"/>
              <path d="M76 122.8 L95 107.6 L114 122.8" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1"/>
            </g>

            <!-- 中心冰珠（宝石切面） -->
            <g filter="url(#nB5Glow)">
              <circle cx="95" cy="138" r="15.2" fill="none" stroke="#7dd3fc" stroke-width="1.9"/>
              <circle cx="95" cy="138" r="11" fill="url(#nB5Gem)"/>
              <circle cx="95" cy="138" r="5" fill="#f0faff"/>
              <circle cx="91" cy="134" r="2" fill="#fff" opacity="0.95"/>
            </g>

            <!-- 菱形铆钉 -->
            <g transform="translate(47.5,47.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#031a2c" stroke="#075985" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nB5Gem)"/>
              <polygon points="0,-6.5 6.5,0 0,0" fill="rgba(255,255,255,0.4)"/>
            </g>
            <g transform="translate(142.5,47.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#031a2c" stroke="#075985" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nB5Gem)"/>
              <polygon points="0,-6.5 6.5,0 0,0" fill="rgba(255,255,255,0.4)"/>
            </g>
            <g transform="translate(47.5,228.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#031a2c" stroke="#075985" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nB5Gem)"/>
              <polygon points="0,0 -6.5,0 0,6.5" fill="rgba(255,255,255,0.28)"/>
            </g>
            <g transform="translate(142.5,228.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#031a2c" stroke="#075985" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nB5Gem)"/>
              <polygon points="0,0 -6.5,0 0,6.5" fill="rgba(255,255,255,0.28)"/>
            </g>

            <!-- 冰晶三角 -->
            <g transform="translate(30.4,66.5)">
              <polygon points="3.8,0 7.6,7.6 0,7.6" fill="#7dd3fc" opacity="0.75"/>
              <polygon points="3.8,0 7.6,5.7 0,5.7" fill="#bae6fd" opacity="0.55"/>
            </g>
            <g transform="translate(152,66.5)">
              <polygon points="3.8,0 7.6,7.6 0,7.6" fill="#7dd3fc" opacity="0.55"/>
              <polygon points="3.8,0 7.6,5.7 0,5.7" fill="#bae6fd" opacity="0.45"/>
            </g>
            <g transform="translate(30.4,203.3)">
              <polygon points="3.8,7.6 7.6,0 0,0" fill="#38bdf8" opacity="0.55"/>
              <polygon points="3.8,5.7 7.6,0 0,0" fill="#7dd3fc" opacity="0.45"/>
            </g>
            <g transform="translate(152,203.3)">
              <polygon points="3.8,7.6 7.6,0 0,0" fill="#38bdf8" opacity="0.75"/>
              <polygon points="3.8,5.7 7.6,0 0,0" fill="#7dd3fc" stroke-width="1" opacity="0.55"/>
            </g>

            <!-- 十字冰柱 -->
            <g stroke-linecap="round">
              <path d="M96.5 24.5 L96.5 45" stroke="#020d18" stroke-width="5.4"/>
              <path d="M95 23 L95 43.5" stroke="#e0f2fe" stroke-width="3.8" opacity="0.85"/>
              <path d="M96.5 232.5 L96.5 253" stroke="#020d18" stroke-width="5.4"/>
              <path d="M95 231.5 L95 252" stroke="#7dd3fc" stroke-width="3.8" opacity="0.7"/>
              <path d="M24.5 139.5 L45 139.5" stroke="#020d18" stroke-width="5.4"/>
              <path d="M23 138 L43.5 138" stroke="#e0f2fe" stroke-width="3.8" opacity="0.85"/>
              <path d="M147 139.5 L167.5 139.5" stroke="#020d18" stroke-width="5.4"/>
              <path d="M148 138 L168.5 138" stroke="#7dd3fc" stroke-width="3.8" opacity="0.7"/>
            </g>

            <!-- 霜花散点 -->
            <g fill="rgba(240,250,255,0.75)">
              <circle cx="65" cy="35" r="1.3"/><circle cx="128" cy="40" r="1.1"/>
              <circle cx="60" cy="243" r="1.2"/><circle cx="133" cy="238" r="1.3"/>
            </g>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#052036" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#075985" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#0ea5e9" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#38bdf8" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(125,211,252,0.6)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(186,230,253,0.4)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB5Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nB5Vig)"/>
          </svg>`
        },
        {
          id: 'blue6',
          name: '深海漩涡',
          background: 'linear-gradient(180deg, #083049, #031624 60%, #062839)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="dvBase-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="dvBase-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <linearGradient id="dvBase" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#050d17"/><stop offset="30%" stop-color="#030910"/>
                <stop offset="60%" stop-color="#02060c"/><stop offset="100%" stop-color="#04101c"/>
              </linearGradient>
              <radialGradient id="dvEyeGlow" cx="50%" cy="51%" r="34%">
                <stop offset="0%" stop-color="rgba(224,250,255,0.92)"/>
                <stop offset="45%" stop-color="rgba(103,232,249,0.5)"/>
                <stop offset="100%" stop-color="rgba(103,232,249,0)"/>
              </radialGradient>
              <linearGradient id="dvGem" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#dff7ff"/><stop offset="45%" stop-color="#7dd3fc"/>
                <stop offset="62%" stop-color="#22d3ee"/><stop offset="100%" stop-color="#0e7490"/>
              </linearGradient>
              <linearGradient id="dvShine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.2)"/><stop offset="40%" stop-color="rgba(255,255,255,0.04)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(2,12,22,0.32)"/>
              </linearGradient>
              <radialGradient id="dvVig" cx="50%" cy="48%" r="72%">
                <stop offset="64%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(1,10,18,0.6)"/>
              </radialGradient>
              <filter id="dvDrop" x="-40%" y="-40%" width="180%" height="180%">
                <feDropShadow dx="1.5" dy="2.5" stdDeviation="5" flood-color="#010a12" flood-opacity="0.4"/>
              </filter>
              <filter id="dvBlur3" x="-60%" y="-60%" width="220%" height="220%">
                <feGaussianBlur stdDeviation="3"/>
              </filter>
              <filter id="dvIrisGlow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
                <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="coloredBlur"/><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#dvBase)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#dvBase-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#dvBase-rs)"/>

            <!-- 七条海流波浪：暗影层 + 主层 -->
            <g fill="none" stroke-linecap="round">
              <path d="M8 38 Q57 9.5 95 38 T182 38" stroke="#0a1a2b" stroke-width="6.5" opacity="0.45" transform="translate(0,2.5)"/>
              <path d="M8 38 Q57 9.5 95 38 T182 38" stroke="#0f172a" stroke-width="5.5" opacity="0.5"/>
              <path d="M5.7 53 Q53 22.8 95 53 T184.3 53" stroke="#071625" stroke-width="7.5" opacity="0.5" transform="translate(0,2.5)"/>
              <path d="M5.7 53 Q53 22.8 95 53 T184.3 53" stroke="#0c4a6e" stroke-width="6.5" opacity="0.6"/>
              <path d="M5.7 91 Q53 60.8 95 91 T184.3 91" stroke="#075985" stroke-width="8.5" opacity="0.55" transform="translate(0,2.5)"/>
              <path d="M5.7 91 Q53 60.8 95 91 T184.3 91" stroke="#06b6d4" stroke-width="7.5" opacity="0.6"/>
              <path d="M5.7 129 Q53 98.8 95 129 T184.3 129" stroke="#0e7490" stroke-width="10" opacity="0.6" transform="translate(0,2.5)"/>
              <path d="M5.7 129 Q53 98.8 95 129 T184.3 129" stroke="#22d3ee" stroke-width="9" opacity="0.8"/>
              <path d="M5.7 167 Q53 136.8 95 167 T184.3 167" stroke="#075985" stroke-width="8.5" opacity="0.55" transform="translate(0,2.5)"/>
              <path d="M5.7 167 Q53 136.8 95 167 T184.3 167" stroke="#06b6d4" stroke-width="7.5" opacity="0.6"/>
              <path d="M5.7 205 Q53 174.8 95 205 T184.3 205" stroke="#071625" stroke-width="7.5" opacity="0.5" transform="translate(0,2.5)"/>
              <path d="M5.7 205 Q53 174.8 95 205 T184.3 205" stroke="#0c4a6e" stroke-width="6.5" opacity="0.55"/>
              <path d="M7.6 247 Q57 218.5 95 247 T182 247" stroke="#0a1a2b" stroke-width="6" opacity="0.4" transform="translate(0,2.5)"/>
              <path d="M7.6 247 Q57 218.5 95 247 T182 247" stroke="#0f172a" stroke-width="5" opacity="0.55"/>
            </g>
            <!-- 浪尖高光点 -->
            <g fill="rgba(224,250,255,0.85)">
              <circle cx="95" cy="125" r="2.4"/><circle cx="48" cy="86" r="2"/><circle cx="142" cy="86" r="2"/>
              <circle cx="95" cy="51" r="1.8"/><circle cx="30" cy="163" r="1.8"/><circle cx="160" cy="163" r="1.8"/>
            </g>
            <!-- 水下光缝 -->
            <g stroke="rgba(224,250,255,0.5)" stroke-width="1" fill="none">
              <path d="M30 108 L44 116 L58 110"/>
              <path d="M120 146 L136 154 L148 148"/>
            </g>

            <!-- 眼窝海沟 -->
            <radialGradient id="dvSocket" cx="50%" cy="50%" r="60%">
              <stop offset="0%" stop-color="#0d4a6e"/>
              <stop offset="55%" stop-color="#062839"/>
              <stop offset="82%" stop-color="rgba(3,12,20,0.92)"/>
              <stop offset="100%" stop-color="rgba(3,12,20,0)"/>
            </radialGradient>
            <circle cx="95" cy="142.5" r="62" fill="url(#dvSocket)"/>

            <!-- 虹膜三层圈（还原原版：暗黑蓝→深青→青→亮青，带光晕） -->
            <g filter="url(#dvIrisGlow)">
              <circle cx="95" cy="142.5" r="53" fill="none" stroke="#0f172a" stroke-width="6.5"/>
              <circle cx="95" cy="140.8" r="53" fill="none" stroke="rgba(103,232,249,0.45)" stroke-width="1.8"/>
              <circle cx="95" cy="142.5" r="40" fill="none" stroke="#0c4a6e" stroke-width="5.5"/>
              <circle cx="95" cy="140.8" r="40" fill="none" stroke="rgba(103,232,249,0.35)" stroke-width="1.5"/>
              <circle cx="95" cy="142.5" r="27" fill="none" stroke="#06b6d4" stroke-width="4.6"/>
              <circle cx="95" cy="141" r="27" fill="none" stroke="rgba(165,243,252,0.85)" stroke-width="1.6"/>
              <circle cx="95" cy="142.5" r="14" fill="none" stroke="#22d3ee" stroke-width="3.6"/>
              <circle cx="95" cy="141.2" r="14" fill="none" stroke="rgba(224,250,255,0.95)" stroke-width="1.4"/>
            </g>
            <!-- 虹膜放射细纹 -->
            <g stroke="rgba(103,232,249,0.45)" stroke-width="1.2" stroke-linecap="round">
              <path d="M95 112 L95 122 M95 163 L95 173 M65 142.5 L75 142.5 M115 142.5 L125 142.5"/>
              <path d="M74 121 L81 128 M116 164 L109 157 M116 121 L109 128 M74 164 L81 157"/>
              <path d="M83 116 L88 124 M107 169 L102 161 M107 116 L102 124 M83 169 L88 161"/>
            </g>

            <!-- 瞳孔：黑蓝层叠竖菱形，向心白热；边缘用模糊落影替代硬黑边（与熔岩波纹同款） -->
            <g filter="url(#dvDrop)">
              <circle cx="95" cy="142.5" r="14" fill="rgba(190,240,255,0.42)"/>
              <path d="M95 112 L117 142.5 L95 173 L73 142.5 Z" fill="rgba(2,8,14,0.55)" transform="translate(2.5,3.5)" filter="url(#dvBlur3)"/>
              <path d="M95 112 L117 142.5 L95 173 L73 142.5 Z" fill="rgba(13,30,48,0.78)"/>
              <path d="M95 118 L111 142.5 L95 167 L79 142.5 Z" fill="#0e3a54"/>
              <path d="M95 124 L105.5 142.5 L95 161 L84.5 142.5 Z" fill="#0c6392"/>
              <path d="M95 129.5 L101.5 142.5 L95 155.5 L88.5 142.5 Z" fill="#0891b2"/>
              <path d="M95 134 L98.5 142.5 L95 151 L91.5 142.5 Z" fill="#22d3ee"/>
              <path d="M95 137.5 L96.8 142.5 L95 147.5 L93.2 142.5 Z" fill="#cff6ff"/>
              <circle cx="95" cy="142.5" r="2.2" fill="#f0feff"/>
              <path d="M95 118 L84 142.5" stroke="rgba(150,225,250,0.55)" stroke-width="1.6" stroke-linecap="round"/>
            </g>
            <!-- 环绕虚线环 -->
            <circle cx="95" cy="142.5" r="57" fill="none" stroke="#0a1a2b" stroke-width="1.4" opacity="0.4" stroke-dasharray="5,5"/>
            <circle cx="95" cy="142.5" r="44" fill="none" stroke="#0c4a6e" stroke-width="1.2" opacity="0.45" stroke-dasharray="3.5,4"/>

            <!-- 多层线框（原版暗→亮 5 层）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#0a1a2b" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#0c4a6e" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#06b6d4" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#22d3ee" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(103,232,249,0.65)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(165,243,252,0.4)" stroke-width="1.2"/>

            <!-- 对角高光 + 暗角 -->
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#dvShine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#dvVig)"/>
          </svg>`
        }
      ],
      red: [
        {
          id: 'red1',
          name: '皇家徽记',
          background: 'radial-gradient(circle at 40% 28%, #7c2f2f, #3f1313 78%, #230808)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="v2frame" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#f8e3ab"/>
                <stop offset="26%" stop-color="#dbba74"/>
                <stop offset="54%" stop-color="#9a7a3a"/>
                <stop offset="78%" stop-color="#c8a760"/>
                <stop offset="100%" stop-color="#6f5527"/>
              </linearGradient>
              <!-- 徽章金属圆盘 -->
              <radialGradient id="v2disc" cx="36%" cy="28%" r="82%">
                <stop offset="0%" stop-color="#fdf2cc"/>
                <stop offset="32%" stop-color="#e7c985"/>
                <stop offset="68%" stop-color="#aa8742"/>
                <stop offset="100%" stop-color="#63491f"/>
              </radialGradient>
              <!-- 徽章内盘（深蓝凹陷） -->
              <radialGradient id="v2inner" cx="42%" cy="30%" r="85%">
                <stop offset="0%" stop-color="#223a72"/>
                <stop offset="60%" stop-color="#142449"/>
                <stop offset="100%" stop-color="#0b1530"/>
              </radialGradient>
              <!-- 皇冠金色渐变 -->
              <linearGradient id="v2crown" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fff3cf"/>
                <stop offset="45%" stop-color="#e9c87e"/>
                <stop offset="100%" stop-color="#97742f"/>
              </linearGradient>
              <!-- 对角高光带 -->
              <linearGradient id="v2shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/>
                <stop offset="38%" stop-color="rgba(255,255,255,0.05)"/>
                <stop offset="55%" stop-color="rgba(255,255,255,0)"/>
                <stop offset="100%" stop-color="rgba(0,0,0,0.18)"/>
              </linearGradient>
              <filter id="v2drop" x="-40%" y="-40%" width="180%" height="180%">
                <feDropShadow dx="2.5" dy="3.5" stdDeviation="3.5" flood-color="#000000" flood-opacity="0.6"/>
              </filter><linearGradient id="v2rbase-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="v2rbase-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <!-- 卡底：左上光源径向渐变（暗红版） -->
              <radialGradient id="v2rbase" cx="40%" cy="28%" r="95%">
                <stop offset="0%" stop-color="#7c2f2f"/><stop offset="42%" stop-color="#571d1d"/>
                <stop offset="78%" stop-color="#3f1313"/><stop offset="100%" stop-color="#230808"/>
              </radialGradient>
              <linearGradient id="v2rframe" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#f8e3ab"/>
                <stop offset="26%" stop-color="#dbba74"/>
                <stop offset="54%" stop-color="#9a7a3a"/>
                <stop offset="78%" stop-color="#c8a760"/>
                <stop offset="100%" stop-color="#6f5527"/>
              </linearGradient>
              <!-- 徽章内盘（深红凹陷） -->
              <radialGradient id="v2rinner" cx="42%" cy="30%" r="85%">
                <stop offset="0%" stop-color="#611a2b"/>
                <stop offset="60%" stop-color="#42101d"/>
                <stop offset="100%" stop-color="#290a12"/>
              </radialGradient>
              <radialGradient id="v2rgem" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#8ab6ff"/>
                <stop offset="35%" stop-color="#3f7ff0"/>
                <stop offset="70%" stop-color="#2653c4"/>
                <stop offset="100%" stop-color="#16327a"/>
              </radialGradient>
              <radialGradient id="v2gemR" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#fecdd3"/>
                <stop offset="30%" stop-color="#fb7185"/>
                <stop offset="65%" stop-color="#e11d48"/>
                <stop offset="100%" stop-color="#881337"/>
              </radialGradient>
<radialGradient id="v2rvig" cx="50%" cy="46%" r="75%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/>
                <stop offset="100%" stop-color="rgba(10,0,0,0.55)"/>
              </radialGradient>
            </defs>

            <!-- 卡底 -->
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2rbase)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2rbase-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2rbase-rs)"/>
            <!-- 细密菱格纹理（低调，增加材质感） -->
            <g opacity="0.05" stroke="#f5d9d9" stroke-width="1">
              <path d="M-40 0 L150 190 M0 0 L190 190 M40 0 L230 190 M80 0 L270 190 M120 0 L310 190 M160 0 L350 190 M-40 86 L150 276 M0 86 L190 276 M40 86 L230 276 M80 86 L270 276 M120 86 L310 276 M-40 -104 L150 86 M0 -104 L190 86 M40 -104 L230 86 M-40 190 L150 380 M0 190 L190 380 M40 190 L230 380"/>
            </g>

            <!-- 立体斜面边框：外黑压边 → 金属金框 → 内亮线 → 内凹槽 -->
            <rect x="1.5" y="1.5" width="187" height="273" rx="23" fill="none" stroke="#0f0303" stroke-width="3"/>
            <rect x="3" y="3" width="184" height="270" rx="22" fill="none" stroke="url(#v2rframe)" stroke-width="5"/>
            <rect x="6.5" y="6.5" width="177" height="263" rx="20" fill="none" stroke="rgba(255,244,206,0.55)" stroke-width="1.2"/>
            <rect x="9" y="9" width="172" height="258" rx="18" fill="none" stroke="rgba(24,4,4,0.85)" stroke-width="2.4"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="rgba(235,177,177,0.35)" stroke-width="1"/>

            <!-- 四角宝石装饰（蓝宝石，向内收） -->
            <g filter="url(#v2drop)">
              <g transform="translate(28,28)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemR)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(162,28)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemR)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(28,248)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemR)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
              <g transform="translate(162,248)">
                <circle r="8.6" fill="url(#v2disc)" stroke="#4a3410" stroke-width="1"/>
                <circle r="6.2" fill="url(#v2gemR)"/>
                <polygon points="0,-4.4 4.4,0 0,4.4 -4.4,0" fill="rgba(255,255,255,0.26)"/>
                <path d="M0 -6.2 L4.4 0 L0 6.2 L-4.4 0 Z" fill="none" stroke="rgba(255,255,255,0.32)" stroke-width="0.7"/>
                <circle cx="-2" cy="-2.2" r="1.3" fill="rgba(255,255,255,0.92)"/>
              </g>
            </g>

            <!-- 中央徽章（立体浮雕） -->
            <g filter="url(#v2drop)">
              <!-- 外金属盘 -->
              <circle cx="95" cy="132" r="56" fill="url(#v2disc)"/>
              <path d="M 41 118 A 56 56 0 0 1 149 118" fill="none" stroke="rgba(255,250,225,0.75)" stroke-width="2.2"/>
              <!-- 内凹深红盘 -->
              <circle cx="95" cy="132" r="47" fill="url(#v2rinner)"/>
              <circle cx="95" cy="132" r="47" fill="none" stroke="url(#v2frame)" stroke-width="2.6"/>
              <circle cx="95" cy="132" r="42" fill="none" stroke="rgba(235,177,177,0.4)" stroke-width="1"/>
              <!-- 放射线（内盘装饰） -->
              <g stroke="rgba(235,177,177,0.16)" stroke-width="1.5">
                <path d="M95 90 L95 100 M95 164 L95 174 M53 132 L63 132 M127 132 L137 132 M65 102 L72 109 M118 155 L125 162 M125 102 L118 109 M72 155 L65 162"/>
              </g>
              <!-- 立体皇冠（金渐变 + 描边 + 底座） -->
              <g filter="url(#v2drop)">
                <path d="M70 148 L70 122 L82.5 133 L95 112 L107.5 133 L120 122 L120 148 Z"
                      fill="url(#v2crown)" stroke="#4a3410" stroke-width="1.6" stroke-linejoin="round"/>
                <circle cx="70" cy="119" r="3.6" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <circle cx="95" cy="107.5" r="4.4" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <circle cx="120" cy="119" r="3.6" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1"/>
                <!-- 冠上宝石：红宝石（中）+ 蓝宝石（侧） -->
                <circle cx="95" cy="136" r="4.2" fill="#d43d4f" stroke="#5c1520" stroke-width="1"/>
                <circle cx="93.6" cy="134.6" r="1.2" fill="rgba(255,220,220,0.95)"/>
                <circle cx="80.5" cy="136" r="2.6" fill="#3b82f6" stroke="#12275c" stroke-width="0.9"/>
                <circle cx="109.5" cy="136" r="2.6" fill="#3b82f6" stroke="#12275c" stroke-width="0.9"/>
                <!-- 皇冠底座（缎带） -->
                <rect x="66" y="148" width="58" height="9" rx="3" fill="url(#v2crown)" stroke="#4a3410" stroke-width="1.4"/>
                <rect x="66" y="149.2" width="58" height="2.6" rx="1.3" fill="rgba(255,250,225,0.4)"/>
              </g>
            </g>

            <!-- 对角高光带 + 暗角（立体光影收尾） -->
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#v2rvig)"/>
          </svg>`
        },
        {
          id: 'red2',
          name: '烈焰星芒',
          background: 'radial-gradient(circle at 50% 42%, #4a0d0d, #300808 42%, #120202)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nR2Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nR2Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <radialGradient id="nR2Base" cx="50%" cy="42%" r="78%">
                <stop offset="0%" stop-color="#4a0d0d"/><stop offset="42%" stop-color="#300808"/>
                <stop offset="76%" stop-color="#1e0404"/><stop offset="100%" stop-color="#120202"/>
              </radialGradient>
              <radialGradient id="nR2Core" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="rgba(255,255,255,0.95)"/><stop offset="45%" stop-color="rgba(254,226,226,0.55)"/>
                <stop offset="100%" stop-color="rgba(252,165,165,0)"/>
              </radialGradient>
              <radialGradient id="nR2Orb1T" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#b91c1c"/><stop offset="100%" stop-color="#7f1d1d"/>
              </radialGradient>
              <radialGradient id="nR2Orb2T" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#fca5a5"/><stop offset="100%" stop-color="#ef4444"/>
              </radialGradient>
              <radialGradient id="nR2Orb1D" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#991b1b"/><stop offset="100%" stop-color="#6b1414"/>
              </radialGradient>
              <radialGradient id="nR2Orb2D" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#ef4444"/><stop offset="100%" stop-color="#991b1b"/>
              </radialGradient>
              <linearGradient id="nR2Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/><stop offset="40%" stop-color="rgba(255,255,255,0.03)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(30,4,4,0.4)"/>
              </linearGradient>
              <radialGradient id="nR2Vig" cx="50%" cy="46%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(16,2,2,0.62)"/>
              </radialGradient>
              <filter id="nR2Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR2Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR2Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR2Base-rs)"/>

            <!-- 五角星：双层挤出 + 五层嵌套 + 棱线 + 白热核心（整组边缘光晕） -->
            <g transform="translate(95,138)" filter="url(#nR2Glow)">
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#0d0101" opacity="0.7" transform="translate(4,5.5)"/>
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#1c0303" opacity="0.9" transform="translate(2,2.8)"/>
              <polygon points="0,-85.5 13.3,-30.4 85.5,-30.4 30.4,15.2 53.2,85.5 0,49.4 -53.2,85.5 -30.4,15.2 -85.5,-30.4 -13.3,-30.4" fill="#450a0a" opacity="0.9"/>
              <polygon points="0,-76 11.4,-26.6 76,-26.6 26.6,11.4 45.6,76 0,41.8 -45.6,76 -26.6,11.4 -76,-26.6 -11.4,-26.6" fill="#7f1d1d" opacity="0.95"/>
              <polygon points="0,-64.6 11.4,-22.8 64.6,-22.8 22.8,9.5 38,64.6 0,34.2 -38,64.6 -22.8,9.5 -64.6,-22.8 -11.4,-22.8" fill="#991b1b"/>
              <polygon points="0,-49.4 9.5,-15.2 49.4,-15.2 19,7.6 30.4,49.4 0,26.6 -30.4,49.4 -19,7.6 -49.4,-15.2 -9.5,-15.2" fill="#ef4444"/>
              <polygon points="0,-34.2 7.6,-9.5 34.2,-9.5 15.2,5.7 22.8,34.2 0,19 -22.8,34.2 -15.2,5.7 -34.2,-9.5 -7.6,-9.5" fill="#f87171" opacity="0.95"/>
              <polygon points="0,-19 3.8,-5.7 19,-5.7 9.5,3.8 13.3,19 0,11.4 -13.3,19 -9.5,3.8 -19,-5.7 -3.8,-5.7" fill="#fff" opacity="0.9"/>
              <g stroke="rgba(255,255,255,0.16)" stroke-width="1">
                <path d="M0 0 L0 -85.5 M0 0 L85.5 -30.4 M0 0 L53.2 85.5 M0 0 L-53.2 85.5 M0 0 L-85.5 -30.4"/>
              </g>
              <circle r="26" fill="url(#nR2Core)"/>
              <circle r="3.2" fill="#fff"/>
            </g>

            <!-- 四圈轨道（浮在星星上方） -->
            <g fill="none">
              <circle cx="95" cy="138" r="91" stroke="#1a0303" stroke-width="4.75" stroke-dasharray="19,11.4" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="91" stroke="#5c1010" stroke-width="4.75" stroke-dasharray="19,11.4"/>
              <circle cx="95" cy="138" r="76" stroke="#1a0303" stroke-width="3.8" stroke-dasharray="15.2,7.6" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="76" stroke="#7f1d1d" stroke-width="3.8" stroke-dasharray="15.2,7.6"/>
              <path d="M20.2 124.8 A76 76 0 0 1 108.2 63.2" stroke="rgba(252,165,165,0.5)" stroke-width="1.6"/>
              <circle cx="95" cy="138" r="60.8" stroke="#1a0303" stroke-width="2.85" stroke-dasharray="11.4,5.7" transform="translate(0,2)"/>
              <circle cx="95" cy="138" r="60.8" stroke="#991b1b" stroke-width="2.85" stroke-dasharray="11.4,5.7" opacity="0.95"/>
              <path d="M35.1 127.4 A60.8 60.8 0 0 1 105.6 78.1" stroke="rgba(254,202,202,0.45)" stroke-width="1.2"/>
              <circle cx="95" cy="138" r="45.6" stroke="#ef4444" stroke-width="1.9" opacity="0.6"/>
            </g>

            <!-- 四角星徽圆扣：暗窝 + 三层渐变色环 + 高光（上层白热芯 / 下层冷色） -->
            <g transform="translate(34.2,53.2)">
              <circle r="13" fill="#1c0303" stroke="#450a0a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nR2Orb1T)"/>
              <circle r="4.75" fill="url(#nR2Orb2T)"/>
              <circle r="2.4" fill="#fff"/>
              <circle r="9.5" fill="none" stroke="rgba(252,165,165,0.5)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.85)"/>
            </g>
            <g transform="translate(155.8,53.2)">
              <circle r="13" fill="#1c0303" stroke="#450a0a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nR2Orb1T)"/>
              <circle r="4.75" fill="url(#nR2Orb2T)"/>
              <circle r="2.4" fill="#fff"/>
              <circle r="9.5" fill="none" stroke="rgba(252,165,165,0.5)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.85)"/>
            </g>
            <g transform="translate(34.2,231.8)">
              <circle r="13" fill="#1c0303" stroke="#450a0a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nR2Orb1D)"/>
              <circle r="4.75" fill="url(#nR2Orb2D)"/>
              <circle r="2.4" fill="#ef4444"/>
              <circle r="9.5" fill="none" stroke="rgba(252,165,165,0.4)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.3)"/>
            </g>
            <g transform="translate(155.8,231.8)">
              <circle r="13" fill="#1c0303" stroke="#450a0a" stroke-width="2"/>
              <circle r="9.5" fill="url(#nR2Orb1D)"/>
              <circle r="4.75" fill="url(#nR2Orb2D)"/>
              <circle r="2.4" fill="#ef4444"/>
              <circle r="9.5" fill="none" stroke="rgba(252,165,165,0.4)" stroke-width="1"/>
              <circle cx="-3.2" cy="-3.2" r="2" fill="rgba(255,255,255,0.3)"/>
            </g>

            <!-- 十字定位柱 -->
            <g stroke-linecap="round">
              <path d="M96.5 9.5 L96.5 31" stroke="#1a0303" stroke-width="6.4"/>
              <path d="M95 8 L95 30" stroke="#f87171" stroke-width="4.4" opacity="0.9"/>
              <circle cx="95" cy="8" r="2" fill="#fff" opacity="0.85"/>
              <path d="M96.5 249 L96.5 271" stroke="#1a0303" stroke-width="6.4"/>
              <path d="M95 248 L95 270" stroke="#ef4444" stroke-width="4.4" opacity="0.8"/>
              <path d="M9.5 139.5 L31 139.5" stroke="#1a0303" stroke-width="6.4"/>
              <path d="M8 138 L30 138" stroke="#f87171" stroke-width="4.4" opacity="0.9"/>
              <circle cx="8" cy="138" r="2" fill="#fff" opacity="0.85"/>
              <path d="M160 139.5 L181.5 139.5" stroke="#1a0303" stroke-width="6.4"/>
              <path d="M161 138 L183 138" stroke="#ef4444" stroke-width="4.4" opacity="0.8"/>
            </g>

            <!-- 火星散点 -->
            <g fill="rgba(254,226,226,0.8)">
              <circle cx="30" cy="120" r="1.4"/><circle cx="163" cy="105" r="1.2"/>
              <circle cx="52" cy="248" r="1.3"/><circle cx="140" cy="28" r="1.2"/>
            </g>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#2a0505" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#7f1d1d" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#991b1b" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#ef4444" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(252,165,165,0.65)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(252,165,165,0.4)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR2Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR2Vig)"/>
          </svg>`
        },
        {
          id: 'red3',
          name: '熔岩波纹II',
          background: 'linear-gradient(180deg, #3a0c05, #1a0402 55%, #2e0804)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nR3Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nR3Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <linearGradient id="nR3Base" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#3a0c05"/><stop offset="30%" stop-color="#260703"/>
                <stop offset="55%" stop-color="#1a0402"/><stop offset="80%" stop-color="#240603"/>
                <stop offset="100%" stop-color="#2e0804"/>
              </linearGradient>
              <radialGradient id="nR3Trench" cx="50%" cy="50%" r="60%">
                <stop offset="0%" stop-color="#4a1208"/><stop offset="50%" stop-color="#2a0805"/>
                <stop offset="82%" stop-color="rgba(18,3,2,0.9)"/><stop offset="100%" stop-color="rgba(18,3,2,0)"/>
              </radialGradient>
              <radialGradient id="nR3Orb" cx="50%" cy="46%" r="55%">
                <stop offset="0%" stop-color="rgba(255,246,224,0.95)"/><stop offset="30%" stop-color="rgba(254,215,170,0.75)"/>
                <stop offset="60%" stop-color="rgba(251,146,60,0.45)"/><stop offset="85%" stop-color="rgba(220,38,38,0.18)"/>
                <stop offset="100%" stop-color="rgba(220,38,38,0)"/>
              </radialGradient>
              <linearGradient id="nR3Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.16)"/><stop offset="40%" stop-color="rgba(255,255,255,0.03)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(26,4,2,0.4)"/>
              </linearGradient>
              <radialGradient id="nR3Vig" cx="50%" cy="48%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(16,2,0,0.62)"/>
              </radialGradient>
              <filter id="nR3Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR3Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR3Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR3Base-rs)"/>

            <!-- 上下弧形熔流 -->
            <g fill="none" stroke-linecap="round">
              <path d="M47.5 85.5 Q95 47.5 142.5 85.5" stroke="#1c0402" stroke-width="4.75" transform="translate(0,2.5)"/>
              <path d="M47.5 85.5 Q95 47.5 142.5 85.5" stroke="#fb923c" stroke-width="3.8" opacity="0.65"/>
              <path d="M47.5 82 Q95 45 142.5 82" stroke="rgba(255,236,200,0.4)" stroke-width="1"/>
              <path d="M57 66.5 Q95 38 133 66.5" stroke="#fdba74" stroke-width="2.85" opacity="0.55"/>
              <path d="M47.5 199.5 Q95 237.5 142.5 199.5" stroke="#1c0402" stroke-width="4.75" transform="translate(0,2.5)"/>
              <path d="M47.5 199.5 Q95 237.5 142.5 199.5" stroke="#dc2626" stroke-width="3.8" opacity="0.6"/>
              <path d="M47.5 203 Q95 241 142.5 203" stroke="rgba(253,186,116,0.3)" stroke-width="1"/>
              <path d="M57 218.5 Q95 247 133 218.5" stroke="#fb923c" stroke-width="2.85" opacity="0.45"/>
            </g>

            <!-- 熔岩海沟暗盘 -->
            <circle cx="95" cy="138" r="86" fill="url(#nR3Trench)"/>

            <!-- 漩涡环（整组光晕） -->
            <g fill="none" filter="url(#nR3Glow)">
              <circle cx="95" cy="138" r="76" stroke="#120302" stroke-width="5.7" stroke-dasharray="22.8,15.2" transform="translate(0,2.5)"/>
              <circle cx="95" cy="138" r="76" stroke="#7f1d1d" stroke-width="5.7" stroke-dasharray="22.8,15.2"/>
              <circle cx="95" cy="138" r="60.8" stroke="#120302" stroke-width="3.8" stroke-dasharray="15.2,11.4" transform="translate(0,2)"/>
              <circle cx="95" cy="138" r="60.8" stroke="#dc2626" stroke-width="3.8" stroke-dasharray="15.2,11.4"/>
              <path d="M34.9 127.4 A60.8 60.8 0 0 1 105.6 77.9" stroke="rgba(253,186,116,0.55)" stroke-width="1.4"/>
              <circle cx="95" cy="138" r="45.6" stroke="#120302" stroke-width="2.85" stroke-dasharray="11.4,7.6" transform="translate(0,1.5)"/>
              <circle cx="95" cy="138" r="45.6" stroke="#fb923c" stroke-width="2.85" stroke-dasharray="11.4,7.6"/>
              <path d="M49.7 130 A45.6 45.6 0 0 1 103 92.7" stroke="rgba(254,215,170,0.45)" stroke-width="1.2"/>
              <circle cx="95" cy="138" r="30.4" stroke="#fdba74" stroke-width="1.9" opacity="0.85"/>
            </g>
            <g fill="none" filter="url(#nR3Glow)">
              <circle cx="95" cy="138" r="72.2" stroke="#7f1d1d" stroke-width="1.9" opacity="0.45" stroke-dasharray="5.7,3.8"/>
              <circle cx="95" cy="138" r="57" stroke="#fb923c" stroke-width="1.5" opacity="0.5" stroke-dasharray="3.8,2.4"/>
            </g>

            <!-- 中央之眼：眼球底光 + 上下眼睑（熔岩色系，圆心对齐 138） -->
            <g filter="url(#nR3Glow)">
              <path d="M28.5 138 Q95 109.5 161.5 138 Q95 166.5 28.5 138 Z" fill="rgba(251,146,60,0.1)"/>
              <path d="M28.5 138 Q95 109.5 161.5 138" fill="none" stroke="#fb923c" stroke-width="2.85" stroke-linecap="round" opacity="0.8"/>
              <path d="M48.5 127.5 Q95 113.5 141.5 127.5" fill="none" stroke="rgba(254,215,170,0.5)" stroke-width="1.1" stroke-linecap="round"/>
              <path d="M28.5 138 Q95 166.5 161.5 138" fill="none" stroke="#dc2626" stroke-width="2.85" stroke-linecap="round" opacity="0.65"/>
            </g>

            <!-- 中心白热熔核 -->
            <g filter="url(#nR3Glow)">
              <circle cx="95" cy="138" r="30" fill="url(#nR3Orb)"/>
              <circle cx="95" cy="138" r="8" fill="rgba(255,246,224,0.95)"/>
              <circle cx="95" cy="136" r="3.2" fill="#fff"/>
            </g>

            <!-- 四角火星泡 -->
            <g transform="translate(38,66.5)">
              <circle r="9.5" fill="rgba(253,186,116,0.12)" stroke="rgba(251,146,60,0.45)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(251,146,60,0.35)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(255,243,214,0.9)"/>
            </g>
            <g transform="translate(152,66.5)">
              <circle r="9.5" fill="rgba(253,186,116,0.1)" stroke="rgba(251,146,60,0.4)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(251,146,60,0.28)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(255,243,214,0.75)"/>
            </g>
            <g transform="translate(38,218.5)">
              <circle r="9.5" fill="rgba(251,146,60,0.1)" stroke="rgba(251,146,60,0.4)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(251,146,60,0.28)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(255,243,214,0.7)"/>
            </g>
            <g transform="translate(152,218.5)">
              <circle r="9.5" fill="rgba(253,186,116,0.12)" stroke="rgba(220,38,38,0.5)" stroke-width="1.4"/>
              <circle r="5.7" fill="rgba(251,146,60,0.35)"/>
              <circle cx="-2.6" cy="-2.6" r="1.7" fill="rgba(255,243,214,0.9)"/>
            </g>

            <!-- 上下小三角火苗 -->
            <polygon points="95,85.5 110.2,110.2 79.8,110.2" fill="#fb923c" opacity="0.55"/>
            <polygon points="95,91.2 104.5,106.4 85.5,106.4" fill="#fdba74" opacity="0.55"/>
            <polygon points="95,199.5 110.2,174.8 79.8,174.8" fill="#dc2626" opacity="0.5"/>
            <polygon points="95,193.8 104.5,178.6 85.5,178.6" fill="#fb923c" opacity="0.5"/>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#1c0402" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#7f1d1d" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#dc2626" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#fb923c" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(253,186,116,0.6)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(254,215,170,0.35)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR3Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR3Vig)"/>
          </svg>`
        },
        {
          id: 'red5',
          name: '赤焰之盾',
          background: 'linear-gradient(150deg, #45160a, #331103 40%, #1f0a02)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
            <defs><linearGradient id="nR5Base-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="nR5Base-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
              <linearGradient id="nR5Base" x1="0" y1="0" x2="0.3" y2="1">
                <stop offset="0%" stop-color="#45160a"/><stop offset="40%" stop-color="#331103"/>
                <stop offset="100%" stop-color="#1f0a02"/>
              </linearGradient>
              <radialGradient id="nR5Gem" cx="38%" cy="30%" r="80%">
                <stop offset="0%" stop-color="#fffdf5"/><stop offset="30%" stop-color="#fef3c7"/>
                <stop offset="60%" stop-color="#fb923c"/><stop offset="85%" stop-color="#f97316"/>
                <stop offset="100%" stop-color="#c2410c"/>
              </radialGradient>
              <linearGradient id="nR5P1" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#8a3a16"/><stop offset="100%" stop-color="#4a1c08"/>
              </linearGradient>
              <linearGradient id="nR5P2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#ea580c"/><stop offset="100%" stop-color="#9a3412"/>
              </linearGradient>
              <linearGradient id="nR5P3" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fb923c"/><stop offset="100%" stop-color="#c2410c"/>
              </linearGradient>
              <linearGradient id="nR5P4" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fdba74"/><stop offset="100%" stop-color="#fb923c"/>
              </linearGradient>
              <linearGradient id="nR5P5" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#fef3c7"/><stop offset="100%" stop-color="#fdba74"/>
              </linearGradient>
              <filter id="nR5Drop" x="-30%" y="-30%" width="160%" height="160%">
                <feDropShadow dx="0" dy="3.5" stdDeviation="3" flood-color="#1c0902" flood-opacity="0.55"/>
              </filter>
              <linearGradient id="nR5Shine" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="rgba(255,255,255,0.18)"/><stop offset="40%" stop-color="rgba(255,255,255,0.04)"/>
                <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(26,8,2,0.4)"/>
              </linearGradient>
              <radialGradient id="nR5Vig" cx="50%" cy="48%" r="72%">
                <stop offset="62%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(18,6,1,0.6)"/>
              </radialGradient>
              <filter id="nR5Glow" x="-45%" y="-45%" width="190%" height="190%">
                <feGaussianBlur stdDeviation="4.5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR5Base)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR5Base-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR5Base-rs)"/>

            <!-- 内衬细框 -->
            <rect x="24.7" y="24.7" width="140.6" height="226.6" rx="5.7" fill="none" stroke="#f97316" stroke-width="1" opacity="0.3"/>

            <!-- 六边盾：整体一块，向心逐层凸起（越往中间越高），层间落影，整组光晕 -->
            <g stroke-linejoin="round" filter="url(#nR5Glow)">
              <polygon points="95,46.8 161.5,84 161.5,192 95,229.2 28.5,192 28.5,84" fill="url(#nR5P1)" filter="url(#nR5Drop)"/>
              <path d="M28.5 84 L95 46.8 L161.5 84" fill="none" stroke="rgba(254,243,199,0.5)" stroke-width="1.3"/>
              <path d="M161.5 192 L95 229.2 L28.5 192" fill="none" stroke="rgba(26,8,2,0.6)" stroke-width="1.6"/>
              <polygon points="95,62 148.2,100 148.2,176 95,214 41.8,176 41.8,100" fill="url(#nR5P2)" filter="url(#nR5Drop)"/>
              <path d="M41.8 100 L95 62 L148.2 100" fill="none" stroke="rgba(254,243,199,0.45)" stroke-width="1.1"/>
              <polygon points="95,77.2 137.8,107.6 137.8,168.4 95,198.8 52.2,168.4 52.2,107.6" fill="url(#nR5P3)" filter="url(#nR5Drop)"/>
              <path d="M52.2 107.6 L95 77.2 L137.8 107.6" fill="none" stroke="rgba(255,243,214,0.4)" stroke-width="1"/>
              <polygon points="95,92.4 125.4,115.2 125.4,160.8 95,183.6 64.6,160.8 64.6,115.2" fill="url(#nR5P4)" filter="url(#nR5Drop)"/>
              <path d="M64.6 115.2 L95 92.4 L125.4 115.2" fill="none" stroke="rgba(255,250,235,0.45)" stroke-width="1"/>
              <polygon points="95,107.6 114,122.8 114,153.2 95,168.4 76,153.2 76,122.8" fill="url(#nR5P5)" filter="url(#nR5Drop)"/>
              <path d="M76 122.8 L95 107.6 L114 122.8" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="1"/>
            </g>

            <!-- 中心熔核 -->
            <g filter="url(#nR5Glow)">
              <circle cx="95" cy="138" r="15.2" fill="none" stroke="#fb923c" stroke-width="1.9"/>
              <circle cx="95" cy="138" r="11" fill="url(#nR5Gem)"/>
              <circle cx="95" cy="138" r="5" fill="#fffdf5"/>
              <circle cx="91" cy="134" r="2" fill="#fff" opacity="0.95"/>
            </g>

            <!-- 菱形铆钉 -->
            <g transform="translate(47.5,47.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#1c0902" stroke="#7c2d12" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nR5Gem)"/>
              <polygon points="0,-6.5 6.5,0 0,0" fill="rgba(255,255,255,0.4)"/>
            </g>
            <g transform="translate(142.5,47.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#1c0902" stroke="#7c2d12" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nR5Gem)"/>
              <polygon points="0,-6.5 6.5,0 0,0" fill="rgba(255,255,255,0.4)"/>
            </g>
            <g transform="translate(47.5,228.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#1c0902" stroke="#7c2d12" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nR5Gem)"/>
              <polygon points="0,0 -6.5,0 0,6.5" fill="rgba(255,255,255,0.28)"/>
            </g>
            <g transform="translate(142.5,228.5)">
              <polygon points="0,-10.5 10.5,0 0,10.5 -10.5,0" fill="#1c0902" stroke="#7c2d12" stroke-width="1.6"/>
              <polygon points="0,-6.5 6.5,0 0,6.5 -6.5,0" fill="url(#nR5Gem)"/>
              <polygon points="0,0 -6.5,0 0,6.5" fill="rgba(255,255,255,0.28)"/>
            </g>

            <!-- 火晶三角 -->
            <g transform="translate(30.4,66.5)">
              <polygon points="3.8,0 7.6,7.6 0,7.6" fill="#fb923c" opacity="0.75"/>
              <polygon points="3.8,0 7.6,5.7 0,5.7" fill="#fed7aa" opacity="0.55"/>
            </g>
            <g transform="translate(152,66.5)">
              <polygon points="3.8,0 7.6,7.6 0,7.6" fill="#fb923c" opacity="0.55"/>
              <polygon points="3.8,0 7.6,5.7 0,5.7" fill="#fed7aa" opacity="0.45"/>
            </g>
            <g transform="translate(30.4,203.3)">
              <polygon points="3.8,7.6 7.6,0 0,0" fill="#f97316" opacity="0.55"/>
              <polygon points="3.8,5.7 7.6,0 0,0" fill="#fb923c" opacity="0.45"/>
            </g>
            <g transform="translate(152,203.3)">
              <polygon points="3.8,7.6 7.6,0 0,0" fill="#f97316" opacity="0.75"/>
              <polygon points="3.8,5.7 7.6,0 0,0" fill="#fb923c" opacity="0.55"/>
            </g>

            <!-- 十字熔柱 -->
            <g stroke-linecap="round">
              <path d="M96.5 24.5 L96.5 45" stroke="#1c0902" stroke-width="5.4"/>
              <path d="M95 23 L95 43.5" stroke="#fef3c7" stroke-width="3.8" opacity="0.85"/>
              <path d="M96.5 232.5 L96.5 253" stroke="#1c0902" stroke-width="5.4"/>
              <path d="M95 231.5 L95 252" stroke="#fb923c" stroke-width="3.8" opacity="0.7"/>
              <path d="M24.5 139.5 L45 139.5" stroke="#1c0902" stroke-width="5.4"/>
              <path d="M23 138 L43.5 138" stroke="#fef3c7" stroke-width="3.8" opacity="0.85"/>
              <path d="M147 139.5 L167.5 139.5" stroke="#1c0902" stroke-width="5.4"/>
              <path d="M148 138 L168.5 138" stroke="#fb923c" stroke-width="3.8" opacity="0.7"/>
            </g>

            <!-- 火星散点 -->
            <g fill="rgba(254,243,199,0.75)">
              <circle cx="65" cy="35" r="1.3"/><circle cx="128" cy="40" r="1.1"/>
              <circle cx="60" cy="243" r="1.2"/><circle cx="133" cy="238" r="1.3"/>
            </g>

            <!-- 多层线框（立体边框）+ 外侧亮边 -->
            <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#241004" stroke-width="5.5"/>
            <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#7c2d12" stroke-width="3"/>
            <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#c2410c" stroke-width="1.6"/>
            <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#f97316" stroke-width="2.2"/>
            <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(253,186,116,0.6)" stroke-width="0.9"/>
            <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(254,215,170,0.35)" stroke-width="1.2"/>

            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR5Shine)"/>
            <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#nR5Vig)"/>
          </svg>`
        },
        {
          id: 'red6',
          name: '熔岩波纹',
          background: 'linear-gradient(180deg, #3a0c05, #1a0402 60%, #2a0803)',
          svg: `<svg style="width:100%;height:100%;" viewBox="0 0 190 276" preserveAspectRatio="none">
              <defs><linearGradient id="lvBase-ls" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="rgba(255,255,255,0.20)"/><stop offset="45%" stop-color="rgba(255,255,255,0)"/></linearGradient><linearGradient id="lvBase-rs" x1="0" y1="0" x2="1" y2="0"><stop offset="55%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(0,0,0,0.30)"/></linearGradient>
                <linearGradient id="lvBase" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#3a0c05"/><stop offset="30%" stop-color="#240603"/>
                  <stop offset="60%" stop-color="#1a0402"/><stop offset="100%" stop-color="#2a0803"/>
                </linearGradient>
                <radialGradient id="lvEyeGlow" cx="50%" cy="51%" r="34%">
                  <stop offset="0%" stop-color="rgba(255,236,190,0.92)"/>
                  <stop offset="45%" stop-color="rgba(251,146,60,0.5)"/>
                  <stop offset="100%" stop-color="rgba(251,146,60,0)"/>
                </radialGradient>
                <linearGradient id="lvGem" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stop-color="#ffe9b8"/><stop offset="45%" stop-color="#fdba74"/>
                  <stop offset="62%" stop-color="#f97316"/><stop offset="100%" stop-color="#9a3412"/>
                </linearGradient>
                <linearGradient id="lvShine" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stop-color="rgba(255,255,255,0.2)"/><stop offset="40%" stop-color="rgba(255,255,255,0.04)"/>
                  <stop offset="58%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(40,5,0,0.32)"/>
                </linearGradient>
                <radialGradient id="lvVig" cx="50%" cy="48%" r="72%">
                  <stop offset="64%" stop-color="rgba(0,0,0,0)"/><stop offset="100%" stop-color="rgba(20,2,0,0.6)"/>
                </radialGradient>
                <filter id="lvDrop" x="-40%" y="-40%" width="180%" height="180%">
                  <feDropShadow dx="1.5" dy="2.5" stdDeviation="5" flood-color="#1a0300" flood-opacity="0.4"/>
                </filter>
                <filter id="lvBlur3" x="-60%" y="-60%" width="220%" height="220%">
                  <feGaussianBlur stdDeviation="3"/>
                </filter>
                <filter id="lvIrisGlow" x="-45%" y="-45%" width="190%" height="190%">
                  <feGaussianBlur stdDeviation="5" result="coloredBlur"/>
                  <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="coloredBlur"/><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
              </defs>

              <!-- 满铺熔岩色带：暗黑红底（原版真实渲染为暗底，亮橙元素负责层次） -->
              <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#lvBase)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#lvBase-ls)"/><rect x="0" y="0" width="190" height="276" rx="22" fill="url(#lvBase-rs)"/>

              <!-- 七条波浪：暗影层(偏移) + 主层 + 波峰高光 —— 堆积厚度感 -->
              <g fill="none" stroke-linecap="round">
                <path d="M8 38 Q57 9.5 95 38 T182 38" stroke="#3f0808" stroke-width="6.5" opacity="0.45" transform="translate(0,2.5)"/>
                <path d="M8 38 Q57 9.5 95 38 T182 38" stroke="#450a0a" stroke-width="5.5" opacity="0.35"/>
                <path d="M5.7 53 Q53 22.8 95 53 T184.3 53" stroke="#2c0505" stroke-width="7.5" opacity="0.5" transform="translate(0,2.5)"/>
                <path d="M5.7 53 Q53 22.8 95 53 T184.3 53" stroke="#991b1b" stroke-width="6.5" opacity="0.5"/>
                <path d="M5.7 91 Q53 60.8 95 91 T184.3 91" stroke="#5c1005" stroke-width="8.5" opacity="0.55" transform="translate(0,2.5)"/>
                <path d="M5.7 91 Q53 60.8 95 91 T184.3 91" stroke="#f97316" stroke-width="7.5" opacity="0.6"/>
                <path d="M5.7 129 Q53 98.8 95 129 T184.3 129" stroke="#7a2c0c" stroke-width="10" opacity="0.6" transform="translate(0,2.5)"/>
                <path d="M5.7 129 Q53 98.8 95 129 T184.3 129" stroke="#fb923c" stroke-width="9" opacity="0.8"/>
                <path d="M5.7 167 Q53 136.8 95 167 T184.3 167" stroke="#5c1005" stroke-width="8.5" opacity="0.55" transform="translate(0,2.5)"/>
                <path d="M5.7 167 Q53 136.8 95 167 T184.3 167" stroke="#f97316" stroke-width="7.5" opacity="0.6"/>
                <path d="M5.7 205 Q53 174.8 95 205 T184.3 205" stroke="#2c0505" stroke-width="7.5" opacity="0.5" transform="translate(0,2.5)"/>
                <path d="M5.7 205 Q53 174.8 95 205 T184.3 205" stroke="#991b1b" stroke-width="6.5" opacity="0.5"/>
                <path d="M7.6 247 Q57 218.5 95 247 T182 247" stroke="#3f0808" stroke-width="6" opacity="0.4" transform="translate(0,2.5)"/>
                <path d="M7.6 247 Q57 218.5 95 247 T182 247" stroke="#450a0a" stroke-width="5" opacity="0.4"/>
              </g>
              <!-- 波峰高光点（熔岩亮点） -->
              <g fill="rgba(255,232,180,0.85)">
                <circle cx="95" cy="125" r="2.4"/><circle cx="48" cy="86" r="2"/><circle cx="142" cy="86" r="2"/>
                <circle cx="95" cy="51" r="1.8"/><circle cx="30" cy="163" r="1.8"/><circle cx="160" cy="163" r="1.8"/>
              </g>
              <!-- 熔岩裂纹细缝（发亮） -->
              <g stroke="rgba(255,244,200,0.5)" stroke-width="1" fill="none">
                <path d="M30 108 L44 116 L58 110"/>
                <path d="M120 146 L136 154 L148 148"/>
              </g>

              <!-- 眼窝：暗盘压住波浪（眼睛的地基） -->
              <radialGradient id="lvSocket" cx="50%" cy="50%" r="60%">
                <stop offset="0%" stop-color="#4a1008"/>
                <stop offset="55%" stop-color="#2a0604"/>
                <stop offset="82%" stop-color="rgba(20,3,2,0.92)"/>
                <stop offset="100%" stop-color="rgba(20,3,2,0)"/>
              </radialGradient>
              <circle cx="95" cy="142.5" r="62" fill="url(#lvSocket)"/>

              <!-- 眼睛：虹膜三层圈（颜色还原原版：暗黑红→暗红→橙→亮橙，圈间暗隙分层，整组带原版同款高斯光晕） -->
              <g filter="url(#lvIrisGlow)">
                <circle cx="95" cy="142.5" r="53" fill="none" stroke="#450a0a" stroke-width="6.5"/>
                <circle cx="95" cy="140.8" r="53" fill="none" stroke="rgba(251,146,60,0.45)" stroke-width="1.8"/>
                <circle cx="95" cy="142.5" r="40" fill="none" stroke="#991b1b" stroke-width="5.5"/>
                <circle cx="95" cy="140.8" r="40" fill="none" stroke="rgba(251,146,60,0.35)" stroke-width="1.5"/>
                <circle cx="95" cy="142.5" r="27" fill="none" stroke="#f97316" stroke-width="4.6"/>
                <circle cx="95" cy="141" r="27" fill="none" stroke="rgba(255,215,150,0.85)" stroke-width="1.6"/>
                <circle cx="95" cy="142.5" r="14" fill="none" stroke="#fb923c" stroke-width="3.6"/>
                <circle cx="95" cy="141.2" r="14" fill="none" stroke="rgba(255,236,190,0.95)" stroke-width="1.4"/>
              </g>
              <!-- 虹膜放射细纹 -->
              <g stroke="rgba(255,170,90,0.45)" stroke-width="1.2" stroke-linecap="round">
                <path d="M95 112 L95 122 M95 163 L95 173 M65 142.5 L75 142.5 M115 142.5 L125 142.5"/>
                <path d="M74 121 L81 128 M116 164 L109 157 M116 121 L109 128 M74 164 L81 157"/>
                <path d="M83 116 L88 124 M107 169 L102 161 M107 116 L102 124 M83 169 L88 161"/>
              </g>

              <!-- 瞳孔：黑红层叠竖菱形，向中心白热发光（原版颜色层次）；边缘用模糊落影替代硬黑边 -->
              <g filter="url(#lvDrop)">
                <circle cx="95" cy="142.5" r="14" fill="rgba(255,220,160,0.42)"/>
                <path d="M95 112 L117 142.5 L95 173 L73 142.5 Z" fill="rgba(22,2,2,0.55)" transform="translate(2.5,3.5)" filter="url(#lvBlur3)"/>
                <path d="M95 112 L117 142.5 L95 173 L73 142.5 Z" fill="rgba(58,10,12,0.78)"/>
                <path d="M95 118 L111 142.5 L95 167 L79 142.5 Z" fill="#7a1a12"/>
                <path d="M95 124 L105.5 142.5 L95 161 L84.5 142.5 Z" fill="#c22a1e"/>
                <path d="M95 129.5 L101.5 142.5 L95 155.5 L88.5 142.5 Z" fill="#f97316"/>
                <path d="M95 134 L98.5 142.5 L95 151 L91.5 142.5 Z" fill="#fb923c"/>
                <path d="M95 137.5 L96.8 142.5 L95 147.5 L93.2 142.5 Z" fill="#ffe9c0"/>
                <circle cx="95" cy="142.5" r="2.2" fill="#fffaf0"/>
                <path d="M95 118 L84 142.5" stroke="rgba(255,180,140,0.55)" stroke-width="1.6" stroke-linecap="round"/>
              </g>
              <!-- 环绕虚线环 -->
              <circle cx="95" cy="142.5" r="57" fill="none" stroke="#3f0808" stroke-width="1.4" opacity="0.35" stroke-dasharray="5,5"/>
              <circle cx="95" cy="142.5" r="44" fill="none" stroke="#991b1b" stroke-width="1.2" opacity="0.4" stroke-dasharray="3.5,4"/>

              <!-- 多层线框（原版暗→亮 5 层）+ 外侧亮边 -->
              <rect x="2" y="2" width="186" height="272" rx="22" fill="none" stroke="#3f0808" stroke-width="5.5"/>
              <rect x="5" y="5" width="180" height="266" rx="20" fill="none" stroke="#991b1b" stroke-width="3"/>
              <rect x="8" y="8" width="174" height="260" rx="18" fill="none" stroke="#f97316" stroke-width="1.6"/>
              <rect x="11" y="11" width="168" height="254" rx="16" fill="none" stroke="#fb923c" stroke-width="2.2"/>
              <rect x="14.5" y="14.5" width="161" height="247" rx="14" fill="none" stroke="rgba(253,186,116,0.65)" stroke-width="0.9"/>
              <rect x="0.8" y="0.8" width="188.4" height="274.4" rx="23" fill="none" stroke="rgba(255,190,120,0.4)" stroke-width="1.2"/>

              <!-- 对角高光 + 暗角 -->
              <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#lvShine)"/>
              <rect x="0" y="0" width="190" height="276" rx="22" fill="url(#lvVig)"/>
            </svg>`
        }
      ]
    };

    let selectedBlueCardBack = 'blue2';
    let selectedRedCardBack = 'red5';
    let selectedCardFaceStyle = 'normal'; // 'normal'、'glass' 或 'metal'（默认经典）
    let isTutorialMode = false;
    let currentTutorialStep = 0;
    let tutorialReady = false;
    let tutorialDialogActive = false;
    let tutorialPhase = 'showing';
    let tutorialAClicked = false;
    let tutorialRoundLocked = false;
    let tutorialMaxStep = 0;
    const savedCardFaceStyle = localStorage.getItem('cardFaceStyle');
    if (savedCardFaceStyle && (savedCardFaceStyle === 'normal' || savedCardFaceStyle === 'glass' || savedCardFaceStyle === 'metal' || savedCardFaceStyle === 'cartoon')) {
      selectedCardFaceStyle = savedCardFaceStyle;
    }

    const CardBackConfig = {
      player: {
        gradient: cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack).background,
        borderColor: '#3b82f6',
        borderWidth: '2px',
        borderRadius: '10px',
        innerHTML: cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack).svg
      },
      opponent: {
        gradient: cardBackDesigns.red.find(d => d.id === selectedRedCardBack).background,
        borderColor: '#ef4444',
        borderWidth: '2px',
        borderRadius: '10px',
        innerHTML: cardBackDesigns.red.find(d => d.id === selectedRedCardBack).svg
      }
    };

    function createCardBackOption(design, color) {
      const btn = document.createElement('button');
      btn.style.width = '36px';
      btn.style.height = '50px';
      btn.style.borderRadius = '6px';
      btn.style.border = '2px solid #334155';
      btn.style.background = design.background;
      btn.style.overflow = 'hidden';
      btn.classList.add('game-cursor-hover');
      btn.style.transition = 'all 0.2s ease';
      
      let uniqueSvg = design.svg;
      uniqueSvg = uniqueSvg.replace(/id="([^"]+)"/g, `id="${design.id}-$1"`);
      uniqueSvg = uniqueSvg.replace(/url\(#([^)]+)\)/g, `url(#${design.id}-$1)`);
      btn.innerHTML = uniqueSvg;
      
      btn.onmouseover = () => {
        btn.style.transform = 'scale(1.1)';
        btn.style.borderColor = color === 'blue' ? '#3b82f6' : '#ef4444';
      };
      
      btn.onmouseout = () => {
        btn.style.transform = 'scale(1)';
        const isSelected = (color === 'blue' && design.id === selectedBlueCardBack) || 
                          (color === 'red' && design.id === selectedRedCardBack);
        btn.style.borderColor = isSelected ? (color === 'blue' ? '#3b82f6' : '#ef4444') : '#334155';
      };
      
      btn.onclick = () => {
        if (color === 'blue') {
          selectedBlueCardBack = design.id;
          document.querySelectorAll('#blue-card-back-options button').forEach(b => {
            b.style.borderColor = '#334155';
          });
          btn.style.borderColor = '#3b82f6';
        } else {
          selectedRedCardBack = design.id;
          document.querySelectorAll('#red-card-back-options button').forEach(b => {
            b.style.borderColor = '#334155';
          });
          btn.style.borderColor = '#ef4444';
        }
        
        const selectedBlueDesign = cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack);
        const selectedRedDesign = cardBackDesigns.red.find(d => d.id === selectedRedCardBack);
        localStorage.setItem('cardBackSelection', JSON.stringify({
          blue: selectedBlueCardBack,
          red: selectedRedCardBack,
          blueDesign: selectedBlueDesign,
          redDesign: selectedRedDesign
        }));
        
        updateCardBacks(selectedBlueDesign, selectedRedDesign);
      };
      
      return btn;
    }

    function initCardBackOptions() {
      const blueContainer = document.getElementById('blue-card-back-options');
      const redContainer = document.getElementById('red-card-back-options');
      
      if (blueContainer) {
        blueContainer.innerHTML = '';
        cardBackDesigns.blue.forEach(design => {
          const btn = createCardBackOption(design, 'blue');
          if (design.id === selectedBlueCardBack) {
            btn.style.borderColor = '#3b82f6';
          }
          blueContainer.appendChild(btn);
        });
      }
      
      if (redContainer) {
        redContainer.innerHTML = '';
        cardBackDesigns.red.forEach(design => {
          const btn = createCardBackOption(design, 'red');
          if (design.id === selectedRedCardBack) {
            btn.style.borderColor = '#ef4444';
          }
          redContainer.appendChild(btn);
        });
      }
      
      const savedSelection = localStorage.getItem('cardBackSelection');
      if (savedSelection) {
        try {
          const selection = JSON.parse(savedSelection);
          selectedBlueCardBack = selection.blue || 'blue2';
          selectedRedCardBack = selection.red || 'red5';
          // ★ 符文阵列系列（blue4/red4）已下架：存档指向已删除款式时回退默认，避免选中空设计
          if (!cardBackDesigns.blue.some(d => d.id === selectedBlueCardBack)) selectedBlueCardBack = 'blue2';
          if (!cardBackDesigns.red.some(d => d.id === selectedRedCardBack)) selectedRedCardBack = 'red5';

          const selectedBlueDesign = cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack);
          const selectedRedDesign = cardBackDesigns.red.find(d => d.id === selectedRedCardBack);
          updateCardBacks(selectedBlueDesign, selectedRedDesign);
        } catch (e) {}
      }
    }

    function updateCardBacks(blueDesign, redDesign) {
      if (blueDesign) {
        CardBackConfig.player.gradient = blueDesign.background;
        CardBackConfig.player.innerHTML = blueDesign.svg;
        currentBlueCardBack = blueDesign;
      }

      if (redDesign) {
        CardBackConfig.opponent.gradient = redDesign.background;
        CardBackConfig.opponent.innerHTML = redDesign.svg;
        currentRedCardBack = redDesign;
      }

      // 游戏进行中：重新渲染牌堆卡背（保持完整显示）
      if (GameState && GameState.gamePhase === 'playing' && typeof renderDeckCardBacks === 'function') {
        renderDeckCardBacks();
      }

      if (GameState && typeof updateCardDisplayArea === 'function') {
        updateCardDisplayArea('player', 'darkCards', GameState.playerDarkCards);
        updateCardDisplayArea('opponent', 'darkCards', GameState.opponentDarkCards);
        updateCardDisplayArea('opponent', 'hand', GameState.opponentHand);
      }
    }

    // ----------------------------------------------------------------------------
    // 【卡面样式选择】
    // ----------------------------------------------------------------------------
    function updateCardFaceBtnStyle() {
      // ★ 卡通风格容器作用域开关（果冻悬停动画/草地背景 CSS 作用域）
      document.querySelectorAll('.game-container').forEach(gc => gc.classList.toggle('card-style-cartoon', selectedCardFaceStyle === 'cartoon'));
      const normalBtn = document.getElementById('cardface-normal-btn');
      const glassBtn = document.getElementById('cardface-glass-btn');
      const metalBtn = document.getElementById('cardface-metal-btn');
      const cartoonBtn = document.getElementById('cardface-cartoon-btn');
      if (!normalBtn || !glassBtn || !metalBtn) return;

      normalBtn.style.borderColor = '#475569';
      normalBtn.style.background = '#334155';
      normalBtn.style.color = '#94a3b8';
      glassBtn.style.borderColor = '#475569';
      glassBtn.style.background = '#334155';
      glassBtn.style.color = '#94a3b8';
      metalBtn.style.borderColor = '#475569';
      metalBtn.style.background = '#334155';
      metalBtn.style.color = '#94a3b8';
      if (cartoonBtn) {
        cartoonBtn.style.borderColor = '#475569';
        cartoonBtn.style.background = '#334155';
        cartoonBtn.style.color = '#94a3b8';
      }

      if (selectedCardFaceStyle === 'normal') {
        normalBtn.style.borderColor = '#3b82f6';
        normalBtn.style.background = '#1e40af';
        normalBtn.style.color = '#bfdbfe';
      } else if (selectedCardFaceStyle === 'glass') {
        glassBtn.style.borderColor = '#06b6d4';
        glassBtn.style.background = '#0e7490';
        glassBtn.style.color = '#cffafe';
      } else if (selectedCardFaceStyle === 'metal') {
        metalBtn.style.borderColor = '#fbbf24';
        metalBtn.style.background = '#b45309';
        metalBtn.style.color = '#fef3c7';
      } else if (selectedCardFaceStyle === 'cartoon' && cartoonBtn) {
        cartoonBtn.style.borderColor = '#22c55e';
        cartoonBtn.style.background = '#15803d';
        cartoonBtn.style.color = '#dcfce7';
      }
    }

    function updateClassicBackground() {
      // 经典风格背景图由元素设置面板控制
      // 此函数保留为兼容接口，实际由 applyCardFaceBg 处理
      if (typeof applyCardFaceBg === 'function') {
        applyCardFaceBg();
      }
    }

    // 【卡通风格·果冻落地动画】事件委托版（2026-10-04）
    // 卡牌常被整块 innerHTML 重渲染，无法逐卡挂监听——用 document 级 mouseout 委托：
    // 离开功能牌区卡牌时挂 ct-fall 类触发落地动画，animationend 后自动摘除
    (function initCartoonCardJelly() {
      document.addEventListener('mouseout', function(e) {
        const gc = document.querySelector('.game-container.card-style-cartoon');
        if (!gc) return;
        const t = e.target;
        if (!t || !t.closest) return;
        const card = t.closest('.card');
        if (!card || !gc.contains(card)) return;
        if (card.contains(e.relatedTarget)) return; // 仍在卡牌内部移动
        if (card.closest('.road-slot, .player-neutral-slot, .opponent-neutral-slot')) return; // 路牌/中立区无悬停动画
        if (card.classList.contains('glory-card')) return; // 最大牌型卡走专属倾斜效果
        // ★ 对方功能牌区（手牌/暗牌/明牌）：悬停=保持放大（纯CSS forwards），
        //   离开=挂 ct-opp-fall 播剩余段（回缩→惯性回稳），animationend 摘除
        if (card.closest('.opponent-hand-slot, .opponent-dark-slot, .opponent-revealed-slot')) {
          card.classList.remove('ct-opp-fall');
          void card.offsetWidth; // 强制重排，保证连续进出时动画能重新播放
          card.classList.add('ct-opp-fall');
          return;
        }
        // ★ 卡背（我方暗牌+双方牌堆）：倾斜落地动画（与卡面果冻落地区分）
        if (card.classList.contains('ct-back') && card.closest('.player-dark-slot, #player-deck, #opponent-deck')) {
          card.classList.remove('ct-back-fall');
          void card.offsetWidth; // 强制重排，保证连续进出时动画能重新播放
          card.classList.add('ct-back-fall');
          return;
        }
        card.classList.remove('ct-fall');
        void card.offsetWidth; // 强制重排，保证连续进出时动画能重新播放
        card.classList.add('ct-fall');
      });
      document.addEventListener('animationend', function(e) {
        if (e.animationName === 'ctJellyFall' && e.target && e.target.classList) {
          e.target.classList.remove('ct-fall');
        }
        // ★ 卡背倾斜落地动画结束后摘除类（同 ct-fall 机制）
        if (e.animationName === 'ctBackTiltFall' && e.target && e.target.classList) {
          e.target.classList.remove('ct-back-fall');
        }
        // ★ 对方卡牌剩余段（回缩→回稳）结束后摘除类
        if (e.animationName === 'ctOppFall' && e.target && e.target.classList) {
          e.target.classList.remove('ct-opp-fall');
        }
      });
    })();

    // 【卡通·匹配运镜】（2026-10-04）已废弃移除：屏幕聚焦缩放与光晕聚拢两版均不符预期，
    //   匹配光环最终方案 = 方案C（卡面队色↔金色呼吸+光晕+起伏），纯 CSS 实现（见 ctMatchBreath），
    //   无需 JS 触发——match-glow 类挂上即自动呼吸

    function initCardFaceOptions() {
      const savedStyle = localStorage.getItem('cardFaceStyle');
      if (savedStyle) {
        selectedCardFaceStyle = savedStyle;
      }

      const normalBtn = document.getElementById('cardface-normal-btn');
      const glassBtn = document.getElementById('cardface-glass-btn');
      const metalBtn = document.getElementById('cardface-metal-btn');

      if (normalBtn) {
        normalBtn.onclick = () => {
          selectedCardFaceStyle = 'normal';
          localStorage.setItem('cardFaceStyle', 'normal');
          updateCardFaceBtnStyle();
          refreshAllCardFaces();
          if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
          if (typeof updateUI === 'function') updateUI();
          refreshCardFaceBgBtn();
          applyCardFaceBg();
        };
      }

      if (glassBtn) {
        glassBtn.onclick = () => {
          selectedCardFaceStyle = 'glass';
          localStorage.setItem('cardFaceStyle', 'glass');
          updateCardFaceBtnStyle();
          refreshAllCardFaces();
          if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
          if (typeof updateUI === 'function') updateUI();
          refreshCardFaceBgBtn();
          applyCardFaceBg();
        };
      }

      if (metalBtn) {
        metalBtn.onclick = () => {
          selectedCardFaceStyle = 'metal';
          localStorage.setItem('cardFaceStyle', 'metal');
          updateCardFaceBtnStyle();
          refreshAllCardFaces();
          if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
          if (typeof updateUI === 'function') updateUI();
          refreshCardFaceBgBtn();
          applyCardFaceBg();
        };
      }

      const cartoonBtn = document.getElementById('cardface-cartoon-btn');
      if (cartoonBtn) {
        cartoonBtn.onclick = () => {
          selectedCardFaceStyle = 'cartoon';
          localStorage.setItem('cardFaceStyle', 'cartoon');
          updateCardFaceBtnStyle();
          refreshAllCardFaces();
          if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
          if (typeof updateUI === 'function') updateUI();
          refreshCardFaceBgBtn();
          applyCardFaceBg();
        };
      }

      updateCardFaceBtnStyle();
      if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
      refreshCardFaceBgBtn();
      applyCardFaceBg();
    }

    function refreshAllCardFaces() {
      // 刷新所有卡牌显示区域中的卡牌
      if (GameState && typeof updateCardDisplayArea === 'function') {
        updateCardDisplayArea('player', 'hand', GameState.playerHand);
        updateCardDisplayArea('player', 'darkCards', GameState.playerDarkCards);
        updateCardDisplayArea('player', 'revealedCards', GameState.playerRevealedCards);
        updateCardDisplayArea('opponent', 'hand', GameState.opponentHand);
        updateCardDisplayArea('opponent', 'darkCards', GameState.opponentDarkCards);
        updateCardDisplayArea('opponent', 'revealedCards', GameState.opponentRevealedCards);
      }
      // 刷新路牌区
      if (typeof updateFieldDisplay === 'function') {
        updateFieldDisplay();
      }
      // 刷新中立区
      if (typeof updateNeutralDisplay === 'function') {
        updateNeutralDisplay();
      }
      // 刷新牌堆卡背
      if (typeof updateCardBacks === 'function') {
        const selectedBlueDesign = cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack);
        const selectedRedDesign = cardBackDesigns.red.find(d => d.id === selectedRedCardBack);
        if (selectedBlueDesign && selectedRedDesign) {
          updateCardBacks(selectedBlueDesign, selectedRedDesign);
        }
      }
      // 刷新路牌区、拼点栏和背景样式
      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
    }

    function updateRoadAndCompareStyle() {
      // ★ 2026-10-6 修复（用户报：卡通风格点设置后手牌区出现卡槽+手牌缩小）：
      //   卡通风格有独立的槽位重置体系（updateUI 内 stone-hand-slot 等），本函数没有
      //   cartoon 分支——cartoon 落入下方 else（classic）分支会误加 card-style-classic
      //   类并把手牌槽重置成 classic 类名 → 石板卡槽显形+手牌缩小。
      //   cartoon 时只刷新拼点结果，槽位全部交由 updateUI 处理
      if (typeof selectedCardFaceStyle !== 'undefined' && selectedCardFaceStyle === 'cartoon') {
        // ★ 2026-10-6 修复②（用户报：切走风格再切回卡通后，手牌缩小+卡槽变回原样式）：
        //   切到金属/玻璃/经典时各分支把手牌槽类名重置为对应类名（bg-primary 等），
        //   切回卡通时本分支此前只刷新拼点就 return——没人把槽类改回石板类，
        //   手牌卡随之失去 inset:-2px 外扩（68x100→64x96 缩小）+ 蓝槽显形。
        //   补：非石板槽重置为卡通类名（与 clearAllCardSlots 卡通分支逐字一致）；
        //   已是石板槽则跳过（本函数卡通下会被多次调用，避免误清瞬态内联样式）。
        //   dark/revealed 槽无需类名处理：cartoon 作用域 CSS 按槽类直接覆盖。
        document.querySelectorAll('.player-hand-slot, .opponent-hand-slot').forEach(slot => {
          if (slot.classList.contains('stone-hand-slot')) return;
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = slot.classList.contains('player-hand-slot')
            ? 'player-hand-slot w-16 h-24 game-cursor-hover card-hover flex items-center justify-center stone-hand-slot'
            : 'opponent-hand-slot w-16 h-24 stone-hand-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        // ★ 2026-10-9 修复（用户报：切走风格再切回卡通后，卡牌与中立区出现细微样式变化；
        //   仅 classic 往返无问题）：metal/glass 分支会把 revealed/dark/neutral 槽类名
        //   重置为对应风格类（且中立槽丢失 border-r 分隔线类），本 cartoon 分支此前只恢复
        //   手牌槽——残留类与初始 cartoon 基准（classic 类名）不一致即细微变化。
        //   归一方式 = 仅移除含 metal/glass 的风格类 + 补回 classic 基准类 / border-r；
        //   不 removeAttribute('style')、不整串重置 className（保留全部瞬态/动态类）。
        const stripStyleHint = (slot) => {
          Array.from(slot.classList).forEach(c => {
            if (c.indexOf('metal') >= 0 || c.indexOf('glass') >= 0) slot.classList.remove(c);
          });
        };
        document.querySelectorAll('.player-revealed-slot, .opponent-revealed-slot').forEach(slot => {
          stripStyleHint(slot);
          slot.classList.add('classic-revealed-slot');
        });
        document.querySelectorAll('.player-dark-slot, .opponent-dark-slot').forEach(slot => {
          // ★ 2026-10-10 修复（用户报：其他风格切卡通后暗牌区出现透明遮罩）：
          //   此处此前沿用 "strip + 补 classic-dark-slot" 归一路线，但 cartoon 的暗牌槽
          //   基准类是 stone-dark-slot（updateUI/暗牌区重建函数同款）——classic-dark-slot
          //   的半透明槽底在 cartoon 下显形为遮罩。改为与 updateUI cartoon 分支一致的
          //   整串重置（石砌拱架 CSS 依赖 stone-dark-slot 透明化槽本体让拱门透出）。
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = slot.classList.contains('player-dark-slot')
            ? 'player-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot'
            : 'opponent-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        document.querySelectorAll('.player-neutral-slot, .opponent-neutral-slot').forEach(slot => {
          stripStyleHint(slot);
          slot.classList.add(slot.classList.contains('player-neutral-slot') ? 'player-neutral-slot-classic' : 'opponent-neutral-slot-classic');
          const idx = slot.getAttribute('data-slot');
          if (idx !== null && idx !== '6' && !slot.classList.contains('border-r')) {
            slot.classList.add('border-r', 'border-purple-500/30');
          }
        });
        // ★ 2026-10-9 修复②（用户报：路牌区也受残留影响；全面审计 metal/glass 分支补充）：
        const gcForCartoon = document.querySelector('.game-container');
        if (gcForCartoon) gcForCartoon.classList.remove('metal-bg-active');   // metal 分支挂上的标记类（影响中立区光晕等专项样式）
        document.querySelectorAll('.player-road-slot, .opponent-road-slot').forEach(slot => {
          stripStyleHint(slot);
          if (slot.classList.contains('player-road-slot')) {
            slot.classList.add('player-road-slot-classic', 'border', 'border-primary/30', 'rounded');
          } else {
            slot.classList.add('opponent-road-slot-classic', 'border', 'border-secondary/30', 'rounded');
          }
        });
        document.querySelectorAll('.result-slot').forEach(slot => {
          // ★ 2026-10-9 修复③（用户报：玻璃切卡通拼点栏残留）：与 classic 分支（19287）同款四件套——
          //   此前只归一类名，漏了 innerHTML 灯管结构重建 + dataset.rsKey 防闪烁键清除：
          //   rsKey 残留 + rs-g3 类 + firstElementChild 会让 updateResults 防闪烁检查
          //   误判"状态未变"而跳过 → 拼点栏停在 glass 时期的状态（即残留）。
          stripStyleHint(slot);
          slot.removeAttribute('style');
          slot.className = 'result-slot rs-g3 rs-e w-[4.6rem] h-8 flex items-center justify-center';
          slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div></div>';
          delete slot.dataset.rsKey;
        });
        if (GameState && GameState.gamePhase === 'playing' && typeof renderDeckCardBacks === 'function') {
          renderDeckCardBacks();   // 牌堆卡背按 cartoon 重渲（metal/glass 分支曾按其风格渲染过）
        } else {
          // ★ 2026-10-10 修复（用户报：玻璃/金属切回卡通后，牌堆原先样式改变）：
          //   非 playing（开局前/结算后）时 metal/glass 分支会给牌堆塞风格专属空牌堆
          //   样式（glass-deck-blue/metal-deck-blue + 内联背景边框阴影），本分支此前
          //   只补 deck-container 类不重置样式 → 残留显形。重置为卡通空牌堆基准
          //   （类名与 resetUI 卡通分支逐字一致）。
          document.querySelectorAll('#player-deck, #opponent-deck').forEach(deck => {
            deck.removeAttribute('style');
            if (typeof selectedCardFaceStyle !== 'undefined' && selectedCardFaceStyle === 'cartoon') {
              // ★ 2026-10-14：cartoon 空牌堆 = 城堡门楼关门态（悬停双门转入门轨）
              deck.className = (deck.id === 'player-deck')
                ? 'pb-gate-deck deck-container game-cursor-hover pb-gate-empty'
                : 'pb-gate-deck deck-container game-cursor-hover no-hover-anim pb-gate-empty';
              deck.innerHTML = buildCartoonGateDeckHTML(deck.id === 'player-deck' ? 'p' : 'o', null);
            } else {
              deck.className = (deck.id === 'player-deck')
                ? 'deck-container game-cursor-hover card-hover w-16 h-24 flex flex-col items-center justify-center'
                : 'deck-container game-cursor-hover no-hover-anim w-16 h-24 flex flex-col items-center justify-center';
              deck.innerHTML = '<div id="' + deck.id + '-count" class="deck-count" style="display:none;">26</div>';
            }
          });
          GameElements.player.deckCount = document.getElementById('player-deck-count');
          GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
        }
        if (typeof updateResults === 'function' && typeof GameState !== 'undefined' && GameState) {
          updateResults();
        }
        return;
      }

      const isMetal = selectedCardFaceStyle === 'metal';
      const isGlass = selectedCardFaceStyle === 'glass';
      const gameContainer = document.querySelector('.game-container');
      
      const metalBorderGradient = 'linear-gradient(145deg, #e8e8e8 0%, #c0c0c0 20%, #888888 40%, #a0a0a0 50%, #888888 60%, #c0c0c0 80%, #f0f0f0 100%)';

      const playerRoadSlots = document.querySelectorAll('.player-road-slot');
      const opponentRoadSlots = document.querySelectorAll('.opponent-road-slot');
      const resultSlots = document.querySelectorAll('.result-slot');
      
      const opponentFunctionArea = document.querySelector('.opponent-function-area');
      const playerFunctionArea = document.querySelector('.player-function-area');
      
      const playerHandSlots = document.querySelectorAll('.player-hand-slot');
      const playerDarkSlots = document.querySelectorAll('.player-dark-slot');
      const playerRevealedSlots = document.querySelectorAll('.player-revealed-slot');
      const opponentHandSlots = document.querySelectorAll('.opponent-hand-slot');
      const opponentDarkSlots = document.querySelectorAll('.opponent-dark-slot');
      const opponentRevealedSlots = document.querySelectorAll('.opponent-revealed-slot');

      if (isMetal) {
        if (gameContainer) {
          gameContainer.style.background = '';
          gameContainer.style.backgroundSize = '';
          gameContainer.style.boxShadow = '';
          // ★ 标记金属风格：激活 .game-container.metal-bg-active 下的专项样式
          //   （如去除中立区紫光外发光）。该类此前从未被添加，导致覆盖规则永不生效
          gameContainer.classList.add('metal-bg-active');
          gameContainer.classList.remove('card-style-classic');
        }

        playerRoadSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.classList.remove('player-road-slot-glass');
          slot.className = 'road-slot player-road-slot game-cursor-hover flex flex-col player-road-slot-metal';
        });

        opponentRoadSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.classList.remove('opponent-road-slot-glass');
          slot.className = 'road-slot opponent-road-slot flex flex-col-reverse opponent-road-slot-metal';
        });

        resultSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.classList.remove('result-slot-glass');
          slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center result-slot-metal';
        });

        const scoreBarContainers = document.querySelectorAll('.score-bar-container');
        scoreBarContainers.forEach(container => {
          container.style.background = '';
          container.style.border = '';
          container.style.borderRadius = '';
          container.style.backgroundClip = '';
          container.style.borderImage = '';
        });
        
        if (opponentFunctionArea) {
          opponentFunctionArea.style.background = '';
          opponentFunctionArea.style.backdropFilter = '';
          opponentFunctionArea.style.webkitBackdropFilter = '';
        }
        
        if (playerFunctionArea) {
          playerFunctionArea.style.background = '';
          playerFunctionArea.style.backdropFilter = '';
          playerFunctionArea.style.webkitBackdropFilter = '';
        }
        
        playerHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-hand-slot w-16 h-24 bg-primary rounded game-cursor-hover card-hover flex items-center justify-center metal-hand-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        playerDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-dark-slot w-16 h-24 border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover metal-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        playerRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover metal-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        
        opponentHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-hand-slot w-16 h-24 bg-secondary rounded opponent-metal-hand-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        opponentDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-dark-slot w-16 h-24 border border-secondary/50 rounded flex items-center justify-center opponent-metal-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });
        opponentRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center opponent-metal-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
          }
        });

        const playerNeutralSlots = document.querySelectorAll('.player-neutral-slot');
        playerNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'player-neutral-slot flex-1 h-full flex flex-col items-center justify-start p-1 relative player-neutral-slot-metal';
        });

        const opponentNeutralSlots = document.querySelectorAll('.opponent-neutral-slot');
        opponentNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'opponent-neutral-slot flex-1 h-full flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-metal';
        });

        const playerDeck = document.getElementById('player-deck');
        if (playerDeck) {
          playerDeck.classList.remove('glass-deck-blue', 'metal-deck-blue', 'deck-container');
          playerDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            playerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center metal-deck-blue game-cursor-hover card-hover';
            playerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
            playerDeck.style.border = '3px solid #888888';
            playerDeck.style.borderRadius = '8px';
            playerDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
            playerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.player.deckCount = document.getElementById('player-deck-count');
          }
        }

        const opponentDeck = document.getElementById('opponent-deck');
        if (opponentDeck) {
          opponentDeck.classList.remove('glass-deck-red', 'metal-deck-red', 'deck-container');
          opponentDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            opponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center metal-deck-red game-cursor-hover no-hover-anim';
            opponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
            opponentDeck.style.border = '3px solid #888888';
            opponentDeck.style.borderRadius = '8px';
            opponentDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
            opponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
          }
        }
      } else if (isGlass) {
        if (gameContainer) {
          gameContainer.style.background = '';
          gameContainer.style.backgroundSize = '';
          gameContainer.style.boxShadow = '';
          gameContainer.classList.remove('metal-bg-active');
          gameContainer.classList.remove('card-style-classic');
        }

        playerRoadSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'road-slot player-road-slot game-cursor-hover flex flex-col player-road-slot-glass';
        });

        opponentRoadSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'road-slot opponent-road-slot flex flex-col-reverse opponent-road-slot-glass';
        });

        resultSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center result-slot-glass';
        });

        const scoreBarContainers = document.querySelectorAll('.score-bar-container');
        scoreBarContainers.forEach(container => {
          container.style.background = '';
          container.style.border = '';
          container.style.borderRadius = '';
          container.style.backgroundClip = '';
          container.style.borderImage = '';
        });

        const playerNeutralSlots = document.querySelectorAll('.player-neutral-slot');
        playerNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'player-neutral-slot flex-1 h-full flex flex-col items-center justify-start p-1 relative player-neutral-slot-glass';
        });

        const opponentNeutralSlots = document.querySelectorAll('.opponent-neutral-slot');
        opponentNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'opponent-neutral-slot flex-1 h-full flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-glass';
        });

        const playerDeck = document.getElementById('player-deck');
        if (playerDeck) {
          playerDeck.classList.remove('glass-deck-blue', 'metal-deck-blue', 'deck-container');
          playerDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            playerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center glass-deck-blue game-cursor-hover card-hover';
            playerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
            playerDeck.style.border = '4px solid rgba(255,255,255,0.95)';
            playerDeck.style.borderRadius = '12px';
            playerDeck.style.boxShadow = '0 0 2px rgba(200,220,255,0.9), 0 0 6px rgba(180,200,240,0.6), 0 0 50px rgba(120,200,255,0.6), inset 0 4px 10px rgba(0,40,100,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(0,40,100,0.6), inset -3px 0 8px rgba(0,40,100,0.6)';
            playerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.player.deckCount = document.getElementById('player-deck-count');
          }
        }

        const opponentDeck = document.getElementById('opponent-deck');
        if (opponentDeck) {
          opponentDeck.classList.remove('glass-deck-red', 'metal-deck-red', 'deck-container');
          opponentDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            opponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center glass-deck-red game-cursor-hover no-hover-anim';
            opponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
            opponentDeck.style.border = '4px solid rgba(255,240,240,0.95)';
            opponentDeck.style.borderRadius = '12px';
            opponentDeck.style.boxShadow = '0 0 2px rgba(255,200,200,0.9), 0 0 6px rgba(255,160,160,0.6), 0 0 50px rgba(255,150,150,0.6), inset 0 4px 10px rgba(140,20,20,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(140,20,20,0.6), inset -3px 0 8px rgba(140,20,20,0.6)';
            opponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
          }
        }
        
        playerHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-hand-slot w-16 h-24 rounded game-cursor-hover card-hover flex items-center justify-center glass-hand-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
        playerDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-dark-slot w-16 h-24 rounded flex items-center justify-center game-cursor-hover dark-card-hover glass-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
        playerRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-revealed-slot w-16 h-24 rounded flex items-center justify-center game-cursor-hover card-hover glass-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
        
        opponentHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-hand-slot w-16 h-24 rounded opponent-glass-hand-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
        opponentDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-dark-slot w-16 h-24 rounded flex items-center justify-center opponent-glass-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
        opponentRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-revealed-slot w-16 h-24 rounded flex items-center justify-center opponent-glass-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
          }
        });
      } else {
        if (gameContainer) {
          gameContainer.style.background = '';
          gameContainer.style.backgroundSize = '';
          gameContainer.style.boxShadow = '';
          gameContainer.classList.remove('metal-bg-active');
          gameContainer.classList.add('card-style-classic');
        }

        playerRoadSlots.forEach(slot => {
          slot.classList.remove('player-road-slot-glass', 'player-road-slot-metal');
          slot.removeAttribute('style');
          slot.classList.add('player-road-slot-classic');
        });

        opponentRoadSlots.forEach(slot => {
          slot.classList.remove('opponent-road-slot-glass', 'opponent-road-slot-metal');
          slot.removeAttribute('style');
          slot.classList.add('opponent-road-slot-classic');
        });

        resultSlots.forEach(slot => {
          slot.removeAttribute('style');
          // ★ 2026-9-30：切回经典=水晶灯管熄灭态（g3-e），随后 updateResults 重渲染
          slot.className = 'result-slot rs-g3 rs-e w-[4.6rem] h-8 flex items-center justify-center';
          slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div></div>';
          // ★ 2026-10-1 修复：清除防闪烁键。熄灭态自带 rs-g3 类+rs-face 子元素，若 rsKey
          //   残留，updateResults 的防闪烁检查（sk===rsKey && rs-g3 && firstElementChild）
          //   会误判"状态未变"而 continue 跳过 → 拼点状态永不恢复。
          //   （金属/玻璃没事：重置类名不含 rs-g3，防闪烁检查必然不成立）
          delete slot.dataset.rsKey;
        });
        // ★ 2026-10-1 修复：打开设置也会走此分支（toggleSettings→initCardFaceOptions→
        //   updateRoadAndCompareStyle），上面的熄灭态重置会清掉拼点状态，而经典分支
        //   此后无人调用 updateResults → 拼点状态消失。立即按当前局面重渲染恢复。
        if (typeof updateResults === 'function' && typeof GameState !== 'undefined' && GameState) {
          updateResults();
        }

        const scoreBarContainers = document.querySelectorAll('.score-bar-container');
        scoreBarContainers.forEach(container => {
          container.style.background = '';
          container.style.border = '';
          container.style.borderRadius = '';
          container.style.backgroundClip = '';
          container.style.borderImage = '';
        });
        
        if (opponentFunctionArea) {
          opponentFunctionArea.style.background = '';
          opponentFunctionArea.style.backdropFilter = '';
          opponentFunctionArea.style.webkitBackdropFilter = '';
        }
        
        if (playerFunctionArea) {
          playerFunctionArea.style.background = '';
          playerFunctionArea.style.backdropFilter = '';
          playerFunctionArea.style.webkitBackdropFilter = '';
        }
        
        playerHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = selectedCardFaceStyle === 'cartoon'
            ? 'player-hand-slot w-16 h-24 game-cursor-hover card-hover flex items-center justify-center stone-hand-slot'
            : 'player-hand-slot w-16 h-24 bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            if (selectedCardFaceStyle !== 'cartoon') {
              slot.style.border = 'none';
              slot.style.background = 'transparent';
            }
          }
        });
        playerDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'player-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot';
        } else {
          slot.className = 'player-dark-slot w-16 h-24 border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
            slot.style.background = 'transparent';
          }
        }
      });
        playerRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'player-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
            slot.style.background = 'transparent';
          }
        });
        
        opponentHandSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = selectedCardFaceStyle === 'cartoon'
            ? 'opponent-hand-slot w-16 h-24 stone-hand-slot'
            : 'opponent-hand-slot w-16 h-24 bg-secondary rounded card-shadow';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            if (selectedCardFaceStyle !== 'cartoon') {
              slot.style.border = 'none';
              slot.style.background = 'transparent';
            }
          }
        });
        opponentDarkSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'opponent-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot';
        } else {
          slot.className = 'opponent-dark-slot w-16 h-24 border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
            slot.style.background = 'transparent';
          }
        }
      });
        opponentRevealedSlots.forEach(slot => {
          const hasCard = slot.classList.contains('slot-has-card');
          slot.removeAttribute('style');
          slot.className = 'opponent-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot';
          if (hasCard) {
            slot.classList.add('slot-has-card');
            slot.style.border = 'none';
            slot.style.background = 'transparent';
          }
        });

        const playerNeutralSlots = document.querySelectorAll('.player-neutral-slot');
        playerNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic';
        });

        const opponentNeutralSlots = document.querySelectorAll('.opponent-neutral-slot');
        opponentNeutralSlots.forEach(slot => {
          slot.removeAttribute('style');
          slot.className = 'opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic';
        });

        const playerDeck = document.getElementById('player-deck');
        if (playerDeck) {
          playerDeck.classList.remove('glass-deck-blue', 'metal-deck-blue', 'deck-container');
          playerDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            playerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center game-cursor-hover card-hover classic-deck-init';
            playerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.player.deckCount = document.getElementById('player-deck-count');
          }
        }

        const opponentDeck = document.getElementById('opponent-deck');
        if (opponentDeck) {
          opponentDeck.classList.remove('glass-deck-red', 'metal-deck-red', 'deck-container');
          opponentDeck.removeAttribute('style');
          if (GameState && GameState.gamePhase === 'playing') {
            if (typeof renderDeckCardBacks === 'function') {
              renderDeckCardBacks();
            }
          } else {
            opponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center game-cursor-hover no-hover-anim classic-deck-init';
            opponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
            GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
          }
        }
      }

      if (typeof updateResults === 'function') {
        updateResults();
      }

      applyGameScale();
      if (typeof refreshCardFaceBgBtn === 'function') {
        refreshCardFaceBgBtn();
      }
      if (typeof applyCardFaceBg === 'function') {
        applyCardFaceBg();
      }
    }

    let gameScaleHandler = null;
    let currentGameScale = 1;

    function applyGameScale() {
      if (gameScaleHandler) {
        window.removeEventListener('resize', gameScaleHandler);
      }

      const updateScale = () => {
        // ★ 确保三个房间 overlay + 语言弹窗 在 body 直接子级（防止被 game-container-wrapper 的 visibility:hidden/pointer-events:none 影响）
        ['custom-room-overlay', 'room-list-overlay', 'room-interior-overlay', 'language-overlay', 'confirm-overlay', 'pwd-overlay'].forEach(function(id) {
          const ov = document.getElementById(id);
          if (ov && ov.parentElement !== document.body) {
            document.body.appendChild(ov);
          }
        });

        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const referenceHeight = 1080;

        let scale = windowHeight / referenceHeight;
        scale = Math.max(0.3, Math.min(2, scale));
        currentGameScale = scale;
        // ★ 暴露给 online-client.js 等子系统使用
        window.__pbGameScale = scale;

        // 缩放游戏容器
        const gameContainer = document.querySelector('.game-container');
        const offsetX = (windowWidth - 1920 * scale) / 2;
        const offsetY = (windowHeight - 1080 * scale) / 2;
        if (gameContainer) {
          gameContainer.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
        }

        // ★ 三个房间 overlay + 语言弹窗（在 body 直接子级）加相同的 transform scale
        // 这样 overlay 里的面板就和游戏界面等比了
        ['custom-room-overlay', 'room-list-overlay', 'room-interior-overlay', 'language-overlay', 'confirm-overlay', 'pwd-overlay'].forEach(function(id) {
          const ov = document.getElementById(id);
          if (ov) {
            ov.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
          }
        });

        // 主菜单内容等比缩放（按钮、文字等）
        const mainMenuContent = document.querySelector('.main-menu-content');
        if (mainMenuContent) {
          mainMenuContent.style.zoom = scale;
          // ★ 2026-9-30 手机全屏 FIX：zoom 会连 vh 一起缩放（CSS 的 padding-top:16vh 实际渲染
          //   只有 16vh×zoom），导致手机上菜单整体上移——副标题撞上背景图英文标题、按钮组偏上。
          //   改为直填"视觉 px"：目标=16% 视口高，CSS 值 = 0.16H/scale（zoom 渲染后恰为 0.16H）。
          mainMenuContent.style.paddingTop = (0.16 * windowHeight / scale) + 'px';
        }

        // 主菜单背景图等比缩放
        const mainMenu = document.getElementById('main-menu');
        if (mainMenu) {
          mainMenu.style.backgroundSize = (1920 * scale) + 'px ' + (1080 * scale) + 'px';
        }

        // 背景图缩放后居中的左上角坐标
        const bgOffsetX = (windowWidth - 1920 * scale) / 2;
        const bgOffsetY = (windowHeight - 1080 * scale) / 2;

        // 玩家头像 / 组队图标 —— 每个元素独立 absolute + 独立 zoom
        // 先临时去掉 zoom 读取真实逻辑宽度（因为 zoom 不改变 offsetWidth 但会干扰计算）
        const playerProfile = document.getElementById('player-profile');
        const teamIconContainer = document.getElementById('team-icon-container');
        let playerLogicalWidth = 158; // 兜底值
        let teamIconLogicalWidth = 35;

        // Step 1: 临时清 zoom，读设计稿宽度
        if (playerProfile) { playerProfile.style.zoom = ''; playerLogicalWidth = playerProfile.offsetWidth || 158; }
        if (teamIconContainer) { teamIconContainer.style.zoom = ''; teamIconLogicalWidth = teamIconContainer.offsetWidth || 35; }

        // Step 2: 设 player-profile 位置 + zoom
        if (playerProfile) {
          playerProfile.style.left = (bgOffsetX / scale + 20) + 'px';
          playerProfile.style.top = (bgOffsetY / scale + 20) + 'px';
          playerProfile.style.zoom = scale;
        }
        // Step 3: 设 team-icon-container，left 紧跟 player-profile 右边缘 + gap
        // 组队后 teammate-profile 展开会让 team-icon-container 变宽，所以必须用动态宽度
        const teamIconGap = 16; // 设计稿上的间距（16px ≈ 缩放后 8px 屏幕像素）
        if (teamIconContainer) {
          const baseLeft = 20 + playerLogicalWidth + teamIconGap;
          teamIconContainer.style.left = (bgOffsetX / scale + baseLeft) + 'px';
          teamIconContainer.style.top = (bgOffsetY / scale + 32) + 'px';
          teamIconContainer.style.zoom = scale;
        }
        // Step 4: 组队邀请面板，紧跟 team-icon-container
        const teamInvitePanel = document.getElementById('team-invite-panel');
        if (teamInvitePanel) {
          teamInvitePanel.style.left = (bgOffsetX / scale + 20 + playerLogicalWidth + teamIconGap + teamIconLogicalWidth + teamIconGap) + 'px';
          teamInvitePanel.style.top = (bgOffsetY / scale + 32) + 'px';
          teamInvitePanel.style.zoom = scale;
        }
        // 好友列表面板 - 好友按钮下方展开
        const friendPanel = document.getElementById('friend-panel');
        if (friendPanel) {
          friendPanel.style.left = (bgOffsetX / scale + 20) + 'px';
          friendPanel.style.top = (bgOffsetY / scale + 128) + 'px';
          friendPanel.style.zoom = scale;
        }
        // 好友按钮 - 头像下方
        const friendBtn = document.getElementById('friend-btn');
        if (friendBtn) {
          friendBtn.style.left = (bgOffsetX / scale + 20) + 'px';
          friendBtn.style.top = (bgOffsetY / scale + 92) + 'px';
          friendBtn.style.zoom = scale;
        }
        // Toast 通知容器 - 好友按钮下方
        const toastContainer = document.getElementById('online-toast-container');
        if (toastContainer) {
          toastContainer.style.left = (bgOffsetX / scale + 20) + 'px';
          toastContainer.style.top = (bgOffsetY / scale + 128) + 'px';
          toastContainer.style.zoom = scale;
        }
        // 服务器负载图标 - 右上角
        const serverStatsContainer = document.getElementById('server-stats-container');
        let serverStatsLogicalWidth = 90; // 兜底值
        if (serverStatsContainer) {
          // ★ 定位 ✉️ 用【图标自身宽度】：容器会被展开的状态面板撑宽，不能用容器宽
          const ssIconForW = document.getElementById('server-stats-icon');
          if (ssIconForW) serverStatsLogicalWidth = ssIconForW.offsetWidth || 90;
          serverStatsContainer.style.right = (bgOffsetX / scale + 20) + 'px';
          serverStatsContainer.style.top = (bgOffsetY / scale + 20) + 'px';
          serverStatsContainer.style.zoom = scale;
        }
        // 开发者消息 ✉️ - 排行榜图标左侧（随缩放记忆系统定位 · 2026-9-14）
        const devMailContainer = document.getElementById('dev-mail-container');
        if (devMailContainer) {
          const devMailGap = 16; // 与左侧邻居图标的间距（设计稿像素）
          const lbEntryForDm = document.getElementById('lb-entry');
          const lbEntryW = lbEntryForDm ? (lbEntryForDm.offsetWidth || 0) : 0; // 排行榜入口宽度（游客隐藏时为0，不占位）
          devMailContainer.style.right = (bgOffsetX / scale + 20 + serverStatsLogicalWidth + devMailGap + lbEntryW + devMailGap) + 'px';
          devMailContainer.style.top = (bgOffsetY / scale + 20) + 'px';
          devMailContainer.style.zoom = scale;
          // ★ 图标高度与 server-stats-icon 对齐（保持视觉一致）
          const devMailIcon = document.getElementById('dev-mail-icon');
          if (devMailIcon && serverStatsContainer) {
            const ssIcon = document.getElementById('server-stats-icon');
            if (ssIcon) {
              const h = ssIcon.offsetHeight || 32;
              devMailIcon.style.height = h + 'px';
              devMailIcon.style.width = h + 'px';
            }
          }
          // ★ server-stats 图标宽度随在线人数变化（'--' → '● 2 在线'），
          //   ResizeObserver 监听尺寸变化实时重定位 ✉️，保持间距（幂等创建）。
          //   ★ 回调读【图标宽度】而非容器宽度：容器会被展开的面板撑宽，不能用于定位
          if (serverStatsContainer && typeof ResizeObserver !== 'undefined' && !window._devMailRO) {
            window._devMailRO = new ResizeObserver(function () {
              var dm = document.getElementById('dev-mail-container');
              var ss = document.getElementById('server-stats-container');
              var ssIcon2 = document.getElementById('server-stats-icon');
              var dmIcon = document.getElementById('dev-mail-icon');
              if (!dm || !ss || !ssIcon2) return;
              var sc = parseFloat(ss.style.zoom) || 1;
              var w = ssIcon2.offsetWidth || 90;
              if (window._devMailLastSSW === w) return; // 宽度没变不重算（面板展开撑宽容器时不误触发）
              window._devMailLastSSW = w;
              var bgx = (window.innerWidth - 1920 * sc) / 2;
              var lbe = document.getElementById('lb-entry');
              var lbw = lbe ? (lbe.offsetWidth || 0) : 0; // 排行榜入口宽度（游客隐藏时为0，不占位）
              // ★ 排行榜跟随服务器状态宽度重定位（否则 `--`→`● 2 在线` 变宽后排行榜位置过期）
              if (lbe) {
                lbe.style.right = (bgx / sc + 20 + w + 16) + 'px';
                var lbp = document.getElementById('lb-panel');
                if (lbp) lbp.style.right = lbe.style.right; // 面板与入口右对齐（top 不依赖宽度，无需重算）
              }
              dm.style.right = (bgx / sc + 20 + w + 16 + lbw + 16) + 'px';
              if (dmIcon) {
                var h2 = ssIcon2.offsetHeight || 32;
                dmIcon.style.height = h2 + 'px';
                dmIcon.style.width = h2 + 'px';
              }
            });
            window._devMailRO.observe(serverStatsContainer);
          }
        }
        // AI 玩家开关位于 server-stats-container 内部，随容器一同缩放，无需单独定位
        // ★ 排行榜入口（服务器状态左侧同行）+ 展开面板（2026-9-14）：随缩放记忆系统定位
        const lbEntry = document.getElementById('lb-entry');
        if (lbEntry && serverStatsContainer) {
          const ssIconForLb = document.getElementById('server-stats-icon');
          const ssIconH = (ssIconForLb && ssIconForLb.offsetHeight) || 32;
          lbEntry.style.height = ssIconH + 'px'; // ★ 高度与 server-stats-icon 对齐（同行视觉统一）
          const lbGap = 16; // 与服务器状态图标的间距（设计稿像素）
          lbEntry.style.right = (bgOffsetX / scale + 20 + serverStatsLogicalWidth + lbGap) + 'px';
          lbEntry.style.top = (bgOffsetY / scale + 20) + 'px';
          lbEntry.style.zoom = scale;
          const lbPanel = document.getElementById('lb-panel');
          if (lbPanel) {
            lbPanel.style.right = (bgOffsetX / scale + 20 + serverStatsLogicalWidth + lbGap) + 'px';
            lbPanel.style.top = (bgOffsetY / scale + 20 + (lbEntry.offsetHeight || 32) + 8) + 'px';
            lbPanel.style.zoom = scale;
          }
        }
        // BGM 音量控制器 - 主页左下角（上方，紧贴显示模式按钮 2026-9-15）
        const bgmVolumeControl = document.getElementById('bgm-volume-control');
        if (bgmVolumeControl) {
          bgmVolumeControl.style.left = (bgOffsetX / scale + 20) + 'px';
          // 底部 20+44+8：按钮正方形化后高 44px，与显示模式按钮之间留 8px 间隔（2026-9-16）
          bgmVolumeControl.style.bottom = ((windowHeight - (bgOffsetY + 1080 * scale)) / scale + 20 + 44 + 8) + 'px';
          bgmVolumeControl.style.zoom = scale;
        }
        // 显示模式按钮 - 主页左下角最底（网页/Electron 均显示，2026-9-15）
        // 注意：不能因 display:none 跳过定位——首次 updateScale() 在 IIFE 显示按钮之前执行，
        // 若跳过则按钮停留在 1080 设计坐标（视口外不可见，网页版实测 y≈1022）
        const winmodeWrap = document.getElementById('winmode-wrap');
        if (winmodeWrap) {
          winmodeWrap.style.left = (bgOffsetX / scale + 20) + 'px';
          winmodeWrap.style.bottom = ((windowHeight - (bgOffsetY + 1080 * scale)) / scale + 20) + 'px';
          winmodeWrap.style.zoom = scale;
        }
        // 图鉴入口 - 主页右下角
        const codexBtn = document.getElementById('codex-btn');
        if (codexBtn) {
          codexBtn.style.right = (bgOffsetX / scale + 20) + 'px';
          codexBtn.style.bottom = ((windowHeight - (bgOffsetY + 1080 * scale)) / scale + 20) + 'px';
          codexBtn.style.zoom = scale;
        }
        // ICP 备案号 - 主页底部居中（2026-9-30；设计坐标 1920 宽居中，随窗口等比缩放）
        const icpFooter = document.getElementById('icp-footer');
        if (icpFooter) {
          icpFooter.style.display = 'block';
          icpFooter.style.left = (bgOffsetX / scale) + 'px';
          icpFooter.style.bottom = ((windowHeight - (bgOffsetY + 1080 * scale)) / scale) + 'px';
          icpFooter.style.zoom = scale;
        }
        // 快捷键浮层 - 左下角展开（fixed 定位，zoom 跟随窗口缩放）
        const hotkeyPanel = document.getElementById('hotkey-panel');
        if (hotkeyPanel) {
          hotkeyPanel.style.left = (bgOffsetX / scale + 20) + 'px';
          hotkeyPanel.style.bottom = ((windowHeight - (bgOffsetY + 1080 * scale)) / scale + 20) + 'px';
          hotkeyPanel.style.zoom = scale;
        }
        // ★ 2026-9-20 手机适配：账号/资料类弹窗（profile-modal 系 7 个）纳入缩放体系，
        //   否则手机横屏下弹窗保持桌面固定 400px 尺寸，巨大且超出屏幕
        document.querySelectorAll('.profile-modal-content').forEach(function (el) {
          el.style.zoom = scale;
        });
        // ★ 2026-9-30 手机适配：游戏结束个人资料面板（挂 body 的动态弹窗）纳入缩放体系
        document.querySelectorAll('.game-end-content-standalone, .game-end-modal .ge-outside-hint').forEach(function (el) {
          el.style.zoom = scale;
        });
        // ★ 房间面板不再需要单独 zoom — 父级 overlay 已有 transform:scale，双重缩放会导致小窗口时比例错乱
        // 旧代码 L15350-15364 已删除

        // ★ 通知 online-client.js 等子系统：缩放变了，刷新位置
        try { window.dispatchEvent(new CustomEvent('pb-scale-changed', { detail: { scale } })); } catch(e) {}
      };

      gameScaleHandler = updateScale;
      window.addEventListener('resize', updateScale);
      updateScale();
    }

    function resetGameScale() {
      if (gameScaleHandler) {
        window.removeEventListener('resize', gameScaleHandler);
        gameScaleHandler = null;
      }

      const gameContainer = document.querySelector('.game-container');
      
      if (gameContainer) {
        gameContainer.style.transform = '';
      }
      currentGameScale = 1;

      // 重置主菜单内容缩放
      const mainMenuContent = document.querySelector('.main-menu-content');
      if (mainMenuContent) {
        mainMenuContent.style.zoom = '';
        mainMenuContent.style.paddingTop = '';  // ★ 同步清掉 JS 直填的避让 padding（恢复 CSS 的 16vh）
      }
      // 重置主菜单背景图缩放
      const mainMenu = document.getElementById('main-menu');
      if (mainMenu) {
        mainMenu.style.backgroundSize = '';
      }
      // 重置玩家头像信息区缩放
      const playerProfile = document.getElementById('player-profile');
      if (playerProfile) {
        playerProfile.style.zoom = '';
        playerProfile.style.left = '';
        playerProfile.style.top = '';
      }
      // 重置组队图标缩放
      const teamIconContainer = document.getElementById('team-icon-container');
      if (teamIconContainer) {
        teamIconContainer.style.zoom = '';
        teamIconContainer.style.left = '';
        teamIconContainer.style.top = '';
      }
      // 重置组队邀请面板缩放
      const teamInvitePanelScale = document.getElementById('team-invite-panel');
      if (teamInvitePanelScale) {
        teamInvitePanelScale.style.zoom = '';
        teamInvitePanelScale.style.left = '';
        teamInvitePanelScale.style.top = '';
      }
      // 重置好友列表面板缩放
      const friendPanelScale = document.getElementById('friend-panel');
      if (friendPanelScale) {
        friendPanelScale.style.zoom = '';
        friendPanelScale.style.left = '';
        friendPanelScale.style.top = '';
      }
      // 重置好友按钮缩放
      const friendBtn = document.getElementById('friend-btn');
      if (friendBtn) {
        friendBtn.style.zoom = '';
        friendBtn.style.left = '';
        friendBtn.style.top = '';
      }
      // 重置服务器负载图标缩放
      const serverStatsContainer = document.getElementById('server-stats-container');
      if (serverStatsContainer) {
        serverStatsContainer.style.zoom = '';
        serverStatsContainer.style.right = '';
        serverStatsContainer.style.top = '';
      }
      // 重置自定义房间面板缩放
      const customRoomPanel = document.querySelector('.custom-room-panel');
      if (customRoomPanel) {
        customRoomPanel.style.zoom = '';
      }
      // 重置房间列表面板缩放
      const roomListPanel = document.querySelector('.room-list-panel');
      if (roomListPanel) {
        roomListPanel.style.zoom = '';
      }
      // 重置房间内部界面缩放
      const roomInteriorPanel = document.querySelector('.room-interior-panel');
      if (roomInteriorPanel) {
        roomInteriorPanel.style.zoom = '';
      }
    }

    function getGameScale() {
      return currentGameScale;
    }

    function getScaledRect(element) {
      const rect = element.getBoundingClientRect();
      return {
        left: rect.left,
        top: rect.top,
        width: rect.width,
        height: rect.height,
        right: rect.right,
        bottom: rect.bottom
      };
    }

    // 教程坐标系辅助函数：将屏幕坐标转为 1920x1080 设计坐标系
    function tutRect(element) {
      const rect = element.getBoundingClientRect();
      const s = currentGameScale || 1;
      const gc = document.querySelector('.game-container');
      if (!gc) return rect;
      const gcRect = gc.getBoundingClientRect();
      const ox = gcRect.left, oy = gcRect.top;
      return {
        left:   (rect.left - ox) / s,
        top:    (rect.top - oy) / s,
        width:  rect.width / s,
        height: rect.height / s,
        right:  (rect.right - ox) / s,
        bottom: (rect.bottom - oy) / s
      };
    }

    // ----------------------------------------------------------------------------
    // 【卡牌渲染函数】
    // ----------------------------------------------------------------------------
    // 移植来源: 牌兵布阵（规则）.html 的立体化卡面效果
    //   getCardBackHTML:       获取卡背SVG内容(纯SVG)
    //   getCardBackElementHTML:获取卡背完整HTML(包含外层div)
    //   getCardFaceHTML:       获取卡面HTML(纯CSS样式，支持大小两种尺寸)
    //   getShieldBorderHTML:   获取皇家卡牌(J/Q/K)的护盾边框SVG
    //                          K: 圆形底部 | Q: 梯形底部 | J: 尖形底部
    function getCardBackHTML(isPlayer) {
      const config = isPlayer ? CardBackConfig.player : CardBackConfig.opponent;
      return config.innerHTML;
    }

    // ★ 卡通风格卡背（2026-10-04）：移植自 画风预览-果冻卡通风.html
    //   紫色渐变底 + 四角/上下白点 + 白星 + 白色虚线内框，双方同款；
    //   类名 ct-back = 卡通悬停倾斜/落地动画（我方暗牌+牌堆）、对方区脉冲动画的作用域标记；
    //   innerExtra 用于牌堆数字标签（绝对定位盖在星上，与经典牌堆数字层级一致）
    function buildCartoonCardBackHTML(isSmall, innerExtra = '') {
      const border = isSmall ? '2.5px' : '3px';
      const radius = isSmall ? '12px' : '14px';
      const starSize = isSmall ? '20px' : '36px';
      const starShadow = isSmall ? '0 2px 0 rgba(67,49,94,.45)' : '0 3px 0 rgba(67,49,94,.45)';
      const dashIn = isSmall ? '3px' : '4px';
      const dashRadius = isSmall ? '6px' : '7px';
      const dashWidth = isSmall ? '1.5px' : '2px';
      const dotA = isSmall ? '2.5px' : '3.5px';
      const dotB = isSmall ? '1.5px' : '2px';
      const backShadow = isSmall
        ? 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)'
        : 'inset 0 4px 0 rgba(255,255,255,.65), inset 0 -8px 0 rgba(67,49,94,.08), 0 7px 0 rgba(67,49,94,.28)';
      return `
        <div class="card ${isSmall ? 'card-small ' : ''}game-cursor-hover ct-back" style="width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle ${dotA} at 20% 18%, rgba(255,255,255,.5) 0 45%, transparent 50%),radial-gradient(circle ${dotA} at 80% 18%, rgba(255,255,255,.5) 0 45%, transparent 50%),radial-gradient(circle ${dotA} at 20% 82%, rgba(255,255,255,.5) 0 45%, transparent 50%),radial-gradient(circle ${dotA} at 80% 82%, rgba(255,255,255,.5) 0 45%, transparent 50%),radial-gradient(circle ${dotB} at 50% 14%, rgba(255,255,255,.4) 0 45%, transparent 50%),radial-gradient(circle ${dotB} at 50% 86%, rgba(255,255,255,.4) 0 45%, transparent 50%),linear-gradient(180deg, #b07ae8 0%, #9a5ade 55%, #7e46c9 100%);border:${border} solid #433160;border-radius:${radius};box-shadow:${backShadow};">
          <span style="position:relative;z-index:2;font-size:${starSize};color:#fff;line-height:1;text-shadow:${starShadow};pointer-events:none;">★</span>
          <span style="position:absolute;inset:${dashIn};border-radius:${dashRadius};border:${dashWidth} dashed rgba(255,255,255,.55);pointer-events:none;z-index:1;"></span>${innerExtra}
        </div>
      `;
    }

    // ============================================================================
    // ★ 卡通风格牌堆 = 城堡门楼（2026-10-14 实装：优化预览「牌堆卡槽-城堡门楼风格
    //   预览-空槽冒烟飞牌版」定稿方案）。SVG 门楼实体注入（红门双扇/数量木牌/门洞
    //   卡背堆/悬停屋顶冒烟），空槽关门悬停开门、有牌门常开。
    //   - suffix 'p'/'o'：player/opponent 双牌堆 defs id 加后缀，避免 url(#) 冲突
    //   - count：数字（null=空槽关门版，不渲染木牌/卡背堆/冒烟容器）
    //   - CSS 全部在 .card-style-cartoon 作用域（见卡通 CSS 区 pb-gate-* 规则）
    // ============================================================================
    function buildCartoonGateDeckHTML(suffix, count) {
      const D = '_' + suffix;
      const has = count !== null && count !== undefined;
      const gateSvg = `<svg class="pb-gate-svg" viewBox="0 0 200 300" aria-hidden="true"><defs>
        <linearGradient id="doorV${D}" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#b33a31"/><stop offset="1" stop-color="#96261e"/>
        </linearGradient>
        <radialGradient id="studGold${D}" cx="40%" cy="35%" r="70%">
          <stop offset="0" stop-color="#fbe89a"/><stop offset=".6" stop-color="#d9a93c"/><stop offset="1" stop-color="#a8761f"/>
        </radialGradient>
        <radialGradient id="farGlow${D}" cx="50%" cy="42%" r="75%">
          <stop offset="0" stop-color="#fbf3d8"/><stop offset=".55" stop-color="#efe2bc"/><stop offset="1" stop-color="#e2d2a8"/>
        </radialGradient>
        <clipPath id="clipDoorL${D}"><path d="M60 250 L60 200 A40 40 0 0 1 100 160 L100 250 Z"/></clipPath>
        <clipPath id="clipDoorR${D}"><path d="M100 160 A40 40 0 0 1 140 200 L140 250 L100 250 Z"/></clipPath>
      </defs>
      <g stroke-linejoin="round" stroke-linecap="round">
        <path d="M36 140 H164 L170 240 H30 Z" fill="#f2ddaf" stroke="#3a2010" stroke-width="2.5"/>
        <path d="M26 118 V70 H48 V88 H59 V70 H81 V88 H92 V62 H114 V88 H125 V70 H147 V88 H158 V70 H180 V118 Z" fill="#f2ddaf" stroke="#3a2010" stroke-width="3"/>
        <g>
          <rect x="48" y="72" width="2" height="16" fill="#e3cc97"/><rect x="57" y="72" width="2" height="16" fill="#c9aa6c"/><rect x="48" y="85.5" width="11" height="3" fill="#d8bb82"/>
          <rect x="81" y="72" width="2" height="16" fill="#e3cc97"/><rect x="90" y="64" width="2" height="24" fill="#c9aa6c"/><rect x="81" y="85.5" width="11" height="3" fill="#d8bb82"/>
          <rect x="114" y="64" width="2" height="24" fill="#e3cc97"/><rect x="123" y="72" width="2" height="16" fill="#c9aa6c"/><rect x="114" y="85.5" width="11" height="3" fill="#d8bb82"/>
          <rect x="147" y="72" width="2" height="16" fill="#e3cc97"/><rect x="156" y="72" width="2" height="16" fill="#c9aa6c"/><rect x="147" y="85.5" width="11" height="3" fill="#d8bb82"/>
        </g>
        <path d="M36 140 H164 L165.6 146 H34.4 Z" fill="#2a1608" opacity=".12"/>
        <path d="M60 250 V200 A40 40 0 0 1 140 200 V250 Z" fill="#221208"/>
        <path d="M67 200 A33 33 0 0 1 133 200" fill="none" stroke="#3d2612" stroke-width="2.6"/>
        <path d="M73 200 A27 27 0 0 1 127 200" fill="none" stroke="#3d2612" stroke-width="2.6"/>
        <path d="M60 200 L80 214 V250 H60 Z" fill="#5c6065"/>
        <path d="M140 200 L120 214 V250 H140 Z" fill="#42464b"/>
        <path d="M60 224 L80 228 M60 236 L80 239" stroke="#484c50" stroke-width="1.6"/>
        <path d="M140 224 L120 228 M140 236 L120 239" stroke="#35393e" stroke-width="1.6"/>
        <path d="M63 206 L79 217" stroke="#767b80" stroke-width="1.4"/>
        <path d="M80 250 V214 A20 20 0 0 1 120 214 V250 Z" fill="url(#farGlow${D})"/>
        <path d="M80 250 V214 A20 20 0 0 1 120 214 V250" fill="none" stroke="#858d90" stroke-width="3.4"/>
        <path d="M83 216 A17 17 0 0 1 117 216" fill="none" stroke="#c6ccc4" stroke-width="2"/>
        <g clip-path="url(#clipDoorL${D})"><g class="pb-door-l">
          <rect x="60" y="160" width="40" height="90" fill="url(#doorV${D})"/>
          <path d="M70 174 V250 M80 174 V250 M90 174 V250" stroke="#7e1f18" stroke-width="1.4"/>
          <rect x="60" y="210.5" width="40" height="4.2" fill="#721d16"/>
          <rect x="60" y="210.8" width="40" height="1.3" fill="#9c3328"/>
          <rect x="60" y="213.2" width="40" height="1.5" fill="#48110c"/>
          <rect x="60" y="237.5" width="40" height="4.2" fill="#721d16"/>
          <rect x="60" y="237.8" width="40" height="1.3" fill="#9c3328"/>
          <rect x="60" y="240.2" width="40" height="1.5" fill="#48110c"/>
          <g fill="url(#studGold${D})" stroke="#7d5c17" stroke-width=".8">
            <circle cx="67" cy="184" r="1.7"/><circle cx="77" cy="184" r="1.7"/><circle cx="87" cy="184" r="1.7"/><circle cx="95" cy="184" r="1.7"/>
            <circle cx="67" cy="196" r="1.7"/><circle cx="77" cy="196" r="1.7"/><circle cx="87" cy="196" r="1.7"/><circle cx="95" cy="196" r="1.7"/>
            <circle cx="67" cy="207" r="1.7"/><circle cx="77" cy="207" r="1.7"/><circle cx="87" cy="207" r="1.7"/><circle cx="95" cy="207" r="1.7"/>
            <circle cx="67" cy="226" r="1.7"/><circle cx="77" cy="226" r="1.7"/><circle cx="87" cy="226" r="1.7"/><circle cx="95" cy="226" r="1.7"/>
          </g>
          <circle cx="94" cy="225" r="3.4" fill="url(#studGold${D})" stroke="#7d5c17" stroke-width="1"/>
          <circle cx="94" cy="225" r="1.5" fill="#f3d272"/>
          <rect x="98.4" y="162" width="1.6" height="88" fill="#4a0f0a"/>
        </g></g>
        <g clip-path="url(#clipDoorR${D})"><g class="pb-door-r">
          <rect x="100" y="160" width="40" height="90" fill="url(#doorV${D})"/>
          <path d="M110 174 V250 M120 174 V250 M130 174 V250" stroke="#7e1f18" stroke-width="1.4"/>
          <rect x="100" y="210.5" width="40" height="4.2" fill="#721d16"/>
          <rect x="100" y="210.8" width="40" height="1.3" fill="#9c3328"/>
          <rect x="100" y="213.2" width="40" height="1.5" fill="#48110c"/>
          <rect x="100" y="237.5" width="40" height="4.2" fill="#721d16"/>
          <rect x="100" y="237.8" width="40" height="1.3" fill="#9c3328"/>
          <rect x="100" y="240.2" width="40" height="1.5" fill="#48110c"/>
          <g fill="url(#studGold${D})" stroke="#7d5c17" stroke-width=".8">
            <circle cx="133" cy="184" r="1.7"/><circle cx="123" cy="184" r="1.7"/><circle cx="113" cy="184" r="1.7"/><circle cx="105" cy="184" r="1.7"/>
            <circle cx="133" cy="196" r="1.7"/><circle cx="123" cy="196" r="1.7"/><circle cx="113" cy="196" r="1.7"/><circle cx="105" cy="196" r="1.7"/>
            <circle cx="133" cy="207" r="1.7"/><circle cx="123" cy="207" r="1.7"/><circle cx="113" cy="207" r="1.7"/><circle cx="105" cy="207" r="1.7"/>
            <circle cx="133" cy="226" r="1.7"/><circle cx="123" cy="226" r="1.7"/><circle cx="113" cy="226" r="1.7"/><circle cx="105" cy="226" r="1.7"/>
          </g>
          <circle cx="106" cy="225" r="3.4" fill="url(#studGold${D})" stroke="#7d5c17" stroke-width="1"/>
          <circle cx="106" cy="225" r="1.5" fill="#f3d272"/>
          <rect x="100" y="162" width="1.6" height="88" fill="#4a0f0a"/>
        </g></g>
        <path d="M56 200 A44 44 0 0 1 58.15 186.4 L61.96 187.64 A40 40 0 0 0 60 200 Z" fill="#a6afb3"/>
        <path d="M58.15 186.4 A44 44 0 0 1 64.41 174.12 L67.64 176.47 A40 40 0 0 0 61.96 187.64 Z" fill="#b4bdc1"/>
        <path d="M64.41 174.12 A44 44 0 0 1 74.15 164.41 L76.5 167.65 A40 40 0 0 0 67.64 176.47 Z" fill="#a6afb3"/>
        <path d="M74.15 164.41 A44 44 0 0 1 86.41 158.16 L87.64 161.97 A40 40 0 0 0 76.5 167.65 Z" fill="#b4bdc1"/>
        <path d="M86.41 158.16 A44 44 0 0 1 100 156 L100 160 A40 40 0 0 0 87.64 161.97 Z" fill="#a6afb3"/>
        <path d="M100 156 A44 44 0 0 1 113.59 158.16 L112.36 161.97 A40 40 0 0 0 100 160 Z" fill="#b4bdc1"/>
        <path d="M113.59 158.16 A44 44 0 0 1 125.85 164.41 L123.5 167.65 A40 40 0 0 0 112.36 161.97 Z" fill="#a6afb3"/>
        <path d="M125.85 164.41 A44 44 0 0 1 135.59 174.12 L132.36 176.47 A40 40 0 0 0 123.5 167.65 Z" fill="#b4bdc1"/>
        <path d="M135.59 174.12 A44 44 0 0 1 141.85 186.4 L138.04 187.64 A40 40 0 0 0 132.36 176.47 Z" fill="#a6afb3"/>
        <path d="M141.85 186.4 A44 44 0 0 1 144 200 L140 200 A40 40 0 0 0 138.04 187.64 Z" fill="#b4bdc1"/>
        <rect x="56" y="200" width="4" height="50" fill="#727b7f" stroke="#5d6569" stroke-width="1.2"/>
        <rect x="140" y="200" width="4" height="50" fill="#727b7f" stroke="#5d6569" stroke-width="1.2"/>
        <path d="M56 210 H60 M56 220 H60 M56 230 H60 M56 240 H60 M140 210 H144 M140 220 H144 M140 230 H144 M140 240 H144" stroke="#5d6569" stroke-width="1.2"/>
        <path d="M60 200 A40 40 0 0 1 140 200" fill="none" stroke="#4c5458" stroke-width="2"/>
        <rect x="92" y="133" width="16" height="22" rx="1.5" fill="#6a4126" stroke="#3a2010" stroke-width="2.5"/>
        <rect x="93.5" y="134.5" width="13" height="2" fill="#83552f"/>
        <rect x="92" y="152" width="16" height="3" fill="#472812"/>
        <rect x="19" y="118" width="162" height="20" rx="3" fill="#78472a" stroke="#3a2010" stroke-width="3"/>
        <rect x="23" y="120" width="154" height="2" fill="#96623c"/>
        <rect x="22" y="134" width="156" height="4" fill="#52301a"/>
        <path d="M26 127 H174" stroke="#6a3d22" stroke-width="1.3"/>
        <g>
          <g transform="translate(44,121)"><rect width="14" height="14" fill="#a5743f" stroke="#3a2010" stroke-width="2"/><rect y="1" width="14" height="2" fill="#c69358"/><rect x="4.6" y="4.6" width="4.8" height="4.8" transform="rotate(45 7 7)" fill="#4a2a14"/></g>
          <g transform="translate(78,121)"><rect width="14" height="14" fill="#a5743f" stroke="#3a2010" stroke-width="2"/><rect y="1" width="14" height="2" fill="#c69358"/><rect x="4.6" y="4.6" width="4.8" height="4.8" transform="rotate(45 7 7)" fill="#4a2a14"/></g>
          <g transform="translate(108,121)"><rect width="14" height="14" fill="#a5743f" stroke="#3a2010" stroke-width="2"/><rect y="1" width="14" height="2" fill="#c69358"/><rect x="4.6" y="4.6" width="4.8" height="4.8" transform="rotate(45 7 7)" fill="#4a2a14"/></g>
          <g transform="translate(142,121)"><rect width="14" height="14" fill="#a5743f" stroke="#3a2010" stroke-width="2"/><rect y="1" width="14" height="2" fill="#c69358"/><rect x="4.6" y="4.6" width="4.8" height="4.8" transform="rotate(45 7 7)" fill="#4a2a14"/></g>
        </g>
        <g>
          <rect x="66" y="138" width="14" height="16" fill="#6a4126" stroke="#3a2010" stroke-width="2.5"/>
          <rect x="67" y="139.2" width="12" height="1.6" fill="#83552f"/>
          <rect x="66" y="151" width="14" height="3" fill="#472812"/>
          <rect x="120" y="138" width="14" height="16" fill="#6a4126" stroke="#3a2010" stroke-width="2.5"/>
          <rect x="121" y="139.2" width="12" height="1.6" fill="#83552f"/>
          <rect x="120" y="151" width="14" height="3" fill="#472812"/>
        </g>
        <rect x="21" y="136" width="20" height="6" rx="1" fill="#96663a" stroke="#3a2010" stroke-width="2.5"/>
        <rect x="23" y="137" width="16" height="1.4" fill="#b08150"/>
        <path d="M25 142 H37 L39 186 H23 Z" fill="#7a4c2c" stroke="#3a2010" stroke-width="2.5"/>
        <path d="M28 146 H34 L35.5 182 H26.5 Z" fill="#8c5f38"/>
        <path d="M28 154 H34 L35 184 H27 Z" fill="none" stroke="#5a3620" stroke-width="1.4"/>
        <rect x="20" y="186" width="21" height="7" rx="1" fill="#96663a" stroke="#3a2010" stroke-width="2"/>
        <rect x="22" y="187.2" width="17" height="1.3" fill="#b08150"/>
        <rect x="159" y="136" width="20" height="6" rx="1" fill="#8a5c33" stroke="#3a2010" stroke-width="2.5"/>
        <rect x="161" y="137" width="16" height="1.4" fill="#a2784a"/>
        <path d="M163 142 H175 L177 186 H161 Z" fill="#6a4126" stroke="#3a2010" stroke-width="2.5"/>
        <path d="M166 146 H172 L173.5 182 H164.5 Z" fill="#835733"/>
        <path d="M166 154 H172 L173 184 H165 Z" fill="none" stroke="#533320" stroke-width="1.4"/>
        <rect x="159" y="186" width="21" height="7" rx="1" fill="#8a5c33" stroke="#3a2010" stroke-width="2"/>
        <rect x="161" y="187.2" width="17" height="1.3" fill="#a2784a"/>
        <path d="M32.5 240 H167.5 L170 250 H30 Z" fill="#bd9861" stroke="#7a5a2e" stroke-width="2"/>
        <path d="M33.5 241.6 H166.5" stroke="#dec08b" stroke-width="1.8"/>
        <g stroke-width="1.5">
          <ellipse cx="18" cy="247" rx="4.5" ry="3.4" fill="#a8aaa8" stroke="#5a5e5a"/><ellipse cx="17.2" cy="245.9" rx="2.6" ry="1.3" fill="#c9cbca"/>
          <ellipse cx="25" cy="243" rx="3.4" ry="2.8" fill="#b8a58f" stroke="#6a6052"/><ellipse cx="24.4" cy="242.1" rx="2" ry="1.1" fill="#d6c6b0"/>
          <ellipse cx="31" cy="248" rx="5" ry="3.6" fill="#9aa1a3" stroke="#5a5e5a"/><ellipse cx="30.1" cy="246.8" rx="2.9" ry="1.4" fill="#bdc4c6"/>
          <ellipse cx="39" cy="244" rx="3.2" ry="2.7" fill="#a8aaa8" stroke="#5a5e5a"/><ellipse cx="38.4" cy="243.1" rx="1.9" ry="1" fill="#c9cbca"/>
          <ellipse cx="45" cy="248" rx="3.8" ry="3" fill="#b8a58f" stroke="#6a6052"/><ellipse cx="44.3" cy="247" rx="2.2" ry="1.2" fill="#d6c6b0"/>
          <ellipse cx="182" cy="247" rx="4.5" ry="3.4" fill="#a8aaa8" stroke="#5a5e5a"/><ellipse cx="181.2" cy="245.9" rx="2.6" ry="1.3" fill="#c9cbca"/>
          <ellipse cx="175" cy="243" rx="3.4" ry="2.8" fill="#b8a58f" stroke="#6a6052"/><ellipse cx="174.4" cy="242.1" rx="2" ry="1.1" fill="#d6c6b0"/>
          <ellipse cx="169" cy="248" rx="5" ry="3.6" fill="#9aa1a3" stroke="#5a5e5a"/><ellipse cx="168.1" cy="246.8" rx="2.9" ry="1.4" fill="#bdc4c6"/>
          <ellipse cx="161" cy="244" rx="3.2" ry="2.7" fill="#a8aaa8" stroke="#5a5e5a"/><ellipse cx="160.4" cy="243.1" rx="1.9" ry="1" fill="#c9cbca"/>
          <ellipse cx="155" cy="248" rx="3.8" ry="3" fill="#b8a58f" stroke="#6a6052"/><ellipse cx="154.3" cy="247" rx="2.2" ry="1.2" fill="#d6c6b0"/>
        </g>
        <rect x="12" y="250" width="176" height="11" rx="2" fill="#b3854a" stroke="#43240f" stroke-width="3"/>
        <rect x="14" y="251.4" width="172" height="1.8" fill="#d4ac76"/>
        <path d="M34 253 V260 M56 253 V260 M78 253 V260 M100 253 V260 M122 253 V260 M144 253 V260 M166 253 V260" stroke="#8a6033" stroke-width="1.3"/>
        <rect x="8" y="261" width="184" height="13" rx="2" fill="#8f6030" stroke="#43240f" stroke-width="3"/>
        <rect x="10" y="262.4" width="180" height="1.8" fill="#b07f45"/>
        <rect x="10" y="271" width="180" height="3" fill="#6e4520"/>
        <path d="M32 264 V273 M56 264 V273 M80 264 V273 M100 264 V273 M120 264 V273 M144 264 V273 M168 264 V273" stroke="#6d4722" stroke-width="1.4"/>
      </g>
      <g>
        <rect x="60" y="243" width="80" height="11" rx="2" fill="#aab3b7" stroke="#5a6266" stroke-width="2"/>
        <path d="M62 244.5 H138" stroke="#dce3e5" stroke-width="1.4"/>
        <rect x="62" y="251.5" width="76" height="1.8" fill="#7f888c"/>
        <path d="M86 243 V254 M114 243 V254" stroke="#7d868a" stroke-width="1.5"/>
      </g></svg>`;
      let extra = '';
      if (has) {
        extra = `<div class="pb-gate-tag">${count}</div><div class="pb-gate-stack"></div><div class="pb-gate-smoke"></div>`;
      }
      return gateSvg + extra;
    }

    /* 城堡门楼冒烟：有牌牌堆悬停时屋顶持续冒烟粒（渲染后绑定一次，innerHTML 重建不失效） */
    function _pbSpawnSmoke(deck, box, delay) {
      setTimeout(function () {
        try {
          if (!deck.contains(box)) return;
          var w = deck.clientWidth || 64;
          var span = w * 0.62;
          var x = (Math.random() * 2 - 1) * span / 2;
          var size = 8.5 + Math.random() * 6.5;
          var dur = (2.0 + Math.random() * 1.0).toFixed(2) + 's';
          var p = document.createElement('i');
          p.className = 'pb-sp';
          p.style.width = p.style.height = size + 'px';
          p.style.setProperty('--dx', x.toFixed(1) + 'px');
          p.style.setProperty('--dur', dur);
          box.appendChild(p);
          setTimeout(function () { if (p.parentNode) p.parentNode.removeChild(p); }, 3000);
        } catch (e) {}
      }, delay || 0);
    }
    function bindGateSmoke(deck) {
      if (!deck || deck._pbGateSmokeBound) return;
      deck._pbGateSmokeBound = true;
      deck.addEventListener('mouseenter', function () {
        if (deck._pbSmokeTimer) return;
        var box = deck.querySelector('.pb-gate-smoke');
        if (!box) return;
        for (var k = 0; k < 4; k++) _pbSpawnSmoke(deck, box, k * 90);
        deck._pbSmokeTimer = setInterval(function () { _pbSpawnSmoke(deck, box, 0); }, 230);
      });
      deck.addEventListener('mouseleave', function () {
        if (deck._pbSmokeTimer) { clearInterval(deck._pbSmokeTimer); deck._pbSmokeTimer = null; }
      });
    }

    function getCardBackElementHTML(isPlayer, isSmall = false) {
      const config = isPlayer ? CardBackConfig.player : CardBackConfig.opponent;
      const faceConfig = isPlayer ? CardFaceConfig.player : CardFaceConfig.opponent;
      let svgContent = config.innerHTML;
      svgContent = svgContent.replace(/<svg\s+/i, '<svg style="position:absolute;top:0;left:0;width:100%;height:100%;" ');
      svgContent = svgContent.replace(/viewBox="0 0 100 150"/i, 'viewBox="0 0 100 150" preserveAspectRatio="none"');

      // ★ 卡通风格卡背（2026-10-04）：紫色果冻卡背，双方同款（暗牌/对方手牌/发牌动画/叫牌卡全走这里）
      if (selectedCardFaceStyle === 'cartoon') {
        return buildCartoonCardBackHTML(isSmall);
      }

      if (selectedCardFaceStyle === 'glass') {
        const glassConfig = isPlayer ? GlassCardFaceConfig.player : GlassCardFaceConfig.opponent;
        const edgeHighlight = glassConfig.edgeHighlight;
        const glassTopHighlight = glassConfig.glassTopHighlight;
        const metalOverlay = glassConfig.metalOverlay;

        if (isSmall) {
          const smallConfig = glassConfig.small;
          return `
            <div class="card card-small game-cursor-hover" style="width:100%;height:100%;position:relative;">
              <div style="width:100%;height:100%;${glassConfig.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                  ${svgContent}
                  <div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${glassTopHighlight}pointer-events:none;z-index:2;border-radius:${smallConfig.borderRadius} ${smallConfig.borderRadius} 0 0;"></div>
                  <div style="position:absolute;top:0;left:0;width:100%;height:35%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:${smallConfig.borderRadius} ${smallConfig.borderRadius} 0 0;"></div>
                  <div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${smallConfig.borderRadius} ${smallConfig.borderRadius};transform:rotate(180deg);"></div>
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                </div>
              </div>
            </div>
          `;
        } else {
          return `
            <div class="card game-cursor-hover" style="width:100%;height:100%;position:relative;">
              <div style="width:100%;height:100%;${glassConfig.metalBorder};border-radius:${glassConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(glassConfig.borderRadius)-2}px;box-shadow:${glassConfig.shadow};${glassConfig.innerShadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                  ${svgContent}
                  <div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${glassTopHighlight}pointer-events:none;z-index:2;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                  <div style="position:absolute;top:0;left:0;width:100%;height:35%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                  <div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${glassConfig.borderRadius} ${glassConfig.borderRadius};transform:rotate(180deg);"></div>
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                </div>
              </div>
            </div>
          `;
        }
      } else if (selectedCardFaceStyle === 'metal') {
        const metalConfig = isPlayer ? MetalCardFaceConfig.player : MetalCardFaceConfig.opponent;

        const archFrameHTML = (() => {
            const gradPrefix = isPlayer ? 'p' : 'o';
            const grad1Id = `archGrad1_${gradPrefix}_cb`;
            const grad2Id = `archGrad2_${gradPrefix}_cb`;
            const grad3Id = `archGrad3_${gradPrefix}_cb`;
            const glowId = `archGlow_${gradPrefix}_cb`;
            return `<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;">
             <svg viewBox="0 0 200 300" preserveAspectRatio="none" style="width:100%;height:100%;">
               <defs>
                 <linearGradient id="${grad1Id}" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="35%" stop-color="#fff"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="70%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="100%" stop-color="${metalConfig.archInnerColor}"/>
                 </linearGradient>
                 <linearGradient id="${grad2Id}" x1="0%" y1="0%" x2="0%" y2="100%">
                   <stop offset="0%" stop-color="#fff"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="80%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="100%" stop-color="#111"/>
                 </linearGradient>
                 <linearGradient id="${grad3Id}" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="#333"/>
                   <stop offset="50%" stop-color="#555"/>
                   <stop offset="100%" stop-color="#333"/>
                 </linearGradient>
                 <filter id="${glowId}">
                   <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
                   <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                 </filter>
               </defs>
               <path d="M10 50 Q100 -20 190 50 L190 270 L10 270 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 54 Q100 -15 186 54 L186 266 L14 266 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 58 Q100 -10 182 58 L182 262 L18 262 Z" fill="none" stroke="url(#${grad1Id})" stroke-width="6" filter="url(#${glowId})"/>
               <path d="M24 65 Q100 -2 176 65 L176 256 L24 256 Z" fill="none" stroke="url(#${grad2Id})" stroke-width="4"/>
               <path d="M30 72 Q100 8 170 72 L170 250 L30 250 Z" fill="none" stroke="url(#${grad3Id})" stroke-width="2"/>
               <path d="M10 250 Q100 320 190 250 L190 30 L10 30 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 246 Q100 315 186 246 L186 34 L14 34 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 242 Q100 310 182 242 L182 38 L18 38 Z" fill="none" stroke="url(#${grad1Id})" stroke-width="6" filter="url(#${glowId})"/>
               <path d="M24 235 Q100 302 176 235 L176 44 L24 44 Z" fill="none" stroke="url(#${grad2Id})" stroke-width="4"/>
               <path d="M30 228 Q100 292 170 228 L170 50 L30 50 Z" fill="none" stroke="url(#${grad3Id})" stroke-width="2"/>
               <g fill="#888">
                 <circle cx="22" cy="22" r="4"/>
                 <circle cx="178" cy="22" r="4"/>
                 <circle cx="22" cy="278" r="4"/>
                 <circle cx="178" cy="278" r="4"/>
               </g>
               <g fill="#666">
                 <circle cx="28" cy="28" r="2"/>
                 <circle cx="172" cy="28" r="2"/>
                 <circle cx="28" cy="272" r="2"/>
                 <circle cx="172" cy="272" r="2"/>
               </g>
               <line x1="10" y1="28" x2="28" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="28" x2="190" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="10" y1="272" x2="28" y2="272" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="272" x2="190" y2="272" stroke="#555" stroke-width="1"/>
               <line x1="28" y1="10" x2="28" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="10" x2="172" y2="28" stroke="#555" stroke-width="1"/>
               <line x1="28" y1="272" x2="28" y2="290" stroke="#555" stroke-width="1"/>
               <line x1="172" y1="272" x2="172" y2="290" stroke="#555" stroke-width="1"/>
             </svg>
           </div>`;
          })();

        if (isSmall) {
          const smallConfig = metalConfig.small;
          return `
            <div class="card card-small game-cursor-hover" style="width:100%;height:100%;position:relative;">
              <div style="width:100%;height:100%;${metalConfig.metalBorder};border-radius:${smallConfig.borderRadius};padding:2px;box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(smallConfig.borderRadius)-2}px;box-shadow:${smallConfig.shadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                  ${svgContent}
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>
                  <div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>
                  ${archFrameHTML}
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                </div>
              </div>
            </div>
          `;
        } else {
          return `
            <div class="card game-cursor-hover" style="width:100%;height:100%;position:relative;">
              <div style="width:100%;height:100%;${metalConfig.metalBorder};border-radius:${metalConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
                <div style="width:100%;height:100%;background:${config.gradient};border-radius:${parseInt(metalConfig.borderRadius)-2}px;box-shadow:${metalConfig.shadow};${metalConfig.innerShadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                  ${svgContent}
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>
                  <div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>
                  ${archFrameHTML}
                  <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                </div>
              </div>
            </div>
          `;
        }
      }

      if (isSmall) {
        const smallConfig = faceConfig.small;
        return `
          <div class="card card-small game-cursor-hover" style="background:${config.gradient};border:${smallConfig.borderWidth} solid ${faceConfig.borderColor};border-radius:${smallConfig.borderRadius};box-shadow:${smallConfig.shadow};display:flex;align-items:center;justify-content:center;overflow:visible;position:relative;">
            ${svgContent}
          </div>
        `;
      } else {
        return `
          <div class="card game-cursor-hover" style="width:100%;height:100%;background:${config.gradient};border-radius:${faceConfig.borderRadius};box-shadow:${faceConfig.shadow};${faceConfig.innerShadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
            ${svgContent}
          </div>
        `;
      }
    }

    function getShieldBorderHTML(isPlayer, display, isSmall = false, cardFaceStyle = 'normal') {
      // 根据卡面样式选择配置
      const baseConfig = cardFaceStyle === 'cartoon'
        ? (isPlayer ? CartoonCardFaceConfig.player.royal : CartoonCardFaceConfig.opponent.royal)
        : cardFaceStyle === 'metal'
        ? (isPlayer ? MetalCardFaceConfig.player.royal : MetalCardFaceConfig.opponent.royal)
        : cardFaceStyle === 'glass'
        ? (isPlayer ? GlassCardFaceConfig.player.royal : GlassCardFaceConfig.opponent.royal)
        : (isPlayer ? CardFaceConfig.player.royal : CardFaceConfig.opponent.royal);
      const config = baseConfig;
      const accentColor = config.shieldStroke;
      const fillColor = config.shieldFill;
      const gradPrefix = `shield_${isPlayer ? 'p' : 'o'}_${display}_${isSmall ? 's' : 'l'}_${Math.random().toString(36).substr(2, 9)}`;
      const bottomWidth = {
        'K': 40,
        'Q': 30,
        'J': 20
      }[display] || 30;

      // 卡通风格盾牌：复制经典卡面的路径/结构不变，只改颜色（队色渐变 + 深梅紫描边）
      if (cardFaceStyle === 'cartoon') {
        const ctFillA = config.shieldFill;
        const ctFillB = config.shieldFillB || config.shieldFill;
        const ctStroke = config.shieldStroke;
        const ctFillId = `ctShieldFill_${isPlayer ? 'p' : 'o'}`;
        if (isSmall) {
          return `
            <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;" viewBox="0 0 100 44" preserveAspectRatio="xMidYMid meet">
              <defs><linearGradient id="${ctFillId}" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="${ctFillA}"/><stop offset="100%" stop-color="${ctFillB}"/>
              </linearGradient></defs>
              <rect x="3" y="3" width="94" height="38" rx="4" fill="url(#${ctFillId})" stroke="${ctStroke}" stroke-width="1.5"/>
              <rect x="7" y="7" width="86" height="30" fill="none" stroke="${ctStroke}" stroke-width="1" opacity="0.6"/>
              <rect x="2" y="2" width="6" height="6" fill="${ctStroke}" opacity="0.4" rx="1"/>
              <rect x="92" y="2" width="6" height="6" fill="${ctStroke}" opacity="0.4" rx="1"/>
              <rect x="2" y="36" width="6" height="6" fill="${ctStroke}" opacity="0.4" rx="1"/>
              <rect x="92" y="36" width="6" height="6" fill="${ctStroke}" opacity="0.4" rx="1"/>
            </svg>
          `;
        }
        // 路径生成逻辑与经典完全一致（K圆底/Q梯形底/J尖底，复用 bottomWidth 计算）
        let outerPath, innerPath;
        if (display === 'K') {
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q95,145 50,145 Q5,145 5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q88,138 50,138 Q12,138 12,105 Z`;
        } else if (display === 'Q') {
          const bottomLeft = 5 + (95 - bottomWidth) / 2;
          const bottomRight = 95 - (95 - bottomWidth) / 2;
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 L${bottomRight},145 L${bottomLeft},145 L5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 L${bottomRight - 3},138 L${bottomLeft + 3},138 L12,105 Z`;
        } else {
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q${95 - (95 - bottomWidth)/2},145 50,145 Q${5 + (95 - bottomWidth)/2},145 5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q${88 - (88 - bottomWidth - 6)/2},138 50,138 Q${12 + (88 - bottomWidth - 6)/2},138 12,105 Z`;
        }
        return `
          <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid meet">
            <defs><linearGradient id="${ctFillId}" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="${ctFillA}"/><stop offset="100%" stop-color="${ctFillB}"/>
            </linearGradient></defs>
            <path d="${outerPath}" fill="url(#${ctFillId})" stroke="${ctStroke}" stroke-width="3"/>
            <path d="${innerPath}" fill="none" stroke="${ctStroke}" stroke-width="2" opacity="0.7"/>
            <path d="M10,25 L20,25 L20,15 Q10,15 10,25 Z" fill="${ctStroke}" opacity="0.5"/>
            <path d="M80,25 L90,25 L90,15 Q80,15 80,25 Z" fill="${ctStroke}" opacity="0.5"/>
          </svg>
        `;
      }
      
      // 金属模式和玻璃模式使用增强的立体盾牌
      if (cardFaceStyle === 'metal' || cardFaceStyle === 'glass') {
        // 金属渐变定义
        const metalGradId = isPlayer ? 'metalShieldGradBlue' : 'metalShieldGradRed';
        const highlightGradId = isPlayer ? 'metalHighlightGradBlue' : 'metalHighlightGradRed';
        const metalGradientDefs = isPlayer
          ? `<linearGradient id="${metalGradId}" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#1e40af"/>
              <stop offset="30%" stop-color="#3b82f6"/>
              <stop offset="50%" stop-color="#60a5fa"/>
              <stop offset="70%" stop-color="#3b82f6"/>
              <stop offset="100%" stop-color="#1e40af"/>
            </linearGradient>
            <linearGradient id="${highlightGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="rgba(255,255,255,0.6)"/>
              <stop offset="50%" stop-color="rgba(255,255,255,0.2)"/>
              <stop offset="100%" stop-color="rgba(0,0,0,0.3)"/>
            </linearGradient>`
          : `<linearGradient id="${metalGradId}" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#8b0000"/>
              <stop offset="30%" stop-color="#dc143c"/>
              <stop offset="50%" stop-color="#ff6b6b"/>
              <stop offset="70%" stop-color="#dc143c"/>
              <stop offset="100%" stop-color="#8b0000"/>
            </linearGradient>
            <linearGradient id="${highlightGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="rgba(255,255,255,0.5)"/>
              <stop offset="50%" stop-color="rgba(255,255,255,0.15)"/>
              <stop offset="100%" stop-color="rgba(0,0,0,0.4)"/>
            </linearGradient>`;
        
        if (isSmall) {
          return `
            <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;" viewBox="0 0 100 44" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="shieldMetalGradSmall_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="100%">
                  ${isPlayer 
                    ? '<stop offset="0%" stop-color="#e8e8e8"/><stop offset="20%" stop-color="#c0c0c0"/><stop offset="40%" stop-color="#888888"/><stop offset="50%" stop-color="#a0a0a0"/><stop offset="60%" stop-color="#888888"/><stop offset="80%" stop-color="#c0c0c0"/><stop offset="100%" stop-color="#f0f0f0"/>'
                    : '<stop offset="0%" stop-color="#fdf5e6"/><stop offset="20%" stop-color="#daa520"/><stop offset="40%" stop-color="#b8860b"/><stop offset="50%" stop-color="#d4af37"/><stop offset="60%" stop-color="#b8860b"/><stop offset="80%" stop-color="#daa520"/><stop offset="100%" stop-color="#fffacd"/>'
                  }
                </linearGradient>
                <linearGradient id="shieldHighlightGradSmall_${gradPrefix}" x1="0%" y1="0%" x2="0%" y2="100%">
                  ${isPlayer 
                    ? '<stop offset="0%" stop-color="rgba(255,255,255,0.6)"/><stop offset="50%" stop-color="rgba(255,255,255,0.2)"/><stop offset="100%" stop-color="rgba(0,0,0,0.4)"/>'
                    : '<stop offset="0%" stop-color="rgba(255,255,200,0.6)"/><stop offset="50%" stop-color="rgba(255,220,100,0.2)"/><stop offset="100%" stop-color="rgba(100,50,0,0.4)"/>'
                  }
                </linearGradient>
                <linearGradient id="shieldEdgeGradSmall_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="0%">
                  ${isPlayer 
                    ? `<stop offset="0%" stop-color="${accentColor}"/><stop offset="20%" stop-color="#fff"/><stop offset="40%" stop-color="#e8e8e8"/><stop offset="50%" stop-color="#c0c0c0"/><stop offset="60%" stop-color="#e8e8e8"/><stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="${accentColor}"/>`
                    : `<stop offset="0%" stop-color="#daa520"/><stop offset="20%" stop-color="#fff"/><stop offset="40%" stop-color="#daa520"/><stop offset="50%" stop-color="#b8860b"/><stop offset="60%" stop-color="#daa520"/><stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="#daa520"/>`
                  }
                </linearGradient>
                <linearGradient id="shieldBrushGradSmall_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="0%">
                  ${isPlayer 
                    ? '<stop offset="0%" stop-color="rgba(255,255,255,0.15)"/><stop offset="50%" stop-color="rgba(255,255,255,0.08)"/><stop offset="100%" stop-color="rgba(255,255,255,0.15)"/>'
                    : '<stop offset="0%" stop-color="rgba(255,255,200,0.15)"/><stop offset="50%" stop-color="rgba(255,220,100,0.08)"/><stop offset="100%" stop-color="rgba(255,255,200,0.15)"/>'
                  }
                </linearGradient>
              </defs>
              <!-- 底层阴影 -->
              <rect x="4" y="5" width="94" height="38" rx="4" fill="rgba(0,0,0,0.5)" filter="blur(2px)"/>
              <!-- 金属盾牌主体 -->
              <rect x="3" y="4" width="94" height="38" rx="4" fill="url(#shieldMetalGradSmall_${gradPrefix})"/>
              <!-- 金属边框 -->
              <rect x="3" y="4" width="94" height="38" rx="4" fill="none" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="2.5"/>
              <!-- 边框高光 -->
              <rect x="3" y="4" width="94" height="38" rx="4" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,200,0.6)'}" stroke-width="1"/>
              <!-- 高光层 -->
              <rect x="3" y="4" width="94" height="38" rx="4" fill="url(#shieldHighlightGradSmall_${gradPrefix})"/>
              <!-- 拉丝纹理 -->
              <rect x="3" y="4" width="94" height="38" rx="4" fill="url(#shieldBrushGradSmall_${gradPrefix})"/>
              <line x1="5" y1="6" x2="95" y2="6" stroke="${isPlayer ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,200,0.25)'}" stroke-width="0.5"/>
              <line x1="5" y1="13" x2="95" y2="13" stroke="${isPlayer ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,200,0.15)'}" stroke-width="0.5"/>
              <line x1="5" y1="20" x2="95" y2="20" stroke="${isPlayer ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,200,0.1)'}" stroke-width="0.5"/>
              <line x1="5" y1="27" x2="95" y2="27" stroke="${isPlayer ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,200,0.1)'}" stroke-width="0.5"/>
              <line x1="5" y1="34" x2="95" y2="34" stroke="${isPlayer ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,200,0.15)'}" stroke-width="0.5"/>
              <!-- 内部装饰边框 -->
              <rect x="7" y="8" width="86" height="30" rx="3" fill="none" stroke="url(#shieldEdgeGradSmall_${gradPrefix})" stroke-width="3"/>
              <!-- 内边框高光 -->
              <rect x="7" y="8" width="86" height="30" rx="3" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="0.5"/>
              <!-- 角落金属铆钉 -->
              <circle cx="6" cy="6" r="3.5" fill="url(#shieldMetalGradSmall_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.2"/>
              <circle cx="6" cy="6" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.2"/>
              <circle cx="94" cy="6" r="3.5" fill="url(#shieldMetalGradSmall_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.2"/>
              <circle cx="94" cy="6" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.2"/>
              <circle cx="6" cy="38" r="3.5" fill="url(#shieldMetalGradSmall_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.2"/>
              <circle cx="6" cy="38" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.2"/>
              <circle cx="94" cy="38" r="3.5" fill="url(#shieldMetalGradSmall_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.2"/>
              <circle cx="94" cy="38" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.2"/>
              <!-- 盾牌内部菱形纹饰 -->
              <path d="M50,10 L65,22 L50,34 L35,22 Z" fill="none" stroke="url(#shieldEdgeGradSmall_${gradPrefix})" stroke-width="2.5"/>
              <!-- 中心金属铆钉 -->
              <circle cx="50" cy="22" r="4" fill="url(#shieldMetalGradSmall_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.5"/>
              <circle cx="50" cy="22" r="2" fill="${isPlayer ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,200,0.4)'}" stroke-width="1.5"/>
              <circle cx="50" cy="22" r="1" fill="${isPlayer ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,200,0.8)'}" stroke-width="1.5"/>
            </svg>
          `;
        }
        
        let outerPath, innerPath;
        
        if (display === 'K') {
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q95,145 50,145 Q5,145 5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q88,138 50,138 Q12,138 12,105 Z`;
        } else if (display === 'Q') {
          const bottomLeft = 5 + (95 - bottomWidth) / 2;
          const bottomRight = 95 - (95 - bottomWidth) / 2;
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 L${bottomRight},145 L${bottomLeft},145 L5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 L${bottomRight - 3},138 L${bottomLeft + 3},138 L12,105 Z`;
        } else {
          outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q${95 - (95 - bottomWidth)/2},145 50,145 Q${5 + (95 - bottomWidth)/2},145 5,110 Z`;
          innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q${88 - (88 - bottomWidth - 6)/2},138 50,138 Q${12 + (88 - bottomWidth - 6)/2},138 12,105 Z`;
        }
        
        return `
          <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid meet">
            <defs>
              <linearGradient id="shieldMetalGrad_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="100%">
                ${isPlayer 
                  ? '<stop offset="0%" stop-color="#e8e8e8"/><stop offset="20%" stop-color="#c0c0c0"/><stop offset="40%" stop-color="#888888"/><stop offset="50%" stop-color="#a0a0a0"/><stop offset="60%" stop-color="#888888"/><stop offset="80%" stop-color="#c0c0c0"/><stop offset="100%" stop-color="#f0f0f0"/>'
                  : '<stop offset="0%" stop-color="#fdf5e6"/><stop offset="20%" stop-color="#daa520"/><stop offset="40%" stop-color="#b8860b"/><stop offset="50%" stop-color="#d4af37"/><stop offset="60%" stop-color="#b8860b"/><stop offset="80%" stop-color="#daa520"/><stop offset="100%" stop-color="#fffacd"/>'
                }
              </linearGradient>
              <linearGradient id="shieldHighlightGrad_${gradPrefix}" x1="0%" y1="0%" x2="0%" y2="100%">
                ${isPlayer 
                  ? '<stop offset="0%" stop-color="rgba(255,255,255,0.7)"/><stop offset="30%" stop-color="rgba(255,255,255,0.3)"/><stop offset="50%" stop-color="rgba(255,255,255,0.1)"/><stop offset="70%" stop-color="rgba(0,0,0,0.2)"/><stop offset="100%" stop-color="rgba(0,0,0,0.5)"/>'
                  : '<stop offset="0%" stop-color="rgba(255,255,200,0.7)"/><stop offset="30%" stop-color="rgba(255,220,100,0.3)"/><stop offset="50%" stop-color="rgba(255,200,50,0.1)"/><stop offset="70%" stop-color="rgba(100,50,0,0.2)"/><stop offset="100%" stop-color="rgba(80,40,0,0.5)"/>'
                }
              </linearGradient>
              <linearGradient id="shieldEdgeGrad_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="0%">
                ${isPlayer 
                  ? `<stop offset="0%" stop-color="${accentColor}"/><stop offset="20%" stop-color="#fff"/><stop offset="40%" stop-color="#e8e8e8"/><stop offset="50%" stop-color="#c0c0c0"/><stop offset="60%" stop-color="#e8e8e8"/><stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="${accentColor}"/>`
                  : `<stop offset="0%" stop-color="#daa520"/><stop offset="20%" stop-color="#fff"/><stop offset="40%" stop-color="#daa520"/><stop offset="50%" stop-color="#b8860b"/><stop offset="60%" stop-color="#daa520"/><stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="#daa520"/>`
                }
              </linearGradient>
              <filter id="shieldShadow_${gradPrefix}">
                <feGaussianBlur stdDeviation="2" result="blur"/>
                <feOffset dx="1" dy="2"/>
                <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
              <linearGradient id="shieldBrushGrad_${gradPrefix}" x1="0%" y1="0%" x2="100%" y2="0%">
                ${isPlayer 
                  ? '<stop offset="0%" stop-color="rgba(255,255,255,0.15)"/><stop offset="50%" stop-color="rgba(255,255,255,0.08)"/><stop offset="100%" stop-color="rgba(255,255,255,0.15)"/>'
                  : '<stop offset="0%" stop-color="rgba(255,255,200,0.15)"/><stop offset="50%" stop-color="rgba(255,220,100,0.08)"/><stop offset="100%" stop-color="rgba(255,255,200,0.15)"/>'
                }
              </linearGradient>
            </defs>
            <!-- 底层阴影（立体感） -->
            <path d="${outerPath}" transform="translate(2,3)" fill="rgba(0,0,0,0.5)" filter="blur(3px)"/>
            <!-- 金属盾牌主体 -->
            <path d="${outerPath}" fill="url(#shieldMetalGrad_${gradPrefix})" filter="url(#shieldShadow_${gradPrefix})"/>
            <!-- 金属边框（增强立体感） -->
            <path d="${outerPath}" fill="none" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="3"/>
            <!-- 边框高光 -->
            <path d="${outerPath}" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,200,0.6)'}" stroke-width="1"/>
            <!-- 高光层（顶部亮，底部暗） -->
            <path d="${outerPath}" fill="url(#shieldHighlightGrad_${gradPrefix})"/>
            <!-- 拉丝纹理 -->
            <path d="${outerPath}" fill="url(#shieldBrushGrad_${gradPrefix})"/>
            <line x1="8" y1="18" x2="92" y2="18" stroke="${isPlayer ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,200,0.25)'}" stroke-width="0.5"/>
            <line x1="8" y1="30" x2="92" y2="30" stroke="${isPlayer ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,200,0.18)'}" stroke-width="0.5"/>
            <line x1="8" y1="42" x2="92" y2="42" stroke="${isPlayer ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,200,0.12)'}" stroke-width="0.5"/>
            <line x1="8" y1="54" x2="92" y2="54" stroke="${isPlayer ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,200,0.08)'}" stroke-width="0.5"/>
            <line x1="8" y1="66" x2="92" y2="66" stroke="${isPlayer ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,200,0.06)'}" stroke-width="0.5"/>
            <line x1="8" y1="78" x2="92" y2="78" stroke="${isPlayer ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,200,0.08)'}" stroke-width="0.5"/>
            <line x1="8" y1="90" x2="92" y2="90" stroke="${isPlayer ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,200,0.12)'}" stroke-width="0.5"/>
            <line x1="8" y1="102" x2="92" y2="102" stroke="${isPlayer ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,200,0.15)'}" stroke-width="0.5"/>
            <line x1="8" y1="114" x2="92" y2="114" stroke="${isPlayer ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,200,0.18)'}" stroke-width="0.5"/>
            <!-- 内部装饰边框（带颜色高亮） -->
            <path d="${innerPath}" fill="none" stroke="url(#shieldEdgeGrad_${gradPrefix})" stroke-width="4"/>
            <!-- 内边框高光 -->
            <path d="${innerPath}" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1"/>
            <!-- 角落金属铆钉 -->
            <circle cx="12" cy="22" r="4" fill="url(#shieldMetalGrad_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.5"/>
            <circle cx="12" cy="22" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.5"/>
            <circle cx="88" cy="22" r="4" fill="url(#shieldMetalGrad_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="1.5"/>
            <circle cx="88" cy="22" r="1.5" fill="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="1.5"/>
            <!-- 顶部高光弧线 -->
            <path d="M15,18 Q15,10 50,10 Q85,10 85,18" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,200,0.8)'}" stroke-width="2"/>
            <!-- 盾牌内部菱形纹饰 -->
            <path d="M50,35 L70,65 L50,95 L30,65 Z" fill="none" stroke="url(#shieldEdgeGrad_${gradPrefix})" stroke-width="3"/>
            <path d="M50,45 L62,65 L50,85 L38,65 Z" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,200,0.5)'}" stroke-width="2"/>
            <!-- 中心金属铆钉 -->
            <circle cx="50" cy="65" r="8" fill="url(#shieldMetalGrad_${gradPrefix})" stroke="${isPlayer ? '#666' : '#8B4513'}" stroke-width="2"/>
            <circle cx="50" cy="65" r="4" fill="${isPlayer ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,200,0.3)'}" stroke-width="2"/>
            <circle cx="50" cy="65" r="2" fill="${isPlayer ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,200,0.8)'}" stroke-width="2"/>
            <!-- 垂直装饰线 -->
            <path d="M50,28 L50,128" fill="none" stroke="${isPlayer ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,200,0.3)'}" stroke-width="1"/>
            <!-- 盾牌底部尖刺 -->
            <path d="M48,135 L50,145 L52,135" fill="none" stroke="url(#shieldMetalGrad_${gradPrefix})" stroke-width="4"/>
          </svg>
        `;
      }
      
      // 普通模式盾牌
      if (isSmall) {
        return `
          <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;" viewBox="0 0 100 44" preserveAspectRatio="xMidYMid meet">
            <rect x="3" y="3" width="94" height="38" fill="${fillColor}" stroke="${accentColor}" stroke-width="1.5" rx="4"/>
            <rect x="7" y="7" width="86" height="30" fill="none" stroke="${accentColor}" stroke-width="1" opacity="0.6"/>
            <rect x="2" y="2" width="6" height="6" fill="${accentColor}" opacity="0.4" rx="1"/>
            <rect x="92" y="2" width="6" height="6" fill="${accentColor}" opacity="0.4" rx="1"/>
            <rect x="2" y="36" width="6" height="6" fill="${accentColor}" opacity="0.4" rx="1"/>
            <rect x="92" y="36" width="6" height="6" fill="${accentColor}" opacity="0.4" rx="1"/>
          </svg>
        `;
      }
      
      let outerPath, innerPath;
      
      if (display === 'K') {
        outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q95,145 50,145 Q5,145 5,110 Z`;
        innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q88,138 50,138 Q12,138 12,105 Z`;
      } else if (display === 'Q') {
        const bottomLeft = 5 + (95 - bottomWidth) / 2;
        const bottomRight = 95 - (95 - bottomWidth) / 2;
        outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 L${bottomRight},145 L${bottomLeft},145 L5,110 Z`;
        innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 L${bottomRight - 3},138 L${bottomLeft + 3},138 L12,105 Z`;
      } else {
        outerPath = `M5,20 Q5,5 50,5 Q95,5 95,20 L95,110 Q${95 - (95 - bottomWidth)/2},145 50,145 Q${5 + (95 - bottomWidth)/2},145 5,110 Z`;
        innerPath = `M12,28 Q12,12 50,12 Q88,12 88,28 L88,105 Q${88 - (88 - bottomWidth - 6)/2},138 50,138 Q${12 + (88 - bottomWidth - 6)/2},138 12,105 Z`;
      }
      
      return `
        <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;" viewBox="0 0 100 150" preserveAspectRatio="xMidYMid meet">
          <path d="${outerPath}" fill="${fillColor}" stroke="${accentColor}" stroke-width="3"/>
          <path d="${innerPath}" fill="none" stroke="${accentColor}" stroke-width="2" opacity="0.7"/>
          <path d="M10,25 L20,25 L20,15 Q10,15 10,25 Z" fill="${accentColor}" opacity="0.5"/>
          <path d="M80,25 L90,25 L90,15 Q80,15 80,25 Z" fill="${accentColor}" opacity="0.5"/>
        </svg>
      `;
    }

    // ----------------------------------------------------------------------------
    // 【UI工具函数】
    // ----------------------------------------------------------------------------
    //   toggleUiButtons: 控制所有UI按钮显示/隐藏(打开面板时隐藏按钮，防止误操作)
    function toggleUiButtons(hide) {
      document.querySelectorAll('.ui-button').forEach(btn => {
        if (hide) {
          btn.classList.add('hidden');
        } else {
          btn.classList.remove('hidden');
        }
      });
      // 显式控制左上角设置按钮（防止内联 display: flex 覆盖 .hidden）
      const settingsBtn = document.getElementById('settings-btn');
      if (settingsBtn) {
        if (hide) {
          settingsBtn.style.display = 'none';
        } else {
          settingsBtn.style.display = 'flex';
        }
      }
      // 显式控制左下角规则按钮（防止 .rules-btn-base 的 display: flex 覆盖 .hidden）
      const rulesBtn = document.getElementById('game-rules-btn');
      if (rulesBtn) {
        if (hide) {
          rulesBtn.style.display = 'none';
        } else {
          rulesBtn.style.display = 'flex';
        }
      }
    }

    // ============================================================================
    // 【JS-4/10】UI交互系统
    // ============================================================================
    // 包含: 规则面板、设置面板、全屏模式、先手设置、音量控制、按钮交互
    
    // ----------------------------------------------------------------------------
    // 【规则面板交互】
    // ----------------------------------------------------------------------------
    // 规则面板: 左下角💡按钮触发，显示游戏规则说明
    // 交互逻辑: 点击按钮显示/隐藏面板，点击遮罩层关闭面板
    let isSettingsMode = false;

    // 游戏规则按钮点击事件 - 打开规则面板
    GameElements.ui.rulesBtn.addEventListener('click', function() {
      GameElements.ui.rulesOverlay.classList.toggle('hidden');
      toggleUiButtons(!GameElements.ui.rulesOverlay.classList.contains('hidden'));
      if (!GameElements.ui.rulesOverlay.classList.contains('hidden')) {
        playSound('uiOpenSound');
        isSettingsMode = false;
        var _tTitle = (typeof __t === 'function') ? __t : function(k){ var d=__gameTranslations&&__gameTranslations[__gameCurrentLang]; return d&&d[k]!=null?d[k]:k; }; document.getElementById('rules-panel-title').textContent = _tTitle('rule_title');
        document.getElementById('game-rules-content').classList.remove('hidden');
        document.getElementById('game-settings-content').classList.add('hidden');
      } else {
        playSound('uiCloseSound');
      }
    });

    // 规则面板关闭按钮点击事件
    GameElements.ui.closeRulesBtn.addEventListener('click', function() {
      GameElements.ui.rulesOverlay.classList.add('hidden');
      toggleUiButtons(false);
      playSound('uiCloseSound');
    });

    // 规则面板遮罩层点击事件(点击空白处关闭)
    GameElements.ui.rulesOverlay.addEventListener('click', function(e) {
      if (e.target === GameElements.ui.rulesOverlay) {
        GameElements.ui.rulesOverlay.classList.add('hidden');
        toggleUiButtons(false);
        playSound('uiCloseSound');
      }
    });

    // ----------------------------------------------------------------------------
    // 【设置面板交互】
    // ----------------------------------------------------------------------------
    // 设置面板: 在规则面板内通过🧠按钮切换显示/隐藏
    // 包含: 全屏开关、音量控制、先手设置
    
    // 切换设定按钮事件 - 在规则面板和设置面板之间切换
    document.getElementById('toggle-settings-btn').addEventListener('click', function() {
      playSound('uiToggleSound');
      isSettingsMode = !isSettingsMode;
      const titleElement = document.getElementById('rules-panel-title');
      const rulesContent = document.getElementById('game-rules-content');
      const settingsContent = document.getElementById('game-settings-content');
      const toggleBtn = document.getElementById('toggle-settings-btn');
      var _t = typeof __t === 'function' ? __t : function(k){ var d=__gameTranslations&&__gameTranslations[__gameCurrentLang]; return d&&d[k]!=null?d[k]:k; };
      
      if (isSettingsMode) {
          titleElement.textContent = _t('rule_settings_title');
          toggleBtn.textContent = '📋';
          rulesContent.classList.add('hidden');
          settingsContent.classList.remove('hidden');
        } else {
          titleElement.textContent = _t('rule_title');
          toggleBtn.textContent = '🧠';
          rulesContent.classList.remove('hidden');
          settingsContent.classList.add('hidden');
        }
    });
    
    // 设置面板切换 - 显示/隐藏设置面板(左上角设置按钮)
    // 打开设置面板时隐藏左下角规则按钮
    function toggleSettings() {
      const panel = document.getElementById('settings-panel');
      const overlay = document.getElementById('settings-overlay');
      const rulesBtn = document.getElementById('game-rules-btn');
      const settingsBtn = document.getElementById('settings-btn');
      if (panel.style.display === 'none') {
        // ★ 打开时记录原始 display（这才是"面板打开前"的状态），关闭时恢复。
        //   修复（2026-9-15）：原来记录写在函数开头，关闭时读到的是当前值 'none'，
        //   导致人机/主页模式点完设置后设置+规则按钮被固化隐藏（联机模式按钮本就
        //   隐藏点不到，故只在人机模式暴露）。用函数属性跨调用保存。
        toggleSettings._prevRules = rulesBtn ? rulesBtn.style.display : '';
        toggleSettings._prevSettings = settingsBtn ? settingsBtn.style.display : '';
        playSound('uiOpenSound');
        panel.style.display = 'block';
        overlay.classList.remove('hidden');
        if (rulesBtn) rulesBtn.style.display = 'none';
        if (settingsBtn) settingsBtn.style.display = 'none';

        // ★ 联机模式：隐藏 AI策略 / 先手选择 / 叫牌（联机由服务器权威，玩家无法改）
        var _isOnline = (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isOnline2v2Mode || PBOnline.isOnline1v1Mode));
        var _aiDiv = document.getElementById('settings-ai-strategy');
        var _firstDiv = document.getElementById('settings-first-player');
        var _callDiv = document.getElementById('settings-call-card');
        if (_isOnline) {
          if (_aiDiv) _aiDiv.style.display = 'none';
          if (_firstDiv) _firstDiv.style.display = 'none';
          if (_callDiv) _callDiv.style.display = 'none';
        } else {
          if (_aiDiv) _aiDiv.style.display = '';
          if (_firstDiv) _firstDiv.style.display = '';
          if (_callDiv) _callDiv.style.display = '';
        }

        initCardBackOptions();
        initCardFaceOptions();
      } else {
        playSound('uiCloseSound');
        panel.style.display = 'none';
        overlay.classList.add('hidden');
        // ★ 关闭时恢复打开前记录的原始状态（主页/人机=显示，联机=保持隐藏）
        if (rulesBtn) rulesBtn.style.display = toggleSettings._prevRules || '';
        if (settingsBtn) settingsBtn.style.display = toggleSettings._prevSettings || '';
      }
    }
    
    // 设置面板遮罩层点击事件(点击空白处关闭)
    document.getElementById('settings-overlay').addEventListener('click', function(e) {
      if (e.target === document.getElementById('settings-overlay')) {
        toggleSettings();
      }
    });
    
    // 设置按钮事件绑定
    document.getElementById('settings-btn').addEventListener('click', toggleSettings);
    document.getElementById('close-settings-btn').addEventListener('click', toggleSettings);

    // Esc 快捷键：切换设置面板（打开/关闭）
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' || e.keyCode === 27) {
        // ★ 2026-9-17：教程模式不响应 ESC 快捷键（用户明令取消教程内的设置面板呼应）
        if (isTutorialMode || isFunctionalCardTutorial || isMatchTutorial) return;
        // 只在没有 input/textarea 聚焦时触发（避免在输入框里按 Esc 误触）
        var active = document.activeElement;
        var isInput = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.tagName === 'SELECT');
        if (isInput) return;
        // 只在游戏界面显示时才响应 Esc（主页不响应）
        var _wrapper = document.querySelector('.game-container-wrapper');
        if (!_wrapper || _wrapper.style.opacity !== '1') return;
        toggleSettings();
        e.preventDefault();
      }
    });
    
    // ----------------------------------------------------------------------------
    // 【背景主题切换】
    // ----------------------------------------------------------------------------
    // 3套背景：星空战场(starfield)、魔幻森林(magicforest)、机械科技(tech)
    const bgThemes = {
      starfield: {
        name: '星空战场',
        class: 'bg-theme-starfield',
        decoId: 'deco-starfield'
      },
      magicforest: {
        name: '魔幻森林',
        class: 'bg-theme-magicforest',
        decoId: 'deco-magicforest'
      },
      tech: {
        name: '机械科技',
        class: 'bg-theme-tech',
        decoId: 'deco-tech'
      }
    };

    // 各主题的元素状态：'anim'（动态）、'static'（静态）、'off'（关闭）
    let bgElementState = {};
    try {
      const saved = JSON.parse(localStorage.getItem('gameBgElementState'));
      if (saved && typeof saved === 'object') {
        bgElementState = saved;
      }
    } catch (e) {}
    Object.keys(bgThemes).forEach(k => {
      if (bgElementState[k] !== 'anim' && bgElementState[k] !== 'static' && bgElementState[k] !== 'off') {
        bgElementState[k] = 'off'; // ★ 默认关闭（用户指定初始设置）
      }
    });

    // 获取或初始化背景主题（默认星空战场，存储中不存在的主题会自动回退）
    let savedBgTheme = localStorage.getItem('gameBgTheme');
    let currentBgTheme = bgThemes[savedBgTheme] ? savedBgTheme : 'starfield';

    // 各风格的背景图状态（默认关闭）
    let cardFaceBgState = {};
    try {
      const saved = JSON.parse(localStorage.getItem('cardFaceBgState'));
      if (saved && typeof saved === 'object') {
        cardFaceBgState = saved;
      }
    } catch (e) {}
    ['normal', 'glass', 'metal'].forEach(k => {
      if (typeof cardFaceBgState[k] !== 'boolean') cardFaceBgState[k] = true; // ★ 默认开启背景图（用户指定初始设置）
    });

    // 各风格对应的背景图
    // ★ 1v1模式（人机、联机）：使用各风格原始背景
    const cardFaceBgMap = {
      normal: 'background/经典-背景.png',
      glass: 'background/瓷器-背景.jpeg',
      metal: 'background/青铜-背景.png'
    };
    // ★ 2v2人机练习模式专用背景图（三种风格统一）
    const cardFaceBgMap2v2 = {
      normal: 'background/经典2背景.png',
      glass: 'background/经典2背景.png',
      metal: 'background/经典2背景.png'
    };
    // ★ 2v2在线匹配模式专用背景图（三种风格统一，双方拆分布局）
    const cardFaceBgMap2v2Online = {
      normal: 'background/经典-双人背景.png',
      glass: 'background/经典-双人背景.png',
      metal: 'background/经典-双人背景.png'
    };

    // 应用元素状态（对当前主题）
    function applyBgElementState() {
      const gameContainer = document.querySelector('.game-container');
      const bgDeco = document.getElementById('bg-decoration');
      const state = bgElementState[currentBgTheme];

      if (gameContainer) {
        if (state === 'off') {
          gameContainer.classList.add('bg-anim-off');
          if (bgDeco) bgDeco.style.display = 'none';
        } else if (state === 'static') {
          gameContainer.classList.add('bg-anim-off');
          if (bgDeco) bgDeco.style.display = '';
        } else {
          gameContainer.classList.remove('bg-anim-off');
          if (bgDeco) bgDeco.style.display = '';
        }
      }

      // 暂停/恢复 SVG SMIL 动画
      if (bgDeco && typeof bgDeco.pauseAnimations === 'function') {
        if (state === 'anim') bgDeco.unpauseAnimations();
        else bgDeco.pauseAnimations();
      }
    }

    // 应用背景图（对当前牌面风格）
    function applyCardFaceBg() {
      const gameContainer = document.querySelector('.game-container');
      if (!gameContainer) return;
      const on = cardFaceBgState[selectedCardFaceStyle];
      // ★ 2v2在线匹配模式使用专用背景图，2v2人机练习使用经典2背景，其他模式使用各风格原始背景
      // ★ 2026-9-18：2v2 回放（_rpReplay2v2Kind）同样使用对应模式的专属背景
      const isOnline2v2 = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) || window._rpReplay2v2Kind === 'online_2v2';
      const isPractice2v2 = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) || window._rpReplay2v2Kind === 'ai_2v2';
      let bgMap;
      if (isOnline2v2) {
        bgMap = cardFaceBgMap2v2Online;
      } else if (isPractice2v2) {
        bgMap = cardFaceBgMap2v2;
      } else {
        bgMap = cardFaceBgMap;
      }
      const url = bgMap[selectedCardFaceStyle];
      if (on && url) {
        gameContainer.style.backgroundImage = "url('" + url + "')";
        gameContainer.style.backgroundSize = 'cover';
        gameContainer.style.backgroundPosition = 'center';
        // ★ 背景开启时添加标记类，用于CSS控制手牌槽透明效果
        gameContainer.classList.add('style-bg-on');
      } else {
        gameContainer.style.backgroundImage = '';
        gameContainer.style.backgroundSize = '';
        gameContainer.style.backgroundPosition = '';
        // ★ 背景关闭时移除标记类，手牌槽恢复蓝/红背景
        gameContainer.classList.remove('style-bg-on');
      }

      const rankPanel = document.querySelector('.rank-panel');
      if (rankPanel) {
        rankPanel.style.transform = 'translateY(-50%)';
        updateRankPanelScale();
      }

      // 背景开启时隐藏中立区所有线条和边框（除非强制显示中立区线框）
      const forceNeutralBorder = !!window._forceNeutralBorder;
      const neutralAreas = document.querySelectorAll('.neutral-area');
      neutralAreas.forEach(area => {
        if (on && url && !forceNeutralBorder) {
          area.classList.add('neutral-bg-hidden');
          area.style.border = 'none';
          area.style.background = 'transparent';
          area.style.boxShadow = 'none';
          // 隐藏中立区内部所有slot的边框和阴影（用!important覆盖玻璃/金属风格）
          area.querySelectorAll('.player-neutral-slot, .opponent-neutral-slot').forEach(slot => {
            // ★ 卡通风格：木台槽位描边由样式表负责（2px #2d1a0e），清行内样式避免红/蓝缝
            if (gameContainer.classList.contains('card-style-cartoon')) {
              slot.style.removeProperty('border');
              slot.style.removeProperty('box-shadow');
              slot.style.removeProperty('background');
              return;
            }
            slot.style.setProperty('border', 'none', 'important');
            slot.style.setProperty('box-shadow', 'none', 'important');
            slot.style.setProperty('background', 'transparent', 'important');
          });
        } else {
          area.classList.remove('neutral-bg-hidden');
          area.style.border = '';
          area.style.background = '';
          area.style.boxShadow = '';
          area.querySelectorAll('.player-neutral-slot, .opponent-neutral-slot').forEach(slot => {
            // ★ 卡通风格：同上，清行内红/蓝描边交给卡通木台样式表
            if (gameContainer.classList.contains('card-style-cartoon')) {
              slot.style.removeProperty('border');
              slot.style.removeProperty('box-shadow');
              slot.style.removeProperty('background');
              return;
            }
            // ★ 用 !important 覆盖玻璃/金属风格 CSS 中的 border: none !important
            var isPlayer = slot.classList.contains('player-neutral-slot');
            var borderColor = isPlayer ? 'rgba(59, 130, 246, 0.5)' : 'rgba(239, 68, 68, 0.5)';
            slot.style.setProperty('border', '1px solid ' + borderColor, 'important');
            slot.style.setProperty('box-shadow', '', 'important');
            slot.style.setProperty('background', '', 'important');
          });
        }
      });
    }

    // 更新所有元素按钮的状态显示
    function refreshBgAnimButtons() {
      const _t = typeof __t === 'function' ? __t : function(k){ return k; };
      document.querySelectorAll('.bg-anim-btn').forEach(btn => {
        const themeId = btn.getAttribute('data-bg');
        const state = bgElementState[themeId];
        btn.classList.remove('active', 'off');
        if (state === 'anim') {
          btn.classList.add('active');
          btn.textContent = _t('btn_dynamic') || '动态';
        } else if (state === 'static') {
          btn.textContent = _t('btn_static') || '静态';
        } else {
          btn.classList.add('off');
          btn.textContent = _t('btn_close') || '关闭';
        }
      });
    }

    // 更新风格背景按钮状态
    function refreshCardFaceBgBtn() {
      const _t = typeof __t === 'function' ? __t : function(k){ return k; };
      const btn = document.getElementById('style-bg-btn');
      if (!btn) return;
      const on = cardFaceBgState[selectedCardFaceStyle];
      btn.classList.toggle('active', on);
      btn.textContent = on ? (_t('btn_bg') || '背景') : (_t('btn_close') || '关闭');
    }

    // 切换某个主题的元素状态（三态循环：anim → static → off → anim）
    function toggleBgElement(themeId) {
      if (!bgThemes[themeId]) return;
      const states = ['anim', 'static', 'off'];
      const cur = states.indexOf(bgElementState[themeId]);
      bgElementState[themeId] = states[(cur + 1) % 3];
      try { localStorage.setItem('gameBgElementState', JSON.stringify(bgElementState)); } catch (e) {}
      refreshBgAnimButtons();
      if (themeId === currentBgTheme) applyBgElementState();
    }

    // 切换当前牌面风格的背景图
    function toggleCardFaceBg() {
      cardFaceBgState[selectedCardFaceStyle] = !cardFaceBgState[selectedCardFaceStyle];
      try { localStorage.setItem('cardFaceBgState', JSON.stringify(cardFaceBgState)); } catch (e) {}
      refreshCardFaceBgBtn();
      applyCardFaceBg();
      // ★ 卷轴拼点栏仅在玻璃风格+关闭背景时显示：切换背景后立即刷新拼点栏样式
      if (document.querySelectorAll('.result-slot').length > 0 && typeof updateResults === 'function') updateResults();
      // ★ 经典风格牌堆金框仅在关闭背景时显示：切换背景后立即重绘牌堆
      if (typeof renderDeckCardBacks === 'function' && typeof GameState !== 'undefined' && GameState && GameState.gamePhase === 'playing') renderDeckCardBacks();
    }

    function applyBgTheme(themeId) {
      const theme = bgThemes[themeId];
      if (!theme) return;

      const gameContainer = document.querySelector('.game-container');
      if (gameContainer) {
        // 移除所有背景主题类
        Object.values(bgThemes).forEach(t => {
          gameContainer.classList.remove(t.class);
        });
        // 添加当前主题类
        gameContainer.classList.add(theme.class);
      }

      // 更新 SVG 装饰层
      const activeDeco = document.getElementById('active-deco');
      if (activeDeco) {
        activeDeco.setAttribute('href', '#' + theme.decoId);
      }

      // 更新按钮状态
      document.querySelectorAll('.bg-setting-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.getAttribute('data-bg') === themeId) {
          btn.classList.add('active');
        }
      });

      // 如果切到星空战场主题，重新随机生成星星位置和流星
      if (themeId === 'starfield') {
        if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
        if (typeof generateMeteors === 'function') generateMeteors();
      }

      // 保存设置
      currentBgTheme = themeId;
      localStorage.setItem('gameBgTheme', themeId);

      // 切换主题后，应用该主题的元素状态
      applyBgElementState();
    }

    // 初始化：应用保存的背景主题
    applyBgTheme(currentBgTheme);
    refreshBgAnimButtons();

    // 绑定背景主题按钮事件
    document.querySelectorAll('.bg-setting-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const themeId = this.getAttribute('data-bg');
        applyBgTheme(themeId);
      });
    });

    // 绑定"元素"按钮事件
    document.querySelectorAll('.bg-anim-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const themeId = this.getAttribute('data-bg');
        toggleBgElement(themeId);
      });
    });

    // 绑定风格"背景"按钮事件
    const styleBgBtn = document.getElementById('style-bg-btn');
    if (styleBgBtn) {
      styleBgBtn.addEventListener('click', toggleCardFaceBg);
    }

    // ----------------------------------------------------------------------------
    // 【核心模块流程图】
    // ----------------------------------------------------------------------------
    // 流程图面板切换 - 显示/隐藏核心模块调用流程图
    // 帮助开发者理解游戏的核心逻辑流程
    function toggleFlowchart() {
      const panel = document.getElementById('flowchart-panel');
      if (panel.style.display === 'none') {
        playSound('uiOpenSound');
        panel.style.display = 'block';
      } else {
        playSound('uiCloseSound');
        panel.style.display = 'none';
      }
    }
    
    // 流程图按钮事件绑定（核心模块流程图已移除，保留空实现避免引用错误）
    var _flowchartToggleBtn = document.getElementById('toggle-flowchart-btn');
    var _flowchartCloseBtn = document.getElementById('close-flowchart-btn');
    if (_flowchartToggleBtn) _flowchartToggleBtn.addEventListener('click', toggleFlowchart);
    if (_flowchartCloseBtn) _flowchartCloseBtn.addEventListener('click', toggleFlowchart);
    
    // 页面加载时初始化牌堆卡背配置（只配置，不显示完整外观）
    // 显示逻辑在 renderDeckCardBacks() 中，由 startGame() 触发调用
    let currentBlueCardBack = null;
    let currentRedCardBack = null;

    (function initDeckCardBacks() {
      const savedSelection = localStorage.getItem('cardBackSelection');
      let blueDesign = cardBackDesigns.blue.find(d => d.id === selectedBlueCardBack);
      let redDesign = cardBackDesigns.red.find(d => d.id === selectedRedCardBack);

      if (savedSelection) {
        try {
          const selection = JSON.parse(savedSelection);
          blueDesign = cardBackDesigns.blue.find(d => d.id === selection.blue) || blueDesign;
          redDesign = cardBackDesigns.red.find(d => d.id === selection.red) || redDesign;
          selectedBlueCardBack = selection.blue || selectedBlueCardBack;
          selectedRedCardBack = selection.red || selectedRedCardBack;
        } catch (e) {}
      }

      // 保存当前卡背设计（供 renderDeckCardBacks 后续调用）
      currentBlueCardBack = blueDesign;
      currentRedCardBack = redDesign;

      // 更新CardBackConfig，确保发牌时使用正确的卡背
      if (blueDesign) {
        CardBackConfig.player.gradient = blueDesign.background;
        CardBackConfig.player.innerHTML = blueDesign.svg;
      }
      if (redDesign) {
        CardBackConfig.opponent.gradient = redDesign.background;
        CardBackConfig.opponent.innerHTML = redDesign.svg;
      }

      // 检查localStorage中的卡面样式设置（因为initCardFaceStyleOnLoad可能还没执行）
      const savedStyle = localStorage.getItem('cardFaceStyle');
      const effectiveStyle = (savedStyle && (savedStyle === 'normal' || savedStyle === 'glass' || savedStyle === 'metal' || savedStyle === 'cartoon')) ? savedStyle : selectedCardFaceStyle;

      // ★ 经典风格容器标记（开始游戏/退出练习按钮等经典限定样式的作用域开关）
      const _gcCardStyle = document.querySelector('.game-container');
      if (_gcCardStyle) {
        if (effectiveStyle === 'metal' || effectiveStyle === 'glass') _gcCardStyle.classList.remove('card-style-classic');
        else _gcCardStyle.classList.add('card-style-classic');
        // ★ 卡通风格容器作用域开关（与上面 classic 同模式）
        if (effectiveStyle === 'cartoon') _gcCardStyle.classList.add('card-style-cartoon');
        else _gcCardStyle.classList.remove('card-style-cartoon');
      }

      // 初始状态（未开始游戏）：显示对应风格的空牌堆样式
      const initPlayerDeck = document.getElementById('player-deck');
      const initOpponentDeck = document.getElementById('opponent-deck');
      if (initPlayerDeck) {
        if (effectiveStyle === 'metal') {
          initPlayerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center';
          initPlayerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          initPlayerDeck.style.border = '3px solid #888888';
          initPlayerDeck.style.borderRadius = '8px';
          initPlayerDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          initPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (effectiveStyle === 'glass') {
          initPlayerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center';
          initPlayerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          initPlayerDeck.style.border = '4px solid rgba(255,255,255,0.95)';
          initPlayerDeck.style.borderRadius = '12px';
          initPlayerDeck.style.boxShadow = '0 0 2px rgba(200,220,255,0.9), 0 0 6px rgba(180,200,240,0.6), 0 0 50px rgba(120,200,255,0.6), inset 0 4px 10px rgba(0,40,100,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(0,40,100,0.6), inset -3px 0 8px rgba(0,40,100,0.6)';
          initPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (effectiveStyle === 'cartoon') {
          // ★ 2026-10-16 修复（用户报：门楼被无形的方框限制）：此前无 cartoon 分支，
          //   落入 else 带上 classic-deck-init 类 → 卡通兜底白底+白边框（5263 规则，
          //   !important）显形为门楼外的方框。改渲染城堡门楼关门态（悬停双门转入门轨）。
          initPlayerDeck.className = 'pb-gate-deck deck-container game-cursor-hover pb-gate-empty';
          initPlayerDeck.removeAttribute('style');
          initPlayerDeck.innerHTML = buildCartoonGateDeckHTML('p', null);
        } else {
          initPlayerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
          initPlayerDeck.removeAttribute('style');
          initPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        }
        GameElements.player.deckCount = document.getElementById('player-deck-count');
      }
      if (initOpponentDeck) {
        if (effectiveStyle === 'metal') {
          initOpponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center';
          initOpponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          initOpponentDeck.style.border = '3px solid #888888';
          initOpponentDeck.style.borderRadius = '8px';
          initOpponentDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          initOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (effectiveStyle === 'glass') {
          initOpponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center';
          initOpponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          initOpponentDeck.style.border = '4px solid rgba(255,240,240,0.95)';
          initOpponentDeck.style.borderRadius = '12px';
          initOpponentDeck.style.boxShadow = '0 0 2px rgba(255,200,200,0.9), 0 0 6px rgba(255,160,160,0.6), 0 0 50px rgba(255,150,150,0.6), inset 0 4px 10px rgba(140,20,20,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(140,20,20,0.6), inset -3px 0 8px rgba(140,20,20,0.6)';
          initOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (effectiveStyle === 'cartoon') {
          // ★ 2026-10-16 修复：同 player——cartoon 空牌堆渲染城堡门楼关门态
          initOpponentDeck.className = 'pb-gate-deck deck-container game-cursor-hover no-hover-anim pb-gate-empty';
          initOpponentDeck.removeAttribute('style');
          initOpponentDeck.innerHTML = buildCartoonGateDeckHTML('o', null);
        } else {
          initOpponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
          initOpponentDeck.removeAttribute('style');
          initOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        }
        GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
      }
    })();

    // 经典风格金框美化判定：仅关闭背景时生效（开背景保持原版边框不变）
    function _isClassicBgOn() {
      const gc = document.querySelector('.game-container');
      return !!(gc && gc.classList.contains('style-bg-on'));
    }

    // 将牌堆渲染为完整卡背（在 startGame 时调用）
    function renderDeckCardBacks() {
      const playerDeck = document.getElementById('player-deck');
      const opponentDeck = document.getElementById('opponent-deck');
      const blueDesign = currentBlueCardBack;
      const redDesign = currentRedCardBack;
      const playerDeckCount = GameState && GameState.playerDeck ? GameState.playerDeck.length : 26;
      const opponentDeckCount = GameState && GameState.opponentDeck ? GameState.opponentDeck.length : 26;

      if (playerDeck && blueDesign) {
        let uniqueSvg = blueDesign.svg;
        uniqueSvg = uniqueSvg.replace(/id="([^"]+)"/g, `id="deck-blue-${blueDesign.id}-$1"`);
        uniqueSvg = uniqueSvg.replace(/url\(#([^)]+)\)/g, `url(#deck-blue-${blueDesign.id}-$1)`);
        uniqueSvg = uniqueSvg.replace(/<svg/i, '<svg style="position:absolute;top:0;left:0;width:100%;height:100%;"');

        // ★ 卡通风格牌堆 = 城堡门楼（2026-10-14 实装）：有牌门常开+门洞卡背堆+数量木牌+悬停冒烟；
        //   牌堆打光(count=0)转关门态
        if (selectedCardFaceStyle === 'cartoon') {
          const _pGateHas = playerDeckCount > 0;
          playerDeck.className = 'pb-gate-deck deck-container game-cursor-hover' + (_pGateHas ? ' pb-gate-has' : ' pb-gate-empty');
          playerDeck.removeAttribute('style');
          playerDeck.innerHTML = buildCartoonGateDeckHTML('p', _pGateHas ? playerDeckCount : null);
          bindGateSmoke(playerDeck);
        } else if (selectedCardFaceStyle === 'glass') {
          const glassConfig = GlassCardFaceConfig.player;
          const edgeHighlight = glassConfig.edgeHighlight;
          const glassTopHighlight = glassConfig.glassTopHighlight;
          const metalOverlay = glassConfig.metalOverlay;
          playerDeck.className = 'deck-container game-cursor-hover card-hover glass-deck-blue';
          playerDeck.style.padding = '0';
          playerDeck.style.background = 'none';
          playerDeck.style.border = 'none';
          playerDeck.style.borderRadius = glassConfig.borderRadius;
          playerDeck.style.boxShadow = 'none';
          playerDeck.innerHTML = `
            <div style="width:100%;height:100%;border:none;border-radius:${glassConfig.borderRadius};box-shadow:0 0 2px rgba(200,220,255,0.9), 0 0 6px rgba(180,200,240,0.6), 0 0 50px rgba(120,200,255,0.6), inset 0 4px 10px rgba(0,40,100,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(0,40,100,0.6), inset -3px 0 8px rgba(0,40,100,0.6);">
              <div style="width:100%;height:100%;background:${blueDesign.background};border-radius:${parseInt(glassConfig.borderRadius)-2}px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                ${uniqueSvg}
                <div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${glassTopHighlight}pointer-events:none;z-index:2;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                <div style="position:absolute;top:0;left:0;width:100%;height:35%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                <div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${glassConfig.borderRadius} ${glassConfig.borderRadius};transform:rotate(180deg);"></div>
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                <div id="player-deck-count" class="deck-count" style="position:relative;z-index:5;">${playerDeckCount}</div>
              </div>
            </div>
          `;
        } else if (selectedCardFaceStyle === 'metal') {
          const metalConfig = MetalCardFaceConfig.player;
          const archFrameHTML = `<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;">
             <svg viewBox="0 0 200 300" preserveAspectRatio="none" style="width:100%;height:100%;">
               <defs>
                 <linearGradient id="archGrad1_p_render" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="35%" stop-color="#fff"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="70%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="100%" stop-color="${metalConfig.archInnerColor}"/>
                 </linearGradient>
                 <linearGradient id="archGrad2_p_render" x1="0%" y1="0%" x2="0%" y2="100%">
                   <stop offset="0%" stop-color="#fff"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="80%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="100%" stop-color="#111"/>
                 </linearGradient>
                 <linearGradient id="archGrad3_p_render" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="#333"/>
                   <stop offset="50%" stop-color="#555"/>
                   <stop offset="100%" stop-color="#333"/>
                 </linearGradient>
                 <filter id="archGlow_p_render">
                   <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
                   <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                 </filter>
               </defs>
               <path d="M10 50 Q100 -20 190 50 L190 270 L10 270 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 54 Q100 -15 186 54 L186 266 L14 266 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 58 Q100 -10 182 58 L182 262 L18 262 Z" fill="none" stroke="url(#archGrad1_p_render)" stroke-width="6" filter="url(#archGlow_p_render)"/>
               <path d="M24 65 Q100 -2 176 65 L176 256 L24 256 Z" fill="none" stroke="url(#archGrad2_p_render)" stroke-width="4"/>
               <path d="M30 72 Q100 8 170 72 L170 250 L30 250 Z" fill="none" stroke="url(#archGrad3_p_render)" stroke-width="2"/>
               <path d="M10 250 Q100 320 190 250 L190 30 L10 30 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 246 Q100 315 186 246 L186 34 L14 34 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 242 Q100 310 182 242 L182 38 L18 38 Z" fill="none" stroke="url(#archGrad1_p_render)" stroke-width="6" filter="url(#archGlow_p_render)"/>
               <path d="M24 235 Q100 302 176 235 L176 44 L24 44 Z" fill="none" stroke="url(#archGrad2_p_render)" stroke-width="4"/>
               <path d="M30 228 Q100 292 170 228 L170 50 L30 50 Z" fill="none" stroke="url(#archGrad3_p_render)" stroke-width="2"/>
               <g fill="#888"><circle cx="22" cy="22" r="4"/><circle cx="178" cy="22" r="4"/><circle cx="22" cy="278" r="4"/><circle cx="178" cy="278" r="4"/></g>
               <g fill="#666"><circle cx="28" cy="28" r="2"/><circle cx="172" cy="28" r="2"/><circle cx="28" cy="272" r="2"/><circle cx="172" cy="272" r="2"/></g>
             </svg>
           </div>`;
          playerDeck.className = 'deck-container game-cursor-hover card-hover metal-deck-blue';
          playerDeck.style.padding = '0';
          playerDeck.style.background = 'none';
          playerDeck.style.border = 'none';
          playerDeck.style.borderRadius = metalConfig.borderRadius;
          playerDeck.style.boxShadow = 'none';
          playerDeck.innerHTML = `
            <div style="width:100%;height:100%;${metalConfig.metalBorder};border-radius:${metalConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
              <div style="width:100%;height:100%;background:${blueDesign.background};border-radius:${parseInt(metalConfig.borderRadius)-2}px;box-shadow:${metalConfig.shadow};${metalConfig.innerShadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                ${uniqueSvg}
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>
                <div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>
                ${archFrameHTML}
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                <div id="player-deck-count" class="deck-count" style="position:relative;z-index:5;">${playerDeckCount}</div>
              </div>
            </div>
          `;
        } else {
          playerDeck.className = 'deck-container game-cursor-hover card-hover classic-deck-live';
          playerDeck.style.position = 'relative';
          playerDeck.style.background = blueDesign.background;
          playerDeck.style.borderRadius = CardFaceConfig.player.borderRadius;
          if (_isClassicBgOn()) {
            playerDeck.style.border = 'none';
            playerDeck.style.boxShadow = CardFaceConfig.player.shadow;
          } else {
            playerDeck.style.border = '2px solid transparent';
            playerDeck.style.boxShadow = '0 6px 14px rgba(0,0,0,0.45)';
          }
          playerDeck.innerHTML = uniqueSvg + '<div id="player-deck-count" class="deck-count">' + playerDeckCount + '</div>';
        }
        GameElements.player.deckCount = document.getElementById('player-deck-count');
      }

      if (opponentDeck && redDesign) {
        let uniqueSvg = redDesign.svg;
        uniqueSvg = uniqueSvg.replace(/id="([^"]+)"/g, `id="deck-red-${redDesign.id}-$1"`);
        uniqueSvg = uniqueSvg.replace(/url\(#([^)]+)\)/g, `url(#deck-red-${redDesign.id}-$1)`);
        uniqueSvg = uniqueSvg.replace(/<svg/i, '<svg style="position:absolute;top:0;left:0;width:100%;height:100%;"');

        // ★ 卡通风格牌堆 = 城堡门楼（2026-10-14 实装）：与玩家牌堆同款（suffix 'o'）
        if (selectedCardFaceStyle === 'cartoon') {
          const _oGateHas = opponentDeckCount > 0;
          opponentDeck.className = 'pb-gate-deck deck-container game-cursor-hover' + (_oGateHas ? ' pb-gate-has' : ' pb-gate-empty');
          opponentDeck.removeAttribute('style');
          opponentDeck.innerHTML = buildCartoonGateDeckHTML('o', _oGateHas ? opponentDeckCount : null);
          bindGateSmoke(opponentDeck);
        } else if (selectedCardFaceStyle === 'glass') {
          const glassConfig = GlassCardFaceConfig.opponent;
          const edgeHighlight = glassConfig.edgeHighlight;
          const glassTopHighlight = glassConfig.glassTopHighlight;
          const metalOverlay = glassConfig.metalOverlay;
          opponentDeck.className = 'deck-container game-cursor-hover glass-deck-red no-hover-anim';
          opponentDeck.style.padding = '0';
          opponentDeck.style.background = 'none';
          opponentDeck.style.border = 'none';
          opponentDeck.style.borderRadius = glassConfig.borderRadius;
          opponentDeck.style.boxShadow = 'none';
          opponentDeck.innerHTML = `
            <div style="width:100%;height:100%;border:none;border-radius:${glassConfig.borderRadius};box-shadow:0 0 2px rgba(255,200,200,0.9), 0 0 6px rgba(255,160,160,0.6), 0 0 50px rgba(255,150,150,0.6), inset 0 4px 10px rgba(140,20,20,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(140,20,20,0.6), inset -3px 0 8px rgba(140,20,20,0.6);">
              <div style="width:100%;height:100%;background:${redDesign.background};border-radius:${parseInt(glassConfig.borderRadius)-2}px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                ${uniqueSvg}
                <div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${glassTopHighlight}pointer-events:none;z-index:2;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                <div style="position:absolute;top:0;left:0;width:100%;height:35%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:${glassConfig.borderRadius} ${glassConfig.borderRadius} 0 0;"></div>
                <div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${glassConfig.borderRadius} ${glassConfig.borderRadius};transform:rotate(180deg);"></div>
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                <div id="opponent-deck-count" class="deck-count" style="position:relative;z-index:5;">${opponentDeckCount}</div>
              </div>
            </div>
          `;
        } else if (selectedCardFaceStyle === 'metal') {
          const metalConfig = MetalCardFaceConfig.opponent;
          const archFrameHTML = `<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;">
             <svg viewBox="0 0 200 300" preserveAspectRatio="none" style="width:100%;height:100%;">
               <defs>
                 <linearGradient id="archGrad1_o_render" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="35%" stop-color="#fff"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="70%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="100%" stop-color="${metalConfig.archInnerColor}"/>
                 </linearGradient>
                 <linearGradient id="archGrad2_o_render" x1="0%" y1="0%" x2="0%" y2="100%">
                   <stop offset="0%" stop-color="#fff"/>
                   <stop offset="20%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="50%" stop-color="${metalConfig.archColor}"/>
                   <stop offset="80%" stop-color="${metalConfig.archInnerColor}"/>
                   <stop offset="100%" stop-color="#111"/>
                 </linearGradient>
                 <linearGradient id="archGrad3_o_render" x1="0%" y1="0%" x2="100%" y2="0%">
                   <stop offset="0%" stop-color="#333"/>
                   <stop offset="50%" stop-color="#555"/>
                   <stop offset="100%" stop-color="#333"/>
                 </linearGradient>
                 <filter id="archGlow_o_render">
                   <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
                   <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
                 </filter>
               </defs>
               <path d="M10 50 Q100 -20 190 50 L190 270 L10 270 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 54 Q100 -15 186 54 L186 266 L14 266 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 58 Q100 -10 182 58 L182 262 L18 262 Z" fill="none" stroke="url(#archGrad1_o_render)" stroke-width="6" filter="url(#archGlow_o_render)"/>
               <path d="M24 65 Q100 -2 176 65 L176 256 L24 256 Z" fill="none" stroke="url(#archGrad2_o_render)" stroke-width="4"/>
               <path d="M30 72 Q100 8 170 72 L170 250 L30 250 Z" fill="none" stroke="url(#archGrad3_o_render)" stroke-width="2"/>
               <path d="M10 250 Q100 320 190 250 L190 30 L10 30 Z" fill="none" stroke="#222" stroke-width="12"/>
               <path d="M14 246 Q100 315 186 246 L186 34 L14 34 Z" fill="none" stroke="#444" stroke-width="8"/>
               <path d="M18 242 Q100 310 182 242 L182 38 L18 38 Z" fill="none" stroke="url(#archGrad1_o_render)" stroke-width="6" filter="url(#archGlow_o_render)"/>
               <path d="M24 235 Q100 302 176 235 L176 44 L24 44 Z" fill="none" stroke="url(#archGrad2_o_render)" stroke-width="4"/>
               <path d="M30 228 Q100 292 170 228 L170 50 L30 50 Z" fill="none" stroke="url(#archGrad3_o_render)" stroke-width="2"/>
               <g fill="#888"><circle cx="22" cy="22" r="4"/><circle cx="178" cy="22" r="4"/><circle cx="22" cy="278" r="4"/><circle cx="178" cy="278" r="4"/></g>
               <g fill="#666"><circle cx="28" cy="28" r="2"/><circle cx="172" cy="28" r="2"/><circle cx="28" cy="272" r="2"/><circle cx="172" cy="272" r="2"/></g>
             </svg>
           </div>`;
          opponentDeck.className = 'deck-container game-cursor-hover metal-deck-red no-hover-anim';
          opponentDeck.style.padding = '0';
          opponentDeck.style.background = 'none';
          opponentDeck.style.border = 'none';
          opponentDeck.style.borderRadius = metalConfig.borderRadius;
          opponentDeck.style.boxShadow = 'none';
          opponentDeck.innerHTML = `
            <div style="width:100%;height:100%;${metalConfig.metalBorder};border-radius:${metalConfig.borderRadius};padding:2px;box-shadow:0 6px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3);">
              <div style="width:100%;height:100%;background:${redDesign.background};border-radius:${parseInt(metalConfig.borderRadius)-2}px;box-shadow:${metalConfig.shadow};${metalConfig.innerShadow};position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;">
                ${uniqueSvg}
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>
                <div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>
                ${archFrameHTML}
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;${metalConfig.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>
                <div id="opponent-deck-count" class="deck-count" style="position:relative;z-index:5;">${opponentDeckCount}</div>
              </div>
            </div>
          `;
        } else {
          opponentDeck.className = 'deck-container game-cursor-hover no-hover-anim classic-deck-live';
          opponentDeck.style.position = 'relative';
          opponentDeck.style.background = redDesign.background;
          opponentDeck.style.borderRadius = CardFaceConfig.opponent.borderRadius;
          if (_isClassicBgOn()) {
            opponentDeck.style.border = 'none';
            opponentDeck.style.boxShadow = CardFaceConfig.opponent.shadow;
          } else {
            opponentDeck.style.border = '2px solid transparent';
            opponentDeck.style.boxShadow = '0 6px 14px rgba(0,0,0,0.45)';
          }
          opponentDeck.innerHTML = uniqueSvg + '<div id="opponent-deck-count" class="deck-count">' + opponentDeckCount + '</div>';
        }
        GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
      }
    }

    // 初始化卡面样式（页面加载时）
    (function initCardFaceStyleOnLoad() {
      const savedStyle = localStorage.getItem('cardFaceStyle');
      if (savedStyle && (savedStyle === 'normal' || savedStyle === 'glass' || savedStyle === 'metal')) {
        selectedCardFaceStyle = savedStyle;
      }
    })();

    // ----------------------------------------------------------------------------
    // 【全屏模式】
    // ----------------------------------------------------------------------------
    // 切换全屏/退出全屏
    // Electron：走主进程窗口级 setFullScreen（与 F11 同路径）——HTML5 Fullscreen API
    //   在 Electron 安装版中被拒绝导致"点击全屏无反应"（2026-9-15 修复）；
    // 浏览器：走原生 Fullscreen API
    // 按钮颜色：进入全屏 → 蓝色（选中）；退出全屏 → 灰蓝色（未选中）
    function setFullscreenMode() {
      if (window.pbWindow && window.pbWindow.setFullscreen) {
        var _on = !(window.pbWindow.isFullscreen && window.pbWindow.isFullscreen());
        window.pbWindow.setFullscreen(_on);
        // setFullScreen 异步完成，稍后刷新按钮选中态（fullscreenchange 事件不会触发）
        setTimeout(function () { updateFullscreenBtnStyle(); }, 150);
        setTimeout(function () { updateFullscreenBtnStyle(); }, 400);
        return;
      }
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(function() {});
      } else {
        document.exitFullscreen().catch(function() {});
      }
    }

    function isFullscreenActive() {
      if (window.pbWindow && window.pbWindow.isFullscreen) return !!window.pbWindow.isFullscreen();
      return !!document.fullscreenElement;
    }

    function onFullscreenBtnHover(btn) {
      if (isFullscreenActive()) {
        btn.style.background = '#60a5fa';
        btn.style.borderColor = '#93c5fd';
        btn.style.color = 'white';
      } else {
        btn.style.background = '#475569';
        btn.style.borderColor = '#64748b';
        btn.style.color = '#e2e8f0';
      }
    }

    function updateFullscreenBtnStyle(btn) {
      const targetBtn = btn || document.getElementById('fullscreen-btn');
      if (!targetBtn) return;
      if (isFullscreenActive()) {
        targetBtn.style.background = '#2563eb';
        targetBtn.style.borderColor = '#60a5fa';
        targetBtn.style.color = 'white';
      } else {
        targetBtn.style.background = '#334155';
        targetBtn.style.borderColor = '#475569';
        targetBtn.style.color = '#94a3b8';
      }
    }

    document.getElementById('fullscreen-btn').addEventListener('click', setFullscreenMode);
    document.addEventListener('fullscreenchange', function() {
      updateFullscreenBtnStyle();
      updateWinmodeOptions();  // 同步主页 ⛶ 滑块状态（网页版全屏走 HTML5 API）
    });
    setTimeout(function() { updateFullscreenBtnStyle(); }, 0);

    // 【无边框窗口模式】(2026-9-15)：仅 Electron 环境显示（window.pbWindow 存在）；
    // 点击在 borderless/windowed 间切换，主进程原生改窗口样式原地生效（页面不重载），模式持久化到主进程。
    function isBorderlessMode() {
      return !!(window.pbWindow && window.pbWindow.getMode && window.pbWindow.getMode() === 'borderless');
    }

    function updateBorderlessBtnStyle(btn) {
      const targetBtn = btn || document.getElementById('borderless-btn');
      if (!targetBtn) return;
      if (isBorderlessMode()) {
        targetBtn.style.background = '#2563eb';
        targetBtn.style.borderColor = '#60a5fa';
        targetBtn.style.color = 'white';
      } else {
        targetBtn.style.background = '#334155';
        targetBtn.style.borderColor = '#475569';
        targetBtn.style.color = '#94a3b8';
      }
    }

    function onBorderlessBtnHover(btn) {
      if (isBorderlessMode()) {
        btn.style.background = '#60a5fa';
        btn.style.borderColor = '#93c5fd';
        btn.style.color = 'white';
      } else {
        btn.style.background = '#475569';
        btn.style.borderColor = '#64748b';
        btn.style.color = '#e2e8f0';
      }
    }

    function setBorderlessMode() {
      if (!window.pbWindow || !window.pbWindow.setMode) {
        // 网页版：浏览器无法去掉自身边框，给出提示（2026-9-15 同步网页/桌面 UI）
        var dict = window.__gameTranslations && window.__gameTranslations[__gameCurrentLang];
        showNotification((dict && dict['wm_borderless_web']) || '无边框窗口仅桌面版支持');
        return;
      }
      const next = isBorderlessMode() ? 'windowed' : 'borderless';
      // 2026-9-15 第四轮：立即生效——主进程原生改 WS_CAPTION 原地切换（页面不重载）
      window.pbWindow.setMode(next).catch(function () {});
    }

    // 主页左下角滑块状态：蓝滑块+白粗字=当前已应用的模式；灰色滑块=悬停预览；灰色无滑块=未应用
    function updateWinmodeOptions() {
      const thumb = document.getElementById('wm-thumb');
      const fullOpt = document.getElementById('wm-opt-full');
      const blOpt = document.getElementById('wm-opt-borderless');
      if (!thumb || !fullOpt || !blOpt) return;
      const fs = isFullscreenActive();
      const bl = isBorderlessMode();
      thumb.classList.remove('preview');
      thumb.style.transform = fs ? 'translateX(0px)' : 'translateX(92px)';
      thumb.style.opacity = (fs || bl) ? '1' : '0';
      fullOpt.classList.toggle('active', fs);
      blOpt.classList.toggle('active', bl);
    }

    (function initBorderlessBtn() {
      const btn = document.getElementById('borderless-btn');
      if (!btn) return;
      // 2026-9-15：网页版同样显示设置内无边框按钮与主页 ⛶ 按钮（与 exe 一模一样）；
      // 网页上点击无边框仅提示（见 setBorderlessMode），全屏走 HTML5 API。
      btn.style.display = '';
      updateBorderlessBtnStyle(btn);
      btn.addEventListener('click', function () { setBorderlessMode(); });
      // 主页左下角：⛶ 图标按钮，悬停向右展开滑块（切换全屏/无边框），与 BGM 控件同逻辑（2026-9-15）
      const wrap = document.getElementById('winmode-wrap');
      const fullOpt = document.getElementById('wm-opt-full');
      const blOpt = document.getElementById('wm-opt-borderless');
      const track = document.getElementById('wm-track');
      const thumb = document.getElementById('wm-thumb');
      if (wrap && fullOpt && blOpt && track && thumb) {
        wrap.style.display = 'flex';
        updateWinmodeOptions();
        // 悬停预览：滑块滑到悬停项（灰色=预览，蓝色=已应用）；移开后回到已应用状态
        function previewOpt(opt, pos) {
          return function () {
            thumb.classList.toggle('preview', !opt.classList.contains('active'));
            thumb.style.transform = 'translateX(' + pos + 'px)';
            thumb.style.opacity = '1';
          };
        }
        fullOpt.addEventListener('mouseenter', previewOpt(fullOpt, 0));
        blOpt.addEventListener('mouseenter', previewOpt(blOpt, 92));
        track.addEventListener('mouseleave', updateWinmodeOptions);
        fullOpt.addEventListener('click', function (e) {
          e.stopPropagation();
          if (window.pbWindow && window.pbWindow.setFullscreen) {
            // Electron：走主进程 setFullScreen（安装版 HTML5 全屏被拒绝）
            window.pbWindow.setFullscreen(!window.pbWindow.isFullscreen());
          } else if (document.fullscreenElement) {
            // 网页版：HTML5 Fullscreen API
            document.exitFullscreen().catch(function () {});
          } else if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen().catch(function () {});
          }
          setTimeout(updateWinmodeOptions, 150);
          setTimeout(updateWinmodeOptions, 450);
        });
        blOpt.addEventListener('click', function (e) {
          e.stopPropagation();
          setBorderlessMode();  // 原地生效（原生改窗口样式，页面不重载）
          setTimeout(updateWinmodeOptions, 100);
        });
      }
    })();

    // ----------------------------------------------------------------------------
    // 【音量控制】
    // ----------------------------------------------------------------------------
    // 音效音量和音乐音量滑块，值保存到localStorage持久化
    //   sfxSlider:    音效音量滑块(0-100%)
    //   musicSlider:  音乐音量滑块(0-100%)
    // 初始化：从localStorage读取保存值，同步到 SoundConfig 和UI显示
    const sfxSlider = document.getElementById('sfx-volume-slider');
    const sfxValue = document.getElementById('sfx-volume-value');
    const savedSfx = localStorage.getItem('sfxVolume');
    if (savedSfx !== null) {
      const sfx = Math.max(0, Math.min(1, parseFloat(savedSfx)));
      SoundConfig.sfxVolume = sfx;
      sfxSlider.value = Math.round(sfx * 100);
      sfxValue.textContent = Math.round(sfx * 100) + '%';
    }
    sfxSlider.addEventListener('input', function() {
      SoundConfig.sfxVolume = Math.max(0, Math.min(1, this.value / 100));
      sfxValue.textContent = this.value + '%';
      localStorage.setItem('sfxVolume', SoundConfig.sfxVolume);
    });

    const musicSlider = document.getElementById('music-volume-slider');
    const musicValue = document.getElementById('music-volume-value');
    const savedMusic = localStorage.getItem('musicVolume');
    if (savedMusic !== null) {
      const music = Math.max(0, Math.min(1, parseFloat(savedMusic)));
      SoundConfig.musicVolume = music;
      musicSlider.value = Math.round(music * 100);
      musicValue.textContent = Math.round(music * 100) + '%';
    }
    musicSlider.addEventListener('input', function() {
      SoundConfig.musicVolume = Math.max(0, Math.min(1, this.value / 100));
      musicValue.textContent = this.value + '%';
      localStorage.setItem('musicVolume', SoundConfig.musicVolume);
    });

    // BGM 音量滑块（设置面板 + 主页左下角），值保存到 localStorage 持久化
    //   bgmVolumeSlider        主页左下角控制器滑块
    //   bgmVolumeValue         主页左下角百分比显示
    //   bgmVolumeSliderSettings  设置面板滑块
    //   bgmVolumeValueSettings   设置面板百分比显示
    const bgmVolumeSlider = document.getElementById('bgm-volume-slider');
    const bgmVolumeValue = document.getElementById('bgm-volume-value');
    const bgmVolumeSliderSettings = document.getElementById('bgm-volume-slider-settings');
    const bgmVolumeValueSettings = document.getElementById('bgm-volume-value-settings');
    const savedBgm = localStorage.getItem('bgmVolume');
    if (savedBgm !== null) {
      const bgm = Math.max(0, Math.min(1, parseFloat(savedBgm)));
      SoundConfig.bgmVolume = bgm;
      if (bgmVolumeSlider) bgmVolumeSlider.value = Math.round(bgm * 100);
      if (bgmVolumeValue) bgmVolumeValue.textContent = Math.round(bgm * 100) + '%';
      if (bgmVolumeSliderSettings) bgmVolumeSliderSettings.value = Math.round(bgm * 100);
      if (bgmVolumeValueSettings) bgmVolumeValueSettings.textContent = Math.round(bgm * 100) + '%';
    }
    function onBGMVolumeInput(val) {
      const v = Math.max(0, Math.min(1, val / 100));
      setBGMVolume(v);
      localStorage.setItem('bgmVolume', SoundConfig.bgmVolume);
      const pct = Math.round(SoundConfig.bgmVolume * 100) + '%';
      if (bgmVolumeSlider) bgmVolumeSlider.value = Math.round(SoundConfig.bgmVolume * 100);
      if (bgmVolumeValue) bgmVolumeValue.textContent = pct;
      if (bgmVolumeSliderSettings) bgmVolumeSliderSettings.value = Math.round(SoundConfig.bgmVolume * 100);
      if (bgmVolumeValueSettings) bgmVolumeValueSettings.textContent = pct;
    }
    if (bgmVolumeSlider) {
      bgmVolumeSlider.addEventListener('input', function() { onBGMVolumeInput(this.value); });
    }
    if (bgmVolumeSliderSettings) {
      bgmVolumeSliderSettings.addEventListener('input', function() { onBGMVolumeInput(this.value); });
    }
    // 滚轮调节 BGM 音量：悬停在音量控制器/滑块上时，每次滚动 5%
    function bindBGMWheel(el) {
      if (!el) return;
      el.addEventListener('wheel', function(e) {
        e.preventDefault();
        const cur = Math.round((SoundConfig.bgmVolume || 0) * 100);
        const next = e.deltaY > 0 ? cur - 5 : cur + 5;
        onBGMVolumeInput(Math.max(0, Math.min(100, next)));
      }, { passive: false });
    }
    bindBGMWheel(document.getElementById('bgm-volume-control'));
    bindBGMWheel(document.getElementById('bgm-volume-slider-settings'));

    // ---- 语音音量设置 ----
    var voiceVolumeSliderSettings = document.getElementById('voice-volume-slider-settings');
    var voiceVolumeValueSettings = document.getElementById('voice-volume-value-settings');
    var savedVoiceVol = localStorage.getItem('voiceVolume');
    if (savedVoiceVol !== null) {
      var vv = Math.max(0, Math.min(1, parseFloat(savedVoiceVol)));
      SoundConfig.voiceVolume = vv;
      if (voiceVolumeSliderSettings) voiceVolumeSliderSettings.value = Math.round(vv * 100);
      if (voiceVolumeValueSettings) voiceVolumeValueSettings.textContent = Math.round(vv * 100) + '%';
    }
    function onVoiceVolumeInput(val) {
      var v = Math.max(0, Math.min(1, val / 100));
      SoundConfig.voiceVolume = v;
      localStorage.setItem('voiceVolume', v);
      var pct = Math.round(v * 100) + '%';
      if (voiceVolumeSliderSettings) voiceVolumeSliderSettings.value = Math.round(v * 100);
      if (voiceVolumeValueSettings) voiceVolumeValueSettings.textContent = pct;
      // 应用到所有 WebRTC 远端 audio 元素
      document.querySelectorAll('[id^="voice-remote-"]').forEach(function(el) {
        el.volume = v;
      });
    }
    if (voiceVolumeSliderSettings) {
      voiceVolumeSliderSettings.addEventListener('input', function() { onVoiceVolumeInput(this.value); });
    }

    // 滚轮调节音效/音乐音量：悬停在滑块上时，每次滚动 5%
    function bindVolumeWheel(slider, valueEl, applyFn) {
      if (!slider) return;
      slider.addEventListener('wheel', function(e) {
        e.preventDefault();
        const cur = parseInt(slider.value, 10) || 0;
        const next = e.deltaY > 0 ? cur - 5 : cur + 5;
        const clamped = Math.max(0, Math.min(100, next));
        // 同步滑块、百分比显示与配置
        slider.value = clamped;
        if (valueEl) valueEl.textContent = clamped + '%';
        if (typeof applyFn === 'function') applyFn(clamped);
      }, { passive: false });
    }
    // 语音音量：悬停滚轮调节
    bindVolumeWheel(voiceVolumeSliderSettings, voiceVolumeValueSettings, function(v) { onVoiceVolumeInput(v); });
    // 音效音量：悬停滚轮调节
    bindVolumeWheel(sfxSlider, sfxValue, function(v) {
      SoundConfig.sfxVolume = v / 100;
      localStorage.setItem('sfxVolume', SoundConfig.sfxVolume);
    });
    // 音乐音量：悬停滚轮调节
    bindVolumeWheel(musicSlider, musicValue, function(v) {
      SoundConfig.musicVolume = v / 100;
      localStorage.setItem('musicVolume', SoundConfig.musicVolume);
    });
    
    // ----------------------------------------------------------------------------
    // 【先手设置】
    // ----------------------------------------------------------------------------
    // 设置谁先手出牌: random(随机)/player(我方)/opponent(对方)
    // 仅在游戏准备阶段(setup)可修改，值保存到localStorage持久化
    // 【AI策略模板模式】悬停与选中态：紫色系/灰蓝色系，与AI策略按钮完全统一
    function setFirstPlayer(setting) {
      if (GameState.gamePhase !== 'setup') {
        showNotification('游戏进行中无法修改先手设置');
        return;
      }
      GameState.firstPlayerSetting = setting;
      updateFirstPlayerBtnStyle(setting);
      localStorage.setItem('firstPlayerSetting', setting);
    }

    // 先手按钮悬停：与 AI 策略按钮完全相同的视觉模式
    // 选中的按钮悬停：变亮紫；未选中的按钮悬停：变亮灰
    function onFirstPlayerBtnHover(btn, setting) {
      if (setting === GameState.firstPlayerSetting) {
        btn.style.background = '#8b5cf6';
        btn.style.borderColor = '#a78bfa';
        btn.style.color = 'white';
      } else {
        btn.style.background = '#475569';
        btn.style.borderColor = '#475569';
        btn.style.color = 'white';
      }
    }

    // 刷新先手按钮状态：与 AI 策略按钮 updateAIBtnStyle 相同的模式
    // 根据全局 GameState.firstPlayerSetting 遍历刷新所有按钮
    function updateFirstPlayerBtnStyle(setting) {
      const btns = {
        'random': document.getElementById('first-random-btn'),
        'player': document.getElementById('first-player-btn'),
        'opponent': document.getElementById('first-opponent-btn')
      };

      for (const [key, btn] of Object.entries(btns)) {
        if (btn) {
          if (key === GameState.firstPlayerSetting) {
            btn.style.background = '#7c3aed';
            btn.style.borderColor = '#a78bfa';
            btn.style.color = 'white';
          } else {
            btn.style.background = '#334155';
            btn.style.borderColor = '#475569';
            btn.style.color = '#94a3b8';
          }
        }
      }
    }
    
    document.getElementById('first-random-btn').addEventListener('click', () => setFirstPlayer('random'));
    document.getElementById('first-player-btn').addEventListener('click', () => setFirstPlayer('player'));
    document.getElementById('first-opponent-btn').addEventListener('click', () => setFirstPlayer('opponent'));
    
    // 加载保存的先手设置
    const savedFirstPlayer = localStorage.getItem('firstPlayerSetting');
    if (savedFirstPlayer && ['random', 'player', 'opponent'].includes(savedFirstPlayer)) {
      setFirstPlayer(savedFirstPlayer);
    } else {
      updateFirstPlayerBtnStyle(GameState.firstPlayerSetting);
    }

    // ----------------------------------------------------------------------------
    // 【对局模式设置】（双人/四人）
    // ----------------------------------------------------------------------------
    // 全局变量：对局人数设置（'2'=双人，'4'=四人）
    window.playerCountSetting = localStorage.getItem('playerCountSetting') || '2';

    // 对局模式设置已移至主页"人机练习"子菜单（单人1v1/人机2v1）
    // window.playerCountSetting 仍被使用，但设置入口改为 startPracticeGame1v1/2v2

    // ----------------------------------------------------------------------------
    // 【叫牌设置】
    // ----------------------------------------------------------------------------
    // 仅在游戏准备阶段(setup)可修改，开启后：玩家打出暗牌/牌堆到路牌区后，卡牌保持背面，下方弹出"叫牌"提示
    function setCallCard(enabled) {
      if (GameState.gamePhase !== 'setup') {
        showNotification('游戏进行中无法修改叫牌设置');
        return;
      }
      GameState.callCardEnabled = enabled;
      localStorage.setItem('callCardEnabled', enabled ? 'true' : 'false');
      updateCallCardBtnStyle();
    }

    function updateCallCardBtnStyle() {
      const onBtn = document.getElementById('call-card-on-btn');
      const offBtn = document.getElementById('call-card-off-btn');
      if (!onBtn || !offBtn) return;

      if (GameState.callCardEnabled) {
        // 开启状态
        onBtn.style.background = '#7c3aed';
        onBtn.style.borderColor = '#a78bfa';
        onBtn.style.color = 'white';
        // 关闭按钮恢复默认
        offBtn.style.background = '#334155';
        offBtn.style.borderColor = '#475569';
        offBtn.style.color = '#94a3b8';
      } else {
        // 关闭状态
        offBtn.style.background = '#7c3aed';
        offBtn.style.borderColor = '#a78bfa';
        offBtn.style.color = 'white';
        // 开启按钮恢复默认
        onBtn.style.background = '#334155';
        onBtn.style.borderColor = '#475569';
        onBtn.style.color = '#94a3b8';
      }
    }

    const callCardOnBtn = document.getElementById('call-card-on-btn');
    const callCardOffBtn = document.getElementById('call-card-off-btn');
    if (callCardOnBtn) {
      callCardOnBtn.addEventListener('click', function () {
        if (!GameState.pendingCallCard) {
          setCallCard(true);
        } else {
          updateGameStatus(__t('st_call_wait'), 'st_call_wait');
        }
      });
    }
    if (callCardOffBtn) {
      callCardOffBtn.addEventListener('click', function () {
        if (!GameState.pendingCallCard) {
          setCallCard(false);
        } else {
          updateGameStatus(__t('st_call_wait'), 'st_call_wait');
        }
      });
    }

    // 加载保存的叫牌设置
    const savedCallCard = localStorage.getItem('callCardEnabled');
    if (savedCallCard === 'true') {
      setCallCard(true);
    } else {
      setCallCard(false);
    }

    // ----------------------------------------------------------------------------
    // 【叫牌提示 UI】
    // ----------------------------------------------------------------------------
    // showCallCardPrompt: 在路牌区待叫牌的卡牌下方弹出"叫牌"提示
    // 悬停时显示光环，点击光环内触发叫牌，点击光环外取消叫牌
    function showCallCardPrompt(roadIndex, card, isField, callbacks, _retry) {
      // ★ 提示框使用 fixed 定位挂到 body，直接以屏幕像素计算位置，
      //   并限制在视口内，避免缩放/靠边路牌时错位或出屏。
      // ★ 2v2联机中卡牌可能尚未完成布局（getBoundingClientRect 返回 0），
      //   故对"找不到路牌槽/找不到卡牌/卡牌尚未布局"做短延迟重试；
      //   超过上限则用路牌槽位置兜底，极端情况回退到视口底部中央，
      //   确保提示框永远不会落到左上角(8,6)。
      _retry = _retry || 0;

      // 找到目标路牌区容器
      const roadSlot = document.querySelector('.player-road-slot[data-road-slot="' + roadIndex + '"]');
      if (!roadSlot) {
        // ★ 2v2联机中路牌槽可能尚未渲染，延迟重试（最多约1秒）
        if (_retry < 12) {
          setTimeout(function () { showCallCardPrompt(roadIndex, card, isField, callbacks, _retry + 1); }, 80);
          return;
        }
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          PBOnline.sendCallCardCancel({});
        }
        if (callbacks && callbacks.onCancel) callbacks.onCancel();
        return;
      }

      // 找到该路牌区的卡牌元素
      const cardEls = roadSlot.querySelectorAll('.card, .card-small');
      if (cardEls.length === 0) {
        // ★ 卡牌可能在动画中尚未渲染，延迟重试（最多约1秒）
        if (_retry < 12) {
          setTimeout(function () { showCallCardPrompt(roadIndex, card, isField, callbacks, _retry + 1); }, 80);
          return;
        }
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          PBOnline.sendCallCardCancel({});
        }
        if (callbacks && callbacks.onCancel) callbacks.onCancel();
        return;
      }

      // 场牌位 → 第一张牌；叠牌位 → 最后一张牌
      // ★ 2v2 下路牌槽里可能同时有"真实卡牌 + match-glow/占位 等附属元素"，
      //   它们也匹配 .card/.card-small 选择器；附属元素往往 height=0，
      //   而真实可见的卡牌有 height。先过滤掉无效元素，再按 isField 选择第一张或最后一张。
      let targetCardEl;
      function _pickBestCardEl(els, preferField) {
        // 先过滤出"有效"的卡牌元素（面积 > 0）
        const validEls = [];
        for (let i = 0; i < els.length; i++) {
          const el = els[i];
          if (!el) continue;
          const r = el.getBoundingClientRect();
          const area = (r.width > 0 ? r.width : 0) * (r.height > 0 ? r.height : 0);
          if (area > 0) validEls.push({ el, idx: i, area });
        }
        // 按 isField 选择：场牌选第一张（DOM顺序），叠牌选最后一张（DOM顺序，即最新打出的）
        if (validEls.length > 0) {
          const chosen = preferField ? validEls[0] : validEls[validEls.length - 1];
          return chosen.el;
        }
        // 全部退化时，按场牌/叠牌规则选第一个/最后一个
        return preferField ? els[0] : els[els.length - 1];
      }
      targetCardEl = _pickBestCardEl(cardEls, isField);

      // 计算卡牌的屏幕位置（取中点作为定位基准）
      // ★ 2v2联机中卡牌可能尚未完成布局或退化成"宽>0但高=0"等非全零无效矩形。
      //   _isValidCardRect 判断：尺寸合理 + 大致在视口内（边界放宽，避免把靠下/靠边的
      //   合法卡牌误判为无效）。无效时优先用 requestAnimationFrame 重试；超过上限
      //   用 _getSafeRect 兜底，根据 isField 在路牌槽内的"卡牌该在的位置"生成矩形，
      //   保证提示框始终贴近卡牌，不会落到路牌槽最底端或左上角。
      function _isValidCardRect(r) {
        if (!r) return false;
        // ★ 阈值只需过滤"尚未布局完成、返回0x0的元素"，不用拒绝合法小卡牌
        //   .card-small 设计坐标高约 28.75px，阈值设为 10 可安全通过
        //   同时考虑缩放：屏幕像素阈值 = 设计坐标阈值 * scale
        const _s = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
        const _minSize = 10 * _s;
        if (r.width < _minSize || r.height < _minSize) return false;
        const _vw = window.innerWidth || 1920;
        const _vh = window.innerHeight || 1080;
        // 放宽边界：允许贴边（视口 10% 内仍算合法），只在严重出屏时才判无效
        if (r.bottom < 0 || r.top > _vh) return false;
        if (r.right < 0 || r.left > _vw) return false;
        return true;
      }
      function _getSafeRect() {
        const _slotRect = roadSlot.getBoundingClientRect();
        if (_isValidCardRect(_slotRect)) {
          // ★ 路牌槽矩形有效时，按 isField 推断卡牌在槽内的位置：
          //   场牌(isField) → 槽顶部；叠牌 → 槽底部。这样提示框"贴在卡牌下方"，
          //   而不是被推到路牌槽最底端（之前在 2v2 下距离卡牌太远）。
          const _vh = window.innerHeight || 1080;
          const _cardH = 96;
          const _pad = 6;
          if (isField) {
            const _top = Math.max(20, Math.min(_slotRect.top + 16, _vh - _cardH - 20));
            return {
              left: _slotRect.left, top: _top,
              right: _slotRect.right, bottom: _top + _cardH,
              width: _slotRect.width, height: _cardH
            };
          } else {
            // 叠牌：卡牌在槽底部
            const _bottom = Math.max(_slotRect.top + _cardH + 20, _slotRect.bottom - 16);
            const _top = _bottom - _cardH;
            return {
              left: _slotRect.left, top: _top,
              right: _slotRect.right, bottom: _bottom,
              width: _slotRect.width, height: _cardH
            };
          }
        }
        // 路牌槽也无效时（极端兜底）：视口底部中央
        return {
          left: ((window.innerWidth || 1920) - 64) / 2,
          top: (window.innerHeight || 1080) - 120,
          right: ((window.innerWidth || 1920) - 64) / 2 + 64,
          bottom: (window.innerHeight || 1080) - 24,
          width: 64,
          height: 96
        };
      }
      let cardRect = targetCardEl.getBoundingClientRect();
      if (!_isValidCardRect(cardRect)) {
        if (_retry < 12) {
          // 等一帧再试，确保布局/动画完成
          requestAnimationFrame(function () {
            setTimeout(function () { showCallCardPrompt(roadIndex, card, isField, callbacks, _retry + 1); }, 40);
          });
          return;
        }
        // 超过重试上限：用路牌槽矩形兜底（绝不可能落到左上角）
        cardRect = _getSafeRect();
      }

      // 阶段状态: 'phase1'(显示叫牌按钮) | 'phase2'(输入牌点阶段)
      let phase = 'phase1';
      // 期望输入的牌点数量: 叫牌成功次数+1，最多5个
      const expectedInputCount = Math.min(GameState.callCardSuccessCount + 1, 5);
      // 输入缓冲区: 玩家输入的字符
      let inputBuffer = '';
      // 是否正在抖动
      let isShaking = false;

      // ★ 缩放规则：提示框作为对战内元素，放进 .game-container 用 1920×1080 设计坐标绝对定位，
      //   随容器 transform: scale() 整体同步等比例缩放，无需 resize 监听。
      //   卡牌 getBoundingClientRect() 返回屏幕像素，需除以 currentGameScale 转回设计坐标。
      //   ★ _toDesign 每次调用都重新读取 currentGameScale 和容器 rect，避免闭包捕获旧值导致双重缩放。
      function _toDesign(screenRect) {
        const gc = document.querySelector('.game-container');
        const s = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
        const gcr = gc ? gc.getBoundingClientRect() : { left: 0, top: 0 };
        return {
          left: (screenRect.left - gcr.left) / s,
          top: (screenRect.top - gcr.top) / s,
          width: screenRect.width / s,
          height: screenRect.height / s,
          bottom: (screenRect.bottom - gcr.top) / s,
          right: (screenRect.right - gcr.left) / s
        };
      }
      // ★ 2026-10-11 修复（用户报：卡通叫牌提示与打出卡牌之间缺乏间隙）：
      //   叫牌时卡牌保持背面 = 果冻卡背，底部有 7px 实心厚度影（box-shadow 0 7px 0，
      //   不占 getBoundingClientRect）——其他风格卡背无实心底影，标准 6px 间隙在卡通下
      //   被影吃掉，提示框视觉上贴住/压住卡底。卡通时补偿到 13（6 间隙 + 7 底影），
      //   其他风格维持 6 不变。
      const _GAP = (typeof selectedCardFaceStyle !== 'undefined' && selectedCardFaceStyle === 'cartoon') ? 13 : 6; // 设计坐标下的间隙（px），随缩放等比例变化

      // 创建提示容器（阶段1宽度=卡牌宽度，阶段2宽度=120px用于输入牌点）
      const wrapper = document.createElement('div');
      wrapper.id = 'call-card-prompt';
      wrapper.style.position = 'absolute'; // ★ 绝对定位在 .game-container 内（1920×1080 设计坐标）
      // ★ 用设计坐标计算位置，限制在 0..1920 范围内
      const _initDRect = _toDesign(cardRect);
      wrapper.style.left = Math.max(0, Math.min(_initDRect.left, 1920 - _initDRect.width)) + 'px';
      wrapper.style.top = (_initDRect.bottom + _GAP) + 'px';
      wrapper.style.width = _initDRect.width + 'px'; // 阶段1：宽度 = 卡牌宽度（设计坐标）
      wrapper.style.zIndex = '9999';
      wrapper.style.pointerEvents = 'auto';
      wrapper.style.display = 'flex';
      wrapper.style.flexDirection = 'column';
      wrapper.style.gap = '4px';

      // 阶段1: 叫牌按钮 (较大)
      const phase1Btn = document.createElement('div');
      phase1Btn.style.cssText = `
        width: 100%;
        height: 44px;
        background: linear-gradient(135deg, #1e3a8a, #3b82f6);
        border: 2px solid #60a5fa;
        border-radius: 10px;
        color: white;
        font-weight: bold;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
        transition: all 0.2s ease;
        user-select: none;
      `;
      phase1Btn.textContent = '叫牌';

      // 阶段2: 提示文字 + 输入显示
      const hintText = document.createElement('div');
      hintText.style.cssText = `
        width: 100%;
        background: linear-gradient(135deg, #1e3a8a, #3b82f6);
        border: 2px solid #60a5fa;
        border-radius: 6px 6px 0 0;
        color: white;
        font-size: 13px;
        padding: 6px 6px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
        user-select: none;
        line-height: 1.2;
      `;
      hintText.textContent = '请输入' + expectedInputCount + '个牌点';

      const inputDisplay = document.createElement('div');
      inputDisplay.style.cssText = `
        width: 100%;
        height: 40px;
        background: rgba(30, 41, 59, 0.95);
        border: 2px solid #60a5fa;
        border-top: none;
        border-radius: 0 0 6px 6px;
        color: #fbbf24;
        font-weight: bold;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 2px;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
        user-select: none;
      `;
      inputDisplay.textContent = '_'.repeat(expectedInputCount);

      // 阶段1按钮悬停光环效果
      const haloOnHover = function () {
        phase1Btn.style.boxShadow = '0 0 20px 6px rgba(96, 165, 250, 0.8), 0 0 40px 12px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(59, 130, 246, 0.4)';
        phase1Btn.style.borderColor = '#93c5fd';
        phase1Btn.style.background = 'linear-gradient(135deg, #3b82f6, #60a5fa)';
        phase1Btn.style.transform = 'scale(1.05)';
      };
      const haloOffHover = function () {
        phase1Btn.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.4)';
        phase1Btn.style.borderColor = '#60a5fa';
        phase1Btn.style.background = 'linear-gradient(135deg, #1e3a8a, #3b82f6)';
        phase1Btn.style.transform = 'scale(1)';
      };

      phase1Btn.addEventListener('mouseenter', haloOnHover);
      phase1Btn.addEventListener('mouseleave', haloOffHover);

      // 阶段1: 点击"叫牌"进入输入阶段
      phase1Btn.addEventListener('click', function (event) {
        event.stopPropagation();
        enterPhase2();
      });

      // 进入输入阶段
      function enterPhase2() {
        phase = 'phase2';
        // ★ 2v2 联机下 updateUI() 可能在 phase1→phase2 之间被网络消息触发重渲染，
        //   旧的 targetCardEl 被替换为 detached 元素，getBoundingClientRect() 返回全0
        //   → 走兜底用路牌槽底部，距离真实卡牌 24~30px 而不是 6px。
        //   修复：检查 targetCardEl.isConnected，detached 时从路牌槽重新查询真实卡牌。
        let _curCard = (targetCardEl && targetCardEl.isConnected) ? targetCardEl : null;
        if (!_curCard) {
          const _rSlot = document.querySelector('.player-road-slot[data-road-slot="' + roadIndex + '"]');
          if (_rSlot) {
            const _cEls = _rSlot.querySelectorAll('.card, .card-small');
            if (_cEls.length > 0) _curCard = _pickBestCardEl(_cEls, isField);
          }
          if (_curCard) targetCardEl = _curCard;
        }
        const _rawRect = (_curCard && _isValidCardRect(_curCard.getBoundingClientRect()))
          ? _curCard.getBoundingClientRect()
          : _getSafeRect();
        const _dR = _toDesign(_rawRect);
        wrapper.style.width = '120px';
        // ★ 用设计坐标计算位置并限制在 0..1920 范围内
        const _desiredLeft = _dR.left + _dR.width / 2 - 60;
        wrapper.style.left = Math.max(0, Math.min(_desiredLeft, 1920 - 120)) + 'px';
        wrapper.style.top = (_dR.bottom + _GAP) + 'px';
        // 清空阶段1按钮，替换为阶段2布局
        wrapper.innerHTML = '';
        wrapper.appendChild(hintText);
        wrapper.appendChild(inputDisplay);
        // 提示文字和输入框都可点击（激活输入）
        hintText.style.cursor = 'pointer';
        inputDisplay.style.cursor = 'pointer';
        inputBuffer = '';
        inputDisplay.textContent = '_'.repeat(expectedInputCount);
      }

      // 显示抖动效果
      function shake() {
        if (isShaking) return;
        isShaking = true;
        wrapper.style.animation = 'bidShake 0.4s ease-in-out';
        wrapper.style.borderRadius = '10px';
        setTimeout(function () {
          wrapper.style.animation = '';
          isShaking = false;
        }, 400);
      }

      // 解析输入的牌点值
      // 规则: 10 → 10; 1或A/a → 1; 2-9 → 对应数字; J/j → 11; Q/q → 12; K/k → 13
      // 返回: { values: number[] } 或 { error: string }
      function parseBidInput(input) {
        if (!input || input.trim() === '') {
          return { error: 'empty' };
        }

        const trimmed = input.trim().toUpperCase();

        // 验证输入只包含合法字符
        // 合法字符: 0-9, A, J, Q, K
        const validChars = /^[0-9AJQK]+$/;
        if (!validChars.test(trimmed)) {
          return { error: 'invalid' };
        }

        // 解析所有牌点: 先找 "10"（两字符），再处理剩余单字符
        let remaining = trimmed;
        let values = [];

        // 先找 "10"
        while (remaining.indexOf('10') !== -1) {
          values.push(10);
          remaining = remaining.replace('10', '');
        }

        // 解析剩余字符
        for (let i = 0; i < remaining.length; i++) {
          const ch = remaining[i];
          if (ch === 'A') values.push(1);
          else if (ch === '1') values.push(1);
          else if (ch === 'J') values.push(11);
          else if (ch === 'Q') values.push(12);
          else if (ch === 'K') values.push(13);
          else if (/[2-9]/.test(ch)) values.push(parseInt(ch));
          else return { error: 'invalid' };
        }

        if (values.length === 0) {
          return { error: 'invalid' };
        }

        if (values.length > expectedInputCount) {
          return { error: 'tooMany' };
        }

        if (values.length < expectedInputCount) {
          return { error: 'notEnough' };
        }

        return { values: values };
      }

      // 验证并完成叫牌
      function tryConfirm() {
        const result = parseBidInput(inputBuffer);
        if (result.error === 'empty') {
          // 未输入任何牌点，视为取消
          // 联机/2v2：通知对方/队友取消叫牌
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendCallCardCancel({});
          }
          cleanup();
          if (callbacks && callbacks.onCancel) callbacks.onCancel();
        } else if (result.error === 'tooMany') {
          // 牌点数量超过限制
          shake();
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_call_limit'), 'st_call_limit');
          }
          inputBuffer = '';
          inputDisplay.textContent = '_'.repeat(expectedInputCount);
        } else if (result.error === 'notEnough') {
          // 牌点数量不足
          shake();
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_input_points').replace('{n}', expectedInputCount), 'st_input_points');
          }
          inputBuffer = '';
          inputDisplay.textContent = '_'.repeat(expectedInputCount);
        } else if (result.error === 'invalid') {
          // 输入错误
          shake();
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_input_correct_points'), 'st_input_correct_points');
          }
          inputBuffer = '';
          inputDisplay.textContent = '_'.repeat(expectedInputCount);
        } else {
          // 成功确认: 传递牌点数组
          cleanup();
          if (callbacks && callbacks.onCall) callbacks.onCall(result.values);
        }
      }

      // 清理函数
      function cleanup() {
        if (wrapper && wrapper.parentNode) {
          wrapper.parentNode.removeChild(wrapper);
        }
        document.removeEventListener('click', documentClickListener, true);
        document.removeEventListener('keydown', keyDownListener, true);
        window.removeEventListener('resize', positionUpdate);
      }

      // ★ 将 cleanup 暴露到 wrapper 元素上，供外部（超时处理等）正确清理事件监听器
      wrapper._cleanup = cleanup;

      // 文档级点击监听
      function documentClickListener(event) {
        // 如果点击的是提示元素，不处理
        if (wrapper.contains(event.target)) {
          // 在阶段2中，点击提示区域只是激活输入（已经在输入状态了）
          return;
        }

        // 阶段1: 点击外部 = 取消叫牌
        // 阶段2: 点击外部 = 验证并确认叫牌
        if (phase === 'phase1') {
          // 联机/2v2：通知对方/队友取消叫牌
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendCallCardCancel({});
          }
          cleanup();
          if (callbacks && callbacks.onCancel) callbacks.onCancel();
        } else {
          tryConfirm();
        }
      }

      // 计算已输入的牌点数量
      function getInputCardCount(buffer) {
        let count = 0;
        let i = 0;
        while (i < buffer.length) {
          if (buffer[i] === '1' && i + 1 < buffer.length && buffer[i + 1] === '0') {
            count++;
            i += 2;
          } else {
            count++;
            i++;
          }
        }
        return count;
      }

      // 键盘输入监听
      function keyDownListener(event) {
        // ESC 总是取消
        if (event.key === 'Escape') {
          // 联机/2v2：通知对方/队友取消叫牌
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendCallCardCancel({});
          }
          cleanup();
          if (callbacks && callbacks.onCancel) callbacks.onCancel();
          return;
        }

        // 仅阶段2接受输入
        if (phase !== 'phase2') return;

        // Backspace 删除最后一个字符
        if (event.key === 'Backspace') {
          event.preventDefault();
          if (inputBuffer.length > 0) {
            inputBuffer = inputBuffer.slice(0, -1);
            inputDisplay.textContent = inputBuffer || '_'.repeat(expectedInputCount);
            // 联机：同步输入给对方
            syncCallCardInput();
          }
          return;
        }

        // Enter 直接确认当前输入
        if (event.key === 'Enter') {
          event.preventDefault();
          tryConfirm();
          return;
        }

        // 接受字符输入: 0-9, A/a, J/j, Q/q, K/k
        const key = event.key;
        if (/^[0-9aAjJqQkK]$/.test(key)) {
          event.preventDefault();
          const upperKey = key.toUpperCase();
          const currentCount = getInputCardCount(inputBuffer);
          
          // 如果输入的是"0"，必须和前面的"1"组成"10"
          if (upperKey === '0') {
            if (inputBuffer.length > 0 && inputBuffer[inputBuffer.length - 1] === '1') {
              inputBuffer += upperKey;
              inputDisplay.textContent = inputBuffer;
              // 联机：同步输入给对方
              syncCallCardInput();
            }
            return;
          }
          
          // 如果当前已输入牌点数达到上限，不再接受新输入
          if (currentCount >= expectedInputCount) {
            return;
          }
          
          inputBuffer += upperKey;
          inputDisplay.textContent = inputBuffer;
          // 联机：同步输入给对方
          syncCallCardInput();
        }
      }

      // 联机/2v2：同步当前输入给对方/队友
      function syncCallCardInput() {
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          PBOnline.sendCallCardInput({ input: inputBuffer });
        }
      }

      // 窗口大小变化时的安全网（提示框已在 .game-container 内，缩放由容器自动处理；
      //   此函数仅在卡牌因 updateUI 重渲染而移位时重新对齐，使用设计坐标）
      function positionUpdate() {
        // ★ 同 enterPhase2：targetCardEl 可能被 updateUI 替换为 detached 元素，需重新查询
        let _curCard = (targetCardEl && targetCardEl.isConnected) ? targetCardEl : null;
        if (!_curCard) {
          const _rSlot = document.querySelector('.player-road-slot[data-road-slot="' + roadIndex + '"]');
          if (_rSlot) {
            const _cEls = _rSlot.querySelectorAll('.card, .card-small');
            if (_cEls.length > 0) _curCard = _pickBestCardEl(_cEls, isField);
          }
          if (_curCard) targetCardEl = _curCard;
        }
        const _rawRect = (_curCard && _isValidCardRect(_curCard.getBoundingClientRect()))
          ? _curCard.getBoundingClientRect()
          : _getSafeRect();
        const _dR = _toDesign(_rawRect);
        if (phase === 'phase1') {
          wrapper.style.width = _dR.width + 'px';
          wrapper.style.left = Math.max(0, Math.min(_dR.left, 1920 - _dR.width)) + 'px';
        } else {
          wrapper.style.width = '120px';
          const _desiredLeft = _dR.left + _dR.width / 2 - 60;
          wrapper.style.left = Math.max(0, Math.min(_desiredLeft, 1920 - 120)) + 'px';
        }
        wrapper.style.top = (_dR.bottom + _GAP) + 'px';
      }

      // 初始: 显示阶段1按钮
      wrapper.appendChild(phase1Btn);
      // ★ 挂载到 .game-container（非 body），用绝对定位+设计坐标，随容器同步等比例缩放
      const _gc0 = document.querySelector('.game-container');
      if (_gc0) {
        _gc0.appendChild(wrapper);
      } else {
        document.body.appendChild(wrapper); // 极端兜底
      }

      // 联机/2v2模式：通知对方/队友我方正进入叫牌状态
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        PBOnline.sendCallCardPending({
          roadIndex: roadIndex,
          cardId: card.id,
          isField: isField,
          expectedInputCount: expectedInputCount,
          // ★ 携带出牌方座位号：2v2联机中接收方据此判断叫牌者是队友（牌在己方路牌区）
          //   还是对手（牌在对方路牌区），以正确定位叫牌提示
          playerIdx: (typeof PBOnline.playerIdx === 'number') ? PBOnline.playerIdx : undefined
        });
      }

      // 延迟添加文档级监听，防止当前点击事件冒泡立即触发取消
      // ★ 不再注册 resize 监听：提示框在 .game-container 内，随容器 transform: scale() 自动同步缩放
      setTimeout(function () {
        document.addEventListener('click', documentClickListener, true);
        document.addEventListener('keydown', keyDownListener, true);
      }, 50);
    }

    // ============================================================================
    // 【叫牌掀缝动画】pbPlayCallLiftReveal
    // 卡背在翻开前：从右侧微微掀起（透视 rotateY）；光芒层挂 body（fixed + 页面
    // 坐标），避开路牌区 overflow:hidden 裁剪；掀开期间光束像歌厅射灯一样
    // 旋转晃动照射桌面。返回 Promise，动画结束后 resolve（约 1.55s）
    // ============================================================================
    function pbPlayCallLiftReveal(targetCardEl) {
      return new Promise(function (resolve) {
        if (!targetCardEl || !targetCardEl.isConnected) { resolve(); return; }
        try {
          // 光芒层挂 body（fixed + 视口坐标），子元素可自由外溢到桌面
          const rect = targetCardEl.getBoundingClientRect();
          const glow = document.createElement('div');
          glow.className = 'pb-call-glow';
          glow.style.left = rect.left + 'px';
          glow.style.top = rect.top + 'px';
          glow.style.width = rect.width + 'px';
          glow.style.height = rect.height + 'px';
          const warm = document.createElement('div');
          warm.className = 'pb-call-warm';
          glow.appendChild(warm);
          const seam = document.createElement('div');
          seam.className = 'pb-call-seam';
          glow.appendChild(seam);
          const floor = document.createElement('div');
          floor.className = 'pb-call-floor';
          glow.appendChild(floor);
          document.body.appendChild(glow);

          targetCardEl.classList.add('pb-call-lift');
          // 整体原封不动放大：独立 scale 属性（与 transform 翻转互不干扰），平滑减速、同步结束
          try {
            if (targetCardEl.animate) {
              targetCardEl.animate(
                [{ scale: '1' }, { scale: '1.16' }],
                { duration: 1550, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'forwards' }
              );
            }
          } catch (e) {}
          let finished = false;
          const finishOnce = function () {
            if (finished) return;
            finished = true;
            try {
              targetCardEl.classList.remove('pb-call-lift');
              if (glow.parentNode) glow.parentNode.removeChild(glow);
            } catch (e) {}
            resolve();
          };
          targetCardEl.addEventListener('animationend', function h(ev) {
            if (ev.animationName === 'pbCallLift') {
              targetCardEl.removeEventListener('animationend', h);
              finishOnce();
            }
          });
          setTimeout(finishOnce, 1750); // 兜底：animationend 未触发时也放行
        } catch (e) {
          resolve();
        }
      });
    }

    // ============================================================================
    // 【叫牌成功动画】playCallCardSuccessAnimation
    // ============================================================================
    // 动画顺序: 金光划过卡牌(上→下) → 金色光球飞入得分栏 → 得分栏闪光
    //           同时卡牌四周生成灰尘粒子
    // 参数: targetCardEl - 刚翻开的卡牌 DOM 元素
    // ============================================================================
    function playCallCardSuccessAnimation(targetCardEl, isCardTypeBonus) {
      if (!targetCardEl) return;

      // === 步骤 1: 金漆从下至上刷过卡牌，同时卡牌缩小 (1.1s) ===
      const cardRect = targetCardEl.getBoundingClientRect();

      // 1.1 金光遮罩（覆盖在卡牌上，裁切光带范围）
      const sweepOverlay = document.createElement('div');
      sweepOverlay.className = 'gold-sweep';
      sweepOverlay.style.left = cardRect.left + 'px';
      sweepOverlay.style.top = cardRect.top + 'px';
      sweepOverlay.style.width = cardRect.width + 'px';
      sweepOverlay.style.height = cardRect.height + 'px';
      document.body.appendChild(sweepOverlay);

      // 1.2 主金色光带：从下至上移动
      const paintBand = document.createElement('div');
      paintBand.className = 'gold-paint-band';
      sweepOverlay.appendChild(paintBand);

      // 1.3 第二层光带：更细更亮，稍后启动
      const paintBand2 = document.createElement('div');
      paintBand2.className = 'gold-paint-band2';
      sweepOverlay.appendChild(paintBand2);

      // 1.4 光带经过路径随机生成金色闪烁颗粒（从下往上）
      for (let i = 0; i < 10; i++) {
        setTimeout(function () {
          if (!sweepOverlay.parentNode) return;
          const spark = document.createElement('div');
          spark.className = 'gold-spark';
          spark.style.left = (10 + Math.random() * 80) + '%';
          spark.style.top = (70 - i * 7 + Math.random() * 5) + '%';
          spark.style.animationDelay = (Math.random() * 0.15) + 's';
          sweepOverlay.appendChild(spark);
          setTimeout(function () { spark.remove(); }, 700);
        }, 150 + i * 90);
      }

      // 1.5 卡牌缩小（金漆期间）
      targetCardEl.classList.add('card-call-shrink');

      // === 步骤 2: 金漆结束 — 卡牌突然放大弹跳，金光从卡牌上方弹出 (1100ms 处) ===
      setTimeout(function () {
        // 移除金漆遮罩
        sweepOverlay.remove();

        // 卡牌停止缩小，开始弹跳放大
        targetCardEl.classList.remove('card-call-shrink');
        targetCardEl.classList.add('card-call-pop');

        // 0.4s 后移除弹跳动画类
        setTimeout(function () {
          targetCardEl.classList.remove('card-call-pop');
        }, 400);

        // === 步骤 3: 金光从卡牌上方弹出，弧形坠入目标位置 ===
        // 根据 isCardTypeBonus 决定目标：true→有效牌型得分，false→总分
        const targetElId = isCardTypeBonus ? 'player-card-score' : 'player-total-score';
        const scoreEl = document.getElementById(targetElId);
        const scoreRect = scoreEl ? scoreEl.getBoundingClientRect() : null;

        if (scoreRect) {
          // 起点：卡牌正上方 40px 处（从卡牌"顶"部弹出）
          const startX = cardRect.left + cardRect.width / 2;
          const startY = cardRect.top - 40;

          // 终点：目标得分栏中心
          const endX = scoreRect.left + scoreRect.width / 2;
          const endY = scoreRect.top + scoreRect.height / 2;

          // 3.1 创建光球（从卡牌上方弹出）
          const orb = document.createElement('div');
          orb.className = 'lightning-orb';
          orb.style.left = (startX - 16) + 'px';
          orb.style.top = (startY - 16) + 'px';
          document.body.appendChild(orb);

          // 3.2 弧形飞行动画（抛物线）
          const duration = 900;
          const startTime = performance.now();
          let lastTrailTime = 0;

          function animateOrb(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);

            // X 方向：直线匀速
            const posX = startX + (endX - startX) * progress;

            // Y 方向：抛物线弧线（先向上再向下坠入）
            const arcHeight = 120;
            const parabola = -4 * arcHeight * progress * (progress - 1);
            const posY = startY + (endY - startY) * progress - parabola;

            orb.style.left = (posX - 16) + 'px';
            orb.style.top = (posY - 16) + 'px';

            const orbSize = 32 + Math.sin(progress * Math.PI) * 10;
            orb.style.width = orbSize + 'px';
            orb.style.height = orbSize + 'px';

            // 在飞行路径上生成金色尾迹
            if (elapsed - lastTrailTime > 25) {
              lastTrailTime = elapsed;

              const trail = document.createElement('div');
              trail.className = 'lightning-trail';
              trail.style.left = (posX - 6) + 'px';
              trail.style.top = (posY - 6) + 'px';
              trail.style.width = '12px';
              trail.style.height = '12px';
              document.body.appendChild(trail);
              setTimeout(function () { trail.remove(); }, 500);

              if (Math.random() < 0.4 && progress > 0.1 && progress < 0.9) {
                const branch = document.createElement('div');
                branch.className = 'lightning-branch';
                const branchAngle = Math.PI / 2 + (Math.random() - 0.5) * Math.PI;
                const branchLen = 25 + Math.random() * 25;
                const branchEndX = posX + Math.cos(branchAngle) * branchLen;
                const branchEndY = posY + Math.sin(branchAngle) * branchLen;
                const branchMidX = (posX + branchEndX) / 2;
                const branchMidY = (posY + branchEndY) / 2;
                const branchRot = (branchAngle * 180 / Math.PI) + 90;
                branch.style.left = branchMidX + 'px';
                branch.style.top = branchMidY + 'px';
                branch.style.height = branchLen + 'px';
                branch.style.transform = 'translate(-50%, -50%) rotate(' + branchRot + 'deg)';
                document.body.appendChild(branch);
                setTimeout(function () { branch.remove(); }, 350);
              }
            }

            if (progress < 1) {
              requestAnimationFrame(animateOrb);
            } else {
              // 到达终点：光球爆发
              orb.remove();

              if (scoreEl) {
                // 到达时的爆发效果
                for (let i = 0; i < 8; i++) {
                  const burst = document.createElement('div');
                  burst.className = 'lightning-trail';
                  const offsetX = (Math.random() - 0.5) * 60;
                  const offsetY = (Math.random() - 0.5) * 60;
                  burst.style.left = (endX + offsetX - 5) + 'px';
                  burst.style.top = (endY + offsetY - 5) + 'px';
                  burst.style.width = '14px';
                  burst.style.height = '14px';
                  document.body.appendChild(burst);
                  setTimeout(function () { burst.remove(); }, 700);
                }

                // 得分栏闪光放大
                scoreEl.classList.add('score-flash');
                setTimeout(function () {
                  scoreEl.classList.remove('score-flash');
                }, 500);
              }
            }
          }

          requestAnimationFrame(animateOrb);
        }

        // === 步骤 4: 卡牌四周灰尘特效（与放大弹跳同步开始）===
        spawnDustParticles(targetCardEl);

      }, 1100);
    }

    // 生成卡牌四周灰尘粒子
    function spawnDustParticles(cardEl) {
      if (!cardEl) return;
      const rect = cardEl.getBoundingClientRect();
      const count = 12;
      const particles = [];

      for (let i = 0; i < count; i++) {
        const particle = document.createElement('div');
        particle.className = 'dust-particle';

        // 起始位置：卡牌四周随机点
        const side = i % 4;  // 0=top, 1=right, 2=bottom, 3=left
        let startX, startY;
        if (side === 0) {
          startX = rect.left + Math.random() * rect.width;
          startY = rect.top + Math.random() * 10;
        } else if (side === 1) {
          startX = rect.right - Math.random() * 10;
          startY = rect.top + Math.random() * rect.height;
        } else if (side === 2) {
          startX = rect.left + Math.random() * rect.width;
          startY = rect.bottom - Math.random() * 10;
        } else {
          startX = rect.left + Math.random() * 10;
          startY = rect.top + Math.random() * rect.height;
        }

        // 飞出方向：向外扩散
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const angle = Math.atan2(startY - centerY, startX - centerX);
        const distance = 40 + Math.random() * 50;

        particle.style.left = startX + 'px';
        particle.style.top = startY + 'px';
        particle.style.position = 'fixed';
        particle.style.setProperty('--dust-dx', Math.cos(angle) * distance + 'px');
        particle.style.setProperty('--dust-dy', Math.sin(angle) * distance + 'px');

        // 随机大小
        const size = 0.3 + Math.random() * 0.5;
        particle.style.width = (size * 16) + 'px';
        particle.style.height = (size * 16) + 'px';

        // 随机延迟
        particle.style.animationDelay = (Math.random() * 0.3) + 's';

        document.body.appendChild(particle);
        particles.push(particle);
      }

      // 动画结束后清理
      setTimeout(function () {
        particles.forEach(function (p) {
          p.remove();
        });
      }, 1800);
    }

    // ----------------------------------------------------------------------------
    // 【AI策略设置】
    // ----------------------------------------------------------------------------
    // 【AI能力】(2026-10-04)：公平 fair / 全知 omni 双档
    // 决策由 PBAIBridge（ai-core 引擎，与联机「AI玩家」同源）执行，本区只负责设置面板。
    // 持久化在 localStorage['pbAICapability']：'fair' | 'omni'，默认公平。
    // ----------------------------------------------------------------------------

    // 刷新 AI 能力按钮样式：公平=绿色系；全知=红色系；全面=紫色系；未选中=灰蓝色系
    function updateAICapabilityBtnStyle(mode) {
      const fairBtn = document.getElementById('ai-cap-fair-btn');
      const omniBtn = document.getElementById('ai-cap-omni-btn');
      const probBtn = document.getElementById('ai-cap-prob-btn');
      const unselectedBg = '#334155';
      const unselectedBorder = '#475569';
      const unselectedColor = '#94a3b8';
      const selected = {
        fair: { bg: '#16a34a', border: '#4ade80' },   // 绿色 (green-600)
        omni: { bg: '#dc2626', border: '#f87171' },   // 红色 (red-600)
        prob: { bg: '#7c3aed', border: '#a78bfa' }    // 紫色 (violet-600) —— v5.49 概率型AI
      };
      if (fairBtn) {
        const on = mode === 'fair';
        fairBtn.style.background = on ? selected.fair.bg : unselectedBg;
        fairBtn.style.borderColor = on ? selected.fair.border : unselectedBorder;
        fairBtn.style.color = on ? 'white' : unselectedColor;
      }
      if (omniBtn) {
        const on = mode === 'omni';
        omniBtn.style.background = on ? selected.omni.bg : unselectedBg;
        omniBtn.style.borderColor = on ? selected.omni.border : unselectedBorder;
        omniBtn.style.color = on ? 'white' : unselectedColor;
      }
      if (probBtn) {
        const on = mode === 'prob';
        probBtn.style.background = on ? selected.prob.bg : unselectedBg;
        probBtn.style.borderColor = on ? selected.prob.border : unselectedBorder;
        probBtn.style.color = on ? 'white' : unselectedColor;
      }
    }

    // 切换 AI 能力档位：仅在游戏准备阶段(setup)可修改，值由 PBAIBridge 持久化
    function setAICapability(mode) {
      if (GameState.gamePhase !== 'setup') {
        showNotification(typeof __t === 'function' ? __t('set_ai_lock') : '游戏进行中无法修改AI能力');
        return;
      }
      if (typeof PBAIBridge !== 'undefined' && PBAIBridge) {
        PBAIBridge.setMode(mode);
      }
      updateAICapabilityBtnStyle((typeof PBAIBridge !== 'undefined' && PBAIBridge) ? PBAIBridge.getMode() : mode);
    }

    // 事件绑定 + 加载保存的设置
    (function initAICapabilitySettings() {
      const bind = function (id, mode) {
        const el = document.getElementById(id);
        if (el) el.addEventListener('click', function () { setAICapability(mode); });
      };
      bind('ai-cap-fair-btn', 'fair');
      bind('ai-cap-omni-btn', 'omni');
      bind('ai-cap-prob-btn', 'prob');   // ★ v5.49 全面（概率型AI）
      // ★ PBAIBridge 为 const 声明（本脚本后方 24760 行），同步执行期处于 TDZ，
      //   typeof 防不住（会抛 ReferenceError 并中断整个脚本），必须延后到脚本执行完再读取。
      setTimeout(function () {
        const cur = (typeof PBAIBridge !== 'undefined' && PBAIBridge) ? PBAIBridge.getMode() : 'fair';
        updateAICapabilityBtnStyle(cur);
      }, 0);
    })();

    // ============================================================================
    // 【栏目管理 · ColumnVisibilityConfig】统一控制界面元素的显示与功能开关
    // ============================================================================
    //
    // 配置项类型:
    //   type: 'display'  控制 DOM 元素的显示/隐藏（如状态栏、积分栏）
    //   type: 'feature'  控制功能开关（如拖牌/撞牌动画，不影响元素可见性）
    //
    // 配置字段:
    //   elementId  目标元素的 DOM ID
    //   label      在设置面板中显示的名称
    //   visible    当前是否启用（true = 显示 / 启用）
    //
    // 持久化: 所有开关状态 JSON 序列化后写入 localStorage['columnVisibility']
    //         下次打开页面自动恢复
    //
    // 相关函数:
    //   loadColumnVisibility()   从 localStorage 载入
    //   saveColumnVisibility()   保存到 localStorage
    //   applyColumnVisibility()  应用到 DOM
    //   isFeatureEnabled()       检查功能开关（用于 performRoadMatch 等）
    //   toggleColumnVisibility() 切换单个栏目的开关
    // ============================================================================
    const ColumnVisibilityConfig = {
      'status-bar':   { elementId: 'battlefield',                label: '状态栏',     visible: true, type: 'display' },
      'opponent-type':{ elementId: 'opponent-card-type-section', label: '对方牌型',   visible: true, type: 'display' },
      'score-bar':    { elementId: 'score-bar-container',        label: '积分栏',     visible: true, type: 'display' },
      'player-type':  { elementId: 'player-card-type-section',   label: '我方牌型',   visible: true, type: 'display' },
      'match-bar':    { elementId: 'center-divider',             label: '拼点栏',     visible: true, type: 'display' },
      'drag-animation':{ elementId: 'drag-animation',            label: '拖牌动画',   visible: true, type: 'feature' },
      'crash-animation':{ elementId: 'crash-animation',          label: '撞牌动画',   visible: true, type: 'feature' },
      'support-animation':{ elementId: 'support-animation',      label: '援牌动画',   visible: true, type: 'feature' },
      'surround-animation':{ elementId: 'surround-animation',    label: '围牌动画',   visible: true, type: 'feature' },
      'deal-animation':{ elementId: 'deal-animation',            label: '发牌动画',   visible: true, type: 'feature' }
    };

    // 从 localStorage 加载保存的状态
    function loadColumnVisibility() {
      const saved = localStorage.getItem('columnVisibility');
      if (saved) {
        try {
          const savedObj = JSON.parse(saved);
          for (const key in savedObj) {
            if (ColumnVisibilityConfig[key]) {
              ColumnVisibilityConfig[key].visible = savedObj[key];
            }
          }
        } catch (e) {
          console.warn('栏目状态解析失败，使用默认值');
        }
      }
    }

    // 保存到 localStorage
    function saveColumnVisibility() {
      const toSave = {};
      for (const key in ColumnVisibilityConfig) {
        toSave[key] = ColumnVisibilityConfig[key].visible;
      }
      localStorage.setItem('columnVisibility', JSON.stringify(toSave));
    }

    // 应用可见性到 DOM
    function applyColumnVisibility(columnKey) {
      const config = ColumnVisibilityConfig[columnKey];
      if (!config) return;
      // 功能开关类型（feature）：不控制元素显示/隐藏，只在 performRoadMatch 中检查
      if (config.type === 'feature') return;
      // 显示/隐藏类型（display）：控制元素
      const element = document.getElementById(config.elementId);
      if (element) {
        element.style.display = config.visible ? '' : 'none';
      }
    }

    // 检查功能开关（拖牌/撞牌动画等）
    function isFeatureEnabled(featureKey) {
      const config = ColumnVisibilityConfig[featureKey];
      return config && config.visible;
    }

    // 应用所有栏目可见性
    function applyAllColumnVisibility() {
      for (const key in ColumnVisibilityConfig) {
        applyColumnVisibility(key);
      }
    }

    // 切换栏目可见性
    function toggleColumnVisibility(columnKey) {
      if (!ColumnVisibilityConfig[columnKey]) return;
      ColumnVisibilityConfig[columnKey].visible = !ColumnVisibilityConfig[columnKey].visible;
      applyColumnVisibility(columnKey);
      saveColumnVisibility();
      // 更新对应按钮样式
      const btn = document.querySelector('.column-toggle-btn[data-target="' + ColumnVisibilityConfig[columnKey].elementId + '"]');
      if (btn) updateColumnBtnStyle(btn);
    }

    // 栏目按钮悬停效果
    function onColumnBtnHover(btn) {
      const targetId = btn.dataset.target;
      // 找到对应的 columnKey
      let columnKey = null;
      for (const key in ColumnVisibilityConfig) {
        if (ColumnVisibilityConfig[key].elementId === targetId) {
          columnKey = key;
          break;
        }
      }
      const visible = columnKey && ColumnVisibilityConfig[columnKey]
        ? ColumnVisibilityConfig[columnKey].visible
        : true;

      if (visible) {
        // 当前显示/启用状态：悬停时变亮
        btn.style.background = '#2563eb';
        btn.style.borderColor = '#60a5fa';
      } else {
        // 当前隐藏/禁用状态：悬停时变亮
        btn.style.background = '#64748b';
        btn.style.borderColor = '#94a3b8';
      }
    }

    // 更新栏目按钮样式（正常/隐藏态）
    function updateColumnBtnStyle(btn) {
      const targetId = btn.dataset.target;
      // 找到对应的 columnKey
      let columnKey = null;
      for (const key in ColumnVisibilityConfig) {
        if (ColumnVisibilityConfig[key].elementId === targetId) {
          columnKey = key;
          break;
        }
      }
      const config = columnKey ? ColumnVisibilityConfig[columnKey] : null;
      const visible = config ? config.visible : true;
      const isFeature = config && config.type === 'feature';

      if (visible) {
        btn.style.background = '#1e40af';
        btn.style.borderColor = '#3b82f6';
        btn.style.color = 'white';
        const stateEl = btn.querySelector('.column-toggle-state');
        if (stateEl) stateEl.textContent = isFeature ? ((__gameTranslations[__gameCurrentLang]||{}).set_enable || '启用') : ((__gameTranslations[__gameCurrentLang]||{}).set_show || '显示');
      } else {
        btn.style.background = '#475569';
        btn.style.borderColor = '#475569';
        btn.style.color = '#94a3b8';
        const stateEl = btn.querySelector('.column-toggle-state');
        if (stateEl) stateEl.textContent = isFeature ? ((__gameTranslations[__gameCurrentLang]||{}).set_disable || '禁用') : ((__gameTranslations[__gameCurrentLang]||{}).set_hide || '隐藏');
      }
    }

    // 更新所有栏目按钮的样式
    function updateAllColumnBtnStyles() {
      document.querySelectorAll('.column-toggle-btn').forEach(btn => {
        updateColumnBtnStyle(btn);
      });
    }

    // 初始化栏目管理
    function initColumnVisibility() {
      loadColumnVisibility();
      applyAllColumnVisibility();
      updateAllColumnBtnStyles();

      // 绑定点击事件
      document.getElementById('toggle-status-bar')?.addEventListener('click', () => toggleColumnVisibility('status-bar'));
      document.getElementById('toggle-opponent-type')?.addEventListener('click', () => toggleColumnVisibility('opponent-type'));
      document.getElementById('toggle-score-bar')?.addEventListener('click', () => toggleColumnVisibility('score-bar'));
      document.getElementById('toggle-player-type')?.addEventListener('click', () => toggleColumnVisibility('player-type'));
      document.getElementById('toggle-match-bar')?.addEventListener('click', () => toggleColumnVisibility('match-bar'));
      document.getElementById('toggle-drag-animation')?.addEventListener('click', () => toggleColumnVisibility('drag-animation'));
      document.getElementById('toggle-crash-animation')?.addEventListener('click', () => toggleColumnVisibility('crash-animation'));
      document.getElementById('toggle-support-animation')?.addEventListener('click', () => toggleColumnVisibility('support-animation'));
      document.getElementById('toggle-surround-animation')?.addEventListener('click', () => toggleColumnVisibility('surround-animation'));
      document.getElementById('toggle-deal-animation')?.addEventListener('click', () => toggleColumnVisibility('deal-animation'));
    }

    // 页面加载完成后初始化栏目管理
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initColumnVisibility);
      document.addEventListener('DOMContentLoaded', function() {
        setTimeout(() => {
          const savedStyle = localStorage.getItem('cardFaceStyle');
          if (savedStyle) {
            selectedCardFaceStyle = savedStyle;
          }
          if (typeof updateRoadAndCompareStyle === 'function') {
            updateRoadAndCompareStyle();
          }
          if (typeof setupTurnRecordClickHandler === 'function') {
            setupTurnRecordClickHandler();
          }
        }, 100);
      });
    } else {
      initColumnVisibility();
      setTimeout(() => {
        const savedStyle = localStorage.getItem('cardFaceStyle');
        if (savedStyle) {
          selectedCardFaceStyle = savedStyle;
        }
        if (typeof updateRoadAndCompareStyle === 'function') {
          updateRoadAndCompareStyle();
        }

        // ★ 确保风格背景状态正确应用（设置style-bg-on类）
        if (typeof applyCardFaceBg === 'function') {
          applyCardFaceBg();
        }
        if (typeof setupTurnRecordClickHandler === 'function') {
          setupTurnRecordClickHandler();
        }
      }, 100);
    }

    // 得分栏悬停平滑透明度过渡效果
    document.querySelectorAll('.score-bar-container').forEach(container => {
      let animationFrame = null;
      let startOpacity = 0.2;
      let targetOpacity = 0.2;
      let startTime = null;
      const duration = 1500;

      function animate(currentTime) {
        if (!startTime) startTime = currentTime;
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        const easeProgress = 1 - Math.pow(1 - progress, 3);
        const currentOpacity = startOpacity + (targetOpacity - startOpacity) * easeProgress;
        
        container.style.opacity = currentOpacity;

        if (progress < 1) {
          animationFrame = requestAnimationFrame(animate);
        }
      }

      container.addEventListener('mouseenter', () => {
        if (animationFrame) {
          cancelAnimationFrame(animationFrame);
          animationFrame = null;
        }
        startOpacity = parseFloat(container.style.opacity) || 0.2;
        targetOpacity = 0.8;
        startTime = null;
        animationFrame = requestAnimationFrame(animate);
      });

      container.addEventListener('mouseleave', () => {
        if (animationFrame) {
          cancelAnimationFrame(animationFrame);
          animationFrame = null;
        }
        startOpacity = parseFloat(container.style.opacity) || 0.2;
        targetOpacity = 0.2;
        startTime = null;
        animationFrame = requestAnimationFrame(animate);
      });
    });

    // ----------------------------------------------------------------------------
    // 【折叠面板交互】
    // ----------------------------------------------------------------------------
    // 规则面板中的折叠区域(手风琴效果)，点击标题展开/收起内容
    document.querySelectorAll('.accordion-header').forEach(header => {
      header.addEventListener('click', function() {
        const content = this.nextElementSibling;
        const arrow = this.querySelector('span:last-child');
        
        content.classList.toggle('hidden');
        arrow.textContent = content.classList.contains('hidden') ? '▼' : '▲';
      });
    });

    // ----------------------------------------------------------------------------
    // 【战场位置更新】
    // ----------------------------------------------------------------------------
    // 战场信息栏位置由CSS固定定位，不再动态计算
    function updateBattlefieldPosition() {
      return;
    }

    updateBattlefieldPosition();

    // ============================================================================
    // 【JS-5/10】游戏状态更新
    // ============================================================================
    // 包含: 拼点结果更新、状态栏更新、回合显示、游戏重置、通知系统
    
    // ----------------------------------------------------------------------------
    // 【拼点结果更新】
    // ----------------------------------------------------------------------------
    // updateResults: 根据GameState.playerWins/opponentWins更新五路拼点结果显示
    // 显示效果:
    //   蓝色✓: 我方获胜(带波浪动画)
    //   红色×: 对方获胜(带火焰动画)
    //   灰色-: 未分胜负
    //   空格: 无牌
    // 特殊效果: 当一方赢得4路及以上时，显示火焰动画
    // 【玻璃风格拼点栏】鎏金卷轴指示器（2026-9-29）：缎面卷帛+画卷按局势变色；state: W/L/T/E（E=空白卷轴：原配色、无中间画卷）
    function getScrlResultHTML(state, waving, flameBlue, flameRed) {
      let inner = '';
      if (state === 'W') inner = '<span class="scrl-sym">✓</span>';
      else if (state === 'L') inner = '<span class="scrl-sym">×</span>';
      else if (state === 'T') inner = '<span class="scrl-bar"></span>';
      const flameCls = state === 'W' && flameBlue ? ' scrl-gloww' : state === 'L' && flameRed ? ' scrl-glowl' : '';
      const wavingCls = state === 'W' && waving ? ' scrl-waving' : '';
      if (state === 'E') return `<div class="scrl-wrap"><div class="srod"></div><div class="sparch"></div><div class="srod"></div></div>`;
      const panelCls = state === 'W' ? ' spanl-w' : state === 'L' ? ' spanl-l' : ' spanl-t';
      const rimCls = state === 'W' ? ' spanl-rim-w' : state === 'L' ? ' spanl-rim-l' : ' spanl-rim-t';
      return `<div class="scrl-wrap${flameCls}${wavingCls}"><div class="srod"></div><div class="sparch"><div class="scrl-halo"></div><div class="spanl-rim${rimCls}"></div><div class="spanl${panelCls}"><div class="spanl-in">${inner}</div></div></div><div class="srod"></div></div>`;
    }

    function updateResults() {
      const resultSlots = document.querySelectorAll('.result-slot');
      
      const playerWinCount = GameState.playerWins.filter(win => win === true).length;
      const opponentWinCount = GameState.opponentWins.filter(win => win === true).length;
      const shouldAddBlueFlame = playerWinCount >= 4;
      const shouldAddRedFlame = opponentWinCount >= 4;
      
      // 危机音乐：任意一方达到4路获胜时播放一次（持续保持4路时不重复触发）
      // ★ 我方4路获胜=优势 →【优势】提示_前10秒.mp3；对方4路=我方劣势 → 末局计时.mp3（不变）
      //   （5路制下双方不可能同时≥4路，无冲突）
      // ★ 回放模式下跳过（updateResults 被回放复用渲染，2026-9-11）
      if (!window._replayModeActive) {
        if (playerWinCount >= 4 || opponentWinCount >= 4) {
          playCrisisMusic(playerWinCount >= 4);
        } else {
          stopCrisisMusic();
          resetCrisisMusicState();  // 双方都不满足4路时，重置触发标志
        }
      }
      
      const isMetalStyle = selectedCardFaceStyle === 'metal';
      const isGlassStyle = selectedCardFaceStyle === 'glass';
      
      for (let i = 0; i < resultSlots.length; i++) {
        const slot = resultSlots[i];

        // ★ 2026-9-30：经典分支防闪烁——状态键未变时整槽跳过（className/innerHTML 都不动）。
        // updateResults 每次出牌/同步都全量重渲染：innerHTML 重建子元素会重启共振子动画、
        // 末尾火焰重触发会重启 0.8s 呼吸 → 表现为"闪烁抖动"（预览是静态类无 JS 重写故无此问题）
        if (!isMetalStyle && !isGlassStyle) {
          const cw = GameState.playerWins[i] === true;
          const ow = GameState.opponentWins[i] === true;
          const sw = cw && ((i > 0 && GameState.playerWins[i - 1] === true) || (i < 4 && GameState.playerWins[i + 1] === true));
          const pH = GameState.playerField[i] || GameState.playerStack[i].length > 0;
          const oH = GameState.opponentField[i] || GameState.opponentStack[i].length > 0;
          const sk = (cw ? 'W' : ow ? 'L' : (pH && oH) ? 'T' : 'E')
            + (cw && sw ? 'w' : '')
            + ((cw && shouldAddBlueFlame) || (ow && shouldAddRedFlame) ? 'f' : '');
          if (sk === slot.dataset.rsKey && slot.classList.contains('rs-g3') && slot.firstElementChild) continue;
          slot.dataset.rsKey = sk;
        }

        if (isMetalStyle) {
          slot.className = 'result-slot w-[4.6rem] h-8 rounded-lg flex items-center justify-center overflow-hidden';
          slot.style.background = 'linear-gradient(180deg, #4a5568 0%, #2d3748 50%, #1a202c 100%)';
          slot.style.border = '2px solid #718096';
          slot.style.borderRadius = '8px';
          slot.style.boxShadow = '0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.3), inset 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.2)';
          slot.style.animation = '';
        } else {
          slot.removeAttribute('style');
          const baseClass = isGlassStyle
            ? 'result-slot result-slot-glass w-[4.6rem] h-8 border border-accent rounded flex items-center justify-center'
            : 'result-slot w-[4.6rem] h-8 border border-accent rounded flex items-center justify-center';
          slot.className = baseClass;
        }
        
        const currentPlayerWin = GameState.playerWins[i] === true;
        const currentOpponentWin = GameState.opponentWins[i] === true;
        
        const leftPlayerWin = i > 0 && GameState.playerWins[i - 1] === true;
        const rightPlayerWin = i < 4 && GameState.playerWins[i + 1] === true;
        
        const shouldWave = currentPlayerWin && (leftPlayerWin || rightPlayerWin);

        // ★ 2026-9-29：【玻璃风格拼点栏】卷轴指示器仅在玻璃风格+关闭背景时启用（开启背景用原玻璃样式；经典/金属不受影响）
        if (isGlassStyle && !cardFaceBgState.glass) {
          const playerHasCard = GameState.playerField[i] || (GameState.playerStack[i] || []).length > 0;
          const opponentHasCard = GameState.opponentField[i] || (GameState.opponentStack[i] || []).length > 0;
          let scrlState = 'E';
          if (currentPlayerWin) scrlState = 'W';
          else if (currentOpponentWin) scrlState = 'L';
          else if (playerHasCard && opponentHasCard) scrlState = 'T';
          slot.removeAttribute('style');
          slot.className = 'result-slot w-[4.6rem] h-8 relative overflow-hidden flex items-center justify-center';
          slot.innerHTML = getScrlResultHTML(scrlState, shouldWave, shouldAddBlueFlame, shouldAddRedFlame);
          continue;
        }
        
        if (currentPlayerWin) {
          // ★ 2026-9-30：经典分支=水晶灯管风格（g3/F·精修）；金属/玻璃保持原渲染
          if (!isMetalStyle && !isGlassStyle) {
            slot.className = 'result-slot rs-g3 w-[4.6rem] h-8 flex items-center justify-center' +
              (shouldWave ? ' rs-wave' : '') +
              (shouldAddBlueFlame ? ' rs-flame' : '');
            slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div><div class="rs-bloom"></div></div><span class="rs-sym">✓</span>';
          } else {
          const glassClass = isGlassStyle ? ' result-slot-glass' : '';
          slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center relative overflow-hidden' + 
            glassClass +
            (shouldWave ? ' flag-waving' : '') + 
            (shouldAddBlueFlame ? ' blue-flame' : '');
          if (isGlassStyle) {
            slot.style.background = 'linear-gradient(145deg, rgba(96, 165, 250, 0.75) 0%, rgba(59, 130, 246, 0.8) 30%, rgba(37, 99, 235, 0.85) 60%, rgba(29, 78, 216, 0.9) 100%)';
            slot.style.backdropFilter = 'blur(6px)';
            slot.style.webkitBackdropFilter = 'blur(6px)';
            slot.style.border = '3px solid rgba(255, 255, 255, 0.9)';
            slot.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 3px 12px rgba(255, 255, 255, 0.4), inset 0 -4px 12px rgba(0, 40, 100, 0.4), inset 2px 0 8px rgba(255, 255, 255, 0.2), inset -2px 0 8px rgba(0, 40, 100, 0.3), 0 0 30px rgba(59, 130, 246, 0.4)';
            slot.style.borderRadius = '8px';
          } else {
            if (isMetalStyle) {
              slot.style.background = 'linear-gradient(180deg, #5ba8fa 0%, #3b82f6 30%, #2563eb 50%, #1d4ed8 70%, #1e3a8a 100%)';
              slot.style.border = 'none';
              slot.style.boxShadow = 'inset 0 0 0 3px rgba(191,231,255,0.9), inset 0 0 0 4px rgba(100,160,255,0.7), inset 0 0 0 5px rgba(50,100,200,0.5), inset 0 0 0 6px rgba(20,60,150,0.4), inset 0 0 0 7px rgba(10,40,100,0.3), inset 3px 3px 0 rgba(255,255,255,0.9), inset -2px -2px 0 rgba(5,40,90,0.7), 0 8px 20px rgba(0,0,0,0.5)';
            } else {
              slot.style.background = 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)';
              slot.style.border = '1px solid #3b82f6';
              slot.style.boxShadow = '';
            }
          }
          slot.innerHTML = `
            <div class="absolute inset-0 opacity-${isMetalStyle ? '15' : '20'} ${shouldWave ? 'stripe-waving' : ''}">
              <div class="absolute top-0 left-0 w-full h-1 bg-white"></div>
              <div class="absolute top-1.5 left-0 w-full h-0.5 bg-white"></div>
              <div class="absolute bottom-0 left-0 w-full h-1 bg-white"></div>
              <div class="absolute bottom-1.5 left-0 w-full h-0.5 bg-white"></div>
            </div>
            ${isMetalStyle ? '<div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(150,200,255,0.35) 30%, transparent 50%, rgba(0,50,120,0.35) 70%, rgba(200,220,255,0.25) 100%); border-radius: inherit;"></div>' : ''}
            ${isMetalStyle ? '<div class="absolute top-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-b from-white/60 to-transparent rounded-full"></div><div class="absolute bottom-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-t from-black/50 to-transparent rounded-full"></div>' : ''}
            <span class="text-white font-bold text-2xl relative z-10" ${isMetalStyle ? 'style="text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 -2px 0 rgba(200,200,200,0.5); font-weight: 900;"' : 'class="drop-shadow-md"'}>✓</span>
          `;
          }
        } else if (currentOpponentWin) {
          // ★ 2026-9-30：经典分支=水晶灯管风格（红态）
          if (!isMetalStyle && !isGlassStyle) {
            slot.className = 'result-slot rs-g3 rs-l w-[4.6rem] h-8 flex items-center justify-center' +
              (shouldAddRedFlame ? ' rs-flame' : '');
            slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div><div class="rs-bloom"></div></div><span class="rs-sym">×</span>';
          } else {
          const glassClass = isGlassStyle ? ' result-slot-glass' : '';
          slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center relative overflow-hidden' + 
            glassClass +
            (shouldAddRedFlame ? ' red-flame' : '');
          if (isGlassStyle) {
            slot.style.background = 'linear-gradient(145deg, rgba(251, 146, 60, 0.75) 0%, rgba(239, 68, 68, 0.8) 30%, rgba(220, 38, 38, 0.85) 60%, rgba(185, 28, 28, 0.9) 100%)';
            slot.style.backdropFilter = 'blur(6px)';
            slot.style.webkitBackdropFilter = 'blur(6px)';
            slot.style.border = '3px solid rgba(255, 255, 255, 0.9)';
            slot.style.boxShadow = '0 8px 25px rgba(239, 68, 68, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 3px 12px rgba(255, 255, 255, 0.4), inset 0 -4px 12px rgba(100, 20, 20, 0.4), inset 2px 0 8px rgba(255, 255, 255, 0.2), inset -2px 0 8px rgba(100, 20, 20, 0.3), 0 0 30px rgba(239, 68, 68, 0.4)';
            slot.style.borderRadius = '8px';
          } else {
            if (isMetalStyle) {
              slot.style.background = 'linear-gradient(180deg, #f8a0a0 0%, #ef4444 30%, #dc2626 50%, #b91c1c 70%, #7f1d1d 100%)';
              slot.style.border = 'none';
              slot.style.boxShadow = 'inset 0 0 0 3px rgba(255,191,191,0.9), inset 0 0 0 4px rgba(200,100,100,0.7), inset 0 0 0 5px rgba(150,50,50,0.5), inset 0 0 0 6px rgba(100,20,20,0.4), inset 0 0 0 7px rgba(60,10,10,0.3), inset 3px 3px 0 rgba(255,255,255,0.9), inset -2px -2px 0 rgba(90,10,10,0.7), 0 8px 20px rgba(0,0,0,0.5)';
            } else {
              slot.style.background = 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)';
              slot.style.border = '1px solid #ef4444';
              slot.style.boxShadow = '';
            }
          }
          slot.innerHTML = `
            <div class="absolute inset-0 opacity-${isMetalStyle ? '15' : '20'}">
              <div class="absolute top-0 left-0 w-full h-1 bg-white"></div>
              <div class="absolute top-1.5 left-0 w-full h-0.5 bg-white"></div>
              <div class="absolute bottom-0 left-0 w-full h-1 bg-white"></div>
              <div class="absolute bottom-1.5 left-0 w-full h-0.5 bg-white"></div>
            </div>
            ${isMetalStyle ? '<div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,180,180,0.35) 30%, transparent 50%, rgba(100,20,20,0.35) 70%, rgba(255,180,180,0.25) 100%); border-radius: inherit;"></div>' : ''}
            ${isMetalStyle ? '<div class="absolute top-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-b from-white/60 to-transparent rounded-full"></div><div class="absolute bottom-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-t from-black/50 to-transparent rounded-full"></div>' : ''}
            <span class="text-white font-bold text-2xl relative z-10" ${isMetalStyle ? 'style="text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 -2px 0 rgba(200,200,200,0.5); font-weight: 900;"' : 'class="drop-shadow-md"'}>×</span>
          `;
          }
        } else {
          const playerHasCard = GameState.playerField[i] || GameState.playerStack[i].length > 0;
          const opponentHasCard = GameState.opponentField[i] || GameState.opponentStack[i].length > 0;
          
          if (playerHasCard && opponentHasCard) {
            // ★ 2026-9-30：经典分支=水晶灯管风格（灰态平局）
            if (!isMetalStyle && !isGlassStyle) {
              slot.className = 'result-slot rs-g3 rs-t w-[4.6rem] h-8 flex items-center justify-center';
              slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div><div class="rs-bloom"></div></div><span class="rs-sym">-</span>';
            } else {
            const glassClass = isGlassStyle ? ' result-slot-glass' : '';
            slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center relative overflow-hidden' + glassClass;
            if (isGlassStyle) {
              slot.style.background = 'linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(156, 163, 175, 0.6) 30%, rgba(107, 114, 128, 0.7) 60%, rgba(75, 85, 99, 0.8) 100%)';
              slot.style.backdropFilter = 'blur(6px)';
              slot.style.webkitBackdropFilter = 'blur(6px)';
              slot.style.border = '3px solid rgba(255, 255, 255, 0.9)';
              slot.style.boxShadow = '0 8px 25px rgba(107, 114, 128, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 3px 12px rgba(255, 255, 255, 0.4), inset 0 -4px 12px rgba(30, 41, 59, 0.4), inset 2px 0 8px rgba(255, 255, 255, 0.2), inset -2px 0 8px rgba(30, 41, 59, 0.3), 0 0 30px rgba(107, 114, 128, 0.2)';
              slot.style.borderRadius = '8px';
            } else {
              if (isMetalStyle) {
                slot.style.background = 'linear-gradient(180deg, #d8d8d8 0%, #b8b8b8 30%, #989898 50%, #787878 70%, #585858 100%)';
                slot.style.border = 'none';
                slot.style.boxShadow = 'inset 0 0 0 3px rgba(255,255,255,0.9), inset 0 0 0 4px rgba(220,220,220,0.7), inset 0 0 0 5px rgba(180,180,180,0.5), inset 0 0 0 6px rgba(120,120,120,0.4), inset 0 0 0 7px rgba(80,80,80,0.3), inset 3px 3px 0 rgba(255,255,255,0.9), inset -2px -2px 0 rgba(50,50,50,0.7), 0 8px 20px rgba(0,0,0,0.5)';
              } else {
                slot.style.background = 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)';
                slot.style.border = '1px solid #6b7280';
                slot.style.boxShadow = '0 4px 15px rgba(107, 114, 128, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.1)';
              }
            }
            slot.innerHTML = `
              <div class="absolute inset-0 opacity-${isMetalStyle ? '15' : '20'}">
                <div class="absolute top-0 left-0 w-full h-1 bg-white"></div>
                <div class="absolute top-1.5 left-0 w-full h-0.5 bg-white"></div>
                <div class="absolute bottom-0 left-0 w-full h-1 bg-white"></div>
                <div class="absolute bottom-1.5 left-0 w-full h-0.5 bg-white"></div>
              </div>
              ${isMetalStyle ? '<div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(200,200,200,0.35) 30%, transparent 50%, rgba(50,50,50,0.35) 70%, rgba(200,200,200,0.25) 100%); border-radius: inherit;"></div>' : ''}
              ${isMetalStyle ? '<div class="absolute top-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-b from-white/60 to-transparent rounded-full"></div><div class="absolute bottom-[4px] left-[6px] right-[6px] h-[5px] bg-gradient-to-t from-black/50 to-transparent rounded-full"></div>' : ''}
              <span class="text-white font-bold text-2xl relative z-10" ${isMetalStyle ? 'style="text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3), 0 -1px 0 rgba(255,255,255,0.8), 0 -2px 0 rgba(200,200,200,0.5); font-weight: 900;"' : 'class="drop-shadow-md"'}>-</span>
            `;
            }
          } else {
            slot.removeAttribute('style');
            // ★ 2026-9-30：经典分支=水晶灯管风格（熄灭态未定）
            if (!isMetalStyle && !isGlassStyle) {
              slot.className = 'result-slot rs-g3 rs-e w-[4.6rem] h-8 flex items-center justify-center';
              slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div></div>';
            } else {
              const baseClass = isGlassStyle
                ? 'result-slot result-slot-glass w-[4.6rem] h-8 border border-accent rounded flex items-center justify-center'
                : 'result-slot w-[4.6rem] h-8 border border-accent rounded flex items-center justify-center';
              slot.className = baseClass;
              slot.innerHTML = '';
            }
          }
        }
      }
      
      if (shouldAddBlueFlame) {
        const blueSlots = document.querySelectorAll('.result-slot.blue-flame');
        blueSlots.forEach(slot => slot.classList.remove('blue-flame'));
        void document.body.offsetWidth;
        blueSlots.forEach(slot => slot.classList.add('blue-flame'));
      }
      
      if (shouldAddRedFlame) {
        const redSlots = document.querySelectorAll('.result-slot.red-flame');
        redSlots.forEach(slot => slot.classList.remove('red-flame'));
        void document.body.offsetWidth;
        redSlots.forEach(slot => slot.classList.add('red-flame'));
      }

      // ★ 2026-9-30：g3 火焰态重触发——仅在火焰状态变化（无→有/有→无）时执行一次；
      // 稳定期不再 remove/add，防 0.8s 呼吸动画被每次 updateResults 反复重启（闪烁抖动根因之二）
      const rsFlameSig = (shouldAddBlueFlame ? 'B' : '') + (shouldAddRedFlame ? 'R' : '');
      if (rsFlameSig !== window._rsFlameSigLast) {
        window._rsFlameSigLast = rsFlameSig;
        if (rsFlameSig) {
          const g3FlameSlots = document.querySelectorAll('.result-slot.rs-flame');
          g3FlameSlots.forEach(s => s.classList.remove('rs-flame'));
          void document.body.offsetWidth;
          g3FlameSlots.forEach(s => s.classList.add('rs-flame'));
        }
      }
    }

    // ----------------------------------------------------------------------------
    // 【状态栏更新】
    // ----------------------------------------------------------------------------
    // updateGameStatus: 更新顶部状态栏文字(显示当前游戏状态提示)
    let __lastStatusKey = null;
    function updateGameStatus(text, _key) {
      // ★ 2026-9-17：对局结束（gamePhase='ended'）后状态栏锁定为结果文字——结算弹窗开关、
      //   个人资料弹窗开关等后续调用不再覆盖终局结果；新对局 gamePhase 离开 'ended' 自动解锁
      if (typeof GameState !== 'undefined' && GameState._resultLocked && GameState.gamePhase === 'ended') return;
      if (_key) __lastStatusKey = _key;
      // ★ 联机模式下自动翻译状态栏文字
      if (typeof window._pbT === 'function') text = window._pbT(text);
      if (GameElements.ui.gameStatus) {
        GameElements.ui.gameStatus.textContent = text;
      }
    }

    // ----------------------------------------------------------------------------
    // showNotification: 显示临时通知(用于设置变更限制等)
    // ----------------------------------------------------------------------------
    function showNotification(text) {
      if (GameElements.ui.gameStatus) {
        GameElements.ui.gameStatus.textContent = text;
      }
    }

    // ----------------------------------------------------------------------------
    // 【回合显示更新】
    // ----------------------------------------------------------------------------
    // updateTurnDisplay: 更新顶部回合文字(显示回合编号和当前玩家)
    function updateTurnDisplay() {
      if (GameElements.ui.turnText) {
        var _t = typeof __t === 'function' ? __t : function(k){ var d=__gameTranslations&&__gameTranslations[__gameCurrentLang]; return d&&d[k]!=null?d[k]:k; };
        var _tFmt = function(k, vars){ var s=_t(k); if(vars){ for(var p in vars){ s=s.replace('{'+p+'}', vars[p]); } } return s; };
        let turnSide;
        if (GameState.currentTurn === 'player') {
          turnSide = _t('me');
        } else {
          if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
            turnSide = PBOnline.getOpponentName() || _t('opp');
          } else {
            turnSide = _t('opp');
          }
        }
        const _short = (turnSide && turnSide.length > 4) ? turnSide.slice(0, 4) + '…' : turnSide;
        GameElements.ui.turnText.textContent = _tFmt('turn_label', {n: GameState.turnNumber, side: _short});
        GameElements.ui.turnText.title = (turnSide && turnSide.length > 4) ? turnSide : '';
      }
      // ★ 每次回合更新时检查是否需要切换阶段 BGM（开局/中局/末局随机播放）；★ 回放模式不播 BGM
      if (!window._replayModeActive && typeof checkPhaseBGM === 'function') {
        try { checkPhaseBGM(); } catch (e) {}
      }
    }

    // ----------------------------------------------------------------------------
    // 【回合指示器更新】
    // ----------------------------------------------------------------------------
    // updateTurnIndicator: 根据当前回合更新中间战场状态栏(battlefield)的边框和发光
    // 我方回合: 蓝色边框+蓝色发光
    // 对方回合: 红色边框+红色发光
    function updateTurnIndicator() {
      const battlefield = document.getElementById('battlefield');
      if (!battlefield) return;

      if (GameState.currentTurn === 'player') {
        // 我方回合 - 蓝色边框
        battlefield.style.borderColor = '#3b82f6';
        battlefield.style.background = 'linear-gradient(145deg, #1e3a5f, #0f2744)';
        battlefield.style.boxShadow = '0 8px 32px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 -3px 10px rgba(0, 0, 0, 0.4) inset';
      } else {
        // 对方回合 - 红色边框
        battlefield.style.borderColor = '#ef4444';
        battlefield.style.background = 'linear-gradient(145deg, #4a1a1a, #2d0f0f)';
        battlefield.style.boxShadow = '0 8px 32px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 -3px 10px rgba(0, 0, 0, 0.4) inset';
      }
    }

    // ----------------------------------------------------------------------------
    // 【回合记录面板切换】
    // ----------------------------------------------------------------------------
    // ★ 2026-9-19 FIX（统一管理）：对局专用悬浮 UI（回合显示按钮/回合记录面板）是 body 直属元素，
    //   无任何显示门控——返回主页后仍残留在主页右上角（如"回合 22 - 我方"）。
    //   进入对局显示、返回主页隐藏，统一由此开关管理（hideMainMenu/showMainMenu 调用）。
    function setBattleUiVisible(visible) {
      var btn = document.getElementById('turn-display-btn');
      if (btn) btn.style.display = visible ? '' : 'none';
      var overlay = document.getElementById('turn-history-overlay');
      if (overlay && !visible) overlay.classList.add('hidden');  // 返回主页时收起已打开的回合记录
    }

    // toggleTurnHistoryPanel: 点击回合显示按钮时显示/隐藏历史记录面板
    function toggleTurnHistoryPanel() {
      const overlay = document.getElementById('turn-history-overlay');
      if (!overlay) return;

      if (overlay.classList.contains('hidden')) {
        playSound('uiOpenSound');
        overlay.classList.remove('hidden');
        updateTurnHistoryDisplay();
        // ★ 2026-10-4（用户指令）：记录为时间正序（最新在底部）——打开面板默认滚动到底部，
        //   直接看到最新回合记录；rAF 等一帧确保 innerHTML 布局完成后量高
        requestAnimationFrame(function () {
          var c = document.getElementById('turn-history-content');
          var p = document.getElementById('turn-history-panel');
          if (c) c.scrollTop = c.scrollHeight;
          if (p) p.scrollTop = p.scrollHeight;
        });
      } else {
        playSound('uiCloseSound');
        overlay.classList.add('hidden');
      }
    }

    // ----------------------------------------------------------------------------
    // 【操作图标和颜色】
    // ----------------------------------------------------------------------------
    // getActionIcon: 根据操作类型返回对应的SVG图标
    function getActionIcon(action) {
      const icons = {
        '出牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>',
        '拖牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"></path></svg>',
        '撞牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>',
        '援牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>',
        '围牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path></svg>',
        '终止出牌': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m-12.728 0a9 9 0 0112.728-12.728m0 0L12 3m0 0l4.343 4.343M3 12l4.343-4.343m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>',
        '拼点': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>',
        '胜利': '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>'
      };
      return icons[action] || icons['出牌'];
    }

    // getActionColor: 根据操作类型返回文字颜色
    function getActionColor(action) {
      const colors = {
        '出牌': 'text-gray-300',
        '拖牌': 'text-cyan-400',
        '撞牌': 'text-red-400',
        '援牌': 'text-green-400',
        '围牌': 'text-yellow-400',
        '终止出牌': 'text-gray-400',
        '拼点': 'text-purple-400',
        '胜利': 'text-amber-400'
      };
      return colors[action] || 'text-gray-300';
    }

    // ----------------------------------------------------------------------------
    // =============================================================================
    // 【AI 回合注释渲染 · v5.26】
    // -----------------------------------------------------------------------------
    // 把 online-client 收到的 ai_comment（AI 决策三段说明）渲染进回合记录条目内：
    //   ① 局势判断 ② 出牌意图（含账本分项明细） ③ 结果预测（仅暗/堆牌）
    // 账本明细里的每个数字都来自 AI 决策时真实使用的权重公式（recommended.js），
    // 便于逐条核验"AI 为什么这么打"，定位评估函数缺陷。
    // =============================================================================
    function _escHtml(s) {
      return String(s == null ? '' : s).replace(/[&<>"']/g, function (m) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m];
      });
    }

    function _renderAiComment(record) {
      var c = record && record.aiComment;
      if (!c) return '';
      var cid = 'aic-' + Math.random().toString(36).slice(2, 9);
      var h = '';
      // ★ 2026-10-11 用户指令：默认收起，点击标题栏展开/折叠
      h += '<div data-ai-comment="1" class="px-2 pb-1.5">';
      h += '<div class="bg-gray-900/70 rounded-lg border border-yellow-600/30 text-[11px] leading-relaxed">';

      // ---- 折叠标题栏（默认收起，摘要标签外显） ----
      // ★ v5.60 用户 03:42 明确：标题栏【只显示两个胜率】，其余（状态标签、点击提示）全部删掉。
      var _headLabels = '';
      if (!c.probAI) {
        _headLabels = (c.labels || []).slice(0, 3).map(function (x) {
          return '<span class="inline-block px-1.5 py-0.5 mr-1 rounded-full bg-gray-700/60 border border-gray-600/50 text-gray-300">' + _escHtml(x) + '</span>';
        }).join('');
      }
      // 加权档的折叠头；概率档在下方单独渲染（收起头带胜率 + 展开后的收起条）
      if (!c.probAI) {
        h += '<div class="ai-comment-toggle flex items-center gap-1 px-2 py-1.5 cursor-pointer select-none" data-cid="' + cid + '">';
        h += '<span class="ai-comment-arrow text-yellow-500/70 text-[10px] flex-shrink-0">▸</span>';
        h += '<span class="text-yellow-600 font-bold flex-shrink-0">AI 回合注释</span>' + _headLabels;
        h += '<span class="flex-1 min-w-0"></span><span class="ai-comment-hint text-gray-500 text-[10px] flex-shrink-0">点击展开</span>';
        h += '</div>';
      }
      // ★ v5.62 第2条：标题徽章显示【结果】胜率（本手打完之后），不是出牌前的局势胜率
      //   第3条：展开后隐藏标题栏，避免与下方"出牌前/这手让胜率变成"两栏重复显示胜率
      var _r = (c.probAI && c.winProb) ? (c.winProb.result || c.winProb) : null;
      if (c.probAI && _r) {
        // ★ v5.63 第3条（第二次纠正）：展开后**标题整行直接消失**，
        //   不再补一条"▾收起"——用户明确说那是多余的。收起靠再次点击【正文任意处】不可行，
        //   故保留一个**零高度的透明热区**（不含任何文字），仅用于收起时点击。
        h += '<div class="ai-comment-toggle flex items-center gap-1.5 px-2 py-1.5 cursor-pointer select-none" data-cid="' + cid + '">';
        h += '<span class="ai-comment-arrow text-yellow-500/70 text-[10px] flex-shrink-0">▸</span>';
        h += '<span class="flex-shrink-0 px-1.5 py-0.5 rounded bg-sky-900/60 border border-sky-700/50 text-sky-300 text-[11px]">五路全胜 ' +
             _escHtml(_r.pTactical) + '%</span>';
        h += '<span class="flex-shrink-0 px-1.5 py-0.5 rounded bg-violet-900/60 border border-violet-700/50 text-violet-300 text-[11px]">牌面获胜 ' +
             _escHtml(_r.pStrategic) + '%</span>';
        h += '<span class="flex-1 min-w-0"></span>';
        h += '<span class="ai-comment-hint text-gray-500 text-[10px] flex-shrink-0">展开 ▾</span>';
        h += '</div>';
        // 展开后显示的**零高度收起热区**（无任何文字/箭头，仅可点）
        h += '<div class="ai-comment-toggle ai-comment-hotspot cursor-pointer select-none hidden" style="height:6px;" data-cid="' + cid + '" title="点击收起"></div>';
      }

      // ---- 折叠内容体（默认 hidden） ----
      h += '<div id="' + cid + '" class="ai-comment-body hidden px-2.5 pb-2">';

      // ① 局势判断（★ v5.58：逐项分行显示，不挤在一行）
      //★ v5.66 用户要求：① 局势整块加外框（分区），且【标签同行、内容转行】
      var labels = (c.labels || []).map(function (x) {
        return '<span class="inline-block px-1.5 py-0.5 mr-1 mb-1 rounded-full bg-gray-700/60 border border-gray-600/50 text-gray-300">' + _escHtml(x) + '</span>';
      }).join('');
      h += '<div class="' + (c.probAI ? 'rounded border border-gray-700/60 bg-gray-800/20 px-2 py-1.5 mb-1.5' : 'mb-1.5') + '">';
      // ★ v5.67 用户纠正：「意图后的文字转行了，局势后的文字不转行」——
      //   标题独占一行，【状态标签 + 全部数值】都放到下一行（与意图段结构一致）。
      //   右侧放「收起」按钮（用户截图红框标记处），点它收起整条注释。
      h += '<div class="flex items-center gap-1">';
      h += '<span class="text-yellow-500 font-bold">① 局势</span>';
      if (c.probAI) {
        h += '<span class="flex-1"></span>';
        h += '<span class="ai-comment-toggle ai-comment-collapse cursor-pointer select-none text-gray-500 hover:text-gray-300 text-[10px] px-1 flex-shrink-0" data-cid="' + cid + '" title="点击收起">收起 ▴</span>';
      }
      h += '</div>';
      if (c.probAI && labels) {
        h += '<div class="mt-0.5">' + labels + '</div>';
      }
      // 概率档：sitParts 数组逐项换行（标题行之后另起一行，不与标题挤在一起）
      if (c.probAI && c.sitParts && c.sitParts.length) {
        h += '<div class="mt-0.5 space-y-0.5">';
        c.sitParts.forEach(function (sp) {
          if (/^预期 /.test(sp)) {
            var mExp = /预期 五路全胜 ([\d.]+)% ／ 牌面获胜 ([\d.]+)%/.exec(sp);
            if (mExp) {
              // ★ v5.64：字号与其它局势行一致（父容器已是 text-[11px]，此处不再缩小）
              h += '<div class="flex items-center gap-1.5 flex-wrap">';
              h += '<span class="text-gray-300">预期</span>';
              h += '<span class="px-1 rounded bg-sky-900/60 border border-sky-700/50 text-sky-300">五路全胜 ' + mExp[1] + '%</span>';
              h += '<span class="px-1 rounded bg-violet-900/60 border border-violet-700/50 text-violet-300">牌面获胜 ' + mExp[2] + '%</span>';
              h += '</div>';
              return;
            }
          }
          h += '<div class="text-gray-300">' + _escHtml(sp) + '</div>';
        });
        h += '</div>';
      } else {
        h += '<span class="text-gray-300">' + _escHtml(c.text || '') + '</span>';
      }
      h += '</div>';

      // ★ v5.53：期望值段（仅概率档）——"下一手大概来什么牌"，人类下决心最需要这个
      // ★ v5.65：摸牌期望已移入② 意图段（此处不再单独渲染）

      // ② 出牌意图（含账本明细）
      if (c.intent) {
        // ★ v5.66：② 意图整块加外框；标题与内容分两行（内容转行显示）
        h += '<div class="' + (c.probAI ? 'rounded border border-gray-700/60 bg-gray-800/20 px-2 py-1.5 mb-1.5' : 'mb-1.5') + '">';
        h += '<div><span class="text-yellow-500 font-bold mr-1">② 意图</span></div>';
        h += '<div class="text-gray-200 mt-0.5">' + _escHtml(c.intent.text || '') + '</div>';
        // ★ v5.65：期望牌点属于意图内容，且仅暗牌/牌堆时引擎才给（手牌/明牌无"期望"概念）
        if (c.expect && c.expect.text) {
          h += '<div class="mt-1 rounded border border-sky-700/40 bg-sky-950/20 px-2 py-1 text-gray-200">' +
               _escHtml(c.expect.text) + '</div>';
        }
        if (c.intent.expected) h += '<div class="text-gray-500 mt-0.5">期望点数：' + _escHtml(c.intent.expected) + '</div>';
        // ★ v5.67 用户要求：「意图和本手选它内容是一体的，要在同一个大框架下，
        //   然后可以再细分小框架」→ 此处**不闭合**意图框，让下面的候选账本落在框内。
        var lg = c.intent.ledger || [];
        if (lg.length) {
          // ★ v5.52：每条账本项加边框分组。
          //   概率档（c.probAI）按净胜率高低分三档配色：最优(绿) / 次优(灰蓝) / 最差(暗红)，
          //   并在每行左侧加竖条色块，玩家一眼能分出"这手好在哪、别的差在哪"。
          //   加权档沿用原来的纯表格（不改变现有观感）。
          var isProb = !!c.probAI;
          // 归一化找最高/最低，用于分档（概率档用）
          var _mx = -Infinity, _mn = Infinity;
          lg.forEach(function (it) {
            var v = (typeof it.win === 'number') ? it.win : (Number(it.delta) || 0);
            if (v > _mx) _mx = v;
            if (v < _mn) _mn = v;
          });
          var _span = (_mx - _mn) || 1;
          h += '<div class="mt-1.5">';
          // ★ v5.66 用户要求：概率档**删除**「候选落点成功率（…计算过程）」这句说明文字
          if (!isProb) {
            h += '<div class="text-gray-500 mb-1">决策账本（权重计分）</div>';
          } else {
            h += '<div class="mb-1"></div>';
          }
          if (isProb) {
            h += '<div class="space-y-1">';
            lg.forEach(function (it) {
              var v = (typeof it.win === 'number') ? it.win : (Number(it.delta) || 0);
              var tier = (v >= _mx - _span * 0.15) ? 'best' : (v <= _mn + _span * 0.15 ? 'worst' : 'mid');
              var picked = !!it.pick || /★/.test(it.title || it.label || '');
              var bar = tier === 'best' ? 'bg-green-500/80' : (tier === 'worst' ? 'bg-red-500/60' : 'bg-slate-400/60');
              var bg = picked ? 'bg-green-900/25 border-green-600/60'
                : (tier === 'best' ? 'bg-gray-800/60 border-gray-600/50'
                  : (tier === 'worst' ? 'bg-gray-900/70 border-gray-700/50' : 'bg-gray-800/40 border-gray-700/40'));
              var pos = v >= 0;
              // 主体：左=净胜率+落点标题，右=【计算过程】独立框（用户要求区分开）
              h += '<div class="rounded border px-1.5 py-1 ' + bg + '">';
              h += '<div class="flex items-start gap-1.5">';
              h += '<span class="flex-shrink-0 w-0.5 self-stretch rounded-full ' + bar + '"></span>';
              h += '<div class="flex-1 min-w-0">';
              h += '<div class="flex items-baseline gap-1.5 flex-wrap">';
              // ★ v5.65：意图段不显示胜率（用户 04:38：只有①局势 / ③结果显示胜率）
              h += '<span class="text-gray-200">' + _escHtml(it.title || it.label || '') + '</span>';
              h += '</div>';
              // ---- 计算过程：独立框，与标题视觉分离 ----
              if (it.steps && it.steps.length) {
                h += '<div class="mt-1 rounded border border-gray-600/40 bg-gray-900/60 px-1.5 py-1">';
                h += '<div class="text-gray-500 mb-0.5">计算过程</div>';
                it.steps.forEach(function (st) {
                  h += '<div class="flex items-start gap-1 text-[10px] leading-relaxed">' +
                       '<span class="flex-shrink-0 w-12 text-gray-500 text-right pr-1">' + _escHtml(st.k) + '</span>' +
                       '<span class="text-gray-300">' + _escHtml(st.v) + '</span></div>';
                });
                h += '</div>';
              } else if (it.calc || it.note) {
                h += '<div class="mt-1 rounded border border-gray-600/40 bg-gray-900/60 px-1.5 py-0.5 text-gray-400">' +
                     _escHtml(it.calc || it.note) + '</div>';
              }
              h += '</div></div></div>';
            });
            h += '</div>';
          } else {
            h += '<table class="w-full border-collapse">';
            lg.forEach(function (it) {
              var pos = it.delta >= 0;
              h += '<tr><td class="align-top pr-2 whitespace-nowrap font-bold ' + (pos ? 'text-green-400' : 'text-red-400') + '">' +
                   (pos ? '+' : '') + _escHtml(it.delta) + '</td>' +
                   '<td class="align-top pr-2 text-gray-200">' + _escHtml(it.label) + '</td>' +
                   '<td class="align-top text-gray-500">' + _escHtml(it.note || '') + '</td></tr>';
            });
            h += '</table>';
          }
          h += '</div>';
        }
        // ★ v5.87：本手专属的收益值/风险值/净收益。
        //   **放在意图段末尾**（不是③成果段）——③只有暗牌/牌堆才有，
        //   而这一手可能打的是手牌，放③就看不见了。
        if (c.probAI && c.valueRisk) {
          var _vr = c.valueRisk;
          var _sgn = function (v) { return (v >= 0 ? '+' : '') + v; };
          var _r1 = function (v) { return Math.round((v || 0) * 1000) / 10; };
          var _pc = function (v) { return _escHtml(_sgn(Math.round((v || 0) * 1000) / 10)) + '%'; };
          h += '<div class="mt-1 rounded border border-gray-600/50 bg-gray-900/60 px-1.5 py-1">';
          h += '<div class="text-gray-400 mb-0.5">这一手的账（收益值 / 风险值 / 净收益）</div>';
          h += '<div class="text-[10px] text-gray-600 mb-0.5">单位：胜率百分点（1% = 1 个百分点）</div>';
          h += '<div class="flex items-baseline gap-1.5 flex-wrap text-[11px]">';
          h += '<span class="px-1 rounded bg-emerald-900/50 border border-emerald-700/50 text-emerald-300">收益值 ' +
               _escHtml(_pc(_vr.gain)) + '</span>';
          h += '<span class="px-1 rounded bg-amber-900/50 border border-amber-700/50 text-amber-300">风险值 ' +
               _escHtml(_pc(-(_vr.risk || 0))) + '</span>';
          h += '<span class="px-1 rounded bg-sky-900/60 border border-sky-700/50 text-sky-300">净收益 ' +
               _escHtml(_pc(_vr.net)) + '</span>';
          if (_vr.rank) h += '<span class="px-1 rounded bg-gray-800 border border-gray-600/60 text-gray-400">候选第 ' +
               _escHtml(_vr.rank) + '/' + _escHtml(_vr.rankOf) + ' 名</span>';
          h += '</div>';
          if (_vr.parts && _vr.parts.length) {
            h += '<div class="mt-0.5 text-[10px] text-gray-500 leading-relaxed">收益值 = ' +
                 _vr.parts.map(function (p) {
                   return _escHtml(p.k) + ' ' + _pc(p.v);
                 }).join(' ＋ ') + ' = ' + _escHtml(_pc(_vr.gain)) + '</div>';
          }
          if (_vr.isBlind) {
            h += '<div class="mt-0.5 text-[10px] text-gray-500 leading-relaxed">风险值：牌点不可见（暗牌/牌堆）→ 按活牌分布取期望' +
                 '（本手期望 ' + _escHtml(_vr.expectedPoint) + ' 点），活牌里能触发拖/撞/压的占 ' +
                 _escHtml(Math.round((_vr.pLost || 0) * 100)) + '%</div>';
          } else {
            h += '<div class="mt-0.5 text-[10px] text-gray-500 leading-relaxed">风险值：本牌 ' +
                 _escHtml(_vr.cardValue) + ' 点　活牌里被压 ' + _escHtml(Math.round((_vr.pPress || 0) * 100)) +
                 '% ／ 被撞 ' + _escHtml(Math.round((_vr.pCrash || 0) * 100)) +
                 '% ／ 被拖 ' + _escHtml(Math.round((_vr.pDrag || 0) * 100)) +
                 '% → 活牌里能触发任一途径的占 ' + _escHtml(Math.round((_vr.pLost || 0) * 100)) + '%' +
                 (_vr.sureAny ? '，<span class="text-red-400">但对手该路已有现成威胁 → 视为 100%</span>' :
                   (_vr.exposure < 1 ? '，落点隐蔽 ×' + _escHtml(_vr.exposure) : '')) + '</div>';
          }
          h += '<div class="mt-0.5 text-[10px] text-gray-500 leading-relaxed">净收益 = 收益值 ' +
               _escHtml(_pc(_vr.gain)) + ' − ' + _escHtml(_vr.riskW) + ' × 风险值 ' +
               _escHtml(Math.round((_vr.risk || 0) * 1000) / 10) + '% = ' + _escHtml(_pc(_vr.net)) + '</div>';
          h += '</div>';
        }
        // v5.67：账本块结束 → 闭合意图大框（意图与「本手选它」同属一个框架）
        h += '</div>';
      }

      // ③ 结果预测（仅暗/堆牌）
      if (c.prediction) {
        h += '<div class="' + (c.probAI ? 'rounded border border-gray-700/60 bg-gray-800/20 px-2 py-1.5 mb-1' : 'border-t border-gray-700/50 pt-1.5 mt-1.5') + '">';
        h += '<div><span class="text-yellow-500 font-bold mr-1">' + (c.probAI ? '③ 成果' : '③ 结果') + '</span>';
        // ★ v5.66 用户要求：概率档删除标题后面的文字——它与下方逐条框里的内容完全重复。
        //   加权档仍保留原有的 text。
        if (!c.probAI) h += '<span class="text-gray-200">' + _escHtml(c.prediction.text || '') + '</span>';
        h += '</div>';
        // ★ v5.67 用户纠正：「路权 +1路 → 我1/对手0 / 牌型 L0→L1（升级+1级）这两项
        //   **上移至成果下方**」——即排在胜率框**上面**，紧跟成果标题。
        //   概率档：出牌后的每项变化单独加框，好坏分色
        if (c.probAI) {
          (c.prediction.good || []).forEach(function (g2) {
            h += '<div class="mt-0.5 rounded border border-gray-700/50 bg-gray-800/40 px-1.5 py-0.5 text-gray-300">' +
                 _escHtml(g2) + '</div>';
          });
        }
        // ★ v5.57：概率档在③段显示【事后胜率】，与①的"预期胜率"对比 = 这手的实际作用
        if (c.probAI && c.winProb && c.winProb.after) {
          var _a = c.winProb.after;
          var _dSign = function (v) { return (v >= 0 ? '+' : '') + v; };
          h += '<div class="mt-1 rounded border border-emerald-700/40 bg-emerald-950/15 px-1.5 py-1">';
          h += '<div class="text-emerald-400 font-bold mb-0.5">这手让胜率变成</div>';
          h += '<div class="flex items-baseline gap-1.5 flex-wrap text-[11px]">';
          h += '<span class="px-1 rounded bg-sky-900/60 border border-sky-700/50 text-sky-300">五路全胜 ' +
               _escHtml(_a.pTactical) + '% <span class="text-emerald-400">(' + _dSign(_a.dTac) + 'pt)</span></span>';
          h += '<span class="px-1 rounded bg-violet-900/60 border border-violet-700/50 text-violet-300">牌面获胜 ' +
               _escHtml(_a.pStrategic) + '% <span class="text-emerald-400">(' + _dSign(_a.dStrat) + 'pt)</span></span>';
          h += '</div></div>';
        }
        // 加权档：绿/红行（旧样式，完全不变）
        if (!c.probAI) {
          (c.prediction.good || []).forEach(function (g2) {
            h += '<div class="text-green-400 mt-0.5">＋ ' + _escHtml(g2) + '</div>';
          });
          (c.prediction.bad || []).forEach(function (b2) {
            h += '<div class="text-red-400 mt-0.5">－ ' + _escHtml(b2) + '</div>';
          });
        }
        h += '</div>';
      }

      h += '</div></div></div>';  // body + 卡片 + 外层
      return h;
    }

    // ★ 2025-10-11 折叠交互（事件委托，一次绑定全局生效）——
    //   回合记录每次刷新都重建 DOM，故不用逐元素绑定，改为 document 级委托。
    (function bindAiCommentToggle() {
      if (typeof document === 'undefined' || !document.addEventListener) return;
      if (document._aiCommentToggleBound) return;
      document._aiCommentToggleBound = true;
      document.addEventListener('click', function (e) {
        var t = e.target;
        // 命中标题栏或其子元素
        var head = t && t.closest ? t.closest('.ai-comment-toggle') : null;
        if (!head) return;
        var cid = head.getAttribute('data-cid');
        if (!cid) return;
        var body = document.getElementById(cid);
        if (!body) return;
        var hidden = body.classList.contains('hidden');
        body.classList.toggle('hidden', !hidden);
        // ★ v5.64 关键修复：回合记录**每次渲染都重建 DOM**（updateTurnHistoryDisplay），
        //   原来只在点击瞬间切 hidden → 下一次重建又变回收起，标题就"藏不住"。
        //   → 用全局集合记住哪些 cid 是展开态，渲染后据此还原（见 applyAiCommentState）。
        if (typeof window.__aiCommentOpen !== 'object' || !window.__aiCommentOpen) {
          window.__aiCommentOpen = {};
        }
        if (hidden) window.__aiCommentOpen[cid] = 1;
        else delete window.__aiCommentOpen[cid];
        //概率档：收起态= 标题行（带胜率）；展开态= 只留透明热区，**标题行隐藏**
        var wrap = head.closest('[data-ai-comment]');
        if (wrap) {
          var heads = wrap.querySelectorAll('.ai-comment-toggle');
          for (var i = 0; i < heads.length; i++) {
            var hd = heads[i];
            // ★ v5.64 修正：不再跳过 head 自己——
            //   点击标题时必须把**标题自己**也隐藏，否则标题永远藏不住（用户 04:21 反馈）。
            var isHotspot = hd.classList.contains('ai-comment-hotspot')
              || hd.classList.contains('ai-comment-collapse');   // 透明热区 / 展开态「收起」按钮
            if (hidden) {
              // 展开：热区显示、标题隐藏
              if (isHotspot) hd.classList.remove('hidden'); else hd.classList.add('hidden');
            } else {
              // 收起：标题显示、热区隐藏
              if (isHotspot) hd.classList.add('hidden'); else hd.classList.remove('hidden');
            }
          }
        }
        var arrow = head.querySelector('.ai-comment-arrow');
        // ★ v5.68用户要求：「不要再出现点击收起后展开文字变成收起」——
        //   hint 文案**固定为「展开 ▾」**，不随点击状态改写（标题与热区本就是互斥显隐，
        //   收起后标题重新出现时它仍是"展开"，语义恒定）。
        if (arrow) arrow.textContent = hidden ? '▾' : '▸';
        e.stopPropagation();
      }, true);

      // ★ v5.64：DOM 重建后按持久状态还原（展开态 + 标题隐藏）
      window.__applyAiCommentState = function (root) {
        var open = window.__aiCommentOpen;
        if (!open) return;
        var scope = root || document;
        var bodies = scope.querySelectorAll('.ai-comment-body');
        for (var i = 0; i < bodies.length; i++) {
          var b = bodies[i];
          var cid = b.id;
          if (!open[cid]) continue;
          b.classList.remove('hidden');
          var wrap = b.closest('[data-ai-comment]');
          if (!wrap) continue;
          var heads = wrap.querySelectorAll('.ai-comment-toggle');
          for (var j = 0; j < heads.length; j++) {
            var hd = heads[j];
            var isHotspot = hd.classList.contains('ai-comment-hotspot')
              || hd.classList.contains('ai-comment-collapse');
            if (isHotspot) hd.classList.remove('hidden');// 热区 / 收起按钮显示
            else hd.classList.add('hidden');               // ★ 标题隐藏（v5.64 修正）
          }
        }
      };
    })();

    // 【回合记录渲染】
    // ----------------------------------------------------------------------------
    // updateTurnHistoryDisplay: 将GameState.turnHistory渲染为层级列表（带图标分组样式）
    function updateTurnHistoryDisplay() {
      const content = document.getElementById('turn-history-content');
      if (!content) return;

      // action 中文名 → 字典键 映射
      var _actMap = {'出牌':'act_play','拖牌':'act_drag','撞牌':'act_clash','援牌':'act_support','围牌':'act_encircle','终止出牌':'act_stop','胜利':'act_win'};
      var _t = typeof __t === 'function' ? __t : function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;};
      var _tAct = function(a){var k=_actMap[a];return k?_t(k):a;};
      var _tFmt = function(k, vars){var s=_t(k);if(vars){for(var p in vars){s=s.replace('{'+p+'}',vars[p]);}}return s;};

      if (!GameState.turnHistory || GameState.turnHistory.length === 0) {
        content.innerHTML = `
          <div class="text-center text-gray-500 text-sm py-8">
            <svg class="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            <div data-i18n="turn_no_record">暂无回合记录</div>
            <div class="text-xs text-gray-600 mt-1" data-i18n="turn_record_hint">游戏开始后将自动记录</div>
          </div>
        `;
      } else {
        // 按回合数分组
        const grouped = {};
        GameState.turnHistory.forEach(record => {
          const key = record.turnNumber;
          if (!grouped[key]) grouped[key] = [];
          grouped[key].push(record);
        });

        // ★ 2026-10-4 顺序显示（用户指令：从上至下）——最早回合在上，最新回合在底部
        const turnNumbers = Object.keys(grouped).sort((a, b) => parseInt(a) - parseInt(b));

        let html = '';
        let recordId = 0;
        turnNumbers.forEach(turnNum => {
          const records = grouped[turnNum];
          const isPlayerTurn = records[0]?.player === 'player';

          html += `
            <div class="bg-gray-800/40 rounded-xl p-3 border border-gray-700/30">
              <div class="flex items-center gap-2 mb-3 pb-2 border-b border-gray-700/30">
                <div class="w-7 h-7 rounded-full flex items-center justify-center ${isPlayerTurn ? 'bg-blue-500/20 text-blue-400' : 'bg-red-500/20 text-red-400'} font-bold text-sm">
                  ${turnNum}
                </div>
                <div class="font-bold text-white text-sm">${_tFmt('turn_round_n', {n: turnNum})}</div>
                <div class="ml-auto text-xs text-gray-500">${records[0]?.timestamp || ''}</div>
              </div>

              <div class="space-y-2">
          `;

          records.forEach(record => {
            // ★ 联机2v2模式：我方显示"我方"，其他人显示真实昵称
            var playerName;
            var _isOnline2v2 = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode);
            if (_isOnline2v2 && record.subTurn >= 0 && GameState.fourPlayerActive) {
              // ★ 联机2v2：我方固定显示"我方"，其他人用真实昵称
              if (record.subTurn === PBOnline.playerIdx) {
                playerName = _t('me');
              } else {
                var _realName = (typeof PBOnline.getSubPlayerName === 'function') ? PBOnline.getSubPlayerName(record.subTurn) : '';
                playerName = _realName || _tFmt('player_x', {n: record.subTurn + 1});
              }
            } else if (record.subTurn >= 0 && GameState.fourPlayerActive) {
              // ★ 人机2v1模式：保持原样
              var _names = [_t('ai_a'), _t('player_a'), _t('ai_b'), _t('player_b')];
              playerName = _names[record.subTurn] || _t('unknown');
            } else if (record.player === 'player') {
              playerName = _t('me');
            } else if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline) {
              playerName = PBOnline.getOpponentName() || _t('opp');
            } else {
              playerName = _t('opp');
            }
            const playerBg = record.player === 'player' ? 'bg-blue-500/10' : 'bg-red-500/10';
            const playerBorder = record.player === 'player' ? 'border-blue-500/30' : 'border-red-500/30';
            const playerText = record.player === 'player' ? 'text-blue-400' : 'text-red-400';
            const actionIcon = getActionIcon(record.action);
            const actionColor = getActionColor(record.action);
            // ★ 2026-10-4 用户指令：回合记录不再显示匹配策略（AI 决策调试信息），恒不渲染；
            //   strategyInfo 数据生成链路保留，便于日后恢复
            const hasStrategy = false;
            const currentId = 'turn-record-' + recordId++;

            html += `
              <div class="rounded-lg ${playerBg} border border-transparent transition-colors ${hasStrategy ? 'turn-record-strategy' : ''}">
                <div class="flex items-start gap-2 p-2 cursor-pointer ${hasStrategy ? 'turn-record-clickable' : ''}" data-record-id="${currentId}">
                  <div class="${actionColor} mt-0.5">${actionIcon}</div>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                      <span class="${playerText} font-medium text-sm">${playerName}</span>
                      <span class="${actionColor} text-xs font-semibold">${_tAct(record.action)}</span>
                    </div>
                    ${record.details ? `<div class="text-gray-400 text-xs mt-1 leading-relaxed">${record.details}</div>` : ''}
                    ${record.extraInfo ? `<div class="text-gray-500 text-[10px] mt-1 flex flex-wrap gap-x-2">${record.extraInfo}</div>` : ''}
                  </div>
                </div>
                ${_renderAiComment(record)}
                ${hasStrategy ? `
                  <div id="${currentId}" class="hidden px-2 pb-2">
                    <div class="bg-gray-900/60 rounded-lg p-3 border border-yellow-500/30">
                      <div class="flex items-center gap-2 mb-3">
                        <span class="text-yellow-400 text-xs font-bold">${record.strategyInfo.strategy}</span>
                        <span class="text-yellow-300 text-xs">${record.strategyInfo.phase} ${record.strategyInfo.step}</span>
                      </div>
                      <div class="text-gray-300 text-xs mb-3">${record.strategyInfo.desc}</div>
                      <div class="border-t border-gray-700/50 pt-3">
                        <div class="text-gray-500 text-xs mb-2 font-semibold">决策路径:</div>
                        <div class="space-y-1 max-h-40 overflow-y-auto">
                          ${record.strategyInfo.log && record.strategyInfo.log.length > 0 ? record.strategyInfo.log.map(function(log) {
                            var statusColor = log.status === 'success' ? 'text-green-400' : log.status === 'info' ? 'text-blue-400' : 'text-red-400';
                            var statusIcon = log.status === 'success' ? '✓' : log.status === 'info' ? '•' : '✗';
                            return '<div class="flex items-start gap-2 text-xs"><span class="' + statusColor + '">' + statusIcon + '</span><span class="text-gray-400">' + log.phase + '</span><span class="text-yellow-300">[' + log.step + ']</span><span class="text-gray-300">' + log.desc + '</span></div>';
                          }).join('') : '<div class="text-gray-500 text-xs">' + _t('no_detail_log') + '</div>'}
                        </div>
                      </div>
                      ${record.strategyInfo.cardType ? `<div class="border-t border-gray-700/50 pt-3 mt-2"><div class="text-gray-500 text-xs mb-1 font-semibold">当前牌型:</div><div class="text-gray-400 text-xs">${record.strategyInfo.cardType.description}</div></div>` : ''}
                      ${record.strategyInfo.keyCardPoints && record.strategyInfo.keyCardPoints.length > 0 ? `<div class="border-t border-gray-700/50 pt-3 mt-2"><div class="text-gray-500 text-xs mb-1 font-semibold">关键牌点:</div><div class="text-gray-400 text-xs">${record.strategyInfo.keyCardPoints.map(function(v) { if (v === 1) return 'A'; if (v === 11) return 'J'; if (v === 12) return 'Q'; if (v === 13) return 'K'; return v; }).join(', ')}</div></div>` : ''}
                    </div>
                  </div>
                ` : ''}
              </div>
            `;
          });

          html += `
              </div>
            </div>
          `;
        });

        content.innerHTML = html;
        // ★ v5.64：DOM 重建后还原"哪些注释是展开态"（否则标题隐藏状态会丢失）
        if (typeof window.__applyAiCommentState === 'function') window.__applyAiCommentState(content);
      }

      // 每次刷新记录列表时同步更新牌库统计
      updateTurnHistoryDeckStats();

      // innerHTML 注入的新元素需要立即翻译（applyGameLang 已经切好语言）
      if (typeof __t === 'function') {
        content.querySelectorAll('[data-i18n]').forEach(function (el) {
          var key = el.getAttribute('data-i18n');
          var dict = window.__gameTranslations && window.__gameTranslations[__gameCurrentLang];
          if (dict && dict[key] != null) {
            el.textContent = dict[key];
          }
        });
      }
    }

    // ----------------------------------------------------------------------------
    // 【策略信息切换】
    // ----------------------------------------------------------------------------
    // toggleStrategyInfo: 点击AI出牌记录时，展开/收起策略信息（事件委托）
    function setupTurnRecordClickHandler() {
      const content = document.getElementById('turn-history-content');
      if (content) {
        content.addEventListener('click', function(e) {
          const clickable = e.target.closest('.turn-record-clickable');
          if (clickable) {
            const recordId = clickable.getAttribute('data-record-id');
            if (recordId) {
              const element = document.getElementById(recordId);
              if (element) {
                element.classList.toggle('hidden');
              }
            }
          }
        });
      }
    }

    function toggleStrategyInfo(elementId) {
      const element = document.getElementById(elementId);
      if (element) {
        element.classList.toggle('hidden');
      }
    }

    // ----------------------------------------------------------------------------
    // 【牌库统计渲染】
    // ----------------------------------------------------------------------------
    // updateTurnHistoryDeckStats: 显示A~K每个点数已打出多少张，某点数达到4张时高亮红色
    // 同时汇总显示：已打出总数、剩余总数、完成组数
    function updateTurnHistoryDeckStats() {
      const cardValues = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
      let totalPlayed = 0;
      let completedSets = 0;

      cardValues.forEach(value => {
        const count = GameState.playedCardsCount[value] || 0;
        const countElement = document.getElementById('th-count-' + value);
        const containerElement = document.getElementById('th-container-' + value);

        if (countElement) {
          countElement.textContent = count;
          if (count > 0) {
            countElement.style.color = '#4ade80';
          } else {
            countElement.style.color = '#60a5fa';
          }
        }

        if (containerElement) {
          if (count === 4) {
            containerElement.style.backgroundColor = 'rgba(239, 68, 68, 0.3)';
            containerElement.style.borderColor = 'rgba(239, 68, 68, 0.6)';
            completedSets++;
          } else {
            containerElement.style.backgroundColor = 'transparent';
            containerElement.style.borderColor = 'rgba(100, 100, 120, 0.5)';
          }
        }

        totalPlayed += count;
      });

      const totalPlayedElement = document.getElementById('th-total-played');
      if (totalPlayedElement) totalPlayedElement.textContent = totalPlayed;

      const totalRemainingElement = document.getElementById('th-total-remaining');
      if (totalRemainingElement) totalRemainingElement.textContent = 52 - totalPlayed;

      const completedSetsElement = document.getElementById('th-completed-sets');
      if (completedSetsElement) completedSetsElement.textContent = completedSets;
    }

    // ----------------------------------------------------------------------------
    // 【游戏状态重置】
    // ----------------------------------------------------------------------------
    // resetGameState: 将GameState所有属性重置为初始值
    // 用于游戏重新开始时，清除所有运行时数据
    function resetGameState() {
      GameState.gamePhase = 'setup';
      GameState.currentTurn = 'player';
      GameState.turnNumber = 1;
      GameState.playerWins = [false, false, false, false, false];
      GameState.opponentWins = [false, false, false, false, false];
      GameState.playerDeck = [];
      GameState.playerHand = [];
      GameState.playerRevealedCards = [];
      GameState.playerDarkCards = [];
      GameState.playerField = [null, null, null, null, null];
      GameState.playerStack = [[], [], [], [], []];
      GameState.playerNeutralCards = [[], [], [], [], [], [], []];
      GameState.opponentDeck = [];
      GameState.opponentHand = [];
      GameState.opponentRevealedCards = [];
      GameState.opponentDarkCards = [];
      GameState.opponentField = [null, null, null, null, null];
      GameState.opponentStack = [[], [], [], [], []];
      GameState.opponentNeutralCards = [[], [], [], [], [], [], []];
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = false;
      GameState.isDealingCards = false;
      GameState.cardPlayedThisTurn = false;
      GameState.turnHistory = [];
      GameState.lastPlayedCard = null;
      // ★ 2026-9-25 士气值：每局从0开始（不再跨局 localStorage 累计）
      EnergyState.playerPoints = 0;
      EnergyState.opponentPoints = 0;
      renderEnergySlots();
      // ★ 回放录制：任何全量状态重置都终止/清空当前录制
      //   （正常结束的录制已在 end() 中保存，此处只清理未完成/残留状态）
      if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
        try { ReplayRecorder.reset(); } catch (e) {}
      }
      GameState.playedCardsCount = {};
      GameState.timers = [];
      GameState.isGameInterrupted = false;
      GameState.firstPlayer = 'player';
      GameState.pendingCallCard = null;
      // 可出牌提示光环定时器
      GameState.playableHintTimer = null;
      // 匹配操作状态初始化
      GameState.adjacentCards = [];
      GameState.isDraggingCard = false;
      GameState.draggedCard = null;
      GameState.draggedCardSource = null;
      GameState.matchActionPerformedThisTurn = false;
      GameState.pendingRoadIndex = null;
      GameState.pendingMatchCard = null;
      // 四人模式状态重置
      GameState.fourPlayerActive = false;
      GameState.fourPlayerSubTurn = 0;
      GameState.fourPlayerTurnOrder = [0, 1, 3, 2];
      GameState.fourPlayerTurnIndex = 0;
      GameState.fourPlayerAIStopped = [false, false];
      GameState.fourPlayerPlayerStopped = [false, false];
      // 清理四人模式高亮框
      var fpBox = document.getElementById('fp-active-box');
      if (fpBox) fpBox.remove();
      // ★ 清理牌堆线框和禁用状态
      var fpDeckBox = document.getElementById('fp-active-box-deck');
      if (fpDeckBox) fpDeckBox.remove();
      var fpDeckEl = document.getElementById('player-deck');
      if (fpDeckEl) fpDeckEl.classList.remove('fp-inactive-side');
      // ★ 清理所有玩家卡牌容器的 fp-inactive-side 标记
      ['player-dark-cards', 'player-dark-cards-right', 'player-hand', 'player-hand-right',
       'player-revealed-cards', 'player-revealed-cards-right'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.classList.remove('fp-inactive-side');
      });
      // ★ 2026-9-18 FIX（单人匹配悬停失效·用户实测定位）：人机2v1/练习中"AI队友回合"给
      //   .player-function-area 加的 teammate-turn（禁玩家卡牌 hover），若恰好在队友回合时
      //   结束对局则永久残留 → 之后开的单人匹配手牌/明牌/暗牌悬停全部失效。
      //   resetGameState 每局开始必经，此处一并清理（开局状态本就不应带"队友回合"禁用）
      document.querySelectorAll('.player-function-area').forEach(function(el) {
        el.classList.remove('teammate-turn');
      });
      // ★ 清理头像边框闪烁
      ['online-player-info', 'online-teammate-info', 'online-opp-info', 'online-opp2-info',
       'player-profile', 'teammate-profile'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.classList.remove('avatar-turn-active');
      });
      // 叫牌相关状态重置（重新开始时金色字体恢复正常）
      GameState.callCardSuccessCount = 0;
      GameState.callCardBonusScore = 0;
      GameState.callCardCardTypeBonus = 0;
      GameState.callCardHasSuccess = false;

      if (typeof isMagicForestTheme === 'function' && isMagicForestTheme()) {
        var gc = getGameContainer();
        if (gc) {
          gc.classList.remove('forest-lose-faded');
        }
      }

      // ★ 2026-9-2: 只清理 GameState 内部的异步锁，绝不能碰 PBOnline 或 practice DOM！
      //   resetGameState 在 startGame() 内部被调用，此时 PBOnline.isPractice2v2Mode 还没设置好，
      //   如果在这里清掉 isPractice2v2Mode → 背景/布局判断错乱（1v1背景+2v1布局）。
      //   practice 2v2 标记的清理只在 startBtn 点击 handler（游戏结束重开）和 restartBtn（退出练习）里做。
      GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
      GameState._opponentPlayCardExecuting = false;
      GameState._turnGen = (GameState._turnGen || 0) + 1;
      GameState._fourPlayerAdvancing = false;
      GameState.localMatchInProgress = false;
      // ★ 新一局必须恢复匹配检查！教程"交互步骤2"会把 disableMatchCheck 设为 true，
      //   若不重置，残留 true 会让之后所有人机/联机对局的 executeCardPlay 跳过匹配检查
      //   （拖牌/撞牌/援牌/围牌全部失效——即"匹配动画不显示"的根因）
      GameState.disableMatchCheck = false;
      GameState._switchTurnPending = false;
      GameState._deferredPracticeSync = null;
      if (GameState._deferredSyncTimer) { clearInterval(GameState._deferredSyncTimer); GameState._deferredSyncTimer = null; }

      if (typeof updateResults === 'function') {
        updateResults();
      }
    }

    // ============================================================================
    // 【JS-6/10】卡牌管理系统
    // ============================================================================
    // 包含: 清除槽位、创建卡牌、洗牌、卡牌数据结构
    
    // ----------------------------------------------------------------------------
    // 【清除所有卡牌槽位】
    // ----------------------------------------------------------------------------
    // clearAllCardSlots: 重置所有区域的卡牌槽位到初始状态
    // 重置的区域包括:
    //   我方: 场牌区(5)、叠牌区(5)、手牌区(6)、明牌区(3)、暗牌区(5)、中立区(7)
    //   对方: 场牌区(5)、叠牌区(5)、手牌区(6)、明牌区(3)、暗牌区(5)、中立区(7)
    //   中央: 拼点栏(5)
    // 操作: 清空内容、移除内联样式、恢复默认className
    // 槽位样式恢复规则:
    //   - 手牌区: 恢复背景色(我方蓝色/对方红色)，无边框
    //   - 暗牌区: 恢复边框(灰色半透明)，无背景色
    //   - 明牌区: 恢复边框(黄色)，无背景色
    //   - 场牌区/叠牌区: 恢复边框(半透明)，无背景色
    //   - 中立区/拼点栏: 恢复边框，无背景色
    function clearAllCardSlots() {
      const playerRoadSlots = document.querySelectorAll('.player-road-slot');
      playerRoadSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'road-slot player-road-slot game-cursor-hover flex flex-col player-road-slot-metal';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'road-slot player-road-slot game-cursor-hover flex flex-col player-road-slot-glass';
        } else {
          slot.className = 'road-slot player-road-slot game-cursor-hover flex flex-col border border-primary/30 rounded player-road-slot-classic';
        }
      });

      const playerHandSlots = document.querySelectorAll('.player-hand-slot');
      playerHandSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'player-hand-slot w-16 h-24 bg-primary rounded game-cursor-hover card-hover flex items-center justify-center metal-hand-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'player-hand-slot w-16 h-24 rounded game-cursor-hover card-hover flex items-center justify-center glass-hand-slot';
        } else if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'player-hand-slot w-16 h-24 game-cursor-hover card-hover flex items-center justify-center stone-hand-slot';
        } else {
          slot.className = 'player-hand-slot w-16 h-24 bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center';
        }
      });

      const playerRevealedSlots = document.querySelectorAll('.player-revealed-slot');
      playerRevealedSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'player-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover metal-revealed-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'player-revealed-slot w-16 h-24 rounded flex items-center justify-center game-cursor-hover card-hover glass-revealed-slot';
        } else {
          slot.className = 'player-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot';
        }
      });

      const playerDarkSlots = document.querySelectorAll('.player-dark-slot');
      playerDarkSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'player-dark-slot w-16 h-24 border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover metal-dark-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'player-dark-slot w-16 h-24 rounded flex items-center justify-center game-cursor-hover dark-card-hover glass-dark-slot';
        } else if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'player-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot';
        } else {
          slot.className = 'player-dark-slot w-16 h-24 border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot';
        }
      });

      const opponentRoadSlots = document.querySelectorAll('.opponent-road-slot');
      opponentRoadSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'road-slot opponent-road-slot flex flex-col-reverse opponent-road-slot-metal';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'road-slot opponent-road-slot flex flex-col-reverse opponent-road-slot-glass';
        } else {
          slot.className = 'road-slot opponent-road-slot flex flex-col-reverse border border-secondary/30 rounded opponent-road-slot-classic';
        }
      });

      const opponentHandSlots = document.querySelectorAll('.opponent-hand-slot');
      opponentHandSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'opponent-hand-slot w-16 h-24 bg-secondary rounded opponent-metal-hand-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'opponent-hand-slot w-16 h-24 rounded opponent-glass-hand-slot';
        } else if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'opponent-hand-slot w-16 h-24 stone-hand-slot';
        } else {
          slot.className = 'opponent-hand-slot w-16 h-24 bg-secondary rounded card-shadow';
        }
      });

      const opponentRevealedSlots = document.querySelectorAll('.opponent-revealed-slot');
      opponentRevealedSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'opponent-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center opponent-metal-revealed-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'opponent-revealed-slot w-16 h-24 rounded flex items-center justify-center opponent-glass-revealed-slot';
        } else {
          slot.className = 'opponent-revealed-slot w-16 h-24 border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot';
        }
      });

      const opponentDarkSlots = document.querySelectorAll('.opponent-dark-slot');
      opponentDarkSlots.forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'opponent-dark-slot w-16 h-24 border border-secondary/50 rounded flex items-center justify-center opponent-metal-dark-slot';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'opponent-dark-slot w-16 h-24 rounded flex items-center justify-center opponent-glass-dark-slot';
        } else if (selectedCardFaceStyle === 'cartoon') {
          slot.className = 'opponent-dark-slot w-16 h-24 game-cursor-hover dark-card-hover stone-dark-slot';
        } else {
          slot.className = 'opponent-dark-slot w-16 h-24 border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot';
        }
      });

      const resultSlots = document.querySelectorAll('.result-slot');
      const isMetalStyleReset = selectedCardFaceStyle === 'metal';
      const isGlassStyleReset = selectedCardFaceStyle === 'glass';
      resultSlots.forEach(slot => {
        slot.innerHTML = '';
        if (isMetalStyleReset) {
          slot.removeAttribute('style');
          slot.className = 'result-slot w-[4.6rem] h-8 rounded flex items-center justify-center result-slot-metal';
        } else if (isGlassStyleReset) {
          slot.removeAttribute('style');
          slot.className = 'result-slot result-slot-glass w-[4.6rem] h-8 border border-accent rounded flex items-center justify-center';
        } else {
          slot.removeAttribute('style');
          // ★ 2026-9-30：经典分支重置=水晶灯管熄灭态（g3-e）
          slot.className = 'result-slot rs-g3 rs-e w-[4.6rem] h-8 flex items-center justify-center';
          slot.innerHTML = '<div class="rs-face"><div class="rs-rim"></div></div>';
        }
      });

      const playerNeutralSlots = document.querySelectorAll('.player-neutral-slot');
      playerNeutralSlots.forEach(slot => {
        const numberLabel = slot.querySelector('.absolute');
        slot.innerHTML = '';
        slot.removeAttribute('style');
        slot.classList.remove('card-glow');
        if (numberLabel) {
          slot.appendChild(numberLabel);
        }
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'player-neutral-slot flex-1 h-full flex flex-col items-center justify-start p-1 relative player-neutral-slot-metal';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'player-neutral-slot flex-1 h-full flex flex-col items-center justify-start p-1 relative player-neutral-slot-glass';
        } else {
          slot.className = 'player-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-start p-1 relative player-neutral-slot-classic';
        }
        if (slot.dataset.slot === '6') {
          slot.classList.remove('border-r');
        }
      });

      const opponentNeutralSlots = document.querySelectorAll('.opponent-neutral-slot');
      opponentNeutralSlots.forEach(slot => {
        const numberLabel = slot.querySelector('.absolute');
        slot.innerHTML = '';
        slot.removeAttribute('style');
        slot.classList.remove('card-glow');
        if (numberLabel) {
          slot.appendChild(numberLabel);
        }
        if (selectedCardFaceStyle === 'metal') {
          slot.className = 'opponent-neutral-slot flex-1 h-full flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-metal';
        } else if (selectedCardFaceStyle === 'glass') {
          slot.className = 'opponent-neutral-slot flex-1 h-full flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-glass';
        } else {
          slot.className = 'opponent-neutral-slot flex-1 h-full border-r border-purple-500/30 flex flex-col items-center justify-end p-1 relative opponent-neutral-slot-classic';
        }
        if (slot.dataset.slot === '6') {
          slot.classList.remove('border-r');
        }
      });

      if (GameElements.opponent.deck) {
        GameElements.opponent.deck.style.backgroundColor = '';
      }

      if (GameElements.opponent.deck) {
        GameElements.opponent.deck.style.backgroundColor = '';
      }
    }

    // ----------------------------------------------------------------------------
    // 【创建卡牌】
    // ----------------------------------------------------------------------------
    // createCards: 创建52张标准扑克牌，洗牌后分成两堆各26张
    // 每张卡牌的数据结构:
    //   id:     唯一标识符(随机生成)
    //   suit:   花色(♠♥♣♦)
    //   rank:   点数(3-10,J,Q,K,A,2)
    //   value:  数值(用于比较大小，A=1,K=13)
    //   display:显示文本(如'3','J','A')
    function createCards() {
      // 联机模式：使用同步的牌组数据（Player 0 生成并发送给其他玩家）
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
        var syncData = PBOnline.deckSyncData;
        if (syncData) {
          // ★ 2026-9-17 FIX（同牌超4张根因）：拿哪副牌由"发牌方 subTurn"与"我方 subTurn"的
          //   阵营奇偶决定（服务器在 deck_sync 转发时附带 senderSubTurn）。
          //   原来按 myPlayerIdx 硬编码（1v1: 1=红方需交换）——自定义房红先手时 subTurnMap=[1,0]，
          //   接收端 myPlayerIdx=0 → 误判不换 → 双方各自 playerDeck 为同一副 → 手牌/暗牌逐张相同，
          //   同点数全场超过 4 张。2v2 同理（原注释"subTurn 2=红方"也是错的：蓝=[0,2] 红=[1,3]）。
          var _pIdx = (typeof PBOnline !== 'undefined' && PBOnline.playerIdx !== undefined) ? PBOnline.playerIdx : 0;
          var _senderSub = (typeof syncData.senderSubTurn === 'number') ? syncData.senderSubTurn : 0;
          var _myParity = _pIdx % 2, _senderParity = _senderSub % 2;
          var needSwap = (_myParity !== _senderParity);  // 不同阵营 → 拿"对方那副"当自己的牌堆
          if (needSwap) {
            GameState.playerDeck = syncData.opponentDeck;
            GameState.opponentDeck = syncData.playerDeck;
          } else {
            GameState.playerDeck = syncData.playerDeck;
            GameState.opponentDeck = syncData.opponentDeck;
          }
          console.log('[联机] 使用同步牌组数据, myPlayerIdx=' + _pIdx + ', senderSubTurn=' + _senderSub + ', swap=' + needSwap);

          // ★ 2v2在线模式：使用同步的回合顺序和叫牌设置
          if (PBOnline.isOnline2v2Mode && syncData.turnOrder) {
            window._online2v2TurnOrder = syncData.turnOrder;
            console.log('[2v2联机] 使用同步的回合顺序:', JSON.stringify(syncData.turnOrder));
          }
          if (typeof syncData.callCardEnabled !== 'undefined') {
            GameState.callCardEnabled = syncData.callCardEnabled;
            if (typeof updateCallCardBtnStyle === 'function') updateCallCardBtnStyle();
          }
          return;
        }
      }

      // 非联机模式或无同步数据：本地生成牌组
      const fullDeck = [];
      for (const suit of suits) {
        for (const rank of ranks) {
          fullDeck.push({
            id: Math.random().toString(36).substr(2, 9),
            suit,
            rank,
            value: values[rank],
            display: `${rank}`
          });
        }
      }
      
      shuffleArray(fullDeck);
      
      GameState.playerDeck = fullDeck.slice(0, 26);
      GameState.opponentDeck = fullDeck.slice(26);
      
      // 联机模式 Player 0（房主/数组索引0）：发送牌组数据给其他玩家
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && PBOnline.arrayIdx === 0) {
        // ★ 2v2在线模式：生成回合顺序并一起同步
        // 回合顺序固定为 [0,1,3,2]（蓝左→红左→红右→蓝右），不再使用【先手选择】随机。
        // 先手固定为座位0（蓝左）；每局的随机性由服务器随机分配玩家0123座位实现。
        if (PBOnline.isOnline2v2Mode) {
          var turnOrder2v2 = [0, 1, 3, 2];
          window._online2v2TurnOrder = turnOrder2v2;
          PBOnline.sendDeckSync(GameState.playerDeck, GameState.opponentDeck, {
            turnOrder: turnOrder2v2,
            callCardEnabled: GameState.callCardEnabled
          });
          // ★ 2v2在线模式：权威回合初始化（sendTurnInit2v2）延迟到发牌完成后执行
          //   （见 startGame 发牌完成处），避免服务器提前广播 turn_sync_2v2 导致
          //   客户端在发牌阶段就显示线框/头像高亮/倒计时
          console.log('[2v2联机] Player 0 已发送牌组+回合顺序:', JSON.stringify(turnOrder2v2));
        } else {
          PBOnline.sendDeckSync(GameState.playerDeck, GameState.opponentDeck);
        }
      }
      
    }

    // ----------------------------------------------------------------------------
    // 【洗牌算法】
    // ----------------------------------------------------------------------------
    // shuffleArray: Fisher-Yates(费雪-耶茨)洗牌算法
    // 从数组末尾开始，将当前元素与前面随机位置的元素交换
    function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    // ============================================================================
    // 【JS-7/10】动画效果系统
    // ============================================================================
    // 包含: CardAnimationConfig统一配置、createParticleSystem粒子系统、发牌动画、功能牌移动动画
    // 移植来源: 牌兵布阵（规则）.html 的 animateCardWithDustEffect/animateCardWithMeteorTrail/animateCardWithFireEffect 函数
    // 统一管理四种功能牌动画:
    //   hand:     手牌 - 灰尘轨迹
    //   fromDeck: 牌堆 - 烟雾轨迹
    //   revealed: 明牌 - 火焰粒子
    //   dark:     暗牌 - 流星轨迹+旋转1440°
    
    // ----------------------------------------------------------------------------
    // 【火球特效动画】
    // ----------------------------------------------------------------------------
    // animateCardWithFireEffect: 卡牌飞向堆叠区时的火焰轨迹效果
    // 特效组成:
    //   流星轨迹粒子: 卡牌飞行轨迹
    //   烟雾轨迹粒子: 飞行尾迹
    //   火焰粒子:    落地时的爆发效果
    // 参数:
    //   fromElement: 起始元素(来源槽位)
    //   toElement:   目标元素(目标槽位)
    //   playerType:  玩家类型('player'/'opponent')
    //   card:        卡牌数据(可选)
    function animateCardWithFireEffect(fromElement, toElement, playerType, card = null) {
      return new Promise((resolve) => {
        const fromRect = fromElement.getBoundingClientRect();
        let toRect = toElement.getBoundingClientRect();
        
        const tempCardHeight = 96;
        const gap = 4;
        
        if (toElement.classList.contains('player-road-slot') || toElement.classList.contains('opponent-road-slot')) {
          const existingCards = toElement.querySelectorAll('.card');
          const isPlayer = toElement.classList.contains('player-road-slot');
          
          if (existingCards.length > 0) {
            const lastCardRect = isPlayer 
              ? existingCards[existingCards.length - 1].getBoundingClientRect()
              : existingCards[0].getBoundingClientRect();
            
            toRect = {
              left: lastCardRect.left,
              top: isPlayer 
                ? lastCardRect.top + lastCardRect.height + gap
                : lastCardRect.top - tempCardHeight - gap,
              width: lastCardRect.width,
              height: tempCardHeight
            };
          } else {
            const slotRect = toElement.getBoundingClientRect();
            toRect = {
              left: slotRect.left,
              top: isPlayer 
                ? slotRect.top
                : slotRect.bottom - tempCardHeight,
              width: slotRect.width,
              height: tempCardHeight
            };
          }
        }

        fromRect.right = fromRect.left + fromRect.width;
        fromRect.bottom = fromRect.top + fromRect.height;
        toRect.right = toRect.left + toRect.width;
        toRect.bottom = toRect.top + toRect.height;
        
        const animCard = document.createElement('div');
        animCard.className = `w-16 h-24 rounded-lg shadow-lg z-40 transition-all duration-600 cubic-bezier(0.25, 0.46, 0.45, 0.94) overflow-hidden`;
        
        if (playerType === 'player') {
          if (card) {
            const isRoyal = isRoyalCard(card.display);
            const gradientStart = '#1e40af';
            const gradientEnd = '#3b82f6';
            const accentColor = '#60a5fa';
            
            if (isRoyal) {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `3px solid ${accentColor}`;
              animCard.style.borderRadius = '12px';
              animCard.style.boxShadow = `0 0 25px rgba(96, 165, 250, 0.4), 0 4px 15px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.15)`;
              animCard.innerHTML = `
                ${getShieldBorderHTML(true, card.display)}
                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; z-index: 1;">
                  <span style="font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">${card.display}</span>
                </div>
              `;
            } else {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `2px solid ${accentColor}`;
              animCard.style.borderRadius = '10px';
              animCard.style.boxShadow = `0 4px 15px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)`;
              animCard.innerHTML = `<div class="w-full h-full flex items-center justify-center text-white font-bold text-2xl">${card.display}</div>`;
            }
          } else {
            animCard.innerHTML = getCardBackElementHTML(true);
          }
        } else {
          if (card) {
            const isRoyal = isRoyalCard(card.display);
            const gradientStart = '#991b1b';
            const gradientEnd = '#ef4444';
            const accentColor = '#f87171';
            
            if (isRoyal) {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `3px solid ${accentColor}`;
              animCard.style.borderRadius = '12px';
              animCard.style.boxShadow = `0 0 25px rgba(248, 113, 113, 0.4), 0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255,255,255,0.15)`;
              animCard.innerHTML = `
                ${getShieldBorderHTML(false, card.display)}
                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; z-index: 1;">
                  <span style="font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">${card.display}</span>
                </div>
              `;
            } else {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `2px solid ${accentColor}`;
              animCard.style.borderRadius = '10px';
              animCard.style.boxShadow = `0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)`;
              animCard.innerHTML = `<div class="w-full h-full flex items-center justify-center text-white font-bold text-2xl">${card.display}</div>`;
            }
          } else {
            animCard.innerHTML = getCardBackElementHTML(false);
          }
        }
        
        animCard.style.position = 'fixed';
        animCard.style.left = `${fromRect.left}px`;
        animCard.style.top = `${fromRect.top}px`;
        animCard.style.width = `${fromRect.width}px`;
        animCard.style.height = `${fromRect.height}px`;
        animCard.style.scale = '1';
        animCard.style.opacity = '1';

        document.body.appendChild(animCard);

        const createMeteorTrailParticles = () => {
          const fromCenterX = (fromRect.left + fromRect.width / 2);
          const fromCenterY = (fromRect.top + fromRect.height / 2);
          
          let toCenterX = (toRect.left + toRect.width / 2);
          let toCenterY = (toRect.top + toRect.height / 2);
          
          if (toElement.classList.contains('opponent-road-slot') || toElement.classList.contains('player-road-slot')) {
            toCenterX = (toRect.left + toRect.width / 2);
            toCenterY = (toRect.top + toRect.height / 3);
          }
          
          const distanceX = toCenterX - fromCenterX;
          const distanceY = toCenterY - fromCenterY;
          const steps = 40;
          
          for (let i = 0; i < Math.min(4, steps); i++) {
            createParticle(i);
          }
          
          for (let i = 4; i < steps; i++) {
            setTimeout(() => {
              createParticle(i);
            }, i * 8);
          }
          
          function createParticle(i) {
            const progress = i / steps;
            const x = fromCenterX + distanceX * progress;
            const y = fromCenterY + distanceY * progress;
            
            const offsetX = (Math.random() - 0.5) * 2;
            const offsetY = (Math.random() - 0.5) * 2;
            
            const particle = document.createElement('div');
            
            const particleColor = playerType === 'player' ? '#00FFFF' : '#FF6600';
            
            particle.className = 'rounded-full opacity-100 z-30 pointer-events-none';
            particle.style.position = 'fixed';
            particle.style.left = `${x + offsetX}px`;
            particle.style.top = `${y + offsetY}px`;
            
            const size = Math.random() * 3 + 3;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.background = particleColor;
            particle.style.boxShadow = `0 0 ${size * 2.5}px ${size * 1.5}px ${particleColor}`;
            particle.style.borderRadius = '50% 50% 50% 50% / 60% 60% 40% 40%';
            particle.style.transform = `translate(-50%, -50%) rotate(${Math.atan2(distanceY, distanceX) * 180 / Math.PI}deg)`;
            
            document.body.appendChild(particle);
            
            setTimeout(() => {
              particle.style.transition = 'all 0.8s ease-out';
              particle.style.opacity = '0';
              particle.style.scale = '0';
              particle.style.transform = `translate(-50%, -50%) rotate(${Math.atan2(distanceY, distanceX) * 180 / Math.PI}deg) scale(2)`;
              
              setTimeout(() => {
                if (document.body.contains(particle)) {
                  document.body.removeChild(particle);
                }
              }, 800);
            }, 10);
          }
        };
        
        const createSmokeTrailParticles = () => {
          const fromCenterX = (fromRect.left + fromRect.width / 2);
          const fromCenterY = (fromRect.top + fromRect.height / 2);
          const toCenterX = (toRect.left + toRect.width / 2);
          const toCenterY = (toRect.top + toRect.height / 2);
          
          const distanceX = toCenterX - fromCenterX;
          const distanceY = toCenterY - fromCenterY;
          const steps = 20;
          
          for (let i = 0; i < steps; i++) {
            setTimeout(() => {
              const progress = i / steps;
              const x = fromRect.left + distanceX * progress + Math.random() * 64;
              const y = fromRect.top + distanceY * progress + Math.random() * 96;
              
              const particle = document.createElement('div');
              particle.className = 'w-3 h-3 rounded-full bg-gray-400 opacity-60 z-30 pointer-events-none';
              particle.style.position = 'fixed';
              particle.style.left = `${x}px`;
              particle.style.top = `${y}px`;
              particle.style.transform = 'translate(-50%, -50%)';
              
              document.body.appendChild(particle);
              
              setTimeout(() => {
                particle.style.transition = 'all 1.2s ease-out';
                particle.style.opacity = '0';
                particle.style.scale = '2';
                particle.style.filter = 'blur(2px)';
                
                setTimeout(() => {
                  if (document.body.contains(particle)) {
                    document.body.removeChild(particle);
                  }
                }, 1200);
              }, 10);
            }, i * 30);
          }
        };
        
        const createFireParticles = () => {
          for (let i = 0; i < 30; i++) {
            setTimeout(() => {
              const particle = document.createElement('div');
              particle.className = 'w-4 h-6 rounded-full z-30 pointer-events-none';
              particle.style.position = 'fixed';
              particle.style.left = `${fromRect.left + Math.random() * fromRect.width}px`;
              particle.style.top = `${fromRect.top + Math.random() * fromRect.height}px`;
              particle.style.transform = 'translate(-50%, -50%) rotate(45deg)';
              
              const colors = ['#FF6600', '#FF9900', '#FFCC00', '#FF3300'];
              const color = colors[Math.floor(Math.random() * colors.length)];
              particle.style.backgroundColor = color;
              particle.style.boxShadow = `0 0 15px 8px ${color}80`;
              
              document.body.appendChild(particle);
              
              setTimeout(() => {
                particle.style.transition = 'all 0.8s ease-out';
                particle.style.top = `${parseFloat(particle.style.top) - 80 - Math.random() * 40}px`;
                particle.style.opacity = '0';
                particle.style.scale = '0';
                particle.style.transform = 'translate(-50%, -50%) rotate(90deg)';
                
                setTimeout(() => {
                  if (document.body.contains(particle)) {
                    document.body.removeChild(particle);
                  }
                }, 800);
              }, 10);
            }, i * 15);
          }
        };
        
        createMeteorTrailParticles();
        
        setTimeout(() => {
          animCard.style.left = `${toRect.left}px`;
          animCard.style.top = `${toRect.top}px`;
          animCard.style.filter = 'brightness(1.3) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))';
        }, 10);
        
        setTimeout(() => {
          if (document.body.contains(animCard)) {
            document.body.removeChild(animCard);
          }
          
          toElement.style.opacity = '1';
          
          resolve();
        }, 600);
      });
    }

    function animateCardWithDustEffect(fromElement, toElement, playerType, card = null) {
      return new Promise((resolve) => {
        const fromRect = fromElement.getBoundingClientRect();
        let toRect = toElement.getBoundingClientRect();
        
        const tempCardHeight = 96;
        const gap = 4;
        
        if (toElement.classList.contains('player-road-slot') || toElement.classList.contains('opponent-road-slot')) {
          const existingCards = toElement.querySelectorAll('.card');
          const isPlayer = toElement.classList.contains('player-road-slot');
          
          if (existingCards.length > 0) {
            const lastCardRect = isPlayer 
              ? existingCards[existingCards.length - 1].getBoundingClientRect()
              : existingCards[0].getBoundingClientRect();
            
            toRect = {
              left: lastCardRect.left,
              top: isPlayer 
                ? lastCardRect.top + lastCardRect.height + gap
                : lastCardRect.top - tempCardHeight - gap,
              width: lastCardRect.width,
              height: tempCardHeight
            };
          } else {
            const slotRect = toElement.getBoundingClientRect();
            toRect = {
              left: slotRect.left,
              top: isPlayer 
                ? slotRect.top
                : slotRect.bottom - tempCardHeight,
              width: slotRect.width,
              height: tempCardHeight
            };
          }
        }

        fromRect.right = fromRect.left + fromRect.width;
        fromRect.bottom = fromRect.top + fromRect.height;
        toRect.right = toRect.left + toRect.width;
        toRect.bottom = toRect.top + toRect.height;
        
        const animCard = document.createElement('div');
        animCard.className = `w-16 h-24 rounded-lg shadow-lg z-40 transition-all duration-400 cubic-bezier(0.25, 0.46, 0.45, 0.94) overflow-hidden`;
        
        if (playerType === 'player') {
          if (card) {
            const isRoyal = isRoyalCard(card.display);
            const gradientStart = '#1e40af';
            const gradientEnd = '#3b82f6';
            const accentColor = '#60a5fa';
            
            if (isRoyal) {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `3px solid ${accentColor}`;
              animCard.style.borderRadius = '12px';
              animCard.style.boxShadow = `0 0 25px rgba(96, 165, 250, 0.4), 0 4px 15px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.15)`;
              animCard.innerHTML = `
                ${getShieldBorderHTML(true, card.display)}
                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; z-index: 1;">
                  <span style="font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">${card.display}</span>
                </div>
              `;
            } else {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `2px solid ${accentColor}`;
              animCard.style.borderRadius = '10px';
              animCard.style.boxShadow = `0 4px 15px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)`;
              animCard.innerHTML = `<div class="w-full h-full flex items-center justify-center text-white font-bold text-2xl">${card.display}</div>`;
            }
          } else {
            animCard.innerHTML = getCardBackElementHTML(true);
          }
        } else {
          if (card) {
            const isRoyal = isRoyalCard(card.display);
            const gradientStart = '#991b1b';
            const gradientEnd = '#ef4444';
            const accentColor = '#f87171';
            
            if (isRoyal) {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `3px solid ${accentColor}`;
              animCard.style.borderRadius = '12px';
              animCard.style.boxShadow = `0 0 25px rgba(248, 113, 113, 0.4), 0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255,255,255,0.15)`;
              animCard.innerHTML = `
                ${getShieldBorderHTML(false, card.display)}
                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; z-index: 1;">
                  <span style="font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">${card.display}</span>
                </div>
              `;
            } else {
              animCard.style.background = `linear-gradient(145deg, ${gradientStart}, ${gradientEnd})`;
              animCard.style.border = `2px solid ${accentColor}`;
              animCard.style.borderRadius = '10px';
              animCard.style.boxShadow = `0 4px 15px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)`;
              animCard.innerHTML = `<div class="w-full h-full flex items-center justify-center text-white font-bold text-2xl">${card.display}</div>`;
            }
          } else {
            animCard.innerHTML = getCardBackElementHTML(false);
          }
        }
        
        animCard.style.position = 'fixed';
        animCard.style.left = `${fromRect.left}px`;
        animCard.style.top = `${fromRect.top}px`;
        animCard.style.width = `${fromRect.width}px`;
        animCard.style.height = `${fromRect.height}px`;
        animCard.style.scale = '1';
        animCard.style.opacity = '1';

        document.body.appendChild(animCard);

        const createDustParticles = () => {
          for (let i = 0; i < 20; i++) {
            setTimeout(() => {
              const particle = document.createElement('div');
              particle.className = 'w-2 h-2 rounded-full z-30 pointer-events-none';
              particle.style.position = 'fixed';
              particle.style.left = `${fromRect.left + Math.random() * fromRect.width}px`;
              particle.style.top = `${fromRect.top + Math.random() * fromRect.height}px`;
              particle.style.backgroundColor = playerType === 'player' ? '#93c5fd' : '#fb923c';
              particle.style.opacity = '0.7';
              
              document.body.appendChild(particle);
              
              setTimeout(() => {
                particle.style.transition = 'all 0.6s ease-out';
                particle.style.opacity = '0';
                particle.style.transform = `translate(${(Math.random() - 0.5) * 60}px, ${(Math.random() - 0.5) * 60}px)`;
                particle.style.scale = '0';
                
                setTimeout(() => {
                  if (document.body.contains(particle)) {
                    document.body.removeChild(particle);
                  }
                }, 600);
              }, 10);
            }, i * 20);
          }
        };
        
        createDustParticles();
        
        setTimeout(() => {
          animCard.style.left = `${toRect.left}px`;
          animCard.style.top = `${toRect.top}px`;
        }, 10);
        
        setTimeout(() => {
          if (document.body.contains(animCard)) {
            document.body.removeChild(animCard);
          }
          
          toElement.style.opacity = '1';
          
          resolve();
        }, 400);
      });
    }

    // ----------------------------------------------------------------------------
    // 【发牌动画】
    // ----------------------------------------------------------------------------
    // animateCardFromDeck: 从牌库向目标槽位发牌的动画
    // 动画过程:
    //   1. 创建临时动画卡牌元素(添加到document.body)
    //   2. 初始状态: 牌库位置，旋转-10度，缩小0.8倍，透明度0.9
    //   3. 动画过渡: 移动到目标位置，旋转0度，恢复正常大小，透明度1
    //   4. 动画结束: 将卡牌HTML写入目标槽位，隐藏槽位边框和背景色，移除临时元素
    // 参数:
    //   deckElement: 牌库元素(起始位置)
    //   toElement:   目标槽位(结束位置)
    //   playerType:  玩家类型('player'/'opponent')
    //   card:        卡牌数据(有则显示正面，无则显示背面)
    // 定时器: 两个定时器都注册到GameState.timers，支持游戏中断
    // 动画细节(移植来源: 牌兵布阵（规则）.html):
    //   卡背动画: 向左移动(-8px)然后回归，模拟卡牌落地的轻微晃动
    //   卡面动画: 放大(scale 1.05)然后回归，突出卡牌显示效果
    // 槽位样式处理:
    //   动画结束后设置 toElement.style.border='none' 和 toElement.style.background='transparent'
    //   确保卡牌覆盖槽位时不显示槽位的边框和背景色
    // ============================================================================
    // 【卡牌动画系统 · Card Animation】卡牌移动/撞牌/粒子的统一架构
    // ============================================================================
    //
    // 核心架构: CardAnimationConfig 配置表 → createParticleSystem 粒子生成
    //         → animateCardMove 统一入口（所有移动走这一条管线）
    //         → animateCrashSequence 撞牌专用（蓄力+冲撞+扩散+白光）
    //
    // 9 种移动类型一览:
    //   ┌─────────────────────────────────────────────────────────────┐
    //   │  hand       手牌     → 400ms 灰尘轨迹，白色小粒子         │
    //   │  fromDeck   牌堆     → 400ms 烟雾轨迹，灰色大粒子         │
    //   │  revealed   明牌     → 400ms 火焰粒子，橙红渐变           │
    //   │  darkDeal   发牌暗牌  → 400ms 流星，1440° 旋转             │
    //   │  dark       出牌暗牌  → 800ms 流星，720° 旋转（减半）       │
    //   │  drag       拖牌     → 600ms 能量流动，360° 旋转，黄橙系  │
    //   │  crash      撞牌     → 500ms 强力冲击，360° 旋转，紫粉    │
    //   │  support    援牌     → 700ms 能量注入，360° 旋转，蓝红     │
    //   │  surround   围牌     → 900ms 沉重放置，无旋转，紫色烟雾     │
    //   └─────────────────────────────────────────────────────────────┘
    //
    // 子系统:
    //   createParticleSystem(config, from, to, playerType)  按配置撒粒子
    //   animateCardMove(from, to, type, card, options)      执行一张卡牌的移动
    //   animateCrashSequence(oppCard, plCard, ...)          撞牌完整动画序列
    //
    // 开关控制: ColumnVisibilityConfig 的 drag/crash/support/surround animation
    //          可在设置面板独立关闭对应动画（仅影响视觉，不影响数据）
    // ============================================================================

    /**
     * 简化版：从牌堆移动一张卡牌到目标位置（等价于 animateCardMove(..., 'fromDeck')）
     */
    function animateCardFromDeck(deckElement, toElement, playerType, card = null, moveType = 'fromDeck') {
      return animateCardMove(deckElement, toElement, playerType, card, moveType);
    }

    // ============================================================================
    // 【动画配置表 · CardAnimationConfig】9 种移动类型的参数一览
    // ============================================================================
    // 每个类型的配置字段含义:
    //   duration          动画总时长（毫秒）
    //   rotate            旋转角度（度）
    //   scale             缩放比例（1 为原始大小）
    //   brightness        CSS filter 亮度值（1 为正常）
    //   glow              CSS drop-shadow 光晕
    //   particleType      粒子类型 ('dust'/'smoke'/'fire'/'meteor')
    //   particleCount     粒子数量
    //   particleInterval  粒子生成间隔（毫秒）
    //   particleSize      粒子大小（px）
    //   particleColor     粒子颜色（按玩家/对方区分）
    //   particleFadeTime  粒子淡出时间（毫秒）
    //   particleScaleEnd  粒子最终缩放
    // ============================================================================
    const CardAnimationConfig = {
      hand: {
        duration: 400,
        rotate: 0,
        scale: 1,
        brightness: 1.1,
        glow: 'drop-shadow(0 0 10px rgba(255, 255, 255, 0.4))',
        particleType: 'dust',
        particleCount: 25,
        particleInterval: 16,
        particleSize: 8,
        particleColor: { player: '#93C5FD', opponent: '#FCA5A5' },
        particleFadeTime: 800,
        particleScaleEnd: 0
      },
      fromDeck: {
        duration: 400,
        rotate: 0,
        scale: 1,
        brightness: 1.1,
        glow: 'drop-shadow(0 0 10px rgba(255, 255, 255, 0.4))',
        particleType: 'smoke',
        particleCount: 20,
        particleInterval: 30,
        particleSize: 12,
        particleColor: '#9CA3AF',
        particleFadeTime: 1200,
        particleScaleEnd: 2,
        particleBlur: 'blur(2px)'
      },
      revealed: {
        duration: 400,
        rotate: 0,
        scale: 1,
        brightness: 1.3,
        glow: 'drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))',
        particleType: 'fire',
        particleCount: 30,
        particleInterval: 15,
        particleSize: { width: 16, height: 24 },
        particleColors: ['#FF6600', '#FF9900', '#FFCC00', '#FF3300'],
        particleFadeTime: 800,
        particleDrift: { x: 0, y: -100 }
      },
      darkDeal: {
        duration: 400,
        rotate: 1440,
        scale: 1.1,
        brightness: 1.5,
        glow: 'drop-shadow(0 0 25px rgba(255, 255, 255, 0.8))',
        particleType: 'meteor',
        particleCount: 16,
        particleInterval: 25,
        particleSize: 8,
        particleColor: { player: '#3B82F6', opponent: '#EF4444' },
        particleDuration: 500
      },
      dark: {
        duration: 800,
        rotate: 720,
        scale: 1.1,
        brightness: 1.5,
        glow: 'drop-shadow(0 0 25px rgba(255, 255, 255, 0.8))',
        particleType: 'meteor',
        particleCount: 8,
        particleInterval: 100,
        particleSize: 8,
        particleColor: { player: '#3B82F6', opponent: '#EF4444' },
        particleDuration: 800
      },
      drag: {
        duration: 1200,
        rotate: 360,
        scale: 0.9,
        brightness: 1.2,
        glow: 'drop-shadow(0 0 15px rgba(251, 191, 36, 0.6))',
        particleType: 'dust',
        particleCount: 20,
        particleInterval: 30,
        particleSize: 10,
        particleColor: { player: '#FBBF24', opponent: '#F97316' },
        particleFadeTime: 1000,
        particleScaleEnd: 0.2
      },
      crash: {
        duration: 500,
        rotate: 360,
        scale: 0.85,
        brightness: 1.4,
        glow: 'drop-shadow(0 0 20px rgba(168, 85, 247, 0.7))',
        particleType: 'fire',
        particleCount: 35,
        particleInterval: 14,
        particleSize: { width: 14, height: 20 },
        particleColors: ['#A855F7', '#EC4899', '#FBBF24', '#EF4444'],
        particleFadeTime: 900,
        particleDrift: { x: 0, y: -80 }
      },
      support: {
        duration: 500,
        rotate: 0,
        scale: 1,
        brightness: 1,
        glow: '',
        particleType: 'none',
        particleCount: 0,
        particleInterval: 0,
        particleSize: 0,
        particleColor: { player: '#60A5FA', opponent: '#F87171' },
        particleFadeTime: 0,
        particleScaleEnd: 1
      },
      surround: {
        duration: 600,
        rotate: 0,
        scale: 1,
        brightness: 1,
        glow: '',
        particleType: 'none',
        particleCount: 0,
        particleInterval: 0,
        particleSize: 0,
        particleColor: { player: '#60A5FA', opponent: '#F87171' },
        particleFadeTime: 0,
        particleScaleEnd: 1
      }
    };

    /**
     * createCartoonDealTrail: 卡通发牌专属尾迹（2026-10-04）
     * 三阶段各自专属且互不相同：暗牌=紫色星尘★ / 手牌=蓝色果冻气泡 / 明牌=粉色花瓣♥❀
     * 粒子沿与飞行卡相同的抛物线分布（arc*4t(1-t)），随飞行节奏延时出现，仅卡通风格调用
     * @param {string} moveType - 'darkDeal' | 'hand' | 'revealed'
     * @param {DOMRect} fromRect/toRect - 起点与目标（容器坐标）
     * @param {number} duration - 飞行时长（与 ctDealFly 同步）
     */
    function createCartoonDealTrail(moveType, fromRect, toRect, duration) {
      const gameContainer = document.querySelector('.game-container');
      if (!gameContainer) return [];
      const fromX = fromRect.left + fromRect.width / 2;
      const fromY = fromRect.top + fromRect.height / 2;
      const toX = toRect.left + toRect.width / 2;
      const toY = toRect.top + toRect.height / 2;
      const dx = toX - fromX;
      const dy = toY - fromY;
      const dist = Math.hypot(dx, dy);
      const arc = Math.min(110, Math.max(45, dist * 0.22)); // 与 ctDealFly 同款弧高
      const count = 14;
      const parts = [];
      for (let i = 1; i <= count; i++) {
        const t = i / (count + 1);
        const x = fromX + dx * t + (Math.random() - 0.5) * 14;
        const y = fromY + dy * t - arc * 4 * t * (1 - t) + (Math.random() - 0.5) * 14;
        const p = document.createElement('div');
        p.style.position = 'absolute';
        p.style.left = `${x}px`;
        p.style.top = `${y}px`;
        p.style.zIndex = '30';
        p.style.pointerEvents = 'none';
        p.style.transform = 'translate(-50%, -50%)'; // 与动画的 rotate/scale 独立属性叠加居中
        p.style.opacity = '0';                       // 延时期间不可见（fill 只用 forwards）
        let animName = '';
        if (moveType === 'darkDeal') {
          // 暗牌：紫色星尘★
          p.textContent = '★';
          p.style.color = Math.random() > 0.5 ? '#c793f2' : '#9a5ade';
          p.style.fontSize = `${10 + Math.random() * 8}px`;
          p.style.textShadow = '0 2px 0 rgba(67,49,94,.35)';
          animName = 'ctTrailStar';
        } else if (moveType === 'hand') {
          // 手牌：蓝色果冻气泡
          const s = 6 + Math.random() * 8;
          p.style.width = `${s}px`;
          p.style.height = `${s}px`;
          p.style.borderRadius = '50%';
          p.style.background = 'radial-gradient(circle at 35% 30%, #dcecff, #3e8de0 72%)';
          p.style.boxShadow = '0 2px 6px rgba(62,141,224,.45)';
          animName = 'ctTrailDot';
        } else {
          // 明牌：粉色花瓣（♥❀ 混排）
          p.textContent = Math.random() > 0.4 ? '♥' : '❀';
          p.style.color = Math.random() > 0.5 ? '#ff9cb8' : '#ef5d8f';
          p.style.fontSize = `${10 + Math.random() * 7}px`;
          p.style.textShadow = '0 2px 0 rgba(178,42,82,.3)';
          animName = 'ctTrailPetal';
        }
        const delay = t * duration * 0.9;
        p.style.animation = `${animName} .7s ease-out forwards`;
        p.style.animationDelay = `${delay}ms`;
        gameContainer.appendChild(p);
        parts.push(p);
        setTimeout(() => {
          if (gameContainer.contains(p)) gameContainer.removeChild(p);
        }, delay + 800);
      }
      return parts;
    }

    /**
     * createParticleSystem: 根据移动类型配置生成粒子轨迹效果
     * 支持 4 种粒子类型：dust / smoke / fire / meteor
     * 每种类型有独立的颜色、形状、漂移、淡出逻辑
     * @param {object} config     - CardAnimationConfig 中对应的配置项
     * @param {DOMRect} fromRect  - 起点元素的 bounding rect
     * @param {DOMRect} toRect    - 目标元素的 bounding rect
     * @param {string} playerType - 'player' / 'opponent'，用于区分颜色
     * @param {string} moveType   - 移动类型（2026-10-04 新增：卡通发牌尾迹按三阶段区分）
     * @returns {Array<HTMLElement>} - 生成的粒子 DOM 元素列表，便于后续统一清理
     */
    function createParticleSystem(config, fromRect, toRect, playerType, moveType) {
      // 援牌：不创建任何粒子，保持简洁移动
      if (!config || config.particleType === 'none' || config.particleCount === 0) {
        return [];
      }

      // ★ 卡通发牌专属尾迹（2026-10-04）：仅发牌三阶段且卡通风格，其他风格/移动类型走原粒子系统
      if (moveType === 'darkDeal' || moveType === 'hand' || moveType === 'revealed') {
        if (typeof selectedCardFaceStyle !== 'undefined' && selectedCardFaceStyle === 'cartoon') {
          return createCartoonDealTrail(moveType, fromRect, toRect, config.duration);
        }
      }

      const gameContainer = document.querySelector('.game-container');
      const fromCenterX = (fromRect.left + fromRect.width / 2);
      const fromCenterY = (fromRect.top + fromRect.height / 2);
      const toCenterX = (toRect.left + toRect.width / 2);
      const toCenterY = (toRect.top + toRect.height / 2);
      const distanceX = toCenterX - fromCenterX;
      const distanceY = toCenterY - fromCenterY;

      const particles = [];

      if (config.particleType === 'dust') {
        for (let i = 0; i < config.particleCount; i++) {
          setTimeout(() => {
            const progress = i / config.particleCount;
            const x = fromRect.left + distanceX * progress + Math.random() * 64;
            const y = fromRect.top + distanceY * progress + Math.random() * 96;

            const particle = document.createElement('div');
            const color = typeof config.particleColor === 'object' 
              ? (playerType === 'player' ? config.particleColor.player : config.particleColor.opponent)
              : config.particleColor;
            
            particle.className = 'rounded-full opacity-80 z-30 pointer-events-none';
            particle.style.position = 'absolute';
            particle.style.left = `${x}px`;
            particle.style.top = `${y}px`;
            particle.style.width = `${config.particleSize}px`;
            particle.style.height = `${config.particleSize}px`;
            particle.style.backgroundColor = color;
            particle.style.transform = 'translate(-50%, -50%)';

            gameContainer.appendChild(particle);
            particles.push(particle);

            setTimeout(() => {
              particle.style.transition = `all ${config.particleFadeTime / 1000}s ease-out`;
              particle.style.opacity = '0';
              particle.style.scale = config.particleScaleEnd;

              setTimeout(() => {
                if (gameContainer.contains(particle)) {
                  gameContainer.removeChild(particle);
                }
              }, config.particleFadeTime);
            }, 10);
          }, i * config.particleInterval);
        }
      } else if (config.particleType === 'smoke') {
        for (let i = 0; i < config.particleCount; i++) {
          setTimeout(() => {
            const progress = i / config.particleCount;
            const x = fromRect.left + distanceX * progress + Math.random() * 64;
            const y = fromRect.top + distanceY * progress + Math.random() * 96;

            const particle = document.createElement('div');
            particle.className = 'rounded-full opacity-60 z-30 pointer-events-none';
            particle.style.position = 'absolute';
            particle.style.left = `${x}px`;
            particle.style.top = `${y}px`;
            particle.style.width = `${config.particleSize}px`;
            particle.style.height = `${config.particleSize}px`;
            particle.style.backgroundColor = config.particleColor;
            particle.style.transform = 'translate(-50%, -50%)';

            gameContainer.appendChild(particle);
            particles.push(particle);

            setTimeout(() => {
              particle.style.transition = `all ${config.particleFadeTime / 1000}s ease-out`;
              particle.style.opacity = '0';
              particle.style.scale = config.particleScaleEnd;
              if (config.particleBlur) particle.style.filter = config.particleBlur;

              setTimeout(() => {
                if (gameContainer.contains(particle)) {
                  gameContainer.removeChild(particle);
                }
              }, config.particleFadeTime);
            }, 10);
          }, i * config.particleInterval);
        }
      } else if (config.particleType === 'fire') {
        for (let i = 0; i < config.particleCount; i++) {
          setTimeout(() => {
            const progress = i / config.particleCount;
            const x = fromCenterX + distanceX * progress + (Math.random() - 0.5) * 40;
            const y = fromCenterY + distanceY * progress + (Math.random() - 0.5) * 60;

            const particle = document.createElement('div');
            particle.className = 'rounded-full z-30 pointer-events-none';
            particle.style.position = 'absolute';
            particle.style.left = `${x}px`;
            particle.style.top = `${y}px`;
            particle.style.width = `${config.particleSize.width}px`;
            particle.style.height = `${config.particleSize.height}px`;
            particle.style.transform = 'translate(-50%, -50%) rotate(45deg)';

            const color = config.particleColors[Math.floor(Math.random() * config.particleColors.length)];
            particle.style.backgroundColor = color;
            particle.style.boxShadow = `0 0 15px 8px ${color}80`;

            gameContainer.appendChild(particle);
            particles.push(particle);

            setTimeout(() => {
              particle.style.transition = `all ${config.particleFadeTime / 1000}s ease-out`;
              particle.style.top = `${parseFloat(particle.style.top) + (config.particleDrift.y || -100)}px`;
              particle.style.opacity = '0';
              particle.style.scale = '0';
              particle.style.transform = 'translate(-50%, -50%) rotate(90deg)';

              setTimeout(() => {
                if (gameContainer.contains(particle)) {
                  gameContainer.removeChild(particle);
                }
              }, config.particleFadeTime);
            }, 10);
          }, i * config.particleInterval);
        }
      } else if (config.particleType === 'meteor') {
        for (let i = 0; i < config.particleCount; i++) {
          const point = document.createElement('div');
          point.className = 'z-30 pointer-events-none';
          point.style.position = 'absolute';
          point.style.width = `${config.particleSize}px`;
          point.style.height = `${config.particleSize}px`;
          point.style.borderRadius = '50%';
          
          const color = typeof config.particleColor === 'object' 
            ? (playerType === 'player' ? config.particleColor.player : config.particleColor.opponent)
            : config.particleColor;
          point.style.backgroundColor = color;
          point.style.boxShadow = `0 0 25px 15px ${color}CC`;
          point.style.transform = 'translate(-50%, -50%)';
          point.style.opacity = '0';

          gameContainer.appendChild(point);
          particles.push(point);

          setTimeout(() => {
            const progress = i / config.particleCount;
            const x = fromRect.left + (toRect.left - fromRect.left) * progress + fromRect.width / 2;
            const y = fromRect.top + (toRect.top - fromRect.top) * progress + fromRect.height / 2;

            point.style.left = `${x}px`;
            point.style.top = `${y}px`;
            point.style.transition = 'opacity 0.2s ease-out';
            point.style.opacity = '1';

            setTimeout(() => {
              point.style.transition = 'opacity 0.3s ease-out';
              point.style.opacity = '0';
            }, 200);
          }, i * config.particleInterval);
        }

        const particleDuration = config.particleDuration || 800;
        setTimeout(() => {
          particles.forEach(point => {
            if (gameContainer.contains(point)) {
              gameContainer.removeChild(point);
            }
          });
        }, particleDuration);
      }

      return particles;
    }

    /**
     * animateCardMove: 功能牌移动的统一入口（最常用）
     *
     * 执行流程:
     *   1. 计算起点/目标位置（fromRect / toRect）
     *   2. 创建临时飞行卡牌（clone 源卡牌样式，添加动画 transform）
     *   3. 根据 CardAnimationConfig[moveType] 生成粒子轨迹
     *   4. 飞行卡牌按动画参数执行：位移 + 旋转 + 缩放 + 发光
     *   5. 动画结束：写入目标容器（除非 skipTargetWrite=true）
     *   6. 清理临时 DOM 元素
     *
     * @param {HTMLElement} fromElement - 起点元素（手牌区/明牌区/暗牌区/牌堆/中立区）
     * @param {HTMLElement} toElement   - 目标容器（路牌区/叠牌区/中立区）
     * @param {string} playerType       - 'player' / 'opponent'，用于粒子/光晕颜色区分
     * @param {object|null} card        - 卡牌数据；提供时显示正面，否则显示卡背
     * @param {string} moveType         - 移动类型：'hand' | 'fromDeck' | 'revealed' | 'darkDeal' | 'dark' | 'drag' | 'crash' | 'support' | 'surround'
     * @param {object} options          - 可选参数
     * @param {boolean} options.skipTargetWrite - true 时动画结束后不写入目标容器（仅做视觉飞行）
     * @param {number} options.sequenceIndex     - 围牌/援牌：同批次卡牌中的序号（0 起始），用于计算偏移
     * @returns {Promise<void>}          - 动画完成后 resolve；若找不到元素则立即 resolve
     */

    /**
     * CardPlayExecutor: 统一出牌执行器
     *
     * 设计原则: 只执行，不决策。它只负责把牌放到场上，不负责"选哪张牌"。
     *
     * 核心职责:
     *   1. 从手牌/牌堆/明牌/暗牌中取出卡牌（修改 GameState）
     *   2. 将卡牌放到路牌区（修改 GameState）
     *   3. 更新 lastPlayedCard 和 playedCardsCount
     *   4. 播放音效
     *   5. 播放动画
     *   6. 调用 checkRoadMatchCards / checkNeutralAdjacentCards / confirmCardPlacement
     *   7. 更新 UI
     *
     * 调用方责任:
     *   - 决定出哪张牌（cardIndex）
     *   - 决定从哪出（sourceType）
     *   - 决定放到哪路（roadIndex）
     *   - 决定出牌后的后续流程（switchTurn / checkRoadResult 等）
     *
     * 注意: 本执行器不调用任何修改对方字段的操作，由调用方负责。
     */
    const CardPlayExecutor = {
      /**
       * 获取指定玩家的手牌/牌堆/明牌/暗牌数组引用
       * 仅返回"自己"的字段引用，绝不涉及对方字段
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {string} sourceType - 'hand' | 'deck' | 'revealed' | 'dark'
       * @returns {Array|null} 卡牌数组引用
       */
      getSourceCards(playerType, sourceType) {
        const prefix = playerType === 'player' ? 'player' : 'opponent';
        switch (sourceType) {
          case 'hand':     return GameState[prefix + 'Hand'];
          case 'deck':     return GameState[prefix + 'Deck'];
          case 'revealed': return GameState[prefix + 'RevealedCards'];
          case 'dark':     return GameState[prefix + 'DarkCards'];
          default:         return null;
        }
      },

      /**
       * 获取指定玩家的路牌区/叠牌区数组引用
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @returns {{field: Array, stack: Array<Array>}}
       */
      getRoadAreas(playerType) {
        const prefix = playerType === 'player' ? 'player' : 'opponent';
        return {
          field: GameState[prefix + 'Field'],
          stack: GameState[prefix + 'Stack']
        };
      },

      /**
       * 根据来源类型获取起点 DOM 元素
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {string} sourceType - 'hand' | 'deck' | 'revealed' | 'dark'
       * @param {number} cardIndex - 卡牌在源数组中的索引（牌堆时忽略）
       * @returns {HTMLElement|null}
       */
      getSourceElement(playerType, sourceType, cardIndex) {
        if (sourceType === 'deck') {
          return playerType === 'player' ? GameElements.player.deck : GameElements.opponent.deck;
        }
        const attrMap = {
          hand: 'data-hand-slot',
          revealed: 'data-revealed-slot',
          dark: 'data-dark-slot'
        };
        const selector = '.' + playerType + '-' + sourceType + '-slot[' + attrMap[sourceType] + '="' + cardIndex + '"]';
        return document.querySelector(selector);
      },

      /**
       * 获取目标路牌区 DOM 元素
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {number} roadIndex - 路牌区索引（0-4）
       * @returns {HTMLElement|null}
       */
      getTargetElement(playerType, roadIndex) {
        return document.querySelector('.' + playerType + '-road-slot[data-road-slot="' + roadIndex + '"]');
      },

      /**
       * 从源区取出一张卡牌
       * 修改 GameState 对应字段（仅修改当前玩家的源区）
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {string} sourceType - 'hand' | 'deck' | 'revealed' | 'dark'
       * @param {number} cardIndex - 卡牌在源数组中的索引（牌堆时传 -1，使用 pop）
       * @returns {object|null} 取出的卡牌
       */
      takeCardFromSource(playerType, sourceType, cardIndex) {
        const sourceCards = this.getSourceCards(playerType, sourceType);
        if (!sourceCards || sourceCards.length === 0) return null;

        if (sourceType === 'deck') {
          return sourceCards.pop();
        }
        if (cardIndex < 0 || cardIndex >= sourceCards.length) return null;
        // ★ 2v2：左右两侧玩家共用同一手牌/明牌/暗牌数组，靠索引区间划分。
        //   若用 splice 会把右侧玩家的牌整体左移进左侧区间（出牌后对方牌"补充"到空槽的bug）。
        //   改为 null 占位，保持槽位索引稳定，出牌后空槽位保持为空，不触碰对方玩家的牌。
        const isFourPlayer = typeof GameState !== 'undefined' && GameState && GameState.fourPlayerActive;
        if (isFourPlayer) {
          const card = sourceCards[cardIndex];
          if (card) sourceCards[cardIndex] = null;
          return card;
        }
        return sourceCards.splice(cardIndex, 1)[0];
      },

      /**
       * 将卡牌放入路牌区
       * 优先放入场牌区（field），若已有牌则放入叠牌区（stack）
       * 修改 GameState 对应字段（仅修改当前玩家的路牌区）
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {object} card - 要放入的卡牌
       * @param {number} roadIndex - 路牌区索引（0-4）
       * @returns {boolean} true=放入场牌区，false=放入叠牌区
       */
      placeCardToRoad(playerType, card, roadIndex) {
        const { field, stack } = this.getRoadAreas(playerType);
        // 空路：field 为 null 且 stack 为空 → 新牌作为第1张（场牌区）
        // 非空路：已有牌 → 新牌追加到叠牌区末尾（保持"出牌先后顺序递进"，跟点数无关）
        const roadIsEmpty = !field[roadIndex] && (!stack[roadIndex] || stack[roadIndex].length === 0);
        if (roadIsEmpty) {
          field[roadIndex] = card;
          return true;
        } else {
          stack[roadIndex].push(card);
          return false;
        }
      },

      /**
       * 更新出牌记录（lastPlayedCard 和 playedCardsCount）
       *
       * @param {object} card - 打出的卡牌
       * @param {string} sourceType - 来源类型
       * @param {number} roadIndex - 路牌区索引
       */
      updatePlayRecord(card, sourceType, roadIndex) {
        GameState.lastPlayedCard = {
          card: card,
          type: sourceType,
          index: roadIndex
        };

        if (!GameState.playedCardsCount) GameState.playedCardsCount = {};
        if (!GameState.playedCardsCount[card.display]) GameState.playedCardsCount[card.display] = 0;
        GameState.playedCardsCount[card.display]++;
      },

      /**
       * 获取出牌音效名称
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @returns {string|null} 音效 ID；若配置禁用则返回 null
       */
      getPlayCardSound(playerType) {
        if (playerType === 'opponent') {
          if (typeof AIConfig !== 'undefined' && AIConfig.sound && AIConfig.sound.playCard) {
            return AIConfig.sound.playCard;
          }
          return null;
        }
        return 'cardPlaceSound';
      },

      /**
       * 判断是否启用出牌动画
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @returns {boolean}
       */
      isAnimationEnabled(playerType) {
        if (playerType === 'opponent') {
          return typeof AIConfig !== 'undefined' && AIConfig.animation && AIConfig.animation.enabled;
        }
        return true;
      },

      /**
       * 获取动画移动类型
       *
       * @param {string} sourceType - 'hand' | 'deck' | 'revealed' | 'dark'
       * @returns {string}
       */
      getMoveType(sourceType) {
        return sourceType === 'deck' ? 'fromDeck' : sourceType;
      },

      /**
       * 检查路牌区匹配（拖牌/撞牌）
       * 封装 checkRoadMatchCards 的调用
       *
       * @param {string} playerType - 'player' | 'opponent'（预留）
       * @param {object} card - 打出的卡牌
       * @param {number} roadIndex - 路牌区索引
       * @returns {Array} 匹配机会列表
       */
      checkRoadMatch(playerType, card, roadIndex) {
        if (typeof checkRoadMatchCards !== 'function') return [];
        if (isTutorialMode) return [];
        return checkRoadMatchCards(card, roadIndex) || [];
      },

      /**
       * 检查中立区支援/夹击
       * 封装 checkNeutralAdjacentCards 的调用
       *
       * @param {string} playerType - 'player' | 'opponent'（预留）
       * @param {object} card - 打出的卡牌
       * @param {number} roadIndex - 路牌区索引
       */
      checkNeutralAdjacent(playerType, card, roadIndex) {
        if (isTutorialMode) return [];
        // 匹配操作教程交互步骤：屏蔽援牌和围牌
        if (isMatchTutorial && matchTutorialStep === 2) return [];
        if (typeof checkNeutralAdjacentCards === 'function') {
          return checkNeutralAdjacentCards(card, roadIndex) || [];
        }
        return [];
      },

      /**
       * 【核心方法】统一出牌流程
       *
       * 执行完整的出牌链路，严格按照现有出牌流程实现：
       *   取牌 → 放牌 → 更新记录 → 播放音效 → 播放动画 → 检查匹配 → 确认放置 → 更新 UI
       *
       * 注意: 不做任何决策（不选牌、不选路）。所有决策由调用方通过 decision 参数传入。
       * 注意: 不修改对方任何字段。
       *
       * @param {string} playerType - 'player' | 'opponent'
       * @param {object} decision - 出牌决策
       * @param {number} decision.cardIndex - 卡牌在源数组中的索引（牌堆时传 -1）
       * @param {string} decision.sourceType - 'hand' | 'deck' | 'revealed' | 'dark'
       * @param {number} decision.roadIndex - 目标路牌区索引（0-4）
       * @param {object} [options] - 可选参数
       * @param {boolean} [options.skipMatchCheck] - true 时跳过匹配检查+confirmCardPlacement（对方出牌时使用）
       * @param {Function} [options.onAnimationEnd] - 动画结束后的回调：(card, isField, roadIndex) => void
       * @param {Function} [options.onStatus] - 自定义状态提示回调：(isField, card, roadIndex) => void；不传则使用默认
       * @param {Function} [options.onTurnRecord] - 自定义回合记录回调：(isField, card, roadIndex, sourceType) => void；不传则使用默认（含牌种识别）
       * @returns {Promise<{card: object, isField: boolean, roadIndex: number}>}
       */
      async executeCardPlay(playerType, decision, options = {}) {
        const { cardIndex, sourceType, roadIndex } = decision;
        const {
          skipMatchCheck = false,
          skipConfirmPlacement = false,
          skipCallCard = false,
          preBuiltCard = null,
          onAnimationEnd = null,
          onStatus = null,
          onTurnRecord = null
        } = options;
        const effectiveSkipMatchCheck = skipMatchCheck || GameState.disableMatchCheck;

        // ===== 规则校验：根据来源类型验证目标路是否合法 =====
        // 手牌/牌堆 -> 目标路必须为空（场牌区为 null）
        // 明牌       -> 目标路为空 或 已有牌且叠牌区未满(<8)
        // 暗牌       -> 目标路必须已有牌且叠牌区未满(<8)，不能放空路
        const { field, stack } = this.getRoadAreas(playerType);
        let finalRoadIndex = roadIndex;
        const roadHasCard = field[roadIndex] !== null && field[roadIndex] !== undefined;
        const stackFull = roadHasCard && stack[roadIndex] && stack[roadIndex].length >= 8;

        if (sourceType === 'hand' || sourceType === 'deck') {
          if (roadHasCard) {
            const emptyIdx = field.findIndex(function (c) { return c === null; });
            if (emptyIdx === -1) {
              return { card: null, isField: false, roadIndex: roadIndex };
            }
            finalRoadIndex = emptyIdx;
          }
        } else if (sourceType === 'revealed') {
          if (roadHasCard && stackFull) {
            // 明牌：目标路叠牌区已满，找第一个合法路（空路或叠牌未满的路）
            let foundIdx = -1;
            for (let i = 0; i < field.length; i++) {
              const rHasCard = field[i] !== null && field[i] !== undefined;
              const rStackFull = rHasCard && stack[i] && stack[i].length >= 8;
              if (!rHasCard || (rHasCard && !rStackFull)) {
                foundIdx = i;
                break;
              }
            }
            if (foundIdx === -1) {
              return { card: null, isField: false, roadIndex: roadIndex };
            }
            finalRoadIndex = foundIdx;
          }
        } else if (sourceType === 'dark') {
          // 暗牌：目标路必须已有场牌（field 有牌）且叠牌区未满(<8)
          // 与玩家 calculateAvailableSlots('dark') 一致：仅检查 field !== null 且 stack.length < 8
          const roadFieldHasCard = field[roadIndex] !== null && field[roadIndex] !== undefined;
          const roadStackFull = stack[roadIndex] && stack[roadIndex].length >= 8;
          if (!roadFieldHasCard || roadStackFull) {
            // 目标路不合法，找第一个符合条件的路兜底（真正的选路逻辑由 AIDecisionEngine 完成）
            let foundIdx = -1;
            for (let i = 0; i < field.length; i++) {
              const rFieldHasCard = field[i] !== null && field[i] !== undefined;
              const rStackOk = !stack[i] || stack[i].length < 8;
              if (rFieldHasCard && rStackOk) {
                foundIdx = i;
                break;
              }
            }
            if (foundIdx === -1) {
              return { card: null, isField: false, roadIndex: roadIndex };
            }
            finalRoadIndex = foundIdx;
          }
        }

        // ★ preBuiltCard: 2v2联机模式下，远程卡牌直接使用预先构建的卡牌对象
        // 跳过从源数组取卡的步骤，避免源数组同步导致的数据混乱
        let card;
        if (preBuiltCard) {
          card = preBuiltCard;
          console.log('[预构建卡牌] 使用远程同步的卡牌, id=', card.id, 'value=', card.value);
        } else {
          card = this.takeCardFromSource(playerType, sourceType, cardIndex);
        }
        if (!card) {
          return { card: null, isField: false, roadIndex: finalRoadIndex };
        }

        // ★ 回放录制：暂存本次出牌注解（卡面+来源），finalizePlacement 随快照记录（2026-9-11）
        if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
          try { ReplayRecorder.stash(card, sourceType); } catch (e) {}
        }

        if (sourceType === 'deck' && typeof updateDeckCount === 'function') {
          updateDeckCount(playerType);
        }

        // ★ 标记打出状态：从卡牌放置到确认放置期间，不触发拼点
        //   覆盖所有打出状态（叫牌/匹配光环/已打出未放置）
        //   在 confirmCardPlacement 中确认放置后清除
        if (playerType === 'player') {
          GameState.localCardPlayPending = true;
          GameState.localCardPlayRoadIndex = finalRoadIndex;
          console.log('[打出状态] 本地出牌，标记打出状态, road=', finalRoadIndex, 'source=', sourceType);
        }

        const isField = this.placeCardToRoad(playerType, card, finalRoadIndex);

        // DEBUG: 确认数据写入哪个数组
        if (GameState.fourPlayerActive) {
          console.log('[DEBUG] executeCardPlay, playerType=', playerType, '写入', playerType + 'Field[' + finalRoadIndex + ']', '=', card.display);
        }

        if (onStatus) {
          onStatus(isField, card, finalRoadIndex);
        } else if (typeof updateGameStatus === 'function') {
          if (playerType === 'opponent') {
            if (isField) {
              updateGameStatus(__t('st_opp_play_road').replace('{n}', finalRoadIndex + 1).replace('{c}', card.display), 'st_opp_play_road');
            } else {
              updateGameStatus(__t('st_opp_play_stack').replace('{n}', finalRoadIndex + 1).replace('{c}', card.display), 'st_opp_play_stack');
            }
          } else {
            if (isField) {
              updateGameStatus(__t('st_my_play_road').replace('{n}', finalRoadIndex + 1).replace('{c}', card.display), 'st_my_play_road');
            } else {
              updateGameStatus(__t('st_my_play_stack').replace('{n}', finalRoadIndex + 1).replace('{c}', card.display), 'st_my_play_stack');
            }
          }
        }

        if (onTurnRecord) {
          onTurnRecord(isField, card, finalRoadIndex, sourceType);
        } else if (typeof addTurnRecord === 'function') {
          // sourceType 映射牌种：手牌/牌堆/明牌/暗牌
          let cardSource = '';
          if (sourceType === 'hand') cardSource = '手牌';
          else if (sourceType === 'deck') cardSource = '牌堆';
          else if (sourceType === 'revealed') cardSource = '明牌';
          else if (sourceType === 'dark') cardSource = '暗牌';
          if (isField) {
            addTurnRecord('出牌', '在第' + (finalRoadIndex + 1) + '路打出' + cardSource + card.display, playerType);
          } else {
            addTurnRecord('出牌', '打出' + cardSource + card.display + '叠加到第' + (finalRoadIndex + 1) + '路', playerType);
          }
        }

        this.updatePlayRecord(card, sourceType, finalRoadIndex);

        const soundId = this.getPlayCardSound(playerType);
        if (soundId && typeof playSound === 'function') {
          playSound(soundId);
        }

        const sourceElement = this.getSourceElement(playerType, sourceType, cardIndex);
        const targetElement = this.getTargetElement(playerType, finalRoadIndex);
        const moveType = this.getMoveType(sourceType);
        const animationEnabled = this.isAnimationEnabled(playerType);

        // ★ 2026-9-1 FIX: runAfterAnimation 改成 async，await onAnimationEnd
        //   根因：opponentPlayCard 的 onAnimationEnd 是 async 函数（有 1.5s match 动画），
        //   但原来不 await，导致 executeCardPlay 提前返回 → opponentPlayCard 提前退出 → guard 被清 → 
        //   但 currentTurn 还没被 safeSwitchTurn→switchTurn→fourPlayerAdvanceTurn 改成 'player' → 
        //   有竞态窗口（1.5s）让 opponentPlayCard 再次被触发 → AI 连续出多张牌！
        //   修复：正常路径下 await onAnimationEnd，让 opponentPlayCard 等 onAnimationEnd 完全跑完再退出。
        const runAfterAnimation = async () => {
          // ★ 【拼点判定 · 重新设计】
          //   注意：此处是"打出"不是"放置"，不调用 checkRoadResult！
          //   拼点判定在 confirmCardPlacement 中执行（匹配操作完成/取消后才算放置）。
          //   规则：打出的功能牌无论放置在哪，都在本回合其打出的那一路重新计算拼点。
          if (sourceType === 'deck' && typeof updateDeckCount === 'function') {
            updateDeckCount(playerType);
          }

          // === 叫牌检测：玩家打出暗牌/牌堆，且叫牌开关开启 ===
          // ★ skipCallCard=true 时跳过（2v2同步出牌时由出牌方触发叫牌，接收方不重复触发）
          const isEligibleForCallCard = playerType === 'player'
            && (sourceType === 'dark' || sourceType === 'deck')
            && GameState.callCardEnabled
            && !GameState.pendingCallCard
            && !skipCallCard;

          if (isEligibleForCallCard) {
            // 设置待叫牌状态：卡牌在路牌区保持背面
            GameState.pendingCallCard = {
              roadIndex: finalRoadIndex,
              cardId: card.id,
              card: card,
              sourceType: sourceType,
              isField: isField
            };
            if (typeof updateUI === 'function') {
              updateUI();
            }

            // 显示叫牌提示（在卡牌下方弹出）
            showCallCardPrompt(finalRoadIndex, card, isField, {
              onCancel: function () {
                // 取消叫牌：翻开卡牌，正常进行匹配检测和回合切换
                GameState.pendingCallCard = null;
                if (typeof updateUI === 'function') updateUI();
                if (!effectiveSkipMatchCheck) {
                  CardPlayExecutor.checkRoadMatch(playerType, card, finalRoadIndex);
                  CardPlayExecutor.checkNeutralAdjacent(playerType, card, finalRoadIndex);
                }
                if (typeof confirmCardPlacement === 'function') {
                  confirmCardPlacement(playerType, finalRoadIndex, card);
                }
              },
              onCall: async function (bidValues) {
                // ★ 叫牌掀缝动画：翻牌前卡背从右侧微微掀起并露出光芒（成功/失败都播放）
                try {
                  const _liftSlot = document.querySelector('.player-road-slot[data-road-slot="' + finalRoadIndex + '"]');
                  if (_liftSlot) {
                    const _liftCards = _liftSlot.querySelectorAll('.card, .card-small');
                    if (_liftCards.length > 0) {
                      const _liftEl = isField ? _liftCards[0] : _liftCards[_liftCards.length - 1];
                      if (typeof pbPlayCallLiftReveal === 'function') {
                        await pbPlayCallLiftReveal(_liftEl);
                      }
                    }
                  }
                } catch (e) { /* 动画失败不影响流程 */ }

                // 保存牌点值（现在是数组）
                if (GameState.pendingCallCard) {
                  GameState.pendingCallCard.bidValue = bidValues;
                }

                // === 叫牌成功判定：任一叫牌点数 === 实际卡牌点数 ===
                const actualValue = card.value;
                let callSuccess = false;
                let bonusPoints = 0;

                // 检查数组中是否有任一值匹配实际牌点
                if (bidValues && bidValues.includes(actualValue)) {
                  callSuccess = true;
                  // 根据成功次数计算奖励（前5次加总分数，5次后加牌型得分）
                  const count = GameState.callCardSuccessCount;
                  if (count === 0) bonusPoints = 150;
                  else if (count === 1) bonusPoints = 120;
                  else if (count === 2) bonusPoints = 100;
                  else if (count === 3) bonusPoints = 90;
                  else if (count === 4) bonusPoints = 80;
                  else {
                    // 超过5次：不再加总分数，改为每次 +30 到牌型得分
                    bonusPoints = 0;
                    GameState.callCardCardTypeBonus += 30;
                  }

                  // 前5次累计奖励分数到总分（超过5次的由 cardTypeBonus 处理）
                  if (count < 5) {
                    GameState.callCardBonusScore += bonusPoints;
                  }

                  // 成功次数总是递增（用于下次叫牌时决定需要输入的数量）
                  GameState.callCardSuccessCount += 1;

                  // 标记有过叫牌成功（总分变金色）
                  GameState.callCardHasSuccess = true;

                  // 显示状态信息
                  const displayValue = actualValue === 1 ? 'A'
                    : actualValue === 11 ? 'J'
                    : actualValue === 12 ? 'Q'
                    : actualValue === 13 ? 'K'
                    : String(actualValue);
                  if (typeof updateGameStatus === 'function') {
                    if (count >= 5) {
                      updateGameStatus(__t('st_bid_success_30').replace('{v}', displayValue), 'st_bid_success_30');
                    } else {
                      updateGameStatus(__t('st_bid_success_bonus').replace('{v}', displayValue).replace('{b}', bonusPoints), 'st_bid_success_bonus');
                    }
                  }

                  // 触发叫牌成功动画
                  GameState.pendingCallCard = null;
                  // ★ 不立即调用 updateUI() — 否则卡牌会先翻开正面再播放动画，导致正面一闪而过
                  // updateUI() 移到 playCallCardSuccessAnimation 创建 sweep overlay 之后调用，
                  // 此时 sweep 已覆盖卡牌，翻转正面不会被看到

                  // 联机/2v2：通知对方/队友叫牌成功
                  if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
                    PBOnline.sendCallCardResult({
                      success: true,
                      roadIndex: finalRoadIndex,
                      isField: isField,
                      cardId: card.id,
                      actualValue: actualValue,
                      displayValue: displayValue,
                      playerIdx: (typeof PBOnline.playerIdx === 'number') ? PBOnline.playerIdx : undefined
                    });
                  }

                  // 播放叫牌惊喜音效（与 SoundConfig.sounds 中的 callCardSound 配置一致）
                  try {
                    if (typeof playSound === 'function') {
                      playSound('callCardSound');
                    }
                  } catch (e) {
                    // 忽略音效播放异常，不影响游戏主逻辑
                  }

                  // 找到刚翻开的卡牌元素
                  setTimeout(function () {
                    try {
                      const roadSlot = document.querySelector('.player-road-slot[data-road-slot="' + finalRoadIndex + '"]');
                      if (roadSlot) {
                        const cardEls = roadSlot.querySelectorAll('.card, .card-small');
                        if (cardEls.length > 0) {
                          const targetCardEl = isField ? cardEls[0] : cardEls[cardEls.length - 1];
                          // ★ 先创建 sweep overlay（覆盖卡牌），再翻转卡牌正面
                          // playCallCardSuccessAnimation 同步创建 sweep overlay，覆盖卡牌
                          if (typeof playCallCardSuccessAnimation === 'function') {
                            playCallCardSuccessAnimation(targetCardEl, count >= 5);
                          }
                          // ★ sweep 已覆盖卡牌，此时翻转正面不会被看到（消除"正面一闪而过"）
                          if (typeof updateUI === 'function') updateUI();
                        }
                      }
                    } catch (e) {
                      // 动画失败不影响游戏
                    }
                    if (typeof updateScoreDisplay === 'function') updateScoreDisplay();
                  }, 50);

                } else {
                  // 叫牌失败：没有任何牌点匹配
                  if (typeof updateGameStatus === 'function') {
                    const displayValue = actualValue === 1 ? 'A'
                      : actualValue === 11 ? 'J'
                      : actualValue === 12 ? 'Q'
                      : actualValue === 13 ? 'K'
                      : String(actualValue);
                    // 显示玩家叫的牌点列表
                    const bidStrList = bidValues ? bidValues.map(function (v) {
                      if (v === 1) return 'A';
                      if (v === 11) return 'J';
                      if (v === 12) return 'Q';
                      if (v === 13) return 'K';
                      return String(v);
                    }) : [];
                    updateGameStatus(__t('st_bid_mismatch').replace('{b}', bidStrList.join('/')).replace('{v}', displayValue), 'st_bid_mismatch');
                  }
                  GameState.pendingCallCard = null;
                  if (typeof updateUI === 'function') updateUI();

                  // 联机/2v2：通知对方/队友叫牌失败
                  if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
                    PBOnline.sendCallCardResult({
                      success: false,
                      roadIndex: finalRoadIndex,
                      isField: isField,
                      cardId: card.id,
                      actualValue: actualValue,
                      playerIdx: (typeof PBOnline.playerIdx === 'number') ? PBOnline.playerIdx : undefined
                    });
                  }

                  // 触发失败抖动动画：卡牌翻牌后立刻抖动+变灰，抖动结束后平滑恢复
                  setTimeout(function () {
                    try {
                      const roadSlot = document.querySelector('.player-road-slot[data-road-slot="' + finalRoadIndex + '"]');
                      if (roadSlot) {
                        const cardEls = roadSlot.querySelectorAll('.card, .card-small');
                        if (cardEls.length > 0) {
                          const targetCardEl = isField ? cardEls[0] : cardEls[cardEls.length - 1];
                          // 同时添加抖动+变灰（CSS中两者合并在一个类里）
                          targetCardEl.classList.add('card-call-fail-shake');
                          // 抖动结束后（0.6s），平滑过渡恢复正常
                          setTimeout(function () {
                            targetCardEl.classList.remove('card-call-fail-shake');
                          }, 600);
                        }
                      }
                    } catch (e) {
                      // 动画失败不影响游戏
                    }
                  }, 50);
                }

                // 正常进行匹配检测和回合切换
                if (!effectiveSkipMatchCheck) {
                  CardPlayExecutor.checkRoadMatch(playerType, card, finalRoadIndex);
                  CardPlayExecutor.checkNeutralAdjacent(playerType, card, finalRoadIndex);
                }
                if (typeof confirmCardPlacement === 'function') {
                  // 叫牌成功时：屏蔽后续的拼点音效（winSound / loseSound）
                  confirmCardPlacement(playerType, finalRoadIndex, card, callSuccess);
                }
              }
            });

            if (typeof onAnimationEnd === 'function') {
              onAnimationEnd(card, isField, finalRoadIndex);
            }
            return; // 暂停后续流程，等待用户点击
          }

          if (typeof updateUI === 'function') {
            updateUI();
          }
          // ★ 【规则对齐】检测是否有匹配操作
          //   规则：未触发匹配时算作放置 → 立即 confirmCardPlacement
          //   规则：触发匹配时不算作放置 → 等待匹配执行/取消后再 confirmCardPlacement
          let hasMatchOpportunities = false;
          if (!effectiveSkipMatchCheck) {
            const roadMatches = this.checkRoadMatch(playerType, card, finalRoadIndex);
            const neutralMatches = this.checkNeutralAdjacent(playerType, card, finalRoadIndex);
            hasMatchOpportunities = (roadMatches && roadMatches.length > 0) || (neutralMatches && neutralMatches.length > 0);
          }
          // confirmCardPlacement 只在玩家出牌时调用（对方有自己的 onAnimationEnd 处理回合切换）
          // ★ 人机2v1模式：队员端跳过 confirmCardPlacement，由队长端统一处理拼点判定和回合切换
          // ★ 关键修复：只有在没有匹配操作时才立即确认放置
          //   playerType === 'opponent' 时也需要调用 confirmCardPlacement，
          //   因为 confirmCardPlacement 内部的 checkRoadResult 需要在双方客户端都执行才能各自显示拼点结果
          // ★ 【关键修复 · 远程出牌跳过拼点】
          //   当 remotePlayInProgress=true（接收端）时，不在 runAfterAnimation 中做拼点
          //   因为出牌方可能还在等待匹配操作（拖/撞/援/围或取消），此时仍是"打出"状态
          //   拼点推迟到 turn_sync_2v2 广播时执行
          const isRemote = (typeof GameState !== 'undefined' && GameState.remotePlayInProgress === true);
          if (!isRemote && !skipConfirmPlacement && !hasMatchOpportunities && typeof confirmCardPlacement === 'function') {
            confirmCardPlacement(playerType, finalRoadIndex, card);
          }
          if (typeof onAnimationEnd === 'function') {
            // ★ 2026-9-1 FIX: 正常路径下 await onAnimationEnd
            //   让调用方（opponentPlayCard 等）等 onAnimationEnd 完全跑完再继续
            await onAnimationEnd(card, isField, finalRoadIndex);
          }
        };

        if (animationEnabled && sourceElement && targetElement && typeof animateCardMove === 'function') {
          // ===== 清除鼠标悬停粒子特效 =====
          // 出牌时停止悬停粒子效果，避免粒子一直生成
          if (typeof ParticleSystem !== 'undefined' && ParticleSystem.clearHoverEmitter) {
            ParticleSystem.clearHoverEmitter();
          }
          
          // ===== 在动画开始前立即更新手牌区/明牌区/暗牌区的显示 =====
          // 让原有的卡牌立即消失，不要等到动画结束后才移除
          if (typeof updateCardDisplayArea === 'function') {
            const handCards = this.getSourceCards(playerType, 'hand');
            const revealedCards = this.getSourceCards(playerType, 'revealed');
            const darkCards = this.getSourceCards(playerType, 'dark');
            
            if (handCards) updateCardDisplayArea(playerType, 'hand', handCards);
            if (revealedCards) updateCardDisplayArea(playerType, 'revealedCards', revealedCards);
            if (darkCards) updateCardDisplayArea(playerType, 'darkCards', darkCards);
          }
          
          await animateCardMove(sourceElement, targetElement, playerType, card, moveType);
          // ★ 2026-9-1 FIX: await runAfterAnimation，让 executeCardPlay 等 onAnimationEnd 完全跑完再返回
          await runAfterAnimation();
        } else {
          // ★ 2026-9-1 FIX: 同上
          await runAfterAnimation();
        }
      }

    };

    // ============================================================================
    // 【PBAIBridge · ai玩家决策桥】(2026-10-04)
    // ============================================================================
    // 人机模式 AI 决策全面改用 ai-core 引擎（ai-browser.js 打包产物，与联机
    // 「AI玩家」完全同源：engine/game.js 规则引擎 + ai/recommended.js 离线冠军策略）。
    //
    // 【AI能力】双档（设置面板切换，setup 阶段可改，localStorage 持久化）：
    //   公平 fair = FAIR_W 冠军权重 + { fairPlay: true }
    //     遵守与真人一致的信息规则：己方暗牌/牌堆未打出不可见牌点、对方手牌/
    //     暗牌/牌堆不可见，决策期用期望值 E 代替（与联机公平 AI 完全同款）。
    //   全知 omni = CHEAT_W 冠军权重 + { searchDepth: 4 }（联机 0 号「招牌 AI」同款）
    //     全信息推演。浏览器 timeBudgetMs 压到 800ms（Node 训练用 2s；实测深度4
    //     典型 60~120ms，800ms 为极端局面保险，避免冻结 UI）。
    //
    // 工作方式：每个 AI 回合从 GameState 重建镜像 state（52 张牌双方在镜像中
    // 可见——信息边界由引擎 decide 内部按 fairPlay 处理），策略落子验证后映射
    // 回前端 decision + matchAction。decide=null/落子失败 → 逐候选兜底重试
    // （ai-bot v5.30 同款，规则硬约束：可出牌时禁止主动终止）。
    //
    // ★ 权重与 ai-bot.js 同步维护：更新冠军权重时两边都要改。
    // ============================================================================
    const PBAIBridge = {
      MODE_KEY: 'pbAICapability',
      _strategy: null,
      _mode: null,
      // 冠军权重（同步自 ai-bot.js：FAIR_W v6 / CHEAT_W v5）
      FAIR_W: { road: 489, nearWin: 450, level: 260, maxValue: 34, neutral: 45, poolSize: 1, actions: 90, vuln: 160, spread: 40, stuck: 450, opener: 130, openerBig: 600, syn: 22, expo: 10, ckey: 20, rkey: 30, dragMid: 320, breakPool: 140, stackCap: 320, revHold: 450, pool: 12, fireConc: 350, handPow: 8, poolDelta: 100, poolThreat: 140, revKey: 200, keyBleed: 200, keySafe: 80, surroundTiming: 120, sprint: 0, oppHeat: 60, survive: 500, endgame: 120, dragEff: 0, surge: 0, sameStand: 0, poolRace: 0, oppThreat: 0, sprintHot: 300, loseGuard: 300, sprintRush: 500, expoBig: 3, darkKey: 2500, cellValue: 0, poolReach: 250, blindCrashSelf: 2000 },
      CHEAT_W: { road: 520, nearWin: 600, level: 180, maxValue: 22, neutral: 45, poolSize: 1, stuck: 450, opener: 130, openerBig: 600, syn: 22, expo: 10, ckey: 20, rkey: 30, dragMid: 320, breakPool: 140, stackCap: 320, revHold: 450, pool: 12, fireConc: 350, handPow: 8, poolDelta: 100, poolThreat: 140, revKey: 200, keyBleed: 200, keySafe: 80, surroundTiming: 120, sprint: 150, oppHeat: 60, survive: 500, endgame: 120, dragEff: 0, surge: 0, sameStand: 0, poolRace: 0, oppThreat: 0, sprintHot: 300, loseGuard: 300, sprintRush: 500, expoBig: 3, darkKey: 2500, cellValue: 0, poolReach: 250, blindCrashSelf: 2000 },

      getMode: function () {
        try {
          var m = localStorage.getItem(this.MODE_KEY);
          if (m === 'omni' || m === 'fair' || m === 'prob') return m;
        } catch (e) {}
        return 'fair'; // 默认公平
      },
      setMode: function (m) {
        if (m !== 'fair' && m !== 'omni' && m !== 'prob') return;
        try { localStorage.setItem(this.MODE_KEY, m); } catch (e) {}
        this._strategy = null; // 强制下回合重建策略
      },

      _ensureStrategy: function () {
        var core = window.PBAICore;
        if (!core || !core.Recommended) return null;
        var mode = this.getMode();
        if (this._strategy && this._mode === mode) return this._strategy;
        try {
          if (mode === 'omni') {
            this._strategy = core.Recommended.makeStrategy(this.CHEAT_W, { searchDepth: 4, timeBudgetMs: 800 });
          } else if (mode === 'prob') {
            // ★ v5.49 全面档：概率型AI（prob-ai.js）。不构建加权策略——它自己内部
            //   在"不置信"时会回退调Recommended.decide，故只需确认 prob-ai 可用。
            if (!core.ProbAI) { this._strategy = 'prob-only'; }
            else { this._strategy = 'prob-only'; }
          } else {
            this._strategy = core.Recommended.makeStrategy(this.FAIR_W, { fairPlay: true });
          }
          this._mode = mode;
          console.log('[PBAIBridge] 策略就绪 mode=' + mode);
        } catch (e) {
          console.error('[PBAIBridge] 策略构建失败', e);
          this._strategy = null;
        }
        return this._strategy;
      },

      // GameState → 引擎镜像 state（数组含 null 洞原样保留，cardIndex 与前端 1:1；
      // 牌堆同序拷贝——引擎与前端都从末位 pop）
      buildMirrorState: function () {
        var S = GameState;
        var mkCard = function (c) {
          return c ? { id: c.id, suit: c.suit, rank: c.rank, value: c.value, display: c.display || c.rank } : null;
        };
        var mkSide = function (src) {
          return {
            field: (src.field || []).map(mkCard),
            stack: (src.stack || []).map(function (r) { return (r || []).map(mkCard); }),
            neutral: (src.neutral || []).map(function (cell) { return (cell || []).map(mkCard); }),
            hand: (src.hand || []).map(mkCard),
            revealed: (src.revealed || []).map(mkCard),
            dark: (src.dark || []).map(mkCard),
            deck: (src.deck || []).map(mkCard)
          };
        };
        return {
          rng: Math.random,
          turn: 'opponent',
          turnCount: S.turnNumber || 0,
          stopped: { player: !!S.playerStoppedPlaying, opponent: !!S.opponentStoppedPlaying },
          winner: null,
          winReason: null,
          history: [],
          p: mkSide({ field: S.playerField, stack: S.playerStack, neutral: S.playerNeutralCards, hand: S.playerHand, revealed: S.playerRevealedCards, dark: S.playerDarkCards, deck: S.playerDeck }),
          o: mkSide({ field: S.opponentField, stack: S.opponentStack, neutral: S.opponentNeutralCards, hand: S.opponentHand, revealed: S.opponentRevealedCards, dark: S.opponentDarkCards, deck: S.opponentDeck })
        };
      },

      // 决策入口：返回 { action:'stop' } 或前端 decision（含 matchAction 匹配动作）
      decideAIMove: function () {
        var core = window.PBAICore;
        if (!core || !core.G || !core.Recommended) {
          console.warn('[PBAIBridge] ai-browser.js 未加载，AI 无法决策');
          return { action: 'stop' };
        }
        var G = core.G, Recommended = core.Recommended, Common = core.Common;
        var strategy = this._ensureStrategy();
        if (!strategy) return { action: 'stop' };

        var state = this.buildMirrorState();
        if (state.winner || !G.canPlay(state, 'opponent')) return { action: 'stop' };

        // ★ v5.26 回合注释：playCard 会就地修改 state，先克隆一份出牌前快照供注释做账本差分
        var stateBeforeComment = null;
        try { stateBeforeComment = (typeof G.cloneState === 'function') ? G.cloneState(state) : null; } catch (e0) { stateBeforeComment = null; }

        var decision = null, result = null;
        var modeNow = this.getMode();
        if (modeNow === 'prob') {
          // ★ v5.49 全面档：概率型AI（prob-ai.js），按净胜率给所有候选排序。
          //   ProbAI.decide 内部在"不置信"时自动回退加权 AI（与 bench 同一条路径）。
          try {
            var pr = core.ProbAI.decide(state, 'opponent', {});
            if (pr) {
              decision = pr.decision;
              this._lastProb = pr;   // 供注释/调试查看概率排序表
            }
          } catch (eP) { console.error('[PBAIBridge] ProbAI 异常', eP); decision = null; }
          if (!decision) {
            try { decision = Recommended.decide(state, 'opponent', Recommended.weights, { fairPlay: true }); }
            catch (e) { decision = null; }
          }
        } else {
          try { decision = strategy.decide(state, 'opponent'); } catch (e) { console.error('[PBAIBridge] decide 异常', e); decision = null; }
        }

        if (decision) {
          // 在镜像上真正落子验证合法性，并取得引擎已选定的匹配动作
          try { result = G.playCard(state, 'opponent', JSON.parse(JSON.stringify(decision))); } catch (e) { result = null; }
          if (!result || !result.ok) {
            console.warn('[PBAIBridge] 落子失败(' + ((result && result.reason) || 'unknown') + ')，逐候选重试:', JSON.stringify(decision));
            decision = null;
          }
        } else {
          console.warn('[PBAIBridge] decide 返回 null 但 canPlay=true → 逐候选兜底重试');
        }

        if (!decision) {
          // 逐候选兜底重试（ai-bot v5.30 同款）：按 1-ply 评估分降序
          var cands = [];
          try { cands = Common.enumerate(state, 'opponent', {}); } catch (e) { cands = []; }
          var scored = [];
          for (var i = 0; i < cands.length; i++) {
            var c = cands[i];
            var s2 = null;
            try { s2 = G.simulatePlay(state, 'opponent', c); } catch (e) { s2 = null; }
            if (!s2) continue;
            var sc = -Infinity;
            try {
              sc = Recommended.evaluate(s2, 'opponent', strategy.weights);
              if (typeof Recommended.tacticalAdjust === 'function') {
                sc += Recommended.tacticalAdjust(state, 'opponent', c, s2, 1, strategy.weights);
              }
            } catch (e2) {}
            scored.push({ c: c, sc: sc });
          }
          scored.sort(function (a, b) { return b.sc - a.sc; });
          for (var j = 0; j < scored.length; j++) {
            try {
              var r2 = G.playCard(state, 'opponent', JSON.parse(JSON.stringify(scored[j].c)));
              if (r2 && r2.ok) { result = r2; decision = scored[j].c; break; }
            } catch (e3) {}
          }
          if (!decision) {
            console.warn('[PBAIBridge] 全部候选落子失败 → 终止出牌');
            return { action: 'stop' };
          }
        }

        // 引擎镜像匹配结果 → 前端 matchAction（拖/撞带 explicitTaken，与联机 bot 协议一致）
        var m = result && result.matched;
        var matchAction = null;
        if (m) {
          if (m.matchType === 'drag' || m.matchType === 'crash') {
            matchAction = { action: 'roadMatch', matchType: m.matchType,
              takenCard: m.takenCard ? { id: m.takenCard.id, value: m.takenCard.value } : null,
              takenLocation: m.takenLocation || 'field',
              takenStackIndex: (typeof m.takenStackIndex === 'number') ? m.takenStackIndex : -1 };
          } else if (m.matchType === 'surround' || m.action === 'surround') {
            matchAction = { action: 'surround', matchType: 'surround', neutralIndex: m.neutralIndex };
          } else if (m.matchType === 'support' || m.action === 'support') {
            matchAction = { action: 'support', matchType: 'support', neutralIndex: m.neutralIndex };
          }
        }

        var roadIndex = (result && typeof result.roadIndex === 'number') ? result.roadIndex : decision.roadIndex;

        // ★ v5.26 回合注释（本地人机模式）：AI 出牌逻辑三段说明——局势判断/出牌意图(含账本分项)/
        //   结果预测(仅暗/堆牌:亮值偏差+概率+好处坏处)。注释里的每个数字都来自 AI 决策时真实
        //   使用的权重与判定函数(recommended.js)，供玩家对照权重表核验"AI 为什么这么打"。
        //   联机人机由服务器 bot 经 ai_comment 消息下发；本地人机走本处直接生成。
        var aiComment = null;
        var prForComment = this._lastProb || null;
        try {
          // ★ v5.50 概率型AI 走【独有注释】——讲概率账（候选净胜率排序 + 口径展开），
          //   不再讲加权AI 的"40+ 维度加权分拆解"，两者口径完全不同不能混用。
          if (modeNow === 'prob' && core.ProbAI && typeof core.ProbAI.probExplain === 'function'
              && stateBeforeComment && result && result.ok) {
            var _pe = core.ProbAI.probExplain(stateBeforeComment, state, 'opponent', decision, state, result, prForComment);
            if (_pe && _pe.situation) {
              aiComment = {
                probAI: true,
                text: _pe.situation.text,
                sitParts: _pe.situation.parts || [],   // ★ v5.58：逐项分行渲染
                labels: _pe.situation.labels || [],
                intent: _pe.intent ? {
                  text: _pe.intent.text, action: _pe.intent.text,
                  expected: null,
                  // ★ v5.53：概率档传结构化字段（标题 / 计算过程 / 步骤），
                  //   加权档仍用 label/delta/note，两套渲染互不干扰。
                  ledger: (_pe.intent.ledger || []).map(function (x) {
                    return {
                      pick: !!x.pick, title: x.title, win: x.win, calc: x.calc, steps: x.steps || null,
                      pTactical: x.pTactical, pStrategic: x.pStrategic, pFinal: x.pFinal,
                      label: x.title, delta: x.win, note: x.calc
                    };
                  })
                } : null,
                expect: _pe.expect ? { text: _pe.expect.text, expectValue: _pe.expect.expectValue } : null,
                // ★ v5.87：本手收益值/风险值/净收益 —— 白名单式拷贝，漏了就渲染不出来
                valueRisk: _pe.valueRisk ? {
                  gain: _pe.valueRisk.gain, risk: _pe.valueRisk.risk, net: _pe.valueRisk.net,
                  riskW: _pe.valueRisk.riskW,
                  pPress: _pe.valueRisk.pPress, pCrash: _pe.valueRisk.pCrash, pDrag: _pe.valueRisk.pDrag,
                  pLost: _pe.valueRisk.pLost, exposure: _pe.valueRisk.exposure,
                  sureAny: _pe.valueRisk.sureAny, surePress: _pe.valueRisk.surePress,
                  sureCrash: _pe.valueRisk.sureCrash, sureDrag: _pe.valueRisk.sureDrag,
                  isBlind: _pe.valueRisk.isBlind, cardValue: _pe.valueRisk.cardValue,
                  expectedPoint: _pe.valueRisk.expectedPoint,
                  rank: _pe.valueRisk.rank, rankOf: _pe.valueRisk.rankOf,
                  parts: (_pe.valueRisk.parts || []).map(function (p) { return { k: p.k, v: p.v }; }),
                  text: _pe.valueRisk.text
                } : null,
                winProb: _pe.winProb ? {
                  text: _pe.winProb.text,
                  pTactical: Math.round((_pe.winProb.pTactical || 0) * 100),
                  pStrategic: Math.round((_pe.winProb.pStrategic || 0) * 100),
                  final: Math.round((_pe.winProb.final || 0) * 100),
                  result: _pe.winProb.result ? {
                    pTactical: Math.round((_pe.winProb.result.pTactical || 0) * 100),
                    pStrategic: Math.round((_pe.winProb.result.pStrategic || 0) * 100)
                  } : null,
                  after: _pe.winProb.after ? {
                    pTactical: Math.round((_pe.winProb.after.pTactical || 0) * 100),
                    pStrategic: Math.round((_pe.winProb.after.pStrategic || 0) * 100),
                    final: Math.round((_pe.winProb.after.final || 0) * 100),
                    dTac: Math.round((_pe.winProb.after.dTac || 0) * 100),
                    dStrat: Math.round((_pe.winProb.after.dStrat || 0) * 100),
                    dFinal: Math.round((_pe.winProb.after.dFinal || 0) * 100)
                  } : null
                } : null,
                prediction: _pe.after ? {
                  text: _pe.after.text, good: _pe.after.good || [], bad: _pe.after.bad || [], actual: null, prob: 0
                } : null,
                wins: null
              };
            }
          } else if (typeof Recommended.explainDecision === 'function' && stateBeforeComment && result && result.ok) {
            var _ex = Recommended.explainDecision(stateBeforeComment, state, 'opponent', decision, result, strategy.weights);
            if (_ex && _ex.situation) {
              aiComment = {
                text: _ex.situation.text,
                labels: _ex.situation.labels || [],
                intent: _ex.intent ? {
                  text: _ex.intent.text, action: _ex.intent.actionText, expected: _ex.intent.expectedText,
                  ledger: (_ex.intent.ledger || []).map(function (x) { return { label: x.label, delta: Math.round(x.delta), note: x.note }; })
                } : null,
                prediction: _ex.prediction ? {
                  text: _ex.prediction.text, good: _ex.prediction.good || [], bad: _ex.prediction.bad || [],
                  actual: _ex.prediction.actual, prob: Math.round((_ex.prediction.prob || 0) * 100)
                } : null,
                wins: _ex.meta ? _ex.meta.turnWins : null
              };
            }
          }
        } catch (e3) { console.warn('[PBAIBridge] 注释生成失败(不影响对局)', e3); }

        return {
          sourceType: decision.sourceType,
          cardIndex: decision.cardIndex,
          roadIndex: roadIndex,
          skipMatch: !matchAction,   // 前端语义：无匹配动作 → 跳过匹配检查
          matchAction: matchAction,
          aiComment: aiComment,
          mode: this._mode
        };
      }
    };

    // ============================================================================
    // 【AIDecisionEngine · 精简为规则工具集】(2026-10-04)
    // 旧战术/战略决策链已彻底移除，由 PBAIBridge（ai-core 引擎）全面接管。
    // 以下规则工具仍被 教程/演示/出牌提示 使用，予以保留。
    // ============================================================================
    const AIDecisionEngine = {
      _getCards: function (playerType, areaType) {
        // 直接用 playerType 决定 prefix（调用方必须传正确的 playerType）
        var prefix = playerType === 'player' ? 'player' : 'opponent';
        let key;
        if (areaType === 'revealed') {
          key = prefix + 'RevealedCards';       // playerRevealedCards / opponentRevealedCards
        } else if (areaType === 'dark') {
          key = prefix + 'DarkCards';           // playerDarkCards / opponentDarkCards
        } else {
          // hand / deck / field / stack -> playerHand, playerDeck, playerField, playerStack
          key = prefix + areaType.charAt(0).toUpperCase() + areaType.slice(1);
        }
        const value = GameState[key];
        if (!value) return null;
        return Array.isArray(value) ? value.slice() : value;
      },

      getAvailableRoadIndicesForSource: function (playerType, sourceType) {
        const field = this._getCards(playerType, 'field');
        const stack = this._getCards(playerType, 'stack');
        const result = [];
        if (!field) return result;

        if (sourceType === 'hand' || sourceType === 'deck') {
          // 手牌/牌堆：只能放到从左到右第一个空位（findIndex 找第一个 null）
          const firstEmptyIdx = field.findIndex(function (c) { return c === null; });
          if (firstEmptyIdx !== -1) {
            result.push(firstEmptyIdx);
          }
        } else if (sourceType === 'revealed') {
          // 明牌：从左到右第一个空路 + 所有已有场牌且叠牌区未满(<8) 的路
          const firstEmptyIdx = field.findIndex(function (c) { return c === null; });
          if (firstEmptyIdx !== -1) {
            result.push(firstEmptyIdx);
          }
          // 已有场牌的路，叠牌区未满(<8)
          for (let i = 0; i < 5; i++) {
            if (field[i] !== null && field[i] !== undefined) {
              const stackCount = (stack[i] ? stack[i].length : 0);
              if (stackCount < 8) {
                result.push(i);
              }
            }
          }
        } else if (sourceType === 'dark') {
          // 暗牌：目标路必须已有场牌（field 有牌）且叠牌区未满(<8)
          // 与玩家 calculateAvailableSlots('dark') 一致
          for (let i = 0; i < 5; i++) {
            if (field[i] !== null && field[i] !== undefined) {
              const stackCount = (stack[i] ? stack[i].length : 0);
              if (stackCount < 8) {
                result.push(i);
              }
            }
          }
        }
        return result;
      },

      evaluateRoadStates: function (playerType) {
        const oppType = playerType === 'player' ? 'opponent' : 'player';
        const result = [];
        for (let i = 0; i < 5; i++) {
          const myMax = getMaxValue(playerType, i);
          const oppMax = getMaxValue(oppType, i);
          // 计算对方此路的不同牌点数量（用于暗牌4.3策略）
          const oppField = oppType === 'player' ? GameState.playerField : GameState.opponentField;
          const oppStack = oppType === 'player' ? GameState.playerStack : GameState.opponentStack;
          const uniqueValues = [];
          if (oppField[i] && uniqueValues.indexOf(oppField[i].value) === -1) {
            uniqueValues.push(oppField[i].value);
          }
          // ★ 2026-9-18 FIX：oppStack[i] 与其元素判空（AI 决策入口，null 访问会中断回合链）
          var _oppRoadStack = oppStack[i] || [];
          for (let s = 0; s < _oppRoadStack.length; s++) {
            const sc = _oppRoadStack[s];
            if (!sc) continue;
            const v = sc.value;
            if (uniqueValues.indexOf(v) === -1) uniqueValues.push(v);
          }
          result.push({
            roadIndex: i,
            myMax: myMax,
            oppMax: oppMax,
            isAdvantage: myMax > oppMax,
            isDisadvantage: myMax < oppMax,
            isNotAdvantage: myMax <= oppMax,
            myHasCards: myMax > 0,
            oppHasCards: oppMax > 0,
            oppUniqueValueCount: uniqueValues.length
          });
        }
        return result;
      },
    };

    // ============================================================================
    // 【TurnController · 回合控制器】
    // ============================================================================
    //
    // 设计原则：**只负责回合切换逻辑，不直接出牌**。
    // 出牌由上层（player/opponentPlayCard）通过 CardPlayExecutor 完成；
    // 本控制器只回答「现在该谁出牌了 / 是否应该强制切回合 / 如何切换」。
    //
    // 核心方法：
    //   1. switchTurn()            执行一次回合切换
    //   2. shouldForceSwitchTurn() 判断是否必须切回合
    //   3. getNextTurn()           返回下一回合应当出牌的一方（纯查询）
    //
    // 先首轮逻辑：GameState.firstPlayer 控制 turnNumber 递增
    // ============================================================================
    const TurnController = {

      switchTurn: function () {
        if (typeof GameState === 'undefined') return;
        if (GameState.isGameInterrupted) return;
        if (GameState.gamePhase !== 'playing') return;
        // ★ 四人模式：使用专用回合推进
        if (GameState.fourPlayerActive) {
          fourPlayerAdvanceTurn();
          return;
        }
        if (typeof clearRoadMatchHighlights === 'function') { try { clearRoadMatchHighlights(); } catch (e) { } }
        if (typeof clearNeutralAuras === 'function') { try { clearNeutralAuras(); } catch (e) { } }
        if (typeof hidePlayableCardsHint === 'function') { try { hidePlayableCardsHint(); } catch (e) { } }
        if (GameState.currentTurn === 'player') {
          GameState.currentTurn = 'opponent';
          GameState.cardPlayedThisTurn = false;
          if (GameState.firstPlayer === 'opponent') { GameState.turnNumber = (GameState.turnNumber || 0) + 1; }
          this._refreshTurnUI((typeof __t==='function')?__t('st_opp_turn'):'对方回合');
          this._setStopBtnEnabled(false);
          if (GameState.opponentStoppedPlaying) {
            const self = this; const timer = setTimeout(function () { self.switchTurn(); }, 500);
            if (typeof addTimer === 'function') addTimer(timer); return;
          }
          // 联机模式：等待对方网络出牌，不调用AI
          // ★ 重新设计：不再在 switchTurn 中发送 turn_complete
          //   turn_complete 已由 finalizePlacement 统一发送，此处仅刷新UI
          if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
            if (typeof updateGameStatus === 'function') { updateGameStatus(__t('st_wait_opp'), 'st_wait_opp'); }
            return;
          }
          if (!this._canPlayerPlay('opponent')) {
            GameState.opponentStoppedPlaying = true;
            if (typeof updateGameStatus === 'function') { updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped'); }
            if (typeof addTurnRecord === 'function') { addTurnRecord('终止出牌', '对方无法出牌，终止出牌', 'opponent'); }
            this.checkBothStopped();
          } else {
            const timer = setTimeout(function () { if (typeof opponentPlayCard === 'function') opponentPlayCard(); }, 500);
            if (typeof addTimer === 'function') addTimer(timer);
          }
        } else {
          GameState.currentTurn = 'player';
          GameState.cardPlayedThisTurn = false;
          if (GameState.firstPlayer === 'player') { GameState.turnNumber = (GameState.turnNumber || 0) + 1; }
          this._refreshTurnUI((typeof __t==='function')?__t('st_my_turn'):'我方回合');
          this._setStopBtnEnabled(true);
        }
      },

      shouldForceSwitchTurn: function (playerType) {
        if (typeof GameState === 'undefined') return true;
        if (GameState.isGameInterrupted) return true;
        if (GameState.gamePhase !== 'playing') return true;
        const who = playerType || GameState.currentTurn;
        if (who === 'player' && GameState.playerStoppedPlaying) return true;
        if (who === 'opponent' && GameState.opponentStoppedPlaying) return true;
        if (!this._canPlayerPlay(who)) return true;
        return false;
      },

      getNextTurn: function (currentTurn) {
        if (typeof GameState === 'undefined') return 'player';
        const cur = currentTurn || GameState.currentTurn;
        const opponentStopped = GameState.opponentStoppedPlaying;
        const playerStopped = GameState.playerStoppedPlaying;
        const nextCandidate = cur === 'player' ? 'opponent' : 'player';
        if (nextCandidate === 'opponent' && opponentStopped) return 'player';
        if (nextCandidate === 'player' && playerStopped) return 'opponent';
        return nextCandidate;
      },

      checkBothStopped: function () {
        if (typeof GameState === 'undefined') return;
        if (GameState.isGameInterrupted) return;
        if (GameState.gamePhase !== 'playing') return;
        // ★ 方案A：队员端永不发 practice_state_sync
        // ★ 2026-6-1 FIX：仅限真实组队。单机人机2v1不是队员端
        var _hasRealTeammateCheck = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
        var _isTeammate = (_hasRealTeammateCheck && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader);
        // ★ 四人模式：由 fourPlayerAdvanceTurn 处理
        if (GameState.fourPlayerActive) {
          var allAI = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
          var allP = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
          if (allAI && allP) {
            // ★ Bug2 FIX: 不先设 gamePhase='ended'，让 checkWinCondition 自己处理并调 updateGameStatus
            if (typeof checkWinCondition === 'function') checkWinCondition();
            // ★ 人机2v1模式：游戏结束时发送全状态同步，确保队友状态栏同步显示胜负
            if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
              if (typeof collectPracticeState === 'function') {
                PBOnline.sendPracticeStateSync(collectPracticeState());
              }
            }
          } else if (!_isTeammate) {
            fourPlayerAdvanceTurn();
          }
          return;
        }
        const hasNeutralAuras = document.querySelectorAll('.neutral-aura').length > 0;
        const hasRoadMatches = document.querySelectorAll('.match-glow').length > 0;
        if (hasNeutralAuras || hasRoadMatches) {
          GameState.playerStoppedPlaying = false;
          this._setStopBtnEnabled(true);
          if (typeof updateGameStatus === 'function') { updateGameStatus(__t('st_cant_place'), 'st_cant_place'); }
          return;
        }
        if (GameState.playerStoppedPlaying && GameState.opponentStoppedPlaying) {
          // ★ Bug2 FIX: 不先设 gamePhase='ended'，让 checkWinCondition 自己处理并调 updateGameStatus
          if (typeof checkWinCondition === 'function') checkWinCondition();
        } else if (GameState.playerStoppedPlaying) {
          if (typeof startOpponentContinuousPlay === 'function') startOpponentContinuousPlay();
        } else if (GameState.opponentStoppedPlaying) {
          const self = this; const timer = setTimeout(function () { self.switchTurn(); }, 1000);
          if (typeof addTimer === 'function') addTimer(timer);
        }
      },

      _canPlayerPlay: function (playerType) {
        if (typeof GameState === 'undefined') return false;
        const prefix = playerType === 'player' ? 'player' : 'opponent';
        const hand = GameState[prefix + 'Hand'];
        const deck = GameState[prefix + 'Deck'];
        const revealed = GameState[prefix + 'RevealedCards'];
        const dark = GameState[prefix + 'DarkCards'];
        const field = GameState[prefix + 'Field'];
        const stack = GameState[prefix + 'Stack'];
        if (hand && hand.length > 0) return true;
        if (deck && deck.length > 0) return true;
        if (revealed && revealed.length > 0) return true;
        if (dark && dark.length > 0 && stack && stack.length > 0) {
          for (let i = 0; i < stack.length; i++) {
            if (stack[i] && stack[i].length > 0) return true;
            if (field && field[i]) return true;
          }
        }
        if (field) {
          const hasEmpty = field.some(function (c) { return c === null || c === undefined; });
          if (hasEmpty) {
            return (hand && hand.length > 0) || (deck && deck.length > 0) || (revealed && revealed.length > 0);
          }
        }
        return false;
      },

      _refreshTurnUI: function (statusText) {
        if (typeof updateTurnDisplay === 'function') updateTurnDisplay();
        if (typeof updateTurnIndicator === 'function') updateTurnIndicator();
        if (typeof updateGameStatus === 'function' && statusText) updateGameStatus(statusText);
      },

      _setStopBtnEnabled: function (enabled) {
        if (typeof GameElements === 'undefined' || !GameElements.ui || !GameElements.ui.stopBtn) return;
        const btn = GameElements.ui.stopBtn;
        btn.disabled = !enabled;
        btn.style.opacity = enabled ? '1' : '0.5';
        btn.style.cursor = enabled ? 'pointer' : 'not-allowed';
      }
    };


    function animateCardMove(fromElement, toElement, playerType, card = null, moveType = 'hand', options = {}) {

      return new Promise((resolve) => {
        const { skipTargetWrite = false, customToRect = null, removeSource = true } = options;

        // 播放相应的音效（拖牌由 animateCardMove 开头触发；援牌/围牌在动画结束后播放落地音效）
        if (moveType === 'drag' && typeof playSound === 'function') {
          playSound('dragSound');
        }

        const gameContainer = document.querySelector('.game-container');
        const containerRect = gameContainer ? gameContainer.getBoundingClientRect() : { left: 0, top: 0 };
        // ★ 有效缩放 = 视觉宽/布局宽（getBoundingClientRect 已含容器 scale 与回放 wrapper scale(0.8) 的叠加）
        //   回放模式若只除以 getGameScale()，动画卡坐标会整体偏小 → 匹配动画乱飞
        let scale = getGameScale() || 1;
        try {
          const _rawW = gameContainer ? (gameContainer.offsetWidth || 0) : 0;
          const _visW = gameContainer ? (gameContainer.getBoundingClientRect().width || 0) : 0;
          if (_rawW > 0 && _visW > 0 && isFinite(_visW / _rawW) && (_visW / _rawW) > 0) scale = _visW / _rawW;
        } catch (e) {}

        function toContainerRect(screenRect) {
          return {
            left: (screenRect.left - containerRect.left) / scale,
            top: (screenRect.top - containerRect.top) / scale,
            width: screenRect.width / scale,
            height: screenRect.height / scale
          };
        }

        const fromScreenRect = fromElement.getBoundingClientRect();
        const fromRect = toContainerRect(fromScreenRect);

        // 围牌队列移动：如果提供了自定义目标位置，直接使用，跳过独立计算
        let toScreenRect = customToRect || toElement.getBoundingClientRect();
        let toRect = toContainerRect(toScreenRect);
        
        const tempCardHeight = 96;
        const gap = 4;
        
        const isSmall = fromElement && fromElement.classList.contains('card-small');
        
        let normalCardWidth = 90;
        let normalCardHeight = 96;
        const roadSlot = fromElement?.closest('.player-road-slot, .opponent-road-slot');
        let fieldCardEl = null;
        if (roadSlot) {
          fieldCardEl = roadSlot.querySelector('.card:not(.card-small)');
        }
        if (!fieldCardEl) {
          fieldCardEl = document.querySelector('.player-road-slot .card:not(.card-small)') ||
                        document.querySelector('.opponent-road-slot .card:not(.card-small)');
        }
        if (fieldCardEl) {
          const fieldRect = toContainerRect(fieldCardEl.getBoundingClientRect());
          if (fieldRect.width > 0 && fieldRect.height > 0) {
            normalCardWidth = fieldRect.width;
            normalCardHeight = fieldRect.height;
          }
        }
        
        if (toElement.classList.contains('player-road-slot') || toElement.classList.contains('opponent-road-slot')) {
          const existingCards = toElement.querySelectorAll('.card');
          const isPlayer = toElement.classList.contains('player-road-slot');
          const slotRect = toContainerRect(toElement.getBoundingClientRect());
          
          // 围牌队列移动：如果提供了 customToRect，跳过独立计算，直接使用队列位置
          const sequenceIndex = options.sequenceIndex || 0;
          // 关键：!customToRect 是确保仅在未传入自定义目标位置时才独立计算
          if (moveType === 'surround' && !customToRect) {
            // 围牌：使用源卡牌尺寸（保持中立牌样式），每张围牌 top = 上一张.bottom + gap
            const lastCard = existingCards[existingCards.length - 1];
            const lastCardRect = toContainerRect(lastCard.getBoundingClientRect());

            let cardWidth, cardHeight;
            if (fromElement) {
              const sourceRect = fromRect;
              cardWidth = sourceRect.width;
              cardHeight = sourceRect.height;
            } else {
              cardWidth = lastCardRect.width;
              cardHeight = lastCardRect.height;
            }

            const gap2 = 2;
            toRect = {
              left: slotRect.left + (slotRect.width - cardWidth) / 2,
              top: lastCardRect.top + lastCardRect.height + gap2 + sequenceIndex * (cardHeight + gap2),
              width: cardWidth,
              height: cardHeight
            };
          } else if (existingCards.length > 0) {
            const lastCardRect = toContainerRect(existingCards[existingCards.length - 1].getBoundingClientRect());
            const animCardHeight = fromRect ? fromRect.height : tempCardHeight;
            const animCardWidth = fromRect ? fromRect.width : lastCardRect.width;
            toRect = {
              left: slotRect.left + (slotRect.width - animCardWidth) / 2,
              top: isPlayer
                ? lastCardRect.top + lastCardRect.height + gap
                : lastCardRect.top - animCardHeight - gap,
              width: animCardWidth,
              height: animCardHeight
            };
          } else {
            const targetHeight = fromRect ? fromRect.height : tempCardHeight;
            const targetWidth = fromRect ? fromRect.width : slotRect.width;
            toRect = {
              left: slotRect.left + (slotRect.width - targetWidth) / 2,
              top: isPlayer
                ? slotRect.top
                : slotRect.top + slotRect.height - targetHeight,
              width: targetWidth,
              height: targetHeight
            };
          }
        } else if (toElement.classList.contains('player-neutral-slot') || toElement.classList.contains('opponent-neutral-slot')) {
          // 中立区位置计算
          const existingCards = toElement.querySelectorAll('.card');
          const isPlayer = toElement.classList.contains('player-neutral-slot');

          if (moveType === 'support') {
            // 援牌：以卡牌"顶部/底部"为基准定位，精确放到"上一张中立牌下方"（带间隙）
            const slotRect = toContainerRect(toElement.getBoundingClientRect());
            const cardWidth = Math.min(slotRect.width, 90);
            const neutralGap = 6;
            if (existingCards.length > 0) {
              const lastCardRect = isPlayer
                ? toContainerRect(existingCards[existingCards.length - 1].getBoundingClientRect())
                : toContainerRect(existingCards[0].getBoundingClientRect());
              const realCardHeight = lastCardRect.height;
              toRect = {
                left: lastCardRect.left,
                top: isPlayer
                  ? lastCardRect.top + lastCardRect.height + neutralGap
                  : lastCardRect.top - neutralGap - realCardHeight,
                width: lastCardRect.width,
                height: realCardHeight
              };
            } else {
              // 首张入格：竖长卡尺寸落点（原版姿态，飞行卡与落点等高衔接）
              const realCardHeight = cardWidth * 1.4;
              toRect = {
                left: slotRect.left + (slotRect.width - cardWidth) / 2,
                top: isPlayer
                  ? slotRect.top + 2
                  : slotRect.top + slotRect.height - realCardHeight - 2,
                width: cardWidth,
                height: realCardHeight
              };
            }
          } else if (existingCards.length > 0) {
            const lastCardRect = isPlayer
              ? toContainerRect(existingCards[existingCards.length - 1].getBoundingClientRect())
              : toContainerRect(existingCards[0].getBoundingClientRect());

            let targetCardHeight = moveType === 'drag' ? fromRect.height : tempCardHeight;
            if (isSmall && moveType === 'drag') {
              targetCardHeight = normalCardHeight;
            }
            toRect = {
              left: lastCardRect.left,
              top: isPlayer
                ? lastCardRect.top + lastCardRect.height + gap
                : lastCardRect.top - targetCardHeight - gap,
              width: lastCardRect.width,
              height: targetCardHeight
            };
          } else {
            const slotRect = toContainerRect(toElement.getBoundingClientRect());
            // 首张入格：竖长卡尺寸落点（原版姿态，飞行卡与落点等高衔接）
            let targetCardWidth = moveType === 'drag' ? normalCardWidth : Math.min(slotRect.width, 90);
            let targetCardHeight = moveType === 'drag' ? fromRect.height : tempCardHeight;
            if (isSmall && moveType === 'drag') {
              targetCardHeight = normalCardHeight;
            }
            toRect = {
              left: slotRect.left + (slotRect.width - targetCardWidth) / 2,
              top: isPlayer
                ? slotRect.top + 2
                : slotRect.top + slotRect.height - targetCardHeight - 2,
              width: targetCardWidth,
              height: targetCardHeight
            };
          }
        }

        // 注意：getBoundingClientRect() 返回的已经是视口坐标（已包含 zoom 影响），不需要再乘以 scale
        
        fromRect.right = fromRect.left + fromRect.width;
        fromRect.bottom = fromRect.top + fromRect.height;
        toRect.right = toRect.left + toRect.width;
        toRect.bottom = toRect.top + toRect.height;
        
        const config = CardAnimationConfig[moveType] || CardAnimationConfig.hand;
        const isDarkCard = moveType === 'dark' || moveType === 'darkDeal';
        const isCardBack = card === null;
        const isFromDeck = moveType === 'fromDeck';

        // ★ 卡通风格发牌灵动处理（2026-10-04）：仅发牌三阶段（darkDeal/hand/revealed）生效。
        //    ★ 必须加落点过滤：出牌执行器 getMoveType 对"从手牌/明牌打出"同样返回 'hand'/'revealed'
        //      （但落点是路牌区/中立区）——只有落点为功能牌槽位才是真正的发牌，避免误伤出牌动画
        const isDealSlotTarget = toElement.classList && (
          toElement.classList.contains('player-hand-slot') || toElement.classList.contains('opponent-hand-slot') ||
          toElement.classList.contains('player-dark-slot') || toElement.classList.contains('opponent-dark-slot') ||
          toElement.classList.contains('player-revealed-slot') || toElement.classList.contains('opponent-revealed-slot'));
        const isCartoonDealFlight = selectedCardFaceStyle === 'cartoon'
          && (moveType === 'darkDeal' || moveType === 'hand' || moveType === 'revealed')
          && isDealSlotTarget;
        // ★ 卡通风格出牌飞行（2026-10-04）：撞/围/暗牌/抽牌 打出到场上的飞行同样弹簧化
        //    （过冲回弹+落地果冻惯性），回放等非卡通场景不受影响
        // ★ 拖牌/援牌除外（2026-10-04 用户指令：取消拖牌与援牌的惯性甩尾——用原 easeOutQuad 直落）
        const isCartoonPlayFlight = selectedCardFaceStyle === 'cartoon' && !isCartoonDealFlight
          && (moveType === 'crash' || moveType === 'surround'
              || moveType === 'dark' || moveType === 'fromDeck');
        // ★ 卡通抽牌打出（2026-10-04 用户需求）：牌堆→路牌区飞行走抛物线弧线（复用 ctDealFly 机制）
        const isCartoonFromDeckFlight = selectedCardFaceStyle === 'cartoon' && moveType === 'fromDeck';
        // 弹簧贝塞尔：飞行末端过冲回弹（灵动），其他场景维持原 easeOutQuad 手感
        const flightEase = (isCartoonDealFlight || isCartoonPlayFlight) ? 'cubic-bezier(0.3, 1.4, 0.5, 1)' : 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        // ★ 卡通出牌形变飞行（2026-10-9 用户指令：手牌打出移动过程变瘦拉长）：
        //    目标=场上（路牌/中立槽）的卡通飞行，途中按钟形曲线做 X 压缩/Y 拉伸形变
        //    （与悬停果冻的拉长段同族），落点交给落地果冻动画
        const _fieldTarget = toElement.classList.contains('road-slot') ||
                             toElement.classList.contains('player-road-slot') ||
                             toElement.classList.contains('opponent-road-slot') ||
                             toElement.classList.contains('player-neutral-slot') ||
                             toElement.classList.contains('opponent-neutral-slot');
        const isCartoonFieldFlight = selectedCardFaceStyle === 'cartoon' && _fieldTarget;
        const _stretchAt = (t) => Math.sin(Math.PI * Math.min(1, Math.max(0, t)));

        const rotateDeg = config.rotate || 0;
        const finalScale = config.scale || 1;
        // ★ 卡通发牌（手牌/明牌阶段）：整圈旋转增加灵动；darkDeal 已自带 1440° 双旋不动
        let effectiveRotate = (isCartoonDealFlight && moveType !== 'darkDeal') ? 360 : rotateDeg;
        // ★ 卡通（2026-10-04 用户指令）：我方暗牌打出 = 对方暗牌旋转动画的镜像（反向旋转）
        if (selectedCardFaceStyle === 'cartoon' && moveType === 'dark' && playerType === 'player') {
          effectiveRotate = -rotateDeg;
        }

        // 对方叠牌：计算实际的起始位置（考虑尺寸变化带来的偏移）
        let actualFromTop = fromRect.top;
        let actualFromLeft = fromRect.left;
        if (isSmall && (moveType === 'drag' || moveType === 'support') && playerType === 'opponent') {
          actualFromTop = fromRect.top - (normalCardHeight - fromRect.height);
          const widthDiff = normalCardWidth - fromRect.width;
          actualFromLeft = fromRect.left - widthDiff / 2;
        }

        // 计算初始位置与目标位置的差值（用于 transform 动画）
        const deltaX = toRect.left - actualFromLeft;
        const deltaY = toRect.top - actualFromTop;

        // ★ 2026-10-05（用户需求）：卡通拖牌时长按飞行距离自适应——远路(第1路)1200ms/近路(第5路)800ms
        let _effDuration = config.duration;
        if (selectedCardFaceStyle === 'cartoon' && moveType === 'drag') {
          const _dragDist = Math.hypot(deltaX, deltaY);
          _effDuration = Math.round(Math.max(800, Math.min(1200, 800 + (_dragDist - 350) * 1.15)));
        }

        // 拖牌动画：始终使用场牌尺寸，不做 scaleY 变化
        const isDragMove = moveType === 'drag';
        
        let animCard;
        let cardHTML = '';
        
        // ===== 叠牌拖牌/援牌处理：重新渲染为路牌区场牌尺寸 =====
        if (isSmall && card && (moveType === 'drag' || moveType === 'support')) {
          const newCardHTML = getCardFaceHTML(playerType, card, false);
          animCard = document.createElement('div');
          animCard.className = 'animation-card rounded-lg shadow-lg z-40 overflow-hidden';
          animCard.style.position = 'absolute';
          animCard.style.left = `${actualFromLeft}px`;
          animCard.style.top = `${actualFromTop}px`;
          animCard.style.width = `${normalCardWidth}px`;
          animCard.style.height = `${normalCardHeight}px`;
          animCard.style.margin = '0';
          animCard.style.zIndex = '9999';
          animCard.style.pointerEvents = 'none';
          animCard.innerHTML = newCardHTML;
          animCard.style.transform = 'translate(0, 0) rotate(0deg) scaleY(1)';
          cardHTML = newCardHTML;
        } else {
          animCard = document.createElement('div');
          
          // ===== 援牌/围牌：保持源卡牌原始样式 =====
          if ((moveType === 'support' || moveType === 'surround') && fromElement) {
            animCard.className = `animation-card z-40`;
            animCard.style.left = `${fromRect.left}px`;
            animCard.style.top = `${fromRect.top}px`;
            animCard.style.width = `${fromRect.width}px`;
            animCard.style.height = `${fromRect.height}px`;
            animCard.style.background = fromElement.style.background || getComputedStyle(fromElement).background;
            animCard.style.border = fromElement.style.border || getComputedStyle(fromElement).border;
            animCard.style.borderRadius = fromElement.style.borderRadius || getComputedStyle(fromElement).borderRadius;
            animCard.style.boxShadow = fromElement.style.boxShadow || getComputedStyle(fromElement).boxShadow;
            animCard.style.color = fromElement.style.color || getComputedStyle(fromElement).color;
            animCard.style.fontWeight = fromElement.style.fontWeight || getComputedStyle(fromElement).fontWeight;
            animCard.style.display = 'flex';
            animCard.style.alignItems = 'center';
            animCard.style.justifyContent = 'center';
            animCard.style.overflow = 'hidden';
            animCard.innerHTML = fromElement.innerHTML;
            animCard.style.position = 'absolute';
            animCard.dataset.sourceCardHTML = fromElement.innerHTML;
            animCard.dataset.sourceBackground = animCard.style.background;
            animCard.dataset.sourceBorder = animCard.style.border;
            animCard.dataset.sourceBorderRadius = animCard.style.borderRadius;
            animCard.dataset.sourceShadow = animCard.style.boxShadow;
            animCard.dataset.sourceWidth = `${fromRect.width}px`;
            animCard.dataset.sourceHeight = `${fromRect.height}px`;
            animCard.dataset.sourceColor = animCard.style.color;
            animCard.dataset.sourceFontWeight = animCard.style.fontWeight;
            animCard.dataset.sourceFontSize = fromElement.style.fontSize || '14px';
            cardHTML = fromElement.innerHTML;
          } else {
            // ===== 其他移动类型：根据源尺寸设置动画卡牌大小 =====
            animCard.className = `animation-card rounded-lg shadow-lg z-40 overflow-hidden`;
            
            // 拖牌动画：统一使用路牌区场牌尺寸，确保两张卡牌大小一致
            if (moveType === 'drag') {
              animCard.style.width = `${normalCardWidth}px`;
              animCard.style.height = `${normalCardHeight}px`;
            } else {
              animCard.style.width = `${fromRect.width}px`;
              animCard.style.height = `${fromRect.height}px`;
            }

            if (card) {
              if (isDarkCard) {
                animCard.style.background = 'radial-gradient(circle at center, #1e3a8a, #0f172a)';
                animCard.style.border = '2px solid #3b82f6';
                animCard.style.borderRadius = '10px';
                animCard.innerHTML = getCardBackElementHTML(playerType === 'player');
                cardHTML = getCardBackElementHTML(playerType === 'player');
              } else if (isFromDeck) {
                const backHTML = getCardBackElementHTML(playerType === 'player');
                cardHTML = getCardFaceHTML(playerType, card);
                animCard.innerHTML = backHTML;
              } else {
                cardHTML = getCardFaceHTML(playerType, card);
                animCard.innerHTML = cardHTML;
              }
            } else {
              cardHTML = getCardBackElementHTML(playerType === 'player');
              animCard.innerHTML = cardHTML;
            }

            // ★ 卡通（2026-10-04）：清空飞行容器自带底色/边框/阴影——容器圆角与卡面圆角不一致，
            //   旋转时四角会露出容器深色底（用户反馈"四个倒角多余黑边"）；卡面自带描边和果冻影。
            //   （注：与上次事故无关——事故元凶是延迟移除飞行卡，此处仅改容器静态样式，飞行结束照常立即移除）
            // ★ 同轮追加：放开 overflow/contain 裁剪（两者会把卡面果冻底影裁掉——旋转时"底部边框
            //   消失/变形"）+ backface 防护（720° 旋转背面帧防护）
            if (selectedCardFaceStyle === 'cartoon') {
              animCard.style.background = 'transparent';
              animCard.style.border = 'none';
              animCard.style.borderRadius = '14px';
              animCard.style.boxShadow = 'none';
              animCard.classList.remove('overflow-hidden');
              animCard.style.contain = 'none';
              animCard.style.backfaceVisibility = 'hidden';
            }

            animCard.style.left = `${fromRect.left}px`;
            animCard.style.top = `${fromRect.top}px`;
          }
        }

        // ✅ 初始化样式（动画前先设置好位置 + 初始 transform）——不动 left/top
        animCard.style.position = 'absolute';
        animCard.style.transform = 'translate(0, 0) rotate(0deg) scaleY(1)';
        animCard.style.opacity = '1';
        animCard.style.willChange = 'transform, opacity';
        // ★ 卡通：关闭绘制裁剪（contain:paint 会把卡面果冻底影/旋转边缘裁掉——顶部描边消失/变形；
        //   此前虽在上方清样处设过 contain:none，却被本行无条件覆盖回 layout paint，导致修复无效）
        animCard.style.contain = selectedCardFaceStyle === 'cartoon' ? 'none' : 'layout paint';
        // ★ 2026-10-04 修复（用户反馈：飞行结尾偶尔触发悬停形变）：飞行卡必须对鼠标透明——
        //   否则内层卡牌的 card-hover 会在光标扫过/停在落点时触发悬停形变动画
        animCard.style.pointerEvents = 'none';

        // ★ 2026-10-04 修复（用户反馈：首次旋转顶部描边间歇消失/变形，后续正常）：
        //   亮度/辉光滤镜原先在起飞帧才应用——首次播放时滤镜着色器在飞行途中才编译，
        //   掉帧使细描边间歇渲染缺失；现提前到创建期应用（滤镜全程静态不过渡，视觉零差异），
        //   让合成器在起飞前的空闲帧完成着色器编译与光栅预热
        const brightnessStyle = (moveType !== 'surround' && moveType !== 'support') && config.brightness !== undefined
          ? config.brightness
          : null;
        const glowStyle = (moveType !== 'surround' && moveType !== 'support') && config.glow
          ? config.glow
          : null;
        if (brightnessStyle !== null || glowStyle !== null) {
          const filterParts = [];
          if (brightnessStyle !== null) filterParts.push(`brightness(${brightnessStyle})`);
          if (glowStyle !== null) filterParts.push(glowStyle);
          animCard.style.filter = filterParts.join(' ');
        }

        gameContainer.appendChild(animCard);

        // 尾迹参数：仅真发牌（落点=功能牌槽位）才传 moveType 触发卡通专属尾迹；
        // 出牌等场景传空串，保持原 dust/fire 粒子不变
        createParticleSystem(config, fromRect, toRect, playerType, isCartoonDealFlight ? moveType : '');

        // ✅ 关键改动：transition 只对 transform + opacity 生效（GPU 合成层）
        //    动画期间，不再变化 left/top，完全通过 translate 移动
        //    filter: brightness / glow 仅在动画开始时设好，不做过渡（避免每帧重绘）
        const shouldHideSource = (moveType === 'drag' || moveType === 'crash' || moveType === 'support' || moveType === 'surround') && fromElement;
        if (shouldHideSource) {
          fromElement.style.visibility = 'hidden';
          fromElement.style.opacity = '0';
          fromElement.style.pointerEvents = 'none';
        }
        requestAnimationFrame(() => {
          // transform 过渡：位移 + 旋转 + 缩放，全部在一个 transform 属性上
          // opacity 也做过渡，但不会引起重排
          // （亮度/辉光滤镜已提前到创建期应用——见上方修复注释）
          animCard.style.transition = `transform ${_effDuration}ms ${flightEase}, opacity ${_effDuration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`;

          // ✅ 仅 transform 驱动位移+旋转+缩放
          // 注意：transform 顺序有讲究：先 translate 再 rotate/scale
          if (isSmall && moveType === 'support') {
            // ★ 对方视角援牌：飞行途中缩放到目标中立牌实际尺寸，落点左上角精确对齐牌尾（含间隔）。
            //   此前仅 translate 不缩放，动画卡保持路牌区大尺寸盖住中立牌堆，视觉上"未对齐尾部"。
            //   玩家视角动画已认可，保持原样不动。
            if (playerType === 'opponent' && toRect.width > 0 && toRect.height > 0 && normalCardWidth > 0 && normalCardHeight > 0) {
              const _sx = toRect.width / normalCardWidth;
              const _sy = toRect.height / normalCardHeight;
              animCard.style.transformOrigin = 'top left';
              animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scale(${_sx}, ${_sy})`;
            } else {
              animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scaleY(1)`;
            }
          } else if (moveType === 'surround' || moveType === 'support') {
            // ★ 对方视角援牌（场牌源）：同上，按动画卡实际初始尺寸缩放到中立牌尺寸
            if (playerType === 'opponent' && moveType === 'support' && toRect.width > 0 && toRect.height > 0) {
              const _aw = parseFloat(animCard.style.width) || fromRect.width;
              const _ah = parseFloat(animCard.style.height) || fromRect.height;
              if (_aw > 0 && _ah > 0) {
                const _sx = toRect.width / _aw;
                const _sy = toRect.height / _ah;
                animCard.style.transformOrigin = 'top left';
                animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scale(${_sx}, ${_sy})`;
              } else {
                animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scaleY(1)`;
              }
            } else if (isCartoonFieldFlight) {
              // ★ 卡通围牌形变飞行（2026-10-9）：与手牌打出同款"变瘦拉长"钟形形变
              const _N4 = 12; const _linS = [];
              for (let _i = 0; _i <= _N4; _i++) {
                const _t = _i / _N4; const _st = _stretchAt(_t);
                _linS.push({ transform: `translate(${deltaX * _t}px, ${deltaY * _t}px) rotate(${rotateDeg * _t}deg) scale(${(1 - 0.09 * _st).toFixed(3)}, ${(1 + 0.13 * _st).toFixed(3)})`, offset: _t });
              }
              animCard.animate(_linS, { duration: config.duration, easing: 'linear', fill: 'both' });
            } else {
              animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scaleY(1)`;
            }
          } else if (isDragMove) {
            animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotateDeg}deg) scale(1)`;
          } else if (isCartoonDealFlight || isCartoonFromDeckFlight) {
            // ★ 卡通真抛物线飞行（2026-10-04 二次实现，用户反馈：速度必须逐渐变化，不可忽快忽慢）：
            //    Web Animations API 按 真实抛物线公式（水平匀速 + 垂直恒定加速度）逐帧采样16点、
            //    线性插值——速度连续渐变无拐点（先前3关键帧+分段缓动在天顶处有速度拐折）。
            //    弧线统一朝上（2026-10-04 用户指令：我方牌堆出牌方向也改成朝上）；
            //    弧高随距离自适应（70~170px）；尾迹 createCartoonDealTrail 同公式跟随
            const _arc = Math.min(170, Math.max(70, Math.hypot(deltaX, deltaY) * 0.34));
            const _N = 16;
            const _flyFrames = [];
            for (let _i = 0; _i <= _N; _i++) {
              const _t = _i / _N;
              const _ox = deltaX * _t;                                  // 水平：匀速
              const _oy = deltaY * _t - 4 * _arc * _t * (1 - _t);         // 垂直：抛物线偏移（连续速度）
              const _st = isCartoonFieldFlight ? _stretchAt(_t) : 0;      // 场上目标：变瘦拉长形变
              _flyFrames.push({ transform: `translate(${_ox}px, ${_oy}px) rotate(${effectiveRotate * _t}deg) scale(${(1 - 0.09 * _st).toFixed(3)}, ${(1 + 0.13 * _st).toFixed(3)})`, offset: _t });
            }
            animCard.animate(_flyFrames, { duration: config.duration, easing: 'linear', fill: 'both' });
          } else if (isCartoonFieldFlight) {
            // ★ 卡通出牌形变飞行（2026-10-9 用户指令）：手牌打出移动过程"变瘦拉长"
            //   （X 压缩/Y 拉伸钟形曲线，类似悬停果冻形变），落点交给落地果冻动画
            const _N3 = 12;
            const _lin = [];
            for (let _i = 0; _i <= _N3; _i++) {
              const _t = _i / _N3;
              const _st = _stretchAt(_t);
              _lin.push({ transform: `translate(${deltaX * _t}px, ${deltaY * _t}px) rotate(${effectiveRotate * _t}deg) scale(${(1 - 0.09 * _st).toFixed(3)}, ${(1 + 0.13 * _st).toFixed(3)})`, offset: _t });
            }
            animCard.animate(_lin, { duration: config.duration, easing: 'linear', fill: 'both' });
          } else {
            // effectiveRotate 仅在卡通发牌三阶段可能与 rotateDeg 不同（其余场景恒等，零行为变化）
            animCard.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${effectiveRotate}deg) scale(${finalScale})`;
          }
        });
        
        const timer2 = setTimeout(() => {
          if (skipTargetWrite) {
            if (typeof playSound === 'function') {
              if (moveType === 'support') playSound('supportCardSound');
              else if (moveType === 'surround') playSound('surroundCardSound');
            }
            // ★ removeSource=false：保留源元素（回放模式复用真实牌堆/路牌/中立牌元素，
            //   删除会导致 #player-deck 等从 DOM 消失 → 后续动画 ghost 落到 (0,0) 乱飞）
            if (removeSource && fromElement && fromElement.parentNode) {
              fromElement.parentNode.removeChild(fromElement);
            }
            if (gameContainer.contains(animCard)) {
              gameContainer.removeChild(animCard);
            }
            resolve();
            return;
          }

          // ========== 路牌区/中立区：插入卡牌后做一个短促的 scale 弹跳（纯 transform） ==========
          const isRoadSlotTarget = toElement.classList.contains('road-slot') ||
                                   toElement.classList.contains('player-road-slot') ||
                                   toElement.classList.contains('opponent-road-slot');

          toElement.style.opacity = '1';

          if (isRoadSlotTarget) {
            if (selectedCardFaceStyle === 'cartoon') {
              // ★ 卡通落场果冻（2026-10-9 用户指令）：与手牌悬停落下动画（ctJellyFall）逐帧一致
              toElement.classList.add('ct-land-jelly');
              const timer3 = setTimeout(() => {
                toElement.classList.remove('ct-land-jelly');
              }, 600);
              addTimer(timer3);
            } else {
              // 路牌区：使用 CSS 动画类实现弹跳效果（缩小→放大→还原，居中对称）
              toElement.classList.add('card-road-pop');

              const timer3 = setTimeout(() => {
                toElement.classList.remove('card-road-pop');
              }, 600);
              addTimer(timer3);
            }

            if (gameContainer.contains(animCard)) {
              gameContainer.removeChild(animCard);
            }
            resolve();
            return;
          }

          if (!toElement.classList.contains('player-neutral-slot') && !toElement.classList.contains('opponent-neutral-slot')) {
            // ★ 卡通窑洞（2026-10-8 用户指令：取消隐藏窑洞）：石板手牌槽保留拱圈/洞口，
            //   卡牌入洞后金边从卡牌四周露出；其他风格维持原隐藏行为
            if (!toElement.classList.contains('stone-hand-slot')) {
              toElement.style.border = 'none';
              toElement.style.background = 'transparent';
              toElement.style.boxShadow = 'none';
            }
            toElement.classList.add('slot-has-card');
          }

          toElement.innerHTML = cardHTML;

          // ★ 2026-9-23 FIX：写回帧方形对齐——中立槽默认渲染会把路牌区卡面拉成竖长
          //   （"移入中立区的瞬间突然拉高然后恢复正常"），给写回卡设 toRect 内联尺寸，
          //   与 updateNeutralDisplay 重渲染口径一致，消除落地瞬间的尺寸突闪
          if ((toElement.classList.contains('player-neutral-slot') || toElement.classList.contains('opponent-neutral-slot')) && toRect.width > 0 && toRect.height > 0) {
            const _rc = toElement.querySelector('.card');
            if (_rc) {
              _rc.style.width = `${toRect.width}px`;
              _rc.style.height = `${toRect.height}px`;
            }
          }

          if (isCartoonDealFlight) {
            // ★ 卡通发牌落地（2026-10-04）：果冻压扁→回弹→站稳（灵动连续），替代通用槽位弹跳；
            //    压扁挂在落点卡牌本体（.card），槽位不做 transform 弹跳
            const _landCard = toElement.querySelector('.card');
            if (_landCard) {
              _landCard.classList.add('ct-deal-land');
              const _landTimer = setTimeout(() => { _landCard.classList.remove('ct-deal-land'); }, 900);
              addTimer(_landTimer);
            }
          } else if (isCardBack) {
            toElement.style.transition = 'transform 150ms ease-out';
            toElement.style.transform = 'translateX(-8px)';

            const timer3 = setTimeout(() => {
              toElement.style.transition = 'transform 200ms ease-in';
              toElement.style.transform = '';
            }, 150);
            addTimer(timer3);
          } else {
            toElement.style.transition = 'transform 150ms ease-out';
            toElement.style.transform = 'scale(1.05)';

            const timer3 = setTimeout(() => {
              toElement.style.transition = 'transform 200ms ease-in';
              toElement.style.transform = '';
            }, 150);
            addTimer(timer3);
          }

          if (gameContainer.contains(animCard)) {
            gameContainer.removeChild(animCard);
          }

          resolve();
        }, _effDuration);
        addTimer(timer2);
      });
    }

    // ============================================================================
    // 【JS-8/10】游戏核心逻辑
    // ============================================================================
    // 包含: 发牌流程、回合控制、胜负判定、AI出牌、玩家操作
    
    // ----------------------------------------------------------------------------
    // 【发牌流程】
    // ----------------------------------------------------------------------------
    // dealInitialCards: 初始发牌流程(暗牌→手牌→明牌)
    // 发牌顺序:
    //   阶段1: 暗牌(双方各5张) - 背面朝上，间隔60ms
    //   阶段2: 手牌(双方各6张) - 正面朝上，间隔120ms
    //   阶段3: 明牌(双方各3张) - 正面朝上，间隔150ms
    // 特点: 双方同时发牌(并行)，每阶段结束后停顿500ms
    // 中断检查: 每轮循环检查isGameInterrupted标志，支持游戏重新开始
    async function dealInitialCards() {
      const playerDeckEl = GameElements.player.deck;
      const opponentDeckEl = GameElements.opponent.deck;
      
      const playerHandSlots = document.querySelectorAll('.player-hand-slot');
      const playerRevealedSlots = document.querySelectorAll('.player-revealed-slot');
      const playerDarkSlots = document.querySelectorAll('.player-dark-slot');
      
      const opponentHandSlots = document.querySelectorAll('.opponent-hand-slot');
      const opponentRevealedSlots = document.querySelectorAll('.opponent-revealed-slot');
      const opponentDarkSlots = document.querySelectorAll('.opponent-dark-slot');
      
      // 检查发牌动画是否启用
      const dealAnimEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('deal-animation') : true;

      // ★ 卡通风格发牌节奏（2026-10-04）：更紧凑的间隔与阶段停顿（灵动连续感）；
      //    其他风格维持原值不变
      const _ctDeal = selectedCardFaceStyle === 'cartoon';
      const dealGap = _ctDeal
        ? { dark: 40, hand: 80, revealed: 100, stage: 380 }
        : { dark: 60, hand: 120, revealed: 150, stage: 500 };

      // ★ 2026-10-05 修复（用户反馈：首局第一张手牌飞行缺帧/少几帧，后续正常）：
      //   首次 WAAPI 动画的着色器/光栅未就绪——发牌前用隐形元素预热动画管线。
      //   ★ 必须放在屏幕内（opacity .01 实际渲染）：之前放 -9999px 屏外根本不光栅化，预热无效
      const ctWarmFlightPipeline = function () {
        try {
          const _warmGc = document.querySelector('.game-container');
          if (!_warmGc) return;
          const _w = document.createElement('div');
          _w.style.cssText = 'position:absolute;right:6px;bottom:6px;width:24px;height:24px;opacity:.01;pointer-events:none;will-change:transform;z-index:1;';
          _warmGc.appendChild(_w);
          _w.animate([
            { transform: 'translate(0px, 0px) rotate(0deg)' },
            { transform: 'translate(60px, -45px) rotate(120deg)' },
            { transform: 'translate(130px, 8px) rotate(240deg)' }
          ], { duration: 140, easing: 'linear', fill: 'both' });
          _w.style.transition = 'transform 90ms linear';
          requestAnimationFrame(function () { _w.style.transform = 'translate(100px, -30px) rotate(300deg)'; });
          setTimeout(function () { if (_w.parentNode) _w.parentNode.removeChild(_w); }, 400);
        } catch (e) {}
      };
      ctWarmFlightPipeline(); // 暗牌阶段前预热（屏幕内角落，肉眼不可见）
      // ★ 2026-10-05（用户提问：为何只有第一张手牌丢帧）——暗牌飞的是卡背（轻），
      //   第一张手牌是第一种"卡面"的首次飞行：卡面纹理+多重描边文字的字形首次光栅化开销最大，
      //   撞上暗牌阶段结束的DOM重算 → 丢起始帧；明牌与手牌同纹理已被焐热 → 不丢。
      //   修复：手牌阶段前预光栅一张"真实大牌面"（屏幕角落 0.01 透明度，纹理/字形缓存提前焐热）
      const ctWarmFaceRaster = function () {
        try {
          const _warmGc = document.querySelector('.game-container');
          if (!_warmGc) return;
          const _w = document.createElement('div');
          _w.style.cssText = 'position:absolute;right:6px;bottom:6px;width:70px;height:100px;opacity:.01;pointer-events:none;z-index:1;overflow:hidden;';
          _w.innerHTML = getCardFaceHTML('player', { id: 'ct-warmup', display: 'A' }, false);
          _warmGc.appendChild(_w);
          void _w.offsetWidth; // 强制布局+光栅
          setTimeout(function () { if (_w.parentNode) _w.parentNode.removeChild(_w); }, 260);
        } catch (e) {}
      };
      
      // 快速发牌函数：动画禁用时直接在槽位创建卡牌
      function quickDeal(slot, playerType, card, displayType) {
        if (!slot) return;
        // 清空槽位
        slot.innerHTML = '';
        const cardEl = document.createElement('div');
        if (displayType === 'darkDeal') {
          cardEl.className = 'card card-back w-12 h-16 sm:w-16 sm:h-24 rounded-lg shadow-md';
          cardEl.innerHTML = '<div class="card-back-inner"></div>';
        } else if (card) {
          cardEl.className = 'card w-12 h-16 sm:w-16 sm:h-24 rounded-lg shadow-md';
          cardEl.style.background = playerType === 'player' ? 'linear-gradient(135deg, #fef3c7, #fef9c3)' : 'linear-gradient(135deg, #fecaca, #fee2e2)';
          cardEl.style.border = playerType === 'player' ? '2px solid #f59e0b' : '2px solid #dc2626';
          cardEl.innerHTML = `<div class="w-full h-full flex flex-col items-center justify-center p-1 text-center font-bold" style="color: ${playerType === 'player' ? '#92400e' : '#7f1d1d'}"><div class="text-xs sm:text-sm" style="transform: rotate(-180deg)">${card.rank}</div><div class="text-lg sm:text-2xl">${card.suit}</div><div class="text-xs sm:text-sm">${card.rank}</div></div>`;
        } else {
          cardEl.className = 'card card-back w-12 h-16 sm:w-16 sm:h-24 rounded-lg shadow-md';
          cardEl.innerHTML = '<div class="card-back-inner"></div>';
        }
        slot.appendChild(cardEl);
        slot.classList.add('slot-has-card');
        // 卡通石板手牌槽保留石框；其他风格手牌槽与暗牌/明牌槽按原行为隐藏边框背景
        if (!slot.classList.contains('stone-hand-slot')) {
          slot.style.border = 'none';
          slot.style.background = 'transparent';
        }
      }
      
      const promises = [];
      for (let i = 0; i < 5; i++) {
        if (GameState.isGameInterrupted) return;
        const playerCard = GameState.playerDeck.pop();
        GameState.playerDarkCards.push(playerCard);
        const targetSlot = playerDarkSlots[i];

        const opponentCard = GameState.opponentDeck.pop();
        GameState.opponentDarkCards.push(opponentCard);
        const oppTargetSlot = opponentDarkSlots[i];

        // 每次发牌后即时更新牌堆数字
        updatePlayerDeck();
        updateOpponentDeck();

        if (dealAnimEnabled) {
          if (targetSlot && playerDeckEl) {
            promises.push(animateCardFromDeck(playerDeckEl, targetSlot, 'player', null, 'darkDeal'));
          }
          if (oppTargetSlot && opponentDeckEl) {
            promises.push(animateCardFromDeck(opponentDeckEl, oppTargetSlot, 'opponent', null, 'darkDeal'));
          }
          // ★ 卡通发牌连发（2026-10-04）：本张不等待落地，直接连发形成区域内连贯流；
          //    其他风格维持原"发一张等一张"的节奏不变
          if (!_ctDeal) await Promise.all(promises);
        } else {
          quickDeal(targetSlot, 'player', null, 'darkDeal');
          quickDeal(oppTargetSlot, 'opponent', null, 'darkDeal');
        }
        if (dealAnimEnabled) playSound('dealSound');
        if (dealAnimEnabled) await delay(dealGap.dark);
      }
      // ★ 区域收尾（卡通连发）：等本区域全部落地再停顿，切换下一区域有明确段落感
      if (dealAnimEnabled) await Promise.all(promises);
      ctWarmFlightPipeline(); // 手牌阶段前再次预热（趁阶段停顿窗口，离屏不可见）
      ctWarmFaceRaster();     // ★ 预光栅真实卡面（手牌=第一种卡面，字形/纹理缓存提前焐热）
      if (dealAnimEnabled) await delay(dealGap.stage);
      
      // ★ 人机2v1模式诊断日志
      var _2v2Active = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode);
      var _mySeat = (typeof _practiceMySeatIndex !== 'undefined') ? _practiceMySeatIndex : -1;
      console.log('[2v2发牌] 手牌发牌开始, isPractice2v2Mode:', _2v2Active, 'seatIndex:', _mySeat, '手牌槽数量:', playerHandSlots.length);

      for (let i = 0; i < 6; i++) {
        if (GameState.isGameInterrupted) return;
        const playerCard = GameState.playerDeck.pop();
        GameState.playerHand.push(playerCard);
        const targetSlot = playerHandSlots[i];

        const opponentCard = GameState.opponentDeck.pop();
        GameState.opponentHand.push(opponentCard);
        const oppTargetSlot = opponentHandSlots[i];

        // 每次发牌后即时更新牌堆数字
        updatePlayerDeck();
        updateOpponentDeck();

        // ★ 人机2v1模式：使用统一辅助函数判断卡牌归属
        var _isMyHand = isLocalPlayerCard2v2('hand', i);
        if (_2v2Active && i === 0) {
          console.log('[2v2发牌] 手牌0归属判断: isMyCard=', _isMyHand, 'seatIndex=', _mySeat);
        }
        if (_2v2Active && i === 5) {
          console.log('[2v2发牌] 手牌5归属判断: isMyCard=', _isMyHand, 'seatIndex=', _mySeat);
        }

        if (dealAnimEnabled) {
          if (targetSlot && playerDeckEl) {
            promises.push(animateCardFromDeck(playerDeckEl, targetSlot, 'player', _isMyHand ? playerCard : null, 'hand'));
          }
          // 对手手牌：显示背面（我方不可见），第4个参数传null表示背面
          if (oppTargetSlot && opponentDeckEl) {
            promises.push(animateCardFromDeck(opponentDeckEl, oppTargetSlot, 'opponent', null, 'hand'));
          }
          // ★ 卡通发牌连发：同暗牌阶段（其他风格原节奏不变）
          if (!_ctDeal) await Promise.all(promises);
        } else {
          quickDeal(targetSlot, 'player', _isMyHand ? playerCard : null, 'hand');
          quickDeal(oppTargetSlot, 'opponent', null, 'hand');
        }
        if (dealAnimEnabled) playSound('dealSound');
        if (dealAnimEnabled) await delay(dealGap.hand);
      }
      // ★ 区域收尾（卡通连发）：同暗牌阶段
      if (dealAnimEnabled) await Promise.all(promises);
      if (dealAnimEnabled) await delay(dealGap.stage);

      for (let i = 0; i < 3; i++) {
        if (GameState.isGameInterrupted) return;
        const playerCard = GameState.playerDeck.pop();
        GameState.playerRevealedCards.push(playerCard);
        const targetSlot = playerRevealedSlots[i];

        const opponentCard = GameState.opponentDeck.pop();
        GameState.opponentRevealedCards.push(opponentCard);
        const oppTargetSlot = opponentRevealedSlots[i];

        // 每次发牌后即时更新牌堆数字
        updatePlayerDeck();
        updateOpponentDeck();

        if (dealAnimEnabled) {
          // 玩家明牌：显示正面（双方可见）
          if (targetSlot && playerDeckEl) {
            promises.push(animateCardFromDeck(playerDeckEl, targetSlot, 'player', playerCard, 'revealed'));
          }
          // 对手明牌：显示正面（双方可见）
          if (oppTargetSlot && opponentDeckEl) {
            promises.push(animateCardFromDeck(opponentDeckEl, oppTargetSlot, 'opponent', opponentCard, 'revealed'));
          }
          // ★ 卡通发牌连发：同暗牌阶段（其他风格原节奏不变）
          if (!_ctDeal) await Promise.all(promises);
        } else {
          quickDeal(targetSlot, 'player', playerCard, 'revealed');
          quickDeal(oppTargetSlot, 'opponent', opponentCard, 'revealed');
        }
        if (dealAnimEnabled) playSound('dealSound');
        if (dealAnimEnabled) await delay(dealGap.revealed);
      }
      // ★ 区域收尾（卡通连发）：同暗牌阶段
      if (dealAnimEnabled) await Promise.all(promises);
      if (dealAnimEnabled) await delay(dealGap.stage);

      // 动画跳过时只播放一次发牌音效
      if (!dealAnimEnabled) playSound('dealSound');

      // 发牌完成后再次确认数字同步
      updatePlayerDeck();
      updateOpponentDeck();

      // ★ 回放录制：补录"发牌完成"快照（手牌/明牌/暗牌/牌堆完整入档）
      try { if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder.captureInitial) ReplayRecorder.captureInitial(); } catch (e) {}
    }

    // 【回合记录 · Turn History】对局操作的可追溯日志
    // ============================================================================
    //
    // addTurnRecord(action, details, player):
    //   向 GameState.turnHistory 追加一条操作记录，并刷新 UI
    //     action   '出牌'/'终止出牌'/'援牌'/'围牌'/'拖牌'/'撞牌'
    //     details  操作描述信息（如 "在第3路打出 Q"）
    //     player   'player' / 'opponent'，省略则使用当前回合
    // ============================================================================
    function addTurnRecord(action, details, player, strategyInfo, aiComment) {
      var _player = player || GameState.currentTurn;
      var _subTurn = (GameState.fourPlayerActive) ? GameState.fourPlayerSubTurn : -1;
      // ★ 联机模式下翻译操作记录
      if (typeof window._pbT === 'function') {
        if (action) action = window._pbT(action);
        if (details) details = window._pbT(details);
      }
      GameState.turnHistory.push({
        turnNumber: GameState.turnNumber,
        player: _player,
        subTurn: _subTurn,
        action: action,
        details: details,
        strategyInfo: strategyInfo || null,
        commentary: null,
        // ★ v5.26 回合注释（仅 AI/对手记录）：{labels,text,intent:{text,expected,ledger[]},prediction:{text,good[],bad[]}}
        aiComment: aiComment || null,
        timestamp: new Date().toLocaleTimeString()
      });
      // ★ v5.26：若 AI 注释先于本条记录到达（消息竞态），补挂到这条 AI 记录上
      if (_player === 'opponent' && typeof PBOnlineFlushAiComment === 'function') {
        try { PBOnlineFlushAiComment(); } catch (e) { /* 忽略 */ }
      }
      updateTurnHistoryDisplay();
    }

    // ============================================================================
    // 【回合切换 · Turn Switch】控制当前出牌权在双方之间流转
    // ============================================================================
    //
    // 核心函数:
    //   switchTurn()             正常切换：清光环 → 切方 → 若对方无法出牌则终止
    //   switchTurnImmediately()  无延迟直接调用 switchTurn()（别名）
    //
    // 关键流程:
    //   1. 检查游戏是否已中断 / 未开始，否则 return
    //   2. 清除本回合残留的匹配操作（光环、可出牌提示等）
    //   3. 玩家 → 对方：禁用终止按钮，若对方为先手方则 turnNumber++
    //      对方 → 玩家：重置玩家终止状态，玩家为先手方则 turnNumber++
    //   4. 更新 UI：回合文字、状态栏、按钮样式
    // ============================================================================

    // ============================================================================
    // 【四人模式回合推进】fourPlayerAdvanceTurn
    // ============================================================================
    // 推进到下一个子玩家，跳过已终止的子玩家
    // 子玩家定义：0=玩家A(人类,左), 1=AI_A(AI,左), 2=AI_B(AI,右), 3=玩家B(人类,右)
    // ============================================================================
    // _noAdvance: true=接收方权威同步模式（不推进+1，仅应用当前子回合的UI）
    //              false/undefined=正常推进模式（出牌方推进到下一个子玩家）
    function fourPlayerAdvanceTurn(_noAdvance) {
      // ★ 【Generation Token · 彻底消灭竞态】
      // 每次进入 ++_turnGen，所有 setTimeout 回调捕获此值，
      // 执行前比对：若当前 GameState._turnGen !== _myGen 说明已被更新的 advance 覆盖，直接 return
      GameState._turnGen = (GameState._turnGen || 0) + 1;
      var _myTurnGen = GameState._turnGen;

      // ★【硬重入 guard】防止并发调用导致 turnIndex/subTurn 被覆盖
      // ★★ 2026-9-1 FIX: 不再自动 force-clear 残留 guard，让 guard 在 AI thinkDelay 期间持续生效
      //   残留 guard 出现一般是上一次异常 path 没走到末尾 + 3s 兜底还没到，**强制清掉不阻塞**下次进入
      //   但清之前要确认 _turnGen 已变更（即确实是残留而非真的中途插入）
      if (GameState._fourPlayerAdvancing) {
        // ★★ 2026-9-1 BUGFIX：原判断 `GameState._turnGen !== _myTurnGen - 1` 恒为 true！
        //   因为 _turnGen 在函数开头刚被赋值为 _myTurnGen，所以 `_myTurnGen !== _myTurnGen - 1`
        //   永远成立 → 这个 guard 块永远走"不解锁"分支 → 残留 guard 检测逻辑完全失效，
        //   "防止 fourPlayerAdvanceTurn 嵌套/重入"的设计等于没生效。
        //   修复：在设置 guard 时同时记录当时的 gen（_fourPlayerAdvancingGen），
        //   用 guard 的 gen 与本次 gen 比较，才能正确区分"上一条 chain 残留" vs "真重入"。
        var _guardGen = GameState._fourPlayerAdvancingGen;
        if (typeof _guardGen === 'number' && _guardGen !== _myTurnGen) {
          console.warn('[fourPlayerAdvanceTurn] 残留 guard 自动解锁（属于 chain gen=' + _guardGen + '）');
          GameState._fourPlayerAdvancing = false;
        } else {
          console.warn('[fourPlayerAdvanceTurn] ⚠ 检测到同一 chain 重入（gen=' + _myTurnGen +
            '）——若同一回合出现两次推进日志，即为双重推进根因');
        }
      }
      GameState._fourPlayerAdvancing = true;
      GameState._fourPlayerAdvancingGen = _myTurnGen;
      // ★★ 2026-9-1 FIX: 兜底定时器做"无脑清"——3 秒后无条件清 guard
      //   不管什么路径，只要 3 秒内没主动清，就兜底清，保证不卡死
      setTimeout(function() { GameState._fourPlayerAdvancing = false; }, 3000);

      if (GameState.isGameInterrupted) { GameState._fourPlayerAdvancing = false; return; }
      if (GameState.gamePhase !== 'playing') { GameState._fourPlayerAdvancing = false; return; }

      // ★ 方案A核心：队员端(isPracticeLeader=false)绝不推进回合！
      // ★ 2026-6-1 FIX：仅限真实组队（hasTeammate=true）。单机人机2v1模式下
      //   可能残留 isPractice2v2Mode=true 但 hasTeammate=false，此时所有人都应能推进回合
      var _hasRealTeammate = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      if (_hasRealTeammate && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader) {
        GameState._fourPlayerAdvancing = false;
        return;
      }
      
      // ★ 【2v2安全网】强制清除 isDealingCards 标志（仅在游戏进行中）
      // 正常发牌完成后此标志应为 false，但某些边界情况下可能残留
      if (GameState.isDealingCards) {
        console.warn('[fourPlayerAdvanceTurn] isDealingCards 为 true，强制清除以推进回合');
        GameState.isDealingCards = false;
      }

      // ★ 记录当前子玩家（推进前），用于判断是否需要同步给队员
      var _prevSubTurn = GameState.fourPlayerSubTurn;
      // ★ 人机2v1：玩家=1和3，AI=0和2
      var _prevWasHuman = (_prevSubTurn === 1 || _prevSubTurn === 3);

      // 清理匹配状态
      clearRoadMatchHighlights();
      clearNeutralAuras();
      hidePlayableCardsHint();

      // ★ 清理叫牌状态（防止叫牌状态残留导致卡牌一直显示背面）
      if (typeof GameState !== 'undefined' && GameState.pendingCallCard) {
        GameState.pendingCallCard = null;
        // ★ 清理叫牌提示框及其事件监听器
        var _ccp = document.getElementById('call-card-prompt');
        if (_ccp) { if (_ccp._cleanup) _ccp._cleanup(); else _ccp.remove(); }
      }
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (PBOnline.clearOpponentCallCardState) PBOnline.clearOpponentCallCardState();
      }

      // 当前子玩家（权威同步模式下由调用方预先设置）
      var nextSub = GameState.fourPlayerSubTurn;

      // 正常推进模式：推进到下一个子玩家
      if (!_noAdvance) {
        // ★ 2v2在线匹配模式：只有「刚结束回合的本地玩家」才能本地推进回合。
        //   其他客户端（非当前回合玩家）即使收到 switchTurn/fourPlayerAdvanceTurn 的调用
        //   （如匹配动画、待处理队列、延迟回调等触发），也必须忽略并等待服务器的权威广播
        //   turn_sync_2v2，否则本机 subTurn 会比服务器多推进一次，导致回合线框/倒计时
        //   显示错误的玩家（例如蓝左回合流转至红左时，红右玩家界面却显示自己的回合）。
        //   服务器是回合唯一来源，客户端不再本地自行切换，直接用服务器值刷新UI。
        var _isOnline2v2Advance = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode;
        if (_isOnline2v2Advance && typeof PBOnline.playerIdx === 'number' && _prevSubTurn !== PBOnline.playerIdx) {
          console.log('[2v2联机] 忽略非本地回合的本地推进, subTurn=', _prevSubTurn, 'myIdx=', PBOnline.playerIdx, '（等待服务器权威回合广播）');
          return;
        }
        var _prevTurnIdx = GameState.fourPlayerTurnIndex;
        GameState.fourPlayerTurnIndex = (GameState.fourPlayerTurnIndex + 1) % 4;
        nextSub = GameState.fourPlayerTurnOrder[GameState.fourPlayerTurnIndex];
        GameState.fourPlayerSubTurn = nextSub;
        // ★★ 2026-9-1 诊断日志：记录每一次回合推进 + 触发调用栈
        //   用途：定位"跳过某个子玩家"（turnIndex 一次跳 2 步 / 被误判 stopped）类 bug。
        //   复现时在控制台搜 "[回合推进#"，看是否有同一 gen 内出现两次推进，
        //   或某次推进后立即出现 "[跳过已终止]"。
        GameState._advanceLogSeq = (GameState._advanceLogSeq || 0) + 1;
        var _advStack = '';
        try {
          _advStack = (new Error().stack || '').split('\n').slice(2, 5)
            .map(function (s) { return s.trim().replace(/^at\s+/, ''); }).join('  <-  ');
        } catch (_se) { _advStack = '(stack unavailable)'; }
        console.log('[回合推进#' + GameState._advanceLogSeq + '] gen=' + _myTurnGen +
          ' turn=' + GameState.turnNumber +
          ' idx ' + _prevTurnIdx + '→' + GameState.fourPlayerTurnIndex +
          ' sub ' + _prevSubTurn + '→' + nextSub +
          '(' + (typeof getCurrentSubPlayerName === 'function' ? getCurrentSubPlayerName() : '?') + ')' +
          ' | ' + _advStack);
        // ★ 人机2v1：玩家=1,3，AI=0,2
        var _isNewAI = (nextSub === 0 || nextSub === 2);
        GameState.currentTurn = _isNewAI ? 'opponent' : 'player';
        // ★ 当回合索引从3回到0时，表示一轮结束，回合计数+1
        if (_prevTurnIdx === 3 && GameState.fourPlayerTurnIndex === 0) {
          GameState.turnNumber++;
          // ★ 2026-8-31 FIX: 终止标记**永久有效**，不再每轮重置！
          //   规则：无牌可出 → 视为终止出牌 → 直至游戏结束都跳过该玩家
          //   （与用户要求一致："无牌可打出时，视为终止出牌，意思就是永远无法出牌"）
        }

        // 检查是否所有子玩家都已终止
        var allAIStopped = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
        var allPlayerStopped = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];

      if (allAIStopped && allPlayerStopped) {
        // 双方都无法出牌，战略胜利判定
        // ★ Bug2 FIX: 不要在这里先设 gamePhase='ended'，否则 checkWinCondition 里 L24083 会因为 gamePhase 已 ended 而直接 return
        //   导致后面的 updateGameStatus 永远不执行。让 checkWinCondition 自己设 gamePhase 并调 updateGameStatus
        if (typeof checkWinCondition === 'function') checkWinCondition();
        // ★ 人机2v1模式：游戏结束时发送全状态同步，确保队友状态栏同步显示胜负
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
          if (typeof collectPracticeState === 'function') {
            PBOnline.sendPracticeStateSync(collectPracticeState());
          }
        }
        // ★ 2026-9-1 FIX: 早退路径必须清 guard，否则要等 3 秒兜底 timer
        GameState._fourPlayerAdvancing = false;
        GameState._fourPlayerAdvancingGen = 0;
        return;
      }

      // 跳过已终止的子玩家
      var skipped = 0;
      while (skipped < 4) {
        nextSub = GameState.fourPlayerSubTurn;
        var isAI = (nextSub === 0 || nextSub === 2);
        var stopped = false;
        if (isAI) {
          var aiIdx = (nextSub === 0) ? 0 : 1;
          stopped = GameState.fourPlayerAIStopped[aiIdx];
        } else {
          var pIdx = (nextSub === 1) ? 0 : 1;
          stopped = GameState.fourPlayerPlayerStopped[pIdx];
        }
        if (stopped) {
          // ★★ 2026-9-1 诊断日志：谁被跳过了、终止标记是什么
          console.warn('[跳过已终止#' + (GameState._advanceLogSeq || 0) + '] sub=' + nextSub +
            '(' + (typeof getCurrentSubPlayerName === 'function' ? getCurrentSubPlayerName() : '?') + ')' +
            ' AIStopped=' + JSON.stringify(GameState.fourPlayerAIStopped) +
            ' PlayerStopped=' + JSON.stringify(GameState.fourPlayerPlayerStopped));
          // 检查是否所有都已终止
          allAIStopped = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
          allPlayerStopped = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
          if (allAIStopped && allPlayerStopped) {
            // ★ Bug2 FIX: 同上，不先设 gamePhase，让 checkWinCondition 自己处理
            if (typeof checkWinCondition === 'function') checkWinCondition();
            // ★ 人机2v1模式：游戏结束时发送全状态同步，确保队友状态栏同步显示胜负
            if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
              if (typeof collectPracticeState === 'function') {
                PBOnline.sendPracticeStateSync(collectPracticeState());
              }
            }
            return;
          }
          // 跳过此子玩家
          var _prevSkipIdx = GameState.fourPlayerTurnIndex;
          GameState.fourPlayerTurnIndex = (GameState.fourPlayerTurnIndex + 1) % 4;
          GameState.fourPlayerSubTurn = GameState.fourPlayerTurnOrder[GameState.fourPlayerTurnIndex];
          // ★ 跳过时也可能跨越轮次边界
          if (_prevSkipIdx === 3 && GameState.fourPlayerTurnIndex === 0) {
            GameState.turnNumber++;
            // ★ 2026-8-31 FIX: 终止标记永久有效，跳过时也不重置
          }
          skipped++;
        } else {
          break;
        }
      }
      } // end if (!_noAdvance)

      // 设置 currentTurn
      nextSub = GameState.fourPlayerSubTurn;
      // ★ 人机2v1：AI=0和2，玩家=1和3
      var isAI = (nextSub === 0 || nextSub === 2);
      var isOnline2v2 = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode;
      // ★ 2v2在线匹配模式：所有4名玩家都是真人，currentTurn基于本地玩家索引判断
      if (isOnline2v2) {
        var _isMyTurn = typeof isLocalPlayerTurn === 'function' && isLocalPlayerTurn();
        GameState.currentTurn = _isMyTurn ? 'player' : 'opponent';
      } else {
        GameState.currentTurn = isAI ? 'opponent' : 'player';
      }
      GameState.cardPlayedThisTurn = false;

      var subName = getCurrentSubPlayerName();
      // ★ 2v2在线匹配模式：显示"我方回合"或"对方回合"基于本地玩家视角
      var sideText;
      if (isOnline2v2) {
        sideText = (GameState.currentTurn === 'player') ? ((typeof __t==='function')?__t('st_my_turn'):'我方回合') : ((typeof __t==='function')?__t('st_opp_turn'):'对方回合');
      } else {
        sideText = isAI ? ((typeof __t==='function')?__t('st_opp_turn'):'对方回合') : ((typeof __t==='function')?__t('st_my_turn'):'我方回合');
      }
      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(sideText + ' [' + subName + ']');

      // 更新终止按钮
      // ★ 2v2在线匹配模式：终止按钮基于本地玩家回合判断
      var _canStop = isOnline2v2
        ? (GameState.currentTurn === 'player')
        : !isAI;
      if (_canStop) {
        GameElements.ui.stopBtn.disabled = false;
        GameElements.ui.stopBtn.style.opacity = '1';
        GameElements.ui.stopBtn.style.cursor = 'pointer';
      } else {
        GameElements.ui.stopBtn.disabled = true;
        GameElements.ui.stopBtn.style.opacity = '0.5';
        GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      }

      // 高亮当前活跃区域
      fourPlayerHighlightActiveArea();

      // ★ 2v2在线匹配模式：启动/停止倒计时
      if (isOnline2v2) {
        // 我方回合（包括自己和队友）都显示倒计时
        var _sub2v2 = GameState.fourPlayerSubTurn;
        var _myIdx2v2 = PBOnline.playerIdx;
        // ★ 【2v2修复】队友映射用 subTurn 值规则：蓝方[0,2], 红方[1,3] → _tmMap=[2,3,0,1]
        var _teammateIdx2v2 = [2, 3, 0, 1][_myIdx2v2];
        var _isOurSide2v2 = (_sub2v2 === _myIdx2v2 || _sub2v2 === _teammateIdx2v2);
        if (_isOurSide2v2) {
          setTimeout(function() {
            if (typeof PBOnline !== 'undefined' && PBOnline.onTurnSwitch) PBOnline.onTurnSwitch();
          }, 300);
        } else {
          if (typeof PBOnline !== 'undefined' && PBOnline.onTurnSwitch) PBOnline.onTurnSwitch();
        }
      }

      // ★ 2v2在线匹配模式：turn_complete 已由 finalizePlacement 统一发送
      //   此处不再重复发送，避免重复推进回合

      // ★ 人机2v1模式同步：发送全状态同步给对方
      // 双方都发送，确保游戏状态完全一致（包括路牌、中立区、胜负等）
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (typeof collectPracticeState === 'function') {
          PBOnline.sendPracticeStateSync(collectPracticeState());
        }
        // ★ 2026-9-1 FIX: 延迟 3s 再发一次兜底 sync
        //   防止队员端 localMatchInProgress=true 时只收到了回合状态，没收到牌面数据
        var _syncTimer = setTimeout(function() {
          if (GameState._turnGen !== _myTurnGen) return; // generation token 防御
          if (typeof collectPracticeState === 'function') {
            PBOnline.sendPracticeStateSync(collectPracticeState());
          }
        }, 3000);
        if (typeof addTimer === 'function') addTimer(_syncTimer);
      }
      // 兼容：人类玩家回合结束后仍发送回合推进信号
      if (_prevWasHuman && typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        PBOnline.sendPracticeTurnAdvance({
          turnIndex: GameState.fourPlayerTurnIndex,
          subTurn: GameState.fourPlayerSubTurn,
          turnNumber: GameState.turnNumber, // ★ 2026-9-1: 同步 turnNumber，配合状态新鲜度字典序校验
          isAI: isAI,
          subName: subName
        });
        console.log('[2v2同步] 已发送回合推进信号, nextSub:', GameState.fourPlayerSubTurn, 'isAI:', isAI, 'isLeader:', PBOnline.isPracticeLeader);
      }

      // 如果是AI回合，触发AI出牌
      if (isAI) {
        // ★ 2v2在线匹配模式：没有AI，不触发AI出牌，等待远程玩家操作
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) {
          console.log('[2v2联机] Player', nextSub, '回合，等待远程玩家出牌');
          GameState._fourPlayerAdvancing = false;
          return;
        }
        // ★ 人机2v1模式：队员端不触发AI出牌，等待队长同步
        // ★ 2026-6-1 FIX：仅限真实组队（_hasRealTeammate 已在函数开头定义）
        if (_hasRealTeammate && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader) {
          console.log('[2v2同步] 队员端跳过AI回合触发，等待队长同步');
          GameState._fourPlayerAdvancing = false;
          return;
        }
        // 检查AI是否能出牌
        // ★ 正确阵营划分：AI子玩家(0,2)→'opponent'，人类子玩家(1,3)→'player'
        var _aiSideForCanPlay = (nextSub === 0 || nextSub === 2) ? 'opponent' : 'player';
        if (!canFourPlayerSubPlay(_aiSideForCanPlay)) {
          // ★ 人机2v1：AI=0(idx0)或2(idx1)
          var aiIdx2 = (nextSub === 0) ? 0 : 1;
          GameState.fourPlayerAIStopped[aiIdx2] = true;
          updateGameStatus(subName + '无法出牌，已终止！');
          if (typeof addTurnRecord === 'function') {
            addTurnRecord('终止出牌', subName + '无法出牌，终止出牌', 'opponent');
          }
          // 继续推进：500ms 后推进到下一名玩家
          // ★ 2026-9-1: guard 在这里清，因为没有 schedule 任何延后动作
          var _canPlayTimer = setTimeout(function() {
            if (GameState._turnGen !== _myTurnGen) {
              GameState._fourPlayerAdvancing = false;
              return;
            }
            GameState._fourPlayerAdvancing = false;  // 先解锁，否则 fourPlayerAdvanceTurn 入口会 force-clear
            fourPlayerAdvanceTurn();
          }, 500);
          if (typeof addTimer === 'function') addTimer(_canPlayTimer);
        } else {
          // ★★★ 2026-9-1 FIX: AI 调度的关键修复
          //   setTimeout 回调**内部**清 guard，让 guard 在 thinkDelay 期间持续生效
          //   这样任何中途插入的 fourPlayerAdvanceTurn 调用都会被入口 guard 拦截
          //   → 避免"AI 在回合 2 连续多次出牌"的竞态
          var timer2 = setTimeout(function() {
            if (GameState._turnGen !== _myTurnGen) {
              GameState._fourPlayerAdvancing = false;
              return;
            }
            if (GameState.isGameInterrupted) {
              GameState._fourPlayerAdvancing = false;
              return;
            }
            // 调用方把 _fourPlayerAdvancing 的清空交给 opponentPlayCard 的 chain 自己负责
            // opponentPlayCard 内部有自己的 try/finally 兜底
            opponentPlayCard();
            // ★ 不在这里清 guard——让 opponentPlayCard 整个链路完成后才解锁
            //   opponentPlayCard → executeCardPlay → match → confirmCardPlacement → finalizePlacement → safeSwitchTurn(0) → switchTurn → fourPlayerAdvanceTurn 全部完成
            //   → 最内层的 fourPlayerAdvanceTurn 的入口会重新 ++ _turnGen，自动让本 guard 失效
          }, AIConfig.strategy.thinkDelay);
          if (typeof addTimer === 'function') addTimer(timer2);
          // ★ 不在这里清 _fourPlayerAdvancing=true（保持在 thinkDelay 期间有效）
          return;
        }
      } else {
        // 玩家回合：检查是否能出牌
        // ★ 2v2在线匹配模式：只有本地玩家回合才检查能否出牌，远程玩家回合跳过（等待对方操作）
        if (isOnline2v2 && !(typeof isLocalPlayerTurn === 'function' && isLocalPlayerTurn())) {
          console.log('[2v2联机] Player', nextSub, '回合（远程玩家），等待对方操作');
          GameState._fourPlayerAdvancing = false;
          return;
        }
        // ★ 玩家回合：canFourPlayerSubPlay 按 AI/人类 阵营算（AI→opponent, 人类→player）
        var _playerSideForCanPlay = (nextSub === 0 || nextSub === 2) ? 'opponent' : 'player';
        if (!canFourPlayerSubPlay(_playerSideForCanPlay)) {
          var _subNoPlay = nextSub;
          // ★ 人机2v1：AI=0和2，玩家=1和3
          var _isAINoPlay = (_subNoPlay === 0 || _subNoPlay === 2);
          // ★★ 2026-9-1 诊断日志：打印"为什么判他无法出牌"的完整依据
          //   （手牌/暗牌/明牌/牌堆/路牌区占用），用于区分"真的没牌" vs "范围切分误判"
          var _dbgSide = _isAINoPlay ? 'opponent' : 'player';
          console.warn('[判终止#' + (GameState._advanceLogSeq || 0) + '] sub=' + _subNoPlay +
            '(' + subName + ') side=' + _dbgSide + ' isLeft=' + (typeof isCurrentSubPlayerLeft === 'function' ? isCurrentSubPlayerLeft() : '?') +
            ' | hand=' + JSON.stringify((_dbgSide === 'player' ? GameState.playerHand : GameState.opponentHand).map(function (c) { return c ? c.display : null; })) +
            ' | dark=' + JSON.stringify((_dbgSide === 'player' ? GameState.playerDarkCards : GameState.opponentDarkCards).map(function (c) { return c ? c.display : null; })) +
            ' | rev=' + JSON.stringify((_dbgSide === 'player' ? GameState.playerRevealedCards : GameState.opponentRevealedCards).map(function (c) { return c ? c.display : null; })) +
            ' | field=' + JSON.stringify((_dbgSide === 'player' ? GameState.playerField : GameState.opponentField).map(function (c) { return c ? c.display : null; })) +
            ' | deck=' + (_dbgSide === 'player' ? GameState.playerDeck : GameState.opponentDeck).length);
          if (_isAINoPlay) {
            var _aiNoPlayIdx = (_subNoPlay === 0) ? 0 : 1;
            GameState.fourPlayerAIStopped[_aiNoPlayIdx] = true;
          } else {
            var pIdx2 = (_subNoPlay === 1) ? 0 : 1;
            GameState.fourPlayerPlayerStopped[pIdx2] = true;
          }
          updateGameStatus(subName + '无法出牌，已终止！');
          if (typeof addTurnRecord === 'function') {
            addTurnRecord('终止出牌', subName + '无法出牌，终止出牌');
          }
          // ★ 2v2在线匹配模式：通知其他玩家终止出牌（回合推进由 fourPlayerAdvanceTurn 统一发送权威同步）
          if (isOnline2v2 && typeof PBOnline !== 'undefined' && PBOnline) {
            PBOnline.sendPlayerStop();
            console.log('[2v2联机] 无法出牌，已发送终止+回合完成, subTurn:', _subNoPlay);
          }
          // ★ 防重复本地推进：服务器收到 stop_playing 后立即广播 turn_sync_2v2 推进回合。
          //   若广播已到达（subTurn 已变成下一名玩家），本机不再本地推进，否则会多推进一次，
          //   导致本机界面显示错误的下一名玩家（如显示玩家3而非玩家1）。
          var timer3 = setTimeout(function() {
            if (GameState._turnGen !== _myTurnGen) {
              GameState._fourPlayerAdvancing = false;
              return;
            }
            if (GameState.fourPlayerSubTurn === _subNoPlay) {
              GameState._fourPlayerAdvancing = false;  // 清 guard 后调用
              fourPlayerAdvanceTurn();
            } else {
              GameState._fourPlayerAdvancing = false;
            }
          }, 500);
          if (typeof addTimer === 'function') addTimer(timer3);
        } else {
          // ★ 玩家有牌可出，等玩家操作——立即清 guard
          GameState._fourPlayerAdvancing = false;
        }
      }
    }

    // 四人模式：高亮当前活跃区域（左侧或右侧）—— 统一单一线框
    function fourPlayerHighlightActiveArea() {
      // 移除已有的高亮框
      var existingBox = document.getElementById('fp-active-box');
      if (existingBox) existingBox.remove();
      // ★ 同时移除牌堆线框
      var existingDeckBox = document.getElementById('fp-active-box-deck');
      if (existingDeckBox) existingDeckBox.remove();

      // ★ 人机2v1模式：管理 teammate-turn 类（非自己回合时禁用玩家卡牌hover）
      var playerFuncArea = document.querySelector('.player-function-area');
      if (playerFuncArea) {
        if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) {
          playerFuncArea.classList.add('teammate-turn');
        } else {
          playerFuncArea.classList.remove('teammate-turn');
        }
      }

      if (!GameState.fourPlayerActive) {
        // 非四人模式：清理牌堆状态
        var deckCleanup = document.getElementById('player-deck');
        if (deckCleanup) deckCleanup.classList.remove('fp-inactive-side');
        return;
      }

      // ★ 2026-9-18 FIX（回放线框尺寸不对）：回放模式外层 .game-container-wrapper 被 scale(0.8)，
      //   getBoundingClientRect 含"内部缩放×wrapper缩放"双重系数，只除 currentGameScale
      //   会得到 80% 的错框。回放期间把 wrapper 缩放乘进还原分母（正常对局 wrapperScale=1 无影响）
      var _fpWrapScale = 1;
      if (window._replayModeActive) {
        try {
          var _fpWrap = document.querySelector('.game-container-wrapper');
          var _fpTf = _fpWrap ? getComputedStyle(_fpWrap).transform : 'none';
          if (_fpTf && _fpTf !== 'none' && _fpTf.indexOf('matrix') === 0) {
            _fpWrapScale = parseFloat(_fpTf.split('(')[1].split(',')[0]) || 1;
          }
        } catch (e) {}
        if (!_fpWrapScale || _fpWrapScale < 0.01) _fpWrapScale = 1;
      }

      var isLeft = isCurrentSubPlayerLeft();
      var isAI = isCurrentSubPlayerAI();

      // ★ 2v2在线匹配模式：对方回合（远程真人）需用 opponent 前缀高亮上方卡牌区
      var _isOnline2v2FP = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode;
      var _isRemoteOpp = false;
      if (_isOnline2v2FP) {
        var _subFP = GameState.fourPlayerSubTurn;
        var _meFP = PBOnline.playerIdx;
        // ★ 【2v2修复】队友映射必须用 subTurn 值规则（服务器 subTurnMap 转换后的值）
        //   服务器 subTurnMap = [0,1,2,3]，队伍：蓝方 subTurn[0,2], 红方 subTurn[1,3]
        //   队友映射表 _tmMap = [2, 3, 0, 1]（与 positionTimerNearAvatar / _highlightActiveAvatar 一致）
        var _tmFP = [2, 3, 0, 1][_meFP];
        _isRemoteOpp = (_subFP !== _meFP && _subFP !== _tmFP);
        console.log('[2v2调试] 功能区高亮: sub=' + _subFP + ' me=' + _meFP + ' tm=' + _tmFP + ' isRemoteOpp=' + _isRemoteOpp + ' isLeft=' + isLeft + ' → prefix=' + ((isAI || _isRemoteOpp) ? 'opponent' : 'player'));
      }

      var prefix = (isAI || _isRemoteOpp) ? 'opponent' : 'player';
      var side = isLeft ? '' : '-right';
      var otherSide = isLeft ? '-right' : '';

      var containers = [
        prefix + '-dark-cards' + side,
        prefix + '-hand' + side,
        prefix + '-revealed-cards' + side
      ];

      // ★ 管理非活跃侧的 fp-inactive-side 类（禁用hover和点击视觉反馈）
      // 在线2v2模式：始终管理玩家侧（对方回合时禁用自己两侧的卡牌互动）
      if (!isAI || _isOnline2v2FP) {
        var inactiveContainers = [
          'player-dark-cards' + otherSide,
          'player-hand' + otherSide,
          'player-revealed-cards' + otherSide
        ];
        // ★ 在线2v2对方回合：自己两侧的牌都禁用
        if (_isOnline2v2FP && _isRemoteOpp) {
          inactiveContainers = [
            'player-dark-cards', 'player-dark-cards-right',
            'player-hand', 'player-hand-right',
            'player-revealed-cards', 'player-revealed-cards-right'
          ];
        }
        // 活跃侧移除标记
        containers.forEach(function(id) {
          var el = document.getElementById(id);
          if (el) el.classList.remove('fp-inactive-side');
        });
        // 非活跃侧添加标记
        inactiveContainers.forEach(function(id) {
          var el = document.getElementById(id);
          if (el) el.classList.add('fp-inactive-side');
        });
      }

      // ★ 牌堆管理：自己回合添加独立线框，非自己回合禁用互动
      var deckEl = document.getElementById('player-deck');
      if (deckEl) {
        // ★ 回放模式不画牌堆线框（回放无回合操作；且 isLocalPlayerTurn 在回放中恒 true 会误判"自己回合"）
        var isMyTurn = !isAI && !window._replayModeActive && typeof isLocalPlayerTurn === 'function' && isLocalPlayerTurn();
        if (isMyTurn) {
          // 自己回合：启用互动，移除禁用标记
          deckEl.classList.remove('fp-inactive-side');
          // 创建牌堆独立线框
          if (deckEl.style.display !== 'none' && deckEl.offsetParent !== null) {
            var deckRect = deckEl.getBoundingClientRect();
            if (deckRect.width > 0 && deckRect.height > 0) {
              var deckParent = deckEl.parentElement;
              var deckParentRect = deckParent.getBoundingClientRect();
              var deckScale = (typeof currentGameScale !== 'undefined') ? currentGameScale : 1;
              if (!deckScale || deckScale < 0.01) deckScale = 1;
              deckScale = deckScale * _fpWrapScale;  // ★ 回放双重缩放补偿（同下方合并框）
              var deckBox = document.createElement('div');
              deckBox.id = 'fp-active-box-deck';
              deckBox.style.position = 'absolute';
              deckBox.style.pointerEvents = 'none';
              deckBox.style.zIndex = '50';
              deckBox.style.border = '2px solid rgba(96, 165, 250, 0.7)';
              deckBox.style.borderRadius = '10px';
              deckBox.style.animation = 'fp-box-pulse 1.5s ease-in-out infinite';
              var deckPadding = 6;
              deckBox.style.left = ((deckRect.left - deckParentRect.left) / deckScale - deckPadding) + 'px';
              deckBox.style.top = ((deckRect.top - deckParentRect.top) / deckScale - deckPadding) + 'px';
              deckBox.style.width = ((deckRect.right - deckRect.left) / deckScale + deckPadding * 2) + 'px';
              deckBox.style.height = ((deckRect.bottom - deckRect.top) / deckScale + deckPadding * 2) + 'px';
              deckParent.appendChild(deckBox);
            }
          }
        } else {
          // 非自己回合（AI回合或队友回合）：禁用牌堆互动
          deckEl.classList.add('fp-inactive-side');
        }
      }

      // 找到父容器（player-function-area 或 opponent-function-area）
      var parentSelector = (isAI || _isRemoteOpp) ? '.opponent-function-area' : '.player-function-area';
      var parent = document.querySelector(parentSelector);
      if (!parent) return;

      // 计算所有可见牌区的合并边界框
      // ★ 注意：getBoundingClientRect() 返回的是经过 scale 变换后的视口坐标，
      // 但 box.style.left/top 设置的是父容器内的未缩放本地坐标，
      // 因此需要除以缩放比例来还原
      var scale = (typeof currentGameScale !== 'undefined') ? currentGameScale : 1;
      if (!scale || scale < 0.01) scale = 1;
      scale = scale * _fpWrapScale;  // ★ 回放双重缩放补偿（wrapper scale(0.8) 时 gBCR 含两层系数）
      var parentRect = parent.getBoundingClientRect();
      var minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
      var hasVisible = false;

      containers.forEach(function(id) {
        var el = document.getElementById(id);
        if (el && el.style.display !== 'none' && el.offsetParent !== null) {
          var rect = el.getBoundingClientRect();
          if (rect.width > 0 && rect.height > 0) {
            hasVisible = true;
            minLeft = Math.min(minLeft, rect.left);
            minTop = Math.min(minTop, rect.top);
            maxRight = Math.max(maxRight, rect.right);
            maxBottom = Math.max(maxBottom, rect.bottom);
          }
        }
      });

      if (!hasVisible) {
        // ★ 即使没有可见牌区，也要更新头像闪烁
        _highlightActiveAvatar();
        return;
      }

      // 创建统一高亮框（除以缩放比例，还原为本地未缩放坐标）
      // ★ scale 已在上方乘入 _fpWrapScale（回放 wrapper scale(0.8) 双重缩放补偿）
      var box = document.createElement('div');
      box.id = 'fp-active-box';
      var padding = 6;
      box.style.left = ((minLeft - parentRect.left) / scale - padding) + 'px';
      box.style.top = ((minTop - parentRect.top) / scale - padding) + 'px';
      box.style.width = ((maxRight - minLeft) / scale + padding * 2) + 'px';
      box.style.height = ((maxBottom - minTop) / scale + padding * 2) + 'px';
      parent.appendChild(box);

      // ★ 头像边框闪烁：当前回合玩家的头像最外层边框与线框同步闪烁
      _highlightActiveAvatar();
    }

    // ★ 四人模式：高亮当前回合玩家的头像（边框闪烁）
    function _highlightActiveAvatar() {
      // 清除所有头像的闪烁类
      var allAvatarIds = ['online-player-info', 'online-teammate-info', 'online-opp-info', 'online-opp2-info',
                          'player-profile', 'teammate-profile'];
      allAvatarIds.forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.classList.remove('avatar-turn-active');
      });

      if (!GameState.fourPlayerActive) return;

      var sub = GameState.fourPlayerSubTurn;
      var targetAvatarId = null;

      // ★ 2v2在线匹配模式：根据 myPlayerIdx 映射 subTurn 到头像元素
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) {
        var myIdx = PBOnline.playerIdx;
        // ★ 【关键修复】统一用 online-client.js 的映射方式：
        //   _oppMap：opp1=left物理位置的对手, opp2=right物理位置的对手
        //   DOM布局：left玩家→opp-info=TL,opp2-info=TR | right玩家→opp-info=TR,opp2-info=TL
        //   → 右侧玩家(myIdx≥2)必须交换opp1/opp2的DOM映射！
        var _tmMap = [2, 3, 0, 1];
        var _oppMap = [[1,3],[0,2],[1,3],[0,2]];
        var tmIdx = _tmMap[myIdx];
        var opp1Idx = _oppMap[myIdx][0];
        var opp2Idx = _oppMap[myIdx][1];
        if (sub === myIdx) targetAvatarId = 'online-player-info';
        else if (sub === tmIdx) targetAvatarId = 'online-teammate-info';
        else if (myIdx >= 2) {
          // 右侧玩家：opp1(左对手)→opp2-info(TL), opp2(右对手)→opp-info(TR)
          if (sub === opp1Idx) targetAvatarId = 'online-opp2-info';
          else if (sub === opp2Idx) targetAvatarId = 'online-opp-info';
        } else {
          // 左侧玩家：opp1(左对手)→opp-info(TL), opp2(右对手)→opp2-info(TR)
          if (sub === opp1Idx) targetAvatarId = 'online-opp-info';
          else if (sub === opp2Idx) targetAvatarId = 'online-opp2-info';
        }
        console.log('[2v2调试] 头像高亮: myIdx=' + myIdx + ' sub=' + sub + ' tm=' + tmIdx + ' opp1=' + opp1Idx + ' opp2=' + opp2Idx + ' → target=' + targetAvatarId);
      } else {
        // ★ 人机2v1模式：sub-turn 0=左人类, 1=左AI, 2=右AI, 3=右人类
        if (sub === 0) targetAvatarId = 'player-profile';
        else if (sub === 3) targetAvatarId = 'teammate-profile';
        // AI回合（sub=1,2）没有对应头像，跳过
      }

      if (targetAvatarId) {
        var avatarEl = document.getElementById(targetAvatarId);
        if (avatarEl) avatarEl.classList.add('avatar-turn-active');
      }
    }

    function switchTurnImmediately() {
      switchTurn();
    }

    function switchTurn() {
      if (GameState.isGameInterrupted) return;
      if (GameState.gamePhase !== 'playing') return;

      // ★ 四人模式：使用专用回合推进逻辑
      if (GameState.fourPlayerActive) {
        fourPlayerAdvanceTurn();
        return;
      }

      // 回合切换时清理上一回合的匹配状态，防止残留的光环/监听器影响下一回合
      // ★ 联机模式：switchTurn 可能在服务器 match_glow_clear / match_action 到达之前执行
      //   （尤其2v2队友视角），如果此时置空 activeRoadMatchGlow，ensureRoadGlowReapply
      //   重试循环会停止、reapplyRoadMatchGlow 也会跳过 → 光环永久消失。
      //   联机模式下 activeRoadMatchGlow 只应由 handleRemoteMatchGlowClear（服务器消息）清除。
      var _savedRoadGlow = (typeof GameState !== 'undefined') ? GameState.activeRoadMatchGlow : null;
      clearRoadMatchHighlights();
      clearNeutralAuras();
      hidePlayableCardsHint();
      var isOnline = typeof PBOnline !== 'undefined' && PBOnline.isOnline;
      if (isOnline && _savedRoadGlow) {
        GameState.activeRoadMatchGlow = _savedRoadGlow;
      }

      if (GameState.currentTurn === 'player') {
        // 玩家回合 → 对方回合
        GameState.currentTurn = 'opponent';
        GameState.cardPlayedThisTurn = false;
        console.log('[回合切换] 玩家→对方, isOnline:', isOnline);

        // 如果对方是先手方，增加回合计数
        if (GameState.firstPlayer === 'opponent') {
          GameState.turnNumber++;
        }

        updateTurnDisplay();
        updateTurnIndicator();
        updateGameStatus(__t('st_opp_turn'), 'st_opp_turn');

        // 禁用终止按钮
        GameElements.ui.stopBtn.disabled = true;
        GameElements.ui.stopBtn.style.opacity = '0.5';
        GameElements.ui.stopBtn.style.cursor = 'not-allowed';

        // 如果对方已终止，直接跳过对方回合
        if (GameState.opponentStoppedPlaying) {
          if (isOnline) {
            // ★ 重新设计：turn_complete 已由 finalizePlacement 统一发送
            if (typeof PBOnline.onTurnSwitch === 'function') PBOnline.onTurnSwitch();
            return;
          }
          const timer = setTimeout(() => switchTurn(), 500);
          addTimer(timer);
          return;
        }

        // 联机模式：turn_complete 已由 finalizePlacement 统一发送
        if (isOnline) {
          if (typeof PBOnline.onTurnSwitch === 'function') PBOnline.onTurnSwitch();
          updateGameStatus(__t('st_wait_opp'), 'st_wait_opp');
          return;
        }

        // 检查对方是否能出牌
        if (!canOpponentPlay()) {
          GameState.opponentStoppedPlaying = true;
          updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
          addTurnRecord('终止出牌', '对方无法出牌，终止出牌', 'opponent');
          checkBothStopped();
        } else {
          // 对方准备出牌
          const timer = setTimeout(() => opponentPlayCard(), 500);
          addTimer(timer);
        }
      } else {
        // 对方回合 → 玩家回合
        // 联机模式：此分支由 handleTurnComplete 调用，不需要发送 turn_complete
        GameState.currentTurn = 'player';
        GameState.cardPlayedThisTurn = false;

        // 如果玩家已终止出牌，不重置状态，直接切回对方或结束游戏
        if (GameState.playerStoppedPlaying) {
          if (GameState.opponentStoppedPlaying) {
            // 双方都已终止，游戏结束
            // ★ Bug2 FIX: 不先设 gamePhase='ended'，让 checkWinCondition 自己处理并调 updateGameStatus
            if (typeof checkWinCondition === 'function') checkWinCondition();
          } else {
            // 仅玩家终止，切回对方继续出牌
            if (isOnline) {
              // ★ 重新设计：turn_complete 已由 finalizePlacement 统一发送
              GameState.currentTurn = 'opponent';
              return;
            }
            const timer = setTimeout(() => switchTurn(), 500);
            if (typeof addTimer === 'function') addTimer(timer);
          }
          return;
        }

        // 如果玩家是先手方，增加回合计数
        if (GameState.firstPlayer === 'player') {
          GameState.turnNumber++;
        }

        updateTurnDisplay();
        updateTurnIndicator();
        updateGameStatus(__t('st_my_turn'), 'st_my_turn');

        // 启用终止按钮
        GameElements.ui.stopBtn.disabled = false;
        GameElements.ui.stopBtn.style.opacity = '1';
        GameElements.ui.stopBtn.style.cursor = 'pointer';

        // 联机模式：玩家回合启动倒计时
        if (isOnline) {
          if (typeof PBOnline.onTurnSwitch === 'function') PBOnline.onTurnSwitch();
        }

        // ★ 2026-9-9: 自动终止出牌检测——本回合若无任何可打出的牌，视为终止，避免卡住等待玩家点击
        //   延后一拍执行：等本回合的路牌区/手牌 UI 刷新完成后再判定，避免用旧状态误判
        if (typeof autoStopIfPlayerCannotPlay === 'function') {
          var _autoStopTimer = setTimeout(function () {
            try { autoStopIfPlayerCannotPlay('switchTurn'); } catch (e) { console.warn('[自动终止出牌] 异常', e); }
          }, 400);
          if (typeof addTimer === 'function') addTimer(_autoStopTimer);
        }
      }

      if (isFunctionalCardTutorial && (functionalCardTutorialStep === 1 || functionalCardTutorialStep === 3)) {
        fcTutCheckCanPlay();
      }
    }

    // ----------------------------------------------------------------------------
    // 【AI连续出牌模式】
    // ----------------------------------------------------------------------------
    // startOpponentContinuousPlay: 玩家终止后，AI进入连续出牌模式
    // 只有对方能出牌且未终止时才继续出牌，否则设置对方终止并检查
    function startOpponentContinuousPlay() {
      if (GameState.isGameInterrupted) return;
      if (GameState.gamePhase !== 'playing') return;
      // ★ 四人模式：不使用连续出牌，直接推进回合（四人模式中AI由本地运行，不受联机模式影响）
      if (GameState.fourPlayerActive) {
        fourPlayerAdvanceTurn();
        return;
      }
      // 联机模式：不启动AI连续出牌，等待对方网络消息
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) return;

      if (canOpponentPlay() && !GameState.opponentStoppedPlaying) {
        // 延迟后继续出牌
        GameState.currentTurn = 'opponent';
        const timer = setTimeout(() => opponentPlayCard(), 1000);
        addTimer(timer);
      } else {
        // 对方无法继续出牌，设置终止状态
        GameState.opponentStoppedPlaying = true;
        updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
        addTurnRecord('终止出牌', '对方无法出牌，终止出牌', 'opponent');
        checkBothStopped();
      }
    }

    // ----------------------------------------------------------------------------
    // 【双方终止检查】
    // ----------------------------------------------------------------------------
    // checkBothStopped: 检查双方是否都终止出牌，处理回合切换
    // 逻辑:
    //   1. 检查光环 → 有则重置玩家终止状态
    //   2. 双方都终止 → 游戏结束，调用checkWinCondition
    //   3. 仅玩家终止 → 进入AI连续出牌模式
    //   4. 仅对方终止 → 切换到玩家回合
    function checkBothStopped() {
      if (GameState.isGameInterrupted) return;
      if (GameState.gamePhase !== 'playing') return;

      // ★ 四人模式：由 fourPlayerAdvanceTurn 处理终止逻辑
      if (GameState.fourPlayerActive) {
        var allAIStopped = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
        var allPlayerStopped = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
        if (allAIStopped && allPlayerStopped) {
          // ★ Bug2 FIX: 不先设 gamePhase='ended'，让 checkWinCondition 自己处理并调 updateGameStatus
          if (typeof checkWinCondition === 'function') checkWinCondition();
          // ★ 人机2v1模式：游戏结束时发送全状态同步，确保队友状态栏同步显示胜负
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
            if (typeof collectPracticeState === 'function') {
              PBOnline.sendPracticeStateSync(collectPracticeState());
            }
          }
        } else {
          // ★ 对方队伍全部终止而我方仍在出牌 → 播放独立优势/劣势音乐（按牌面优劣势判定，仅首次）
          if (allAIStopped && !allPlayerStopped) {
            playIndependentMusic();
          }
          fourPlayerAdvanceTurn();
        }
        return;
      }

      // 检查是否有卡牌匹配光环存在
      const hasNeutralAuras = document.querySelectorAll('.neutral-aura').length > 0;
      const hasRoadMatches = document.querySelectorAll('.match-glow').length > 0;
      if (hasNeutralAuras || hasRoadMatches) {
        GameState.playerStoppedPlaying = false;
        GameElements.ui.stopBtn.disabled = false;
        GameElements.ui.stopBtn.style.opacity = '1';
        GameElements.ui.stopBtn.style.cursor = 'pointer';
        updateGameStatus(__t('st_cant_place'), 'st_cant_place');
        return;
      }

      if (GameState.playerStoppedPlaying && GameState.opponentStoppedPlaying) {
        // 双方都终止 → 游戏结束
        // ★ Bug2 FIX: 不先设 gamePhase='ended'，让 checkWinCondition 自己处理并调 updateGameStatus
        checkWinCondition();
      } else if (GameState.playerStoppedPlaying) {
        // 联机模式：玩家终止后切换回合让对方继续出牌
        if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
          if (GameState.currentTurn === 'player') {
            switchTurn();
          } else {
            updateGameStatus(__t('st_wait_opp'), 'st_wait_opp');
          }
          return;
        }
        // 仅玩家终止 → AI 连续出牌
        startOpponentContinuousPlay();
      } else if (GameState.opponentStoppedPlaying) {
        // 仅对方终止 → 切换到玩家回合
        // ★ 对方终止出牌后，给仍在出牌的我方播放独立优势/劣势音乐（按牌面优劣势判定，仅首次）
        playIndependentMusic();
        const timer = setTimeout(() => switchTurn(), 1000);
        addTimer(timer);
      }
    }

    // ----------------------------------------------------------------------------
    // 【胜负判定】
    // ----------------------------------------------------------------------------
    // checkWinCondition: 判断游戏胜负
    // 规则: 赢得5路的一方获胜（战术胜利）
    // 显示: 更新状态栏显示胜负结果
    // 辅助函数：处理匹配操作教程游戏结束时的逻辑
    function handleMatchTutorialGameEnd() {
      // 交互步骤2（拖牌实战）：游戏结束时
      if (isMatchTutorial && matchTutorialStep === 2 && GameState.gamePhase === 'ended') {
        if (matchTutDragCompleted) {
          // 拖牌已完成，自动进入步骤3（撞牌介绍）
          matchTutorialStep = 3;
          stopCrisisMusic();
          stopEndGameMusic();
          setTimeout(() => showMatchTutorialStep4(), 3000);
        } else {
          // 拖牌未完成，显示"重新体验"按钮（带提示）
          const btns = document.getElementById('match-step3-end-buttons');
          if (btns) {
            btns.innerHTML = `<button style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;" onclick="event.stopPropagation(); stopCrisisMusic(); stopEndGameMusic(); showMatchTutorialStep3();">${__t('tut_restart_btn')}</button><div style="flex-basis: 100%; margin-top: 6px; font-size: 0.75rem; color: #f87171; text-align: center;">拖牌未完成，请继续学习</div>`;
            btns.style.flexWrap = 'wrap';
            btns.style.display = 'flex';
          }
        }
      }
      // 交互步骤3（撞牌实战）：游戏结束时
      if (isMatchTutorial && matchTutorialStep === 4 && GameState.gamePhase === 'ended') {
        if (matchTutCrashCompleted) {
          // 撞牌已完成，自动转入步骤4（中立区介绍）
          matchTutorialStep = 5;
          stopCrisisMusic();
          stopEndGameMusic();
          setTimeout(() => showMatchTutorialStep6(), 3000);
        } else {
          // 撞牌未完成，显示"重新体验"按钮（带提示）
          const btns = document.getElementById('match-step5-end-buttons');
          if (btns) {
            btns.innerHTML = `<button style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;" onclick="event.stopPropagation(); stopCrisisMusic(); stopEndGameMusic(); showMatchTutorialStep5();">${__t('tut_restart_btn')}</button><div style="flex-basis: 100%; margin-top: 6px; font-size: 0.75rem; color: #f87171; text-align: center;">撞牌未完成，请继续学习</div>`;
            btns.style.flexWrap = 'wrap';
            btns.style.display = 'flex';
          }
        }
      }
      // 交互步骤5（援牌实战）：游戏结束时，根据是否完成两种援牌操作决定显示按钮
      if (isMatchTutorial && matchTutorialStep === 7 && GameState.gamePhase === 'ended') {
        const btns = document.getElementById('match-step8-end-buttons');
        if (btns) {
          if (matchTutSupportAdjacentDone && matchTutSupportSameDone) {
            // 两种援牌操作都完成，显示完成学习按钮
            btns.innerHTML = `<button id="match-step8-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>`;
            const completeBtn = document.getElementById('match-step8-complete-btn');
            if (completeBtn) {
              completeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                showMatchTutorialStep9();
              });
            }
          } else {
            // 未全部完成，显示重新体验按钮（带提示）
            const tip = [];
            if (!matchTutSupportAdjacentDone) tip.push('相邻点援牌');
            if (!matchTutSupportSameDone) tip.push('同点援牌');
            btns.innerHTML = `<button id="match-step8-replay-btn" style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tut_restart_btn')}</button><div style="flex-basis: 100%; margin-top: 6px; font-size: 0.75rem; color: #f87171; text-align: center;">${tip.join('/')}未完成，请继续学习</div>`;
            const replayBtn = document.getElementById('match-step8-replay-btn');
            if (replayBtn) {
              replayBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                showMatchTutorialStep8();
              });
            }
          }
          btns.style.display = 'flex';
          btns.style.flexWrap = 'wrap';
        }
      }
      // 交互步骤6（围牌实战）：游戏结束时，根据是否完成两种围牌操作决定显示按钮
      if (isMatchTutorial && matchTutorialStep === 9 && GameState.gamePhase === 'ended') {
        const btns = document.getElementById('match-step10-end-buttons');
        if (btns) {
          if (matchTutSurroundAdjacentDone && matchTutSurroundSameDone) {
            // 两种围牌操作都完成，显示完成学习按钮
            btns.innerHTML = `<button id="match-step10-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>`;
            const completeBtn = document.getElementById('match-step10-complete-btn');
            if (completeBtn) {
              completeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                showMatchTutorialStep11();
              });
            }
          } else {
            // 未全部完成，显示重新体验按钮（带提示）
            const tip = [];
            if (!matchTutSurroundAdjacentDone) tip.push('相邻点围牌');
            if (!matchTutSurroundSameDone) tip.push('同点围牌');
            btns.innerHTML = `<button id="match-step10-replay-btn" style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tut_restart_btn')}</button><div style="flex-basis: 100%; margin-top: 6px; font-size: 0.75rem; color: #f87171; text-align: center;">${tip.join('/')}未完成，请继续学习</div>`;
            const replayBtn = document.getElementById('match-step10-replay-btn');
            if (replayBtn) {
              replayBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                showMatchTutorialStep10();
              });
            }
          }
          btns.style.display = 'flex';
          btns.style.flexWrap = 'wrap';
        }
      }
    }

    // ★ 单机模式战绩记录（人机1v1 / 人机2v2；联机模式由 online-client.js 内部记录）
    //   isWin: true=胜, false=负, null=平
    function recordLocalModeResult(isWin) {
      // 联机（含自定义房间/练习联机）不在此记录，避免与 online-client 重复
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) return;
      if (isFunctionalCardTutorial || isMatchTutorial) return;
      if (typeof GameState === 'undefined') return;
      const _mode = GameState.fourPlayerActive ? 'ai_2v2' : 'ai_1v1';
      if (typeof window.PBRecordModeResult === 'function') {
        window.PBRecordModeResult(_mode, isWin === null ? 'draw' : (isWin ? 'win' : 'lose'));
      }
    }

    function checkWinCondition() {
      console.log('[checkWinCondition] 被调用! gamePhase=', GameState?.gamePhase, 'playerWins=', GameState?.playerWins?.filter?.(w=>w).length, 'opponentWins=', GameState?.opponentWins?.filter?.(w=>w).length);
      if (isTutorialMode) { console.log('[checkWinCondition] 教程模式，跳过'); return; }
      if (GameState.gamePhase === 'ended') { console.log('[checkWinCondition] 游戏已结束，跳过'); return; }

      // ★★ 2026-9-9 统一守卫（治本）：放在函数入口，覆盖**全部**结算分支与**全部**调用路径。
      //   规则（出牌两阶段）：打出 ≠ 放置。只有"放置"完成（finalizePlacement）才结束回合，
      //   回合结束了才可能结算。打出之后仍可能触发匹配（拖/撞/援/围），匹配会改变路数归属，
      //   此时结算必然误判 —— 玩家打出最后一张牌就直接判定胜负，就是这个原因。
      //
      //   ⚠ 此前把守卫只加在 playerWins>=5 / opponentWins>=5（战术胜）两个分支里，
      //     而"双方终止 → 战略胜（比最大牌型）"这一分支完全没有守卫，
      //     玩家打出最后一张牌（手牌打空、双方终止）就会从这里直接结算。
      //     现在提到入口：战术胜、战略胜、本地、联机，任何路径在打出未放置时一律拒绝结算。
      if (GameState.localCardPlayPending) {
        // ★ 2026-9-19 FIX：四方全部终止时不可能再有"放置"完成，pending 属残留——
        //   若照旧拒绝结算（等 finalizePlacement 补触发），对局将永久无结算
        var _fpAllStoppedNow = false;
        if (GameState.fourPlayerActive) {
          _fpAllStoppedNow = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1]
            && GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
        }
        if (_fpAllStoppedNow) {
          console.warn('[checkWinCondition] 四方已全部终止但残留打出状态 → 清除后照常结算');
          GameState.localCardPlayPending = false;
          GameState.localCardPlayRoadIndex = -1;
        } else {
          console.warn('[checkWinCondition] ⚠ 卡牌处于"打出未放置"状态 → 拒绝结算，等待放置完成');
          // 标记待补触发：由唯一的放置完成入口 finalizePlacement 清除 pending 后重新结算
          GameState._pendingOnlineSettlement = true;
          return;
        }
      }

      const playerWins = GameState.playerWins.filter(w => w).length;
      const opponentWins = GameState.opponentWins.filter(w => w).length;

      if (playerWins >= 5) {
        // ★ 统一入口守卫已处理"打出未放置"，此处直接结算
        stopCrisisMusic();
        playVictoryMusic();
        GameState.gamePhase = 'ended';
        updateGameStatus(__t('st_my_five_win'), 'st_my_five_win');
        GameState._resultLocked = true;  // ★ 终局结果锁定（防弹窗开关覆盖，2026-9-17）
        // 累加经验（非教程模式下）
        if (!isFunctionalCardTutorial && !isMatchTutorial) {
          const ps = calculatePlayerScore('player');
          if (typeof addExp === 'function') addExp(ps.totalScore);
        }
        updateEndGameButtons();
        showGameEndProfile(true);
        recordLocalModeResult(true);
        // 联机模式：通知客户端游戏结束（玩家胜，五路全胜）
        if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
          PBOnline.handleOnlineGameEnd(true, 'five_win');
        }
        try { ReplayRecorder.end('win'); } catch (e) {}  // ★ 回放录制收尾
        ppOnlineReplayCache = null;  // ★ 新对局回放已上传，联机列表缓存作废（下次展开重拉）
        if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) fcTutShowStep1Buttons();
        if (isFunctionalCardTutorial && functionalCardTutorialStep === 3) { const b = document.getElementById('fc-step2-end-buttons'); if (b) b.style.display = 'flex'; }
        handleMatchTutorialGameEnd();
        return;
      } else if (opponentWins >= 5) {
        // ★ 统一入口守卫已处理"打出未放置"，此处直接结算
        stopCrisisMusic();
        playDefeatMusic();
        GameState.gamePhase = 'ended';
        updateGameStatus(__t('st_opp_five_win'), 'st_opp_five_win');
        GameState._resultLocked = true;  // ★ 终局结果锁定
        updateEndGameButtons();
        showGameEndProfile(false);
        recordLocalModeResult(false);
        // ★ 2026-9-21 经验规则变更：无论输赢，按本局得分获得相同数值经验（非教程模式）
        if (!isFunctionalCardTutorial && !isMatchTutorial) {
          const ps = calculatePlayerScore('player');
          if (typeof addExp === 'function') addExp(ps.totalScore);
        }
        // 联机模式：通知客户端游戏结束（玩家败，五路全胜）
        if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
          PBOnline.handleOnlineGameEnd(false, 'five_win');
        }
        try { ReplayRecorder.end('lose'); } catch (e) {}  // ★ 回放录制收尾
        ppOnlineReplayCache = null;  // ★ 新对局回放已上传，联机列表缓存作废（下次展开重拉）
        if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) fcTutShowStep1Buttons();
        if (isFunctionalCardTutorial && functionalCardTutorialStep === 3) { const b = document.getElementById('fc-step2-end-buttons'); if (b) b.style.display = 'flex'; }
        handleMatchTutorialGameEnd();
        return;
      }

      // ★ 2026-9-2: 四人模式的双方终止判定（不能只看 1v1 的 playerStoppedPlaying/opponentStoppedPlaying）
      var _allStopped1v1 = GameState.playerStoppedPlaying && GameState.opponentStoppedPlaying;
      var _allStopped4p = false;
      if (GameState.fourPlayerActive) {
        var _allAI = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
        var _allP = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
        _allStopped4p = _allAI && _allP;
        console.log('[checkWin] 四人终止检测: AI=' + JSON.stringify(GameState.fourPlayerAIStopped) + ' P=' + JSON.stringify(GameState.fourPlayerPlayerStopped) + ' → ' + (_allStopped4p ? '全部终止!' : '未全部终止'));
      }

      if (_allStopped1v1 || _allStopped4p) {
        stopCrisisMusic();
        GameState.gamePhase = 'ended';
        // ★ 2026-9-19 FIX（用户实测·全部终止无结算）：战略判定/弹窗中途若抛异常，
        //   gamePhase 已 ended 但结算 UI 永不出现。整体兜底：异常时按当前路数胜负弹出结算
        try {
        const playerCards = getPlayerAllCards();
        const opponentCards = getOpponentAllCards();

        const playerType = identifyCardType(playerCards);
        const opponentType = identifyCardType(opponentCards);

        // 战略胜利 - 我方牌面获胜时累加经验
        // ★ 2026-09-09 修复比较逻辑：必须**先比牌型等级(level)**，等级相同才比最大牌点(maxValue)。
        //   旧逻辑用 || 连接（level 高 OR maxValue 高即胜），"低牌型高牌点"会反转胜负
        //   （如 对子K 误胜 3连顺3-4-5），违反规则"先比最大牌型，牌型相同才比其中最大牌点"
        //   （rule_strategic_win / rule_same_hand_type）。与下方教程结算(43727)的正确写法对齐。
        let strategicWinner = 'none';
        if (playerType.level > opponentType.level) {
          strategicWinner = 'player';
        } else if (opponentType.level > playerType.level) {
          strategicWinner = 'opponent';
        } else if (playerType.maxValue > opponentType.maxValue) {
          strategicWinner = 'player';
        } else if (opponentType.maxValue > playerType.maxValue) {
          strategicWinner = 'opponent';
        }

        if (strategicWinner === 'player') {
          playVictoryMusic();
          updateGameStatus(__t('st_my_hand_win'), 'st_my_hand_win');
          GameState._resultLocked = true;  // ★ 终局结果锁定
          showGameEndProfile(true);
          recordLocalModeResult(true);
          // 累加经验（非教程模式下）
          if (!isFunctionalCardTutorial && !isMatchTutorial) {
            const ps = calculatePlayerScore('player');
            if (typeof addExp === 'function') addExp(ps.totalScore);
          }
          // 联机模式：通知客户端游戏结束（玩家胜，牌面/战略胜利）
          if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
            PBOnline.handleOnlineGameEnd(true, 'hand_win');
          }
          try { ReplayRecorder.end('win'); } catch (e) {}  // ★ 回放录制收尾
        ppOnlineReplayCache = null;  // ★ 新对局回放已上传，联机列表缓存作废（下次展开重拉）
        } else if (strategicWinner === 'opponent') {
          playDefeatMusic();
          updateGameStatus(__t('st_opp_hand_win'), 'st_opp_hand_win');
          GameState._resultLocked = true;  // ★ 终局结果锁定
          showGameEndProfile(false);
          recordLocalModeResult(false);
          // ★ 2026-9-21 经验规则变更：无论输赢，按本局得分获得相同数值经验（非教程模式）
          if (!isFunctionalCardTutorial && !isMatchTutorial) {
            const ps = calculatePlayerScore('player');
            if (typeof addExp === 'function') addExp(ps.totalScore);
          }
          // 联机模式：通知客户端游戏结束（玩家败，牌面/战略胜利）
          if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
            PBOnline.handleOnlineGameEnd(false, 'hand_win');
          }
          try { ReplayRecorder.end('lose'); } catch (e) {}  // ★ 回放录制收尾
        ppOnlineReplayCache = null;  // ★ 新对局回放已上传，联机列表缓存作废（下次展开重拉）
        } else {
          updateGameStatus(__t('st_draw'), 'st_draw');
          GameState._resultLocked = true;  // ★ 终局结果锁定
          recordLocalModeResult(null);
          // ★ 2026-9-21 经验规则变更：无论输赢，按本局得分获得相同数值经验（非教程模式）
          if (!isFunctionalCardTutorial && !isMatchTutorial) {
            const ps = calculatePlayerScore('player');
            if (typeof addExp === 'function') addExp(ps.totalScore);
          }
          // 联机模式：通知客户端游戏结束（平局）
          if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
            PBOnline.handleOnlineGameEnd(null);
          }
          try { ReplayRecorder.end('draw'); } catch (e) {}  // ★ 回放录制收尾
          ppOnlineReplayCache = null;  // ★ 联机列表缓存作废
        }
        } catch (_stratErr) {
          // ★ 2026-9-19 FIX：战略结算异常兜底——按当前已赢路数判定并强制弹出结算，绝不让对局停在"已结束但无结算"
          console.error('[checkWinCondition] ⚠ 战略结算异常，兜底弹出结算:', _stratErr);
          try {
            var _pwE = GameState.playerWins.filter(function (w) { return w; }).length;
            var _owE = GameState.opponentWins.filter(function (w) { return w; }).length;
            var _isWinE = _pwE > _owE;
            GameState._resultLocked = true;
            updateGameStatus(_isWinE ? __t('st_my_hand_win') : (Object.is(_pwE, _owE) ? __t('st_draw') : __t('st_opp_hand_win')));
            updateEndGameButtons();
            showGameEndProfile(_isWinE);
            recordLocalModeResult(_pwE === _owE ? null : _isWinE);
          } catch (e2) { console.error('[checkWinCondition] 兜底结算也失败:', e2); }
        }
        updateEndGameButtons();
        if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) fcTutShowStep1Buttons();
      }

      // 交互步骤2实战阶段（step=3）：游戏结束时显示"重新体验"和"结束教程"按钮
      if (isFunctionalCardTutorial && functionalCardTutorialStep === 3 && GameState.gamePhase === 'ended') {
        const btns = document.getElementById('fc-step2-end-buttons');
        if (btns) btns.style.display = 'flex';
      }

      handleMatchTutorialGameEnd();
    }

    // updateEndGameButtons: 游戏结束时更新按钮状态
    function updateEndGameButtons() {
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = false;
      GameElements.ui.startBtn.style.opacity = '1';
      GameElements.ui.startBtn.style.cursor = 'pointer';
      // ★ 2026-9-2: 游戏结束后，开始按钮文字改为重新开始
      GameElements.ui.startBtn.textContent = (typeof __t === 'function' ? __t('tut_btn_restart') : '重新开始');
    }

    // ★ 2026-9-11: 移除"结束即重置"（resetGameAfterLocalEnd）——用户规则：
    //   游戏结束时保留现场（结算画面后可见最终牌面），重置只发生在
    //   "返回主页"或"结束后重新开始"两条路径（两条路径均已含全量重置）。

    // ============================================================================
    // 【对局记录/回放系统】（2026-9-11）
    //   快照流录制：每次出牌放置完成（finalizePlacement）+ 拼点重算后，
    //   记录一张全盘快照（双方5路场牌/叠牌 + 7条中立路 + 拼点胜负）。
    //   回放时逐步渲染快照即可，无需重跑游戏引擎（零分歧风险）。
    //   - 全部模式（ai/online）：云端服务器存储 ./replays/<userId>/（2026-9-12 云端化）
    //     · 联机：结算时经 PBSendReplayUpload（长连接）；人机：经登录短连接带 token 上传
    //     · ★ 游客（未登录）不录制、不保存任何回放
    //   - 自定义房间 / 教程模式：不录制
    // ============================================================================
    const REPLAY_KEEP_PER_MODE = 10;  // 每模式保留最近 N 场（服务器端 REPLAYS_PER_USER 保持一致）

    const ReplayRecorder = {
      active: false,
      ended: false,
      mode: '',
      actions: [],   // actions[0]=开局空盘快照(s:null)，之后每手一个
      _stash: null,  // 本次动作出牌注解 {c, src}
      // ★ 2026-9-16 结局补录：end() 延迟落盘，等待"联机 game_over 早于本地最后一手动画
      //   到达"的补录窗口；窗口内有注解/快照则顺延，静止 4s 后才真正保存
      _finalizeTimer: null,
      _saved: false,      // 延迟落盘是否已执行
      _endResult: null,   // end() 暂存的结算结果

      /** 当前对局应归属的模式 key；返回 '' 表示不录制
       *  ★ 2026-10-11 还原（用户指令）：恢复人机模式回放录制（2026-9-30"删除人机回放"规则作废）。
       *   人机 1v1 = ai_1v1；人机 2v1（四人 2v1 阵营，含联机练习 2v2）= ai_2v2；
       *   教程模式由 begin() 的 _isTutorial() 拦截；自定义房间仅存在于联机侧（上方已排除）。
       *   上传走 _uploadAuth 登录短连接（服务器端 ai 模式上限 5 场保留）。 */
      _modeKey() {
        try {
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline && !PBOnline.isPractice2v2Mode) {
            if (PBOnline.isCustomRoomMode && PBOnline.isCustomRoomMode()) return '';
            return PBOnline.isOnline2v2Mode ? 'online_2v2' : 'online_1v1';
          }
          if (typeof GameState !== 'undefined' && GameState && GameState.fourPlayerActive) return 'ai_2v2';
          return 'ai_1v1';
        } catch (e) { return ''; }
      },

      _isTutorial() {
        return (typeof isTutorialMode !== 'undefined' && isTutorialMode) ||
               (typeof isFunctionalCardTutorial !== 'undefined' && isFunctionalCardTutorial) ||
               (typeof isMatchTutorial !== 'undefined' && isMatchTutorial);
      },

      _cards(arr) { return (arr || []).map(function (c) { return c && (c.display || c.rank) ? (c.display || c.rank) : ''; }); },
      _field(arr) { return (arr || []).map(function (c) { return c && (c.display || c.rank) ? (c.display || c.rank) : ''; }); },

      /** 从 GameState 抓取全盘压缩快照（含手牌/明牌/暗牌/牌堆，完整还原对局界面） */
      _snapshot() {
        var self = this;
        var G = GameState;
        return {
          t: G.turnNumber || 0,
          pf: self._field(G.playerField),
          of: self._field(G.opponentField),
          ps: (G.playerStack || []).map(function (a) { return self._cards(a); }),
          os: (G.opponentStack || []).map(function (a) { return self._cards(a); }),
          pn: (G.playerNeutralCards || []).map(function (a) { return self._cards(a); }),
          on: (G.opponentNeutralCards || []).map(function (a) { return self._cards(a); }),
          pw: (G.playerWins || []).map(function (w) { return w ? 1 : 0; }),
          ow: (G.opponentWins || []).map(function (w) { return w ? 1 : 0; }),
          ph: self._cards(G.playerHand),
          oh: self._cards(G.opponentHand),
          pr: self._cards(G.playerRevealedCards),
          or: self._cards(G.opponentRevealedCards),
          pk: self._cards(G.playerDarkCards),
          ok: self._cards(G.opponentDarkCards),
          pd: (G.playerDeck || []).length,
          od: (G.opponentDeck || []).length
        };
      },

      /** 开始录制（懒启动：第一手动作时自动调用） */
      begin() {
        var mode = this._modeKey();
        if (!mode || this._isTutorial()) return;
        // ★ 云端回放：游客（未登录）不录制（对局记录仅登录账号云端保存）
        if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) return;
        if (this.active) return;
        this._flushPending();   // ★ 先把上一局未落盘的结局补存掉，防止被本局覆盖
        this.active = true;
        this.ended = false;
        this.mode = mode;
        // ★ 2026-9-18：记录玩家名单+头像+座位（回放四角头像牌用），开局时一次性快照
        this.rplayers = (window._pbMatchPlayerList && Array.isArray(window._pbMatchPlayerList))
          ? JSON.parse(JSON.stringify(window._pbMatchPlayerList)) : [];
        this.actions = [];
        this._stash = null;
        // 开局空盘快照（按当前棋盘数组长度合成零值）
        var G = GameState;
        var zero = (G.playerField || []).map(function () { return ''; });
        var empt = function (n) { var a = []; for (var i = 0; i < n; i++) a.push([]); return a; };
        var zeroW = (G.playerWins || []).map(function () { return 0; });
        this.actions.push({
          s: null, r: -1, c: '', src: '', t: 0, mv: null,
          pf: zero, of: zero.slice(),
          ps: empt((G.playerStack || []).length),
          os: empt((G.opponentStack || []).length),
          pn: empt((G.playerNeutralCards || []).length),
          on: empt((G.opponentNeutralCards || []).length),
          pw: zeroW, ow: zeroW.slice(),
          ph: [], oh: [], pr: [], or: [], pk: [], ok: [], pd: 0, od: 0
        });
        console.log('[回放录制] 开始录制:', mode);
      },

      /** 出牌注解暂存（confirmCardPlacement 调用，match 链直达 finalize 时沿用） */
      stash(card, sourceType) {
        // ★ 2026-9-16：结局待落盘窗口（ended 且未保存）内仍接收注解，保证最后一手 mv 完整
        if (!this.active && !(this.ended && !this._saved)) return;
        if (!this._stash) this._stash = {};
        this._stash.c = card && (card.display || card.rank) ? (card.display || card.rank) : '';
        this._stash.src = sourceType || '';
        if (this.ended) this._scheduleFinalize();   // 结局窗口内有活动 → 顺延落盘
      },

      /** 匹配事件注解（performRoadMatch/performNeutralAction 调用，回放时精确还原匹配动画）
       *  mt: 'drag'|'crash'|'support'|'surround'
       *  road: 路牌区相关路（拖/撞=匹配路；围=转移目标路；援=-1）
       *  neutral: 中立区相关路（拖/撞/援=移入路；围=转移源路） */
      noteMatch(mt, road, neutral) {
        // ★ 2026-9-16：结局待落盘窗口内仍接收匹配注解（同 stash）
        if (!this.active && !(this.ended && !this._saved)) return;
        if (!this._stash) this._stash = {};
        this._stash.mv = { mt: mt, road: (typeof road === 'number') ? road : -1, neutral: (typeof neutral === 'number') ? neutral : -1 };
        if (this.ended) this._scheduleFinalize();   // 结局窗口内有活动 → 顺延落盘
      },

      /** 一手动作完成：记录快照（finalizePlacement 末尾调用）
       *  ★ 2026-9-16 结局补录：end() 已触发但尚未落盘时，最后一手仍入档。
       *  联机 game_over 常早于本地最后一手动画到达，旧逻辑 ended=true 直接丢弃
       *  导致回放缺最后一回合（结局）。 */
      action(side, road) {
        if (this._saved) return;
        if (this.ended) {
          var stE = this._stash || {};
          this._stash = null;
          var snapE = this._snapshot();
          snapE.s = (side === 'opponent') ? 1 : 0;
          snapE.r = (typeof road === 'number') ? road : -1;
          snapE.c = stE.c || '';
          snapE.src = stE.src || '';
          snapE.mv = stE.mv || null;
          try { if (GameState.fourPlayerActive) snapE.sub = GameState.fourPlayerSubTurn; } catch (e) {}
          this.actions.push(snapE);
          console.log('[回放录制] 结局补录最后一手:', side, 'road=', road, '→ 共' + this.actions.length + '手');
          this._scheduleFinalize();
          return;
        }
        if (!this.active) this.begin();
        if (!this.active) return;
        var st = this._stash || {};
        this._stash = null;
        var snap = this._snapshot();
        snap.s = (side === 'opponent') ? 1 : 0;
        snap.r = (typeof road === 'number') ? road : -1;
        snap.c = st.c || '';
        snap.src = st.src || '';
        snap.mv = st.mv || null;
        // ★ 2026-9-18：四人模式记录出牌子玩家（回放精确显示回合线框）
        try { if (GameState.fourPlayerActive) snap.sub = GameState.fourPlayerSubTurn; } catch (e) {}
        this.actions.push(snap);
      },

      /** 发牌完成后补录"发牌完成"快照（dealInitialCards 末尾调用）
       *  修复：此前 actions[0]=空盘、actions[1]=首手打完，发牌后的完整手牌/明牌/暗牌/牌堆状态
       *  从未入档，回放前段这些区域全是空的。补录为 actions[1]（s:null 标识，无出牌动作）。 */
      captureInitial() {
        if (!this.active) this.begin();          // 懒启动：发牌完成即开始录制（早于第一手）
        if (!this.active || this.ended) return;
        if (this.actions.length !== 1) return;  // 仅在只有开局空盘快照时补录（幂等）
        var snap = this._snapshot();
        snap.s = null;
        snap.r = -1;
        snap.c = '';
        snap.src = '';
        snap.mv = null;
        snap.t = 0;
        this.actions.push(snap);
      },

      /** 结束录制（checkWinCondition / 联机 game_over 各结算分支调用，幂等）
       *  ★ 2026-9-16 FIX：不再同步落盘 —— 联机 game_over 可能早于本地最后一手动画
       *  到达，同步落盘会把最后一手关在门外（ended=true → action 丢弃，回放缺结局）。
       *  现在仅标记待落盘并延迟保存；窗口内收到注解/快照则顺延，实现结局补录。
       *  ★ 2026-9-17 FIX：元数据（pw/ow/turns/score）在 end() 当场快照 —— 若延迟到
       *  _finalize 才读，期间玩家点返回主页触发状态重置，会落盘 turns=1/pw=0:0 的废数据。 */
      end(result) {
        if (!this.active || this.ended) return;
        this.ended = true;
        this.active = false;
        this._endResult = result || 'draw';
        // 当场快照对局元数据（此时 GameState 尚未被清理/重置）
        var G0 = GameState;
        try {
          this._meta = {
            pw: (G0.playerWins || []).filter(function (w) { return w; }).length,
            ow: (G0.opponentWins || []).filter(function (w) { return w; }).length,
            turns: G0.turnNumber || 0,
            score: (typeof calculatePlayerScore === 'function') ? (calculatePlayerScore('player').totalScore || 0) : 0
          };
        } catch (e) { this._meta = null; }
        this._scheduleFinalize();
      },

      /** 延迟落盘调度：窗口内有新动作/注解则不断顺延，静止 4s 后真正保存 */
      _scheduleFinalize() {
        if (this._finalizeTimer) { try { clearTimeout(this._finalizeTimer); } catch (e) {} }
        var self = this;
        this._finalizeTimer = setTimeout(function () { self._finalizeTimer = null; self._finalize(); }, 4000);
      },

      /** 真正保存/上传（end 的延迟执行体，幂等） */
      _finalize() {
        if (this._saved || !this.ended) return;
        this._saved = true;
        var result = this._endResult || 'draw';
        this._endResult = null;
        var G = GameState;
        // ★ 2026-9-17 FIX：优先用 end() 时快照的元数据（此时 GameState 可能已被重置，
        //   直接读会得到 turns=1/pw=0:0/score=0 的废数据——18:32 场次即此问题）
        var pw, ow, score, turns;
        if (this._meta) {
          pw = this._meta.pw; ow = this._meta.ow; turns = this._meta.turns; score = this._meta.score;
          this._meta = null;
        } else {
          pw = (G.playerWins || []).filter(function (w) { return w; }).length;
          ow = (G.opponentWins || []).filter(function (w) { return w; }).length;
          score = 0;
          try { if (typeof calculatePlayerScore === 'function') score = calculatePlayerScore('player').totalScore || 0; } catch (e) {}
          turns = G.turnNumber || 0;
        }
        var replay = {
          id: 'r' + Date.now().toString(36) + Math.floor(Math.random() * 46656).toString(36),
          time: Date.now(),
          mode: this.mode,
          result: result,
          pw: pw, ow: ow, score: score,
          turns: turns,
          actions: this.actions
        };
        // ★ 2026-9-18：双方玩家名称写入元数据（回放/排行榜明细列表显示用）
        var _pl = (typeof window._pbMatchPlayersLabel === 'string') ? window._pbMatchPlayersLabel : '';
        if (!_pl) {
          var _myN = '';
          try { _myN = localStorage.getItem('pbp_nickname') || '我'; } catch (e) { _myN = '我'; }
          if (this.mode === 'ai_1v1') _pl = _myN + ' vs AI';
          else if (this.mode === 'ai_2v2') _pl = _myN + '、AI队友 vs AI';
        }
        replay.players = _pl;
        // ★ 2026-9-18：玩家名单+头像+座位（回放四角头像牌数据源）
        replay.rplayers = this.rplayers || [];
        if (this.mode === 'online_1v1' || this.mode === 'online_2v2') {
          if (typeof window.PBSendReplayUpload === 'function' && window.PBSendReplayUpload(replay)) {
            console.log('[回放录制] 已上传服务器:', this.mode, replay.id, this.actions.length + '手');
            // ★ 2026-9-13 FIX：上传后失效回放列表缓存，下次展开模式时重新拉取（含本局）
            ppOnlineReplayCache = null;
          } else {
            console.warn('[回放录制] 服务器不可用，联机回放未保存:', this.mode);
          }
        } else {
          // ★ 云端化（2026-9-12）：人机回放经登录短连接上传服务器（游客 begin 已拦截）
          this._uploadAuth(this.mode, replay);
        }
      },

      /** ★ 立即补存未落盘的上一局（新对局 begin/reset 前调用，防止结局被覆盖丢失） */
      _flushPending() {
        if (this.ended && !this._saved) {
          if (this._finalizeTimer) { try { clearTimeout(this._finalizeTimer); } catch (e) {} this._finalizeTimer = null; }
          this._finalize();
        }
      },

      /** 人机回放云端上传：带账号 token，服务器按 userId 归属落盘 */
      _uploadAuth(mode, replay) {
        try {
          if (typeof pbIsLoggedIn !== 'function' || !pbIsLoggedIn()) return;
          var payload = Object.assign({ token: localStorage.getItem('pbp_auth_token') || '' }, replay);
          authSend({ type: 'replay_upload', data: payload });
          // ★ 2026-9-13 FIX：上传后失效回放列表缓存，下次展开模式时重新拉取（含本局）
          ppOnlineReplayCache = null;
          console.log('[回放录制] 已上传云端:', mode, replay.id, (replay.actions || []).length + '手');
        } catch (e) { console.warn('[回放录制] 云端上传失败', e); }
      },

      /** 兜底收尾（联机 game_over 消息路径，本地结算未触发时补保存） */
      forceEnd(result) {
        if (this.active && !this.ended) this.end(result);
      },

      /** 清空当前录制（resetGameState 全量重置时调用，安全幂等） */
      reset() {
        this._flushPending();   // ★ 上一局若还在结局补录窗口，先补存再清空
        if (this._finalizeTimer) { try { clearTimeout(this._finalizeTimer); } catch (e) {} this._finalizeTimer = null; }
        this.active = false;
        this.ended = false;
        this.mode = '';
        this.actions = [];
        this._stash = null;
        this._saved = false;
        this._endResult = null;
      }
    };
    window.ReplayRecorder = ReplayRecorder;

    // 联机回放上传桥（ReplayRecorder.end 调用；online-client.js 的 PBOnline.uploadReplay 实际发送）
    window.PBSendReplayUpload = function (replay) {
      try {
        if (typeof PBOnline === 'undefined' || !PBOnline || typeof PBOnline.uploadReplay !== 'function') return false;
        if (PBOnline.isCustomRoomMode && PBOnline.isCustomRoomMode()) return false;
        PBOnline.uploadReplay(replay);
        return true;
      } catch (e) { return false; }
    };

    // ============================================================================
    // 【游戏结束个人资料弹窗系统】
    //   showGameEndProfile(isWin)    胜负判定时弹出个人资料
    //   closeGameEndProfile()        关闭弹窗（留在游戏内）
    //   flyToAvatarAndReturn()       飞行动画 → 投降按钮 → showMainMenu
    //   switchRestartBtnToHome()     投降按钮变成"返回主页"功能
    //   restoreRestartBtnToSurrender() 投降按钮恢复原功能
    // ============================================================================
    let __gameEndProfileShown = false;
    let __restartBtnCachedRect = null;  // ★ 缓存投降按钮坐标！防止游戏结束后被隐藏导致 getBoundingClientRect() 返回 (0,0)
    let __gameEndIsWin = false;
    let __origRestartBtnOnClick = null;

    // ★ 2026-9-9: 游戏结束先停留 2 秒（让玩家看清最后一路拼点结果与结局画面），再弹个人资料。
    //   延迟做在函数内部（而非各调用点），统一覆盖 checkWinCondition 四处 + online-client 两处等全部入口。
    // ★ 2026-9-23 结算动画：失败方场上归属卡牌灰化（路牌区+中立区，用户需求）。
    //   loserSide = 失败方（'player'/'opponent'，本地视角）。灰化范围：
    //   ① 失败方路牌槽内的全部场牌/叠牌；② 中立区失败方占优格（归属失败方）内失败方的牌。
    //   逐张 70ms 错开 transition-delay 形成波浪灰化；失败方 glory 光效同步熄灭（CSS）。
    //   四人布局（人机2v1/联机2v2）阵营结构不同，第一版跳过；平局不触发（无 loser）。
    function playDefeatGrayAnimation(loserSide) {
      try {
        if (loserSide !== 'player' && loserSide !== 'opponent') return;
        if (GameState.fourPlayerActive) return;
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) return;
        const loseK = loserSide === 'player' ? 'p' : 'o';
        const winK = loserSide === 'player' ? 'o' : 'p';
        const roadSlotCls = loserSide === 'player' ? '.player-road-slot' : '.opponent-road-slot';
        const neutralSlotCls = loserSide === 'player' ? '.player-neutral-slot' : '.opponent-neutral-slot';
        const loseNeutral = GameState[loserSide === 'player' ? 'playerNeutralCards' : 'opponentNeutralCards'];
        const winNeutral = GameState[loserSide === 'player' ? 'opponentNeutralCards' : 'playerNeutralCards'];
        const els = [];
        document.querySelectorAll(roadSlotCls + ' .card, ' + roadSlotCls + ' .card-small, ' + roadSlotCls + ' .glory-card').forEach(el => els.push(el));
        // 中立区灰化规则（2026-9-23 用户明令修正：只灰"归属失败方"的格）：
        //   ① 数量相等（1v1）的格 → 不属于任何玩家 → 不灰
        //   ② 归属胜利方（胜利方牌多）的格 → 全部算入胜者牌面 → 不灰
        //   ③ 归属失败方（失败方牌多）的格 → 双方槽的牌都归失败方 → 全灰
        const nSlotsLose = document.querySelectorAll(neutralSlotCls);
        const nSlotsWin = document.querySelectorAll(loserSide === 'player' ? '.opponent-neutral-slot' : '.player-neutral-slot');
        for (let i = 0; i < 7; i++) {
          const lc = (loseNeutral[i] || []).length;
          const wc = (winNeutral[i] || []).length;
          if (lc > wc && lc > 0) {
            if (nSlotsLose[i]) nSlotsLose[i].querySelectorAll('.card, .card-small').forEach(el => els.push(el));
            if (nSlotsWin[i]) nSlotsWin[i].querySelectorAll('.card, .card-small').forEach(el => els.push(el));
          }
        }
        // 路牌区 DOM 里可能有空占位卡背——只灰化含 data-card-id 的实体卡，兜底全部也安全
        els.forEach((el, i) => {
          el.style.transitionDelay = (i * 70) + 'ms';
          el.classList.add('defeated-card');
        });
        // ★ 2026-9-26 诊断（用户报告灰化消失）：输出双方路牌区实际卡牌数，便于定位
        const _diagMy = document.querySelectorAll('.player-road-slot .card, .player-road-slot .card-small').length;
        const _diagOp = document.querySelectorAll('.opponent-road-slot .card, .opponent-road-slot .card-small').length;
        console.log('[结算动画] 失败方=' + loserSide + ' 灰化卡牌 ' + els.length + ' 张' +
          '（结算时我方路牌卡=' + _diagMy + ' 对方路牌卡=' + _diagOp + '）');
        // ★ 兜底：失败方路上有牌但选择器没抓到 → 直接灰化失败方路牌槽下所有带 data-card-id 的元素
        if (els.length === 0) {
          const _fallback = [];
          document.querySelectorAll(roadSlotCls).forEach(slot => {
            slot.querySelectorAll('[data-card-id]').forEach(el => _fallback.push(el));
          });
          _fallback.forEach((el, i) => {
            el.style.transitionDelay = (i * 70) + 'ms';
            el.classList.add('defeated-card');
          });
          console.log('[结算动画] 主选择器0张，兜底灰化 ' + _fallback.length + ' 张（data-card-id）');
        }
      } catch (e) { console.error('[结算动画] 异常:', e); }
    }

    function showGameEndProfile(isWin) {
      // ★ 2026-9-23 结算灰化动画：胜负已定 → 失败方卡牌波浪灰化（平局不调用本函数）
      try {
        playDefeatGrayAnimation(isWin ? 'opponent' : 'player');
      } catch (e) {}
      if (showGameEndProfile._timer) clearTimeout(showGameEndProfile._timer);
      showGameEndProfile._timer = setTimeout(function () {
        showGameEndProfile._timer = null;
        _showGameEndProfileNow(isWin);
      }, 2000);
    }

    function _showGameEndProfileNow(isWin) {
      // ★ 2026-9-23 教程模式屏蔽：游戏结束时不得弹出"个人资料+返回主页"，只走教程自身结算（重新体验/继续学习）
      if (isMatchTutorial || isFunctionalCardTutorial) return;
      console.log('[showGameEndProfile] 被调用, isWin=', isWin);
      try {
      // ★ 防重复弹
      var _existing = document.getElementById('game-end-profile-modal');
      if (_existing && _existing.classList.contains('active')) {
        console.log('[showGameEndProfile] 已在显示中，跳过');
        return;
      }

      // ★ 在任何操作之前先确保容器可见 + 缓存投降按钮坐标！
      var _wrapper = document.querySelector('.game-container-wrapper');
      if (_wrapper) {
        _wrapper.style.visibility = 'visible';
        _wrapper.style.opacity = '1';
        _wrapper.style.pointerEvents = 'auto';
      }

      // ★ 坐标缓存：读"当前可见"的投降按钮，绝不强制显示隐藏的按钮！
      //   （此前强制 display/visibility 显示 #restart-game，联机模式会冒出第二个投降按钮并遮住对局时间）
      var _cacheTargets = [];
      var _osBtn = document.getElementById('online-surrender');
      var _rgBtn = document.getElementById('restart-game');
      if (_osBtn) _cacheTargets.push(_osBtn);
      if (_rgBtn) _cacheTargets.push(_rgBtn);
      var _cached = false;
      for (var _ci = 0; _ci < _cacheTargets.length; _ci++) {
        var _cb = _cacheTargets[_ci];
        var _br = _cb.getBoundingClientRect();
        if (_br.width > 10 && _br.height > 10) {
          __restartBtnCachedRect = { left: _br.left, top: _br.top, width: _br.width, height: _br.height };
          console.log('[showGameEndProfile] ★ 缓存坐标(from=' + _cb.id + ')=', JSON.stringify(__restartBtnCachedRect));
          _cached = true;
          break;
        }
      }
      if (!_cached) {
        // ★ 从 game-container 反算右下角（不显示任何按钮）
        var _gc = document.querySelector('.game-container');
        if (_gc) {
          var _gcRect = _gc.getBoundingClientRect();
          var _pw = 84, _ph = 36;
          __restartBtnCachedRect = {
            left: _gcRect.right - 16 - _pw,
            top: _gcRect.bottom - 16 - _ph,
            width: _pw, height: _ph
          };
          console.log('[showGameEndProfile] ★ game-container反算=', JSON.stringify(__restartBtnCachedRect));
        } else {
          __restartBtnCachedRect = { left: window.innerWidth - 100, top: window.innerHeight - 52, width: 84, height: 36 };
          console.log('[showGameEndProfile] ★ viewport兜底=', JSON.stringify(__restartBtnCachedRect));
        }
      }

      __gameEndIsWin = !!isWin;
      __gameEndProfileShown = true;

      // 玩家信息收集
      var profileAvatar = document.getElementById('profile-avatar-img');
      var pn = document.getElementById('profile-nickname');
      var pl = document.getElementById('profile-level');
      var avatarSrc = profileAvatar?.src || '';
      var nickname = pn?.textContent || (typeof __t === 'function' ? __t('nick_default') : '玩家');
      var level = pl?.textContent || '1';

      // 统计数据
      // ★ 2026-9-11: 已移除"结束即重置"，GameState 在结算弹窗期间保持实时数据，
      //   直接读取即可（不再需要重置前快照 __gameEndStatsSnapshot）
      var playerWins = (window.GameState && GameState.playerWins) ? GameState.playerWins.filter(function(w){return w}).length : 0;
      var opponentWins = (window.GameState && GameState.opponentWins) ? GameState.opponentWins.filter(function(w){return w}).length : 0;
      var tie = 5 - playerWins - opponentWins;
      var totalScore = 0;
      if (typeof calculatePlayerScore === 'function') {
        try { totalScore = calculatePlayerScore('player').totalScore || 0; } catch(e) {}
      }

      var T = typeof __t === 'function';
      // ★ 2026-9-23 FIX：自定义房间返回房间而非主页
      var _isCustomRoomNow = false;
      try {
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline._isCustomRoom) _isCustomRoomNow = true;
        else if (typeof window !== 'undefined' && window._isCustomRoom) _isCustomRoomNow = true;
      } catch (e) {}
      var _badge = isWin ? '🏆' : '💀';
      var _title = T ? __t(isWin ? 'ge_victory_title' : 'ge_defeat_title') : (isWin ? '对局胜利！' : '对局失败');
      var _labelWin = T ? __t('ge_stat_win_lanes') : '胜路数';
      var _labelLose = T ? __t('ge_stat_lose_lanes') : '败路数';
      var _labelTie = T ? __t('ge_stat_tie_lanes') : '平局路数';
      var _labelScore = T ? __t('ge_stat_score') : '总拼点';
      // ★ 自定义房间 → 返回房间；匹配/人机 → 返回主页
      var _labelReturn = _isCustomRoomNow
        ? (T ? (__t('ge_return_room') || '返回房间') : '返回房间')
        : (T ? __t('ge_return_home') : '返回主页');
      var _labelContinue = T ? __t('ge_continue_game') : '留在对局';

      // ★ 2026-9-19 FIX（用户要求）：结算弹窗显示【对应模式】战绩（pbp_mode_stats），不再显示总战绩
      //   模式键与 recordLocalModeResult / recordModeStats 一致：ai_1v1 / ai_2v2(人机2v1) / online_1v1 / online_2v2
      var _modeKey = 'ai_1v1';
      try {
        var _pbo = (typeof PBOnline !== 'undefined') ? PBOnline : null;
        if (_isCustomRoomNow) {
          // ★ 自定义房间：显示对应人数的单人/双人匹配战绩（自定义房本身不计入战绩）
          _modeKey = (window.playerCountSetting === '4') ? 'online_2v2' : 'online_1v1';
        }
        else if (_pbo && _pbo.isPractice2v2Mode) _modeKey = 'ai_2v2';
        else if (window.GameState && GameState.fourPlayerActive) _modeKey = 'ai_2v2';
        else if (_pbo && _pbo.isOnline2v2Mode) _modeKey = 'online_2v2';
        else if (_pbo && _pbo.isOnline && !_pbo.isCustomRoomMode) _modeKey = 'online_1v1';
      } catch (e) {}
      var _modeStats = { games: 0, wins: 0, draws: 0 };
      try {
        if (typeof window.PBGetModeStats === 'function') _modeStats = window.PBGetModeStats(_modeKey) || _modeStats;
      } catch (e) {}
      var _mTotal = _modeStats.games || 0;
      var _mWins = _modeStats.wins || 0;
      var _mLosses = Math.max(0, _mTotal - _mWins - (_modeStats.draws || 0));
      var _mRate = _mTotal > 0 ? Math.round(_mWins / _mTotal * 100) : 0;
      // 模式显示名（存储键 ai_2v2 按用户命名约定显示为"人机2v1"）
      var _modeNames = {
        ai_1v1: ['人机1v1', 'AI 1v1'],
        ai_2v2: ['人机2v1', 'AI 2v1'],
        online_1v1: ['单人匹配', 'Solo Match'],
        online_2v2: ['双人匹配', 'Duo Match']
      };
      var _mn = _modeNames[_modeKey] || _modeNames.ai_1v1;
      var _isEnLang = false;
      try { _isEnLang = (typeof __gameCurrentLang !== 'undefined' && __gameCurrentLang === 'en'); } catch (e) {}
      var _modeLabel = _isEnLang ? _mn[1] : _mn[0];

      // ★ 完全照抄 timeout-vote-overlay：JS 动态创建 DOM
      var overlay = document.createElement('div');
      overlay.id = 'game-end-profile-modal';
      overlay.className = 'game-end-modal';
      overlay.innerHTML =
        '<div class="ge-outside-hint" data-i18n="ge_click_outside_hint">' + (T ? __t('ge_click_outside_hint', '点击弹窗外任意处，返回对局') : '点击弹窗外任意处，返回对局') + '</div>' +
        '<div class="game-end-content-standalone" onclick="event.stopPropagation()">' +
          '<div class="ge-badge">' + _badge + '</div>' +
          '<div class="ge-title">' + _title + '</div>' +
          '<div class="ge-card">' +
            '<div class="ge-avatar-wrap"><img class="ge-avatar-img" src="' + avatarSrc + '" alt="avatar" onerror="this.style.visibility=\'hidden\'"/></div>' +
            '<div class="ge-info">' +
              '<div class="ge-nickname">' + nickname + '</div>' +
              '<div class="ge-level">Lv.' + level + '</div>' +
            '</div>' +
          '</div>' +
          '<!-- 模式战绩（对应模式，2026-9-19） -->' +
          '<div class="ge-section-label">' + (T ? __t('ge_mode_stats') : '模式战绩') + ' · ' + _modeLabel + '</div>' +
          '<div class="ge-stats">' +
            '<div class="ge-stat"><div class="ge-stat-val">' + _mTotal + '</div><div class="ge-stat-label">' + (T ? __t('ge_total_games') : '总场次') + '</div></div>' +
            '<div class="ge-stat"><div class="ge-stat-val ge-win">' + _mWins + '</div><div class="ge-stat-label">' + (T ? __t('ge_wins') : '胜场') + '</div></div>' +
            '<div class="ge-stat"><div class="ge-stat-val ge-lose">' + _mLosses + '</div><div class="ge-stat-label">' + (T ? __t('ge_losses') : '负场') + '</div></div>' +
            '<div class="ge-stat"><div class="ge-stat-val">' + _mRate + '%</div><div class="ge-stat-label">' + (T ? __t('ge_win_rate') : '胜率') + '</div></div>' +
          '</div>' +
          '<div class="ge-buttons">' +
            '<button class="ge-btn ge-btn-confirm" id="ge-btn-return">' + _labelReturn + '</button>' +
          '</div>' +
        '</div>';

      // ★ 先删掉旧的（如果有），再加新的
      if (_existing && _existing.parentNode) _existing.parentNode.removeChild(_existing);
      document.body.appendChild(overlay);

      // ★ 强制用 inline style 覆盖所有可能的 CSS 干扰！
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100vw';
      overlay.style.height = '100vh';
      overlay.style.background = 'rgba(0,0,0,0.75)';
      overlay.style.backdropFilter = 'blur(4px)';
      overlay.style.display = 'flex';
      overlay.style.alignItems = 'center';
      overlay.style.justifyContent = 'center';
      overlay.style.zIndex = '100002';

      var _cc = overlay.querySelector('.game-end-content-standalone');
      if (_cc) {
        _cc.style.width = '440px';
        // ★ 2026-9-30 手机缩放适配：面板挂在 body 上不受游戏容器缩放影响，按当前游戏缩放等比缩放
        var _gs = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
        _cc.style.zoom = String(_gs);
        var _gh = overlay.querySelector('.ge-outside-hint');
        if (_gh) _gh.style.zoom = String(_gs);
        _cc.style.maxWidth = '92vw';
        _cc.style.position = 'relative';
        _cc.style.flex = 'none';
        _cc.style.animation = 'gePopIn 0.3s cubic-bezier(0.34,1.56,0.64,1)';
        _cc.style.transformOrigin = 'center center';
      }

      // ★ 遮罩外部点击 → 弹窗飞到投降按钮位置覆盖它（留在游戏内）
      overlay.addEventListener('click', function(e) {
        if (e.target === overlay) { playSound?.('uiClickSound'); flyToRestartBtnAndStay(); }
      });
      // 按钮：自定义房间→返回房间；其他→返回主页
      setTimeout(function() {
        var _btnR = document.getElementById('ge-btn-return');
        if (_btnR) _btnR.addEventListener('click', function() {
          playSound?.('uiClickSound');
          // ★ 清弹窗（两种模式都要做）
          restoreRestartBtnToSurrender();
          __gameEndProfileShown = false;
          __origRestartBtnOnClick = null;
          __restartBtnCachedRect = null;
          var m = document.getElementById('game-end-profile-modal');
          if (m && m.parentNode) m.parentNode.removeChild(m);
          stopCrisisMusic();
          resetCrisisMusicState();
          stopEndGameMusic();

          if (_isCustomRoomNow) {
            // ★ 自定义房间：返回房间界面
            // 1. 清理游戏状态/DOM（复用 online-client.js 的 cleanupOnlineGameShared）
            if (typeof PBOnline !== 'undefined' && PBOnline && typeof PBOnline.cleanupOnlineGameShared === 'function') {
              PBOnline.cleanupOnlineGameShared({ keepRoomAlive: true, keepWs: true });
            } else {
              // fallback：手动清
              if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
              interruptGame();
              clearAllCardSlots();
              resetGameState();
            }
            // 2. 显示主菜单 + 重新打开房间界面
            if (typeof showMainMenu === 'function') showMainMenu();
            // 3. 通知服务器取消 ready + 重新加入房间
            //    ★ FIX：PBOnline.ws 未导出（条件永远为假导致消息从不发送），
            //    改用已导出的 rejoinRoom()（内部走 send，自带连接守卫）
            try {
              if (typeof PBOnline !== 'undefined' && PBOnline && typeof PBOnline.rejoinRoom === 'function') {
                PBOnline.send({ type: 'room_ready', data: { ready: false } });
                PBOnline.rejoinRoom();
                console.log('[自定义房间] 返回房间：已发送 room_ready=false + rejoin_room');
              }
            } catch (e) { console.warn('[自定义房间] 返回房间消息发送失败:', e); }
            // 4. 延迟打开房间内部界面（等主菜单显示完）
            //    ★ FIX：openCustomRoomPanel 未定义导致房间界面从不打开（表现为"返回主页"），
            //    改与 online-client.js 结算返回按钮一致的 openRoomInterior 流程
            setTimeout(function() {
              try {
                if (typeof window.openRoomInterior === 'function') {
                  window._riReadyState = false;  // ★ 本地也标未准备
                  window.openRoomInterior();
                }
              } catch (e) { console.warn('[自定义房间] 打开房间界面失败:', e); }
            }, 500);
          } else {
            // ★ 匹配/人机：直接回主页
            if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
            interruptGame();
            clearAllCardSlots();
            resetGameState();
            showMainMenu();
          }
        });
      }, 0);

      // ★ 显示
      overlay.classList.add('active');

      // ★ 投降按钮保持原样（被遮罩盖住点不到）；飞行动画落地时才换成"返回主页"
      console.log('[showGameEndProfile] ✅ 弹窗显示成功！classList=', overlay.className, 'display=', getComputedStyle(overlay).display);
      } catch(e) {
        console.error('[showGameEndProfile] ❌ 出错:', e.message, e.stack?.substring(0, 300));
      }
    }

    function closeGameEndProfile() {
      // ★ 现在统一用 flyToRestartBtnAndStay 做关闭
      flyToRestartBtnAndStay();
    }

    function switchRestartBtnToHome() {
      var btn = document.getElementById('restart-game');
      if (!btn) { console.log('[switchRestartBtnToHome] ❌ btn不存在!'); return; }
      // ★ 只改文字和 onclick，绝不做任何定位/移动！
      //   【运行时证据】fixed 定位写在 transform:scale(0.8037) 的 .game-container 内会失效：
      //   inlineCss 写 left:1429px 实际渲染在 1133px（被祖先 transform 重新变换）
      //   视觉上的"返回主页"按钮由挂载在 body 上的 flyBtn 代替，真实按钮隐藏占位
      var T = typeof __t === 'function';
      btn.setAttribute('data-i18n', 'ge_return_home');
      btn.textContent = T ? __t('ge_return_home') : '返回主页';
      btn.onclick = function() { playSound('uiClickSound'); flyToAvatarAndReturn(); };
      btn.style.visibility = 'hidden';
      // ★ 联机模式的投降按钮也要隐藏
      var _os = document.getElementById('online-surrender');
      if (_os) _os.style.visibility = 'hidden';
      console.log('[switchRestartBtnToHome] ✅ 文字=', btn.textContent, '（真实按钮隐藏，由flyBtn代替显示）');
    }

    function restoreRestartBtnToSurrender() {
      var btn = document.getElementById('restart-game');
      if (!btn) return;
      var T = typeof __t === 'function';
      btn.setAttribute('data-i18n', 'btn_exit_practice');
      btn.textContent = T ? __t('btn_exit_practice') : '退出练习';
      btn.onclick = null;
      // ★ 恢复原始定位（移除 fixed 内联样式，让它回到父容器的 absolute bottom-4 right-4）
      btn.style.position = '';
      btn.style.left = '';
      btn.style.top = '';
      btn.style.width = '';
      btn.style.height = '';
      btn.style.margin = '';
      btn.style.zIndex = '';
      btn.style.display = '';
      btn.style.visibility = '';
      btn.style.opacity = '';
      btn.style.pointerEvents = '';
      // ★ 恢复联机模式的投降按钮
      var _os = document.getElementById('online-surrender');
      if (_os) _os.style.visibility = '';
      // 清缓存
      __restartBtnCachedRect = null;
    }

    // ★ 基于运行时证据的最终实现（debug-ge-fly-animation.md）：
    //   根因1: fixed 在 transform 祖先内失效 → flyBtn 挂 body（body 无 transform，fixed=真视口坐标）
    //   根因2: cloneNode 到 body 后 .game-end-modal .ge-btn 后代选择器失配（黑字裸奔）
    //          → 用 getComputedStyle 逐项内联复制样式，不依赖任何 class
    //   根因3: flyBtn 必须在缩小前创建 → 按钮全程不动，其余内容朝它缩小（聚焦效果）
    function flyToRestartBtnAndStay() {
      var modal = document.getElementById('game-end-profile-modal');
      var content = modal ? modal.querySelector('.game-end-content-standalone') : null;
      var returnBtn = modal ? modal.querySelector('#ge-btn-return') : null;
      var restartBtn = document.getElementById('restart-game');
      if (!modal || !content || !returnBtn || !restartBtn) {
        console.log('[flyToRestartBtnAndStay] ❌ 缺!');
        if (modal && modal.parentNode) modal.parentNode.removeChild(modal);
        return;
      }
      // 防重复触发
      if (document.getElementById('ge-fly-btn')) { console.log('[flyToRestartBtnAndStay] 已在飞行中，跳过'); return; }

      console.log('[flyToRestartBtnAndStay] ==== 开始 ====');

      // ===== 阶段0：立即创建 flyBtn（computed style 内联复制，覆盖原按钮，全程不动）=====
      // ★ 2026-9-30 手机缩放适配：computed 值（字号/圆角/阴影/字距）是设计 px（zoom 不改 computed），
      //   盒子尺寸却用视口坐标——手机上样式元素相对过大。统一按"面板按钮实际缩放比"缩放长度类样式。
      var _pxScale = function (str, s) {
        return String(str || '').replace(/(-?\d*\.?\d+)px/g, function (m, n) { return (parseFloat(n) * s).toFixed(2) + 'px'; });
      };
      var btnRect = returnBtn.getBoundingClientRect();
      var _btnScale = (returnBtn.offsetWidth && btnRect.width > 0) ? (btnRect.width / returnBtn.offsetWidth) : 1;
      if (!_btnScale || _btnScale <= 0 || !isFinite(_btnScale)) _btnScale = 1;
      var flyBtn = document.createElement('button');
      flyBtn.id = 'ge-fly-btn';
      flyBtn.type = 'button';
      var cs = getComputedStyle(returnBtn);
      flyBtn.style.background = cs.background;
      flyBtn.style.backgroundColor = cs.backgroundColor;
      flyBtn.style.color = cs.color;
      flyBtn.style.fontSize = (parseFloat(cs.fontSize) * _btnScale).toFixed(2) + 'px';
      flyBtn.style.fontWeight = cs.fontWeight;
      flyBtn.style.fontFamily = cs.fontFamily;
      flyBtn.style.border = cs.border;
      flyBtn.style.borderRadius = _pxScale(cs.borderRadius, _btnScale);
      flyBtn.style.padding = '0';   // flex 居中承担内边距，免 padding 复合值缩放解析
      flyBtn.style.boxShadow = _pxScale(cs.boxShadow, _btnScale);
      flyBtn.style.letterSpacing = _pxScale(cs.letterSpacing, _btnScale);
      flyBtn.style.whiteSpace = 'nowrap';
      flyBtn.textContent = returnBtn.textContent;
      flyBtn.style.cssText += 'position:fixed;margin:0;box-sizing:border-box;' +
        'left:' + btnRect.left + 'px;top:' + btnRect.top + 'px;' +
        'width:' + btnRect.width + 'px;height:' + btnRect.height + 'px;' +
        'display:flex;align-items:center;justify-content:center;' +
        'z-index:200000;transform-origin:center center;transform:none;opacity:1;' +
        'pointer-events:none;cursor:default;';
      document.body.appendChild(flyBtn);

      // 原按钮隐藏（flyBtn 完全重合，视觉无变化）
      returnBtn.style.opacity = '0';

      // ===== 阶段1：内容从上至下渐变消失（顶部先隐没向下蔓延），遮罩同步淡出 =====
      content.style.transition = 'none';
      content.style.transformOrigin = 'center center';
      content.style.clipPath = 'inset(0 0 0 0)';
      content.offsetHeight;

      content.style.transition = 'clip-path 0.6s ease-in, opacity 0.6s ease-out';
      content.style.clipPath = 'inset(100% 0 0 0)';   // 顶边下收：从上至下逐渐消失
      content.style.opacity = '0';                     // 同步渐隐
      modal.style.transition = 'opacity 0.6s ease-out';
      modal.style.opacity = '0';       // 遮罩淡出，游戏画面显现

      // ===== 阶段2：flyBtn 飞向投降按钮实时位置（2秒）=====
      setTimeout(function() {
        if (modal && modal.parentNode) modal.parentNode.removeChild(modal);

        // ★ 目标选择：联机模式的投降按钮是 #online-surrender（灰色），单机是 #restart-game
        //   飞向当前真正可见的那个！（此前只隐藏 #restart-game，联机时灰色投降一直露在后面）
        var targetBtn = restartBtn;
        var onlineSurr = document.getElementById('online-surrender');
        if (onlineSurr) {
          var _osR = onlineSurr.getBoundingClientRect();
          var _rgR = restartBtn ? restartBtn.getBoundingClientRect() : { width: 0, height: 0 };
          if (_osR.width > 5 && _osR.height > 5 && (_rgR.width < 5 || _osR.width >= _rgR.width)) {
            targetBtn = onlineSurr;
          }
        }
        if (!targetBtn) targetBtn = restartBtn;
        console.log('[flyToRestartBtnAndStay] 飞行目标=', targetBtn.id);

        // 实时读目标按钮视口坐标（flyBtn 在 body 上，fixed 坐标直接可用）
        targetBtn.style.display = '';
        targetBtn.style.visibility = 'visible';
        var restartRect = targetBtn.getBoundingClientRect();
        if (restartRect.width < 5 || restartRect.height < 5) {
          console.log('[flyToRestartBtnAndStay] 投降按钮不可见, 硬算兜底');
          var gc = document.querySelector('.game-container');
          // ★ 真实缩放比 = 渲染宽/CSS宽（比 __pbGameScale 可靠，非全屏/缩放窗口都正确）
          var sc = (gc && gc.offsetWidth) ? (gc.getBoundingClientRect().width / gc.offsetWidth) : 1;
          var _w = targetBtn.offsetWidth || 84, _h = targetBtn.offsetHeight || 36;
          var gcRect = gc ? gc.getBoundingClientRect() : { right: window.innerWidth, bottom: window.innerHeight };
          restartRect = { left: gcRect.right - 16*sc - _w*sc, top: gcRect.bottom - 16*sc - _h*sc, width: _w*sc, height: _h*sc };
        }
        console.log('[flyToRestartBtnAndStay] 投降按钮视口坐标=', restartRect.left.toFixed(0), restartRect.top.toFixed(0), restartRect.width.toFixed(0), restartRect.height.toFixed(0));

        // ★ 投降按钮在飞行期间保持可见，等 flyBtn 快碰到它时（落地前一刻）才隐藏（用户要求）

        var fRect = flyBtn.getBoundingClientRect();
        var dx = restartRect.left - fRect.left;
        var dy = restartRect.top - fRect.top;
        console.log('[flyToRestartBtnAndStay] ★ 飞行 dx=', dx.toFixed(0), 'dy=', dy.toFixed(0), '（纯位移，落地后再撑开150px）');

        flyBtn.offsetHeight;  // reflow 锁定起点
        // ★ 飞行中大小不变（纯位移）；落地后再撑开到 150px（用户要求）
        //   easeOutExpo 曲线：起步快、后段缓慢减速（用户要求"先快后慢"）
        flyBtn.style.transition = 'transform 2s cubic-bezier(0.16, 1, 0.3, 1)';
        flyBtn.style.transform = 'translate(' + dx.toFixed(1) + 'px,' + dy.toFixed(1) + 'px)';
        console.log('[flyToRestartBtnAndStay] ★ 终点transform=', flyBtn.style.transform);

        // ===== 碰撞监测：flyBtn 接近投降按钮即提前触发"从左到右"柔边擦除（用户要求）=====
        function wipeOutBtn(btn) {
          if (!btn) return;
          // 柔边遮罩：透明区带0.375倍按钮宽的渐变过渡带，从左向右扫入，边缘自然过渡不生硬
          var _mask = 'linear-gradient(to right, transparent 40%, #000 55%)';
          btn.style.transition = 'none';
          btn.style.webkitMaskImage = _mask; btn.style.maskImage = _mask;
          btn.style.webkitMaskSize = '250% 100%'; btn.style.maskSize = '250% 100%';
          btn.style.webkitMaskRepeat = 'no-repeat'; btn.style.maskRepeat = 'no-repeat';
          btn.style.webkitMaskPosition = '100% 0'; btn.style.maskPosition = '100% 0';   // 实体区完全盖住按钮（全可见）
          void btn.offsetHeight;  // reflow 锁定初始态
          btn.style.transition = '-webkit-mask-position 0.4s ease-in-out, mask-position 0.4s ease-in-out';
          btn.style.webkitMaskPosition = '0% 0'; btn.style.maskPosition = '0% 0';       // 透明区扫过按钮（从左到右消失，终点完全不可见）
          setTimeout(function() {
            btn.style.visibility = 'hidden';
            // 清除 mask 残留，避免影响后续恢复显示
            btn.style.webkitMaskImage = ''; btn.style.maskImage = '';
            btn.style.webkitMaskSize = ''; btn.style.maskSize = '';
            btn.style.webkitMaskRepeat = ''; btn.style.maskRepeat = '';
            btn.style.webkitMaskPosition = ''; btn.style.maskPosition = '';
          }, 450);
        }
        (function watchTouch() {
          var _fb = document.getElementById('ge-fly-btn');
          if (!_fb) return;
          var _tr = targetBtn.getBoundingClientRect();
          var _fr = _fb.getBoundingClientRect();
          // 两矩形边缘间距（未重叠时为正）；<30px 即提前触发擦除
          var dxGap = Math.max(_tr.left - _fr.right, _fr.left - _tr.right, 0);
          var dyGap = Math.max(_tr.top - _fr.bottom, _fr.top - _tr.bottom, 0);
          var dist = Math.sqrt(dxGap * dxGap + dyGap * dyGap);
          if (dist < 30) {
            wipeOutBtn(restartBtn);
            wipeOutBtn(onlineSurr);
            console.log('[flyToRestartBtnAndStay] ★ 接近投降按钮（间距' + dist.toFixed(0) + 'px），提前柔边擦除');
            return;
          }
          requestAnimationFrame(watchTouch);
        })();
        // 兜底：2.5s 后无论如何都隐藏（防极端情况监测失效导致按钮重叠）
        setTimeout(function() {
          if (restartBtn) restartBtn.style.visibility = 'hidden';
          if (onlineSurr) onlineSurr.style.visibility = 'hidden';
        }, 2500);

        // ===== 落地：投降按钮变"返回主页"（隐藏），flyBtn 常驻成为可点击按钮 =====
        setTimeout(function() {
          switchRestartBtnToHome();
          // ★ 落地校准：重读投降按钮的真实渲染位置+尺寸（visibility:hidden 仍保留布局）
          //   彻底解决窗口大小/缩放不一致：非全屏、小窗口都能精确对齐，不再消失
          var _lr = targetBtn.getBoundingClientRect();
          var _ndx = _lr.left - fRect.left, _ndy = _lr.top - fRect.top;
          // ★ 定位坐标注入 CSS 变量（.landed 类接管 transform；hover/active 用 calc 相对上浮/下沉，
          //   与「开始游戏」按钮的 translateY(-2px)/translateY(4px) 交互完全一致）
          flyBtn.style.setProperty('--fb-x', _ndx.toFixed(1) + 'px');
          flyBtn.style.setProperty('--fb-y', _ndy.toFixed(1) + 'px');
          flyBtn.style.transform = '';
          flyBtn.style.transition = 'width 0.25s ease, height 0.25s ease, transform 0.2s ease, filter 0.2s ease, box-shadow 0.3s ease';
          if (_lr.width > 10 && _lr.height > 5) {
            flyBtn.style.width = _lr.width + 'px';
            flyBtn.style.height = _lr.height + 'px';
            // ★ 2026-9-30：落地后【完全保留飞行动画中的样式值】（用户确认动画中样式正确）——
            //   此前按容器缩放比重算字号/圆角/阴影，手机上被过度缩小（圆角≈0 变方角、厚度≈0 变平面）。
            //   仅注入悬停比例变量（与创建时同一语境），保证悬停厚度与静止厚度同语境。
            flyBtn.style.setProperty('--fb-scale', _btnScale);
            console.log('[flyToRestartBtnAndStay] ★ 落地校准=', _lr.left.toFixed(0), _lr.top.toFixed(0), _lr.width.toFixed(0) + 'x' + _lr.height.toFixed(0), 'fontSize=' + flyBtn.style.fontSize);
          }
          flyBtn.classList.add('landed');
          flyBtn.style.pointerEvents = 'auto';
          flyBtn.style.cursor = 'pointer';
          flyBtn.onclick = function() { playSound?.('uiClickSound'); flyToAvatarAndReturn(); };
          // ★ 窗口缩放时实时跟随校准（fixed 坐标会过期 → 不跟随就会"消失"）
          //   ★ 2026-9-19 FIX（用户实测·全屏切换后按钮乱跑）：全屏/缩放切换是带过渡动画的
          //   连续变化，resize 只触发一次时 gBCR 读到的是过渡中间态；且与 updateScale 的
          //   元素重排存在时序竞态。改为：立即 + 多帧延迟连续校准，直到布局稳定。
          if (window.__geFlyResizeHandler) window.removeEventListener('resize', window.__geFlyResizeHandler);
          var _geRecalTimers = [];
          window.__geFlyResizeHandler = function () {
            _geRecalTimers.forEach(clearTimeout);
            var _recal = function () {
              var _fb = document.getElementById('ge-fly-btn');
              var _tb = document.getElementById(targetBtn.id);
              if (!_fb || !_tb) { window.removeEventListener('resize', window.__geFlyResizeHandler); window.__geFlyResizeHandler = null; _geRecalTimers.forEach(clearTimeout); _geRecalTimers = []; return; }
              var _r = _tb.getBoundingClientRect();
              if (_r.width > 10) {
                _fb.style.transition = 'none';
                // ★ 定位坐标走 CSS 变量（transform 由 .landed 类管理，hover 交互不受影响）
                _fb.style.setProperty('--fb-x', (_r.left - fRect.left).toFixed(1) + 'px');
                _fb.style.setProperty('--fb-y', (_r.top - fRect.top).toFixed(1) + 'px');
                _fb.style.width = _r.width + 'px';
                _fb.style.height = _r.height + 'px';
                // ★ 窗口缩放后按新缩放比重算字号/圆角/阴影/字距（保持与对局按钮视觉一致）
                var _gc2 = document.querySelector('.game-container');
                var _fsc2 = (_gc2 && _gc2.offsetWidth) ? (_gc2.getBoundingClientRect().width / _gc2.offsetWidth) : 1;
                _fb.style.fontSize = (parseFloat(cs.fontSize) * _fsc2).toFixed(1) + 'px';
                _fb.style.borderRadius = _pxScale(cs.borderRadius, _fsc2);
                _fb.style.boxShadow = _pxScale(cs.boxShadow, _fsc2);
                _fb.style.letterSpacing = _pxScale(cs.letterSpacing, _fsc2);
                _fb.style.setProperty('--fb-scale', _fsc2);  // ★ 悬停/按下厚度同步实时缩放比
              }
            };
            _recal();                                   // 立即校准一次
            // 过渡动画（全屏切换 CSS transition）与 updateScale 异步重排期间连续追校准
            _geRecalTimers = [60, 150, 300, 500, 800].map(function (ms) { return setTimeout(_recal, ms); });
          };
          window.addEventListener('resize', window.__geFlyResizeHandler);
          console.log('[flyToRestartBtnAndStay] ✅ 落地! flyBtn=返回主页（常驻可点击 + resize跟随）');
        }, 2050);
      }, 650);
    }

    // ★ 点击"返回主页"按钮 → 直接回主页（无动画，用户明确要求）
    function flyToAvatarAndReturn() {
      console.log('[flyToAvatarAndReturn] 直接返回主页（无动画）');
      // 清理 flyBtn（常驻的"返回主页"按钮）
      var fly = document.getElementById('ge-fly-btn');
      if (fly && fly.parentNode) fly.parentNode.removeChild(fly);
      // 清理 resize 跟随监听
      if (window.__geFlyResizeHandler) { window.removeEventListener('resize', window.__geFlyResizeHandler); window.__geFlyResizeHandler = null; }
      // 移除弹窗（如果还在）
      var m = document.getElementById('game-end-profile-modal');
      if (m && m.parentNode) m.parentNode.removeChild(m);
      // 恢复投降按钮（文字/可见性全部还原）
      restoreRestartBtnToSurrender();
      __gameEndProfileShown = false;
      __origRestartBtnOnClick = null;
      __restartBtnCachedRect = null;
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      showMainMenu();
            // ★【返回主页路径B补重置 2026-10-9】与对局中"退出练习"路径对齐：
      //   补 updateUI（牌型栏/得分栏刷新）+ 风格归一 + 双方牌堆主页重置（此前缺失→卡通返回主页残留）
      if (typeof updateUI === 'function') {
        updateUI();
      }
      if (typeof updateGameStatus === 'function') {
        updateGameStatus('');
      }
      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      const resetPlayerDeckB = document.getElementById('player-deck');
      const resetOpponentDeckB = document.getElementById('opponent-deck');
      if (resetPlayerDeckB) {
        if (selectedCardFaceStyle === 'glass') {
          resetPlayerDeckB.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetPlayerDeckB.style.border = '4px solid rgba(255,255,255,0.95)';
          resetPlayerDeckB.style.borderRadius = '12px';
          resetPlayerDeckB.style.boxShadow = '0 0 2px rgba(200,220,255,0.9), 0 0 6px rgba(180,200,240,0.6), 0 0 50px rgba(120,200,255,0.6), inset 0 4px 10px rgba(0,40,100,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(0,40,100,0.6), inset -3px 0 8px rgba(0,40,100,0.6)';
          resetPlayerDeckB.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (selectedCardFaceStyle === 'metal') {
          resetPlayerDeckB.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetPlayerDeckB.style.border = '3px solid #888888';
          resetPlayerDeckB.style.borderRadius = '8px';
          resetPlayerDeckB.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          resetPlayerDeckB.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else {
          // ★ 2026-10-14：cartoon 空牌堆 = 城堡门楼关门态（悬停开门）；其他风格原样
          if (selectedCardFaceStyle === 'cartoon') {
            resetPlayerDeckB.className = 'pb-gate-deck deck-container game-cursor-hover pb-gate-empty';
            resetPlayerDeckB.innerHTML = buildCartoonGateDeckHTML('p', null);
          } else {
            resetPlayerDeckB.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
            resetPlayerDeckB.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
          }
          resetPlayerDeckB.removeAttribute('style');
        }
        GameElements.player.deckCount = document.getElementById('player-deck-count');
      }
      if (resetOpponentDeckB) {
        if (selectedCardFaceStyle === 'glass') {
          resetOpponentDeckB.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetOpponentDeckB.style.border = '4px solid rgba(255,240,240,0.95)';
          resetOpponentDeckB.style.borderRadius = '12px';
          resetOpponentDeckB.style.boxShadow = '0 0 2px rgba(255,200,200,0.9), 0 0 6px rgba(255,160,160,0.6), 0 0 50px rgba(255,150,150,0.6), inset 0 4px 10px rgba(140,20,20,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(140,20,20,0.6), inset -3px 0 8px rgba(140,20,20,0.6)';
          resetOpponentDeckB.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (selectedCardFaceStyle === 'metal') {
          resetOpponentDeckB.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetOpponentDeckB.style.border = '3px solid #888888';
          resetOpponentDeckB.style.borderRadius = '8px';
          resetOpponentDeckB.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          resetOpponentDeckB.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else {
          // ★ 2026-10-14：cartoon 空牌堆 = 城堡门楼关门态（悬停开门）；其他风格原样
          if (selectedCardFaceStyle === 'cartoon') {
            resetOpponentDeckB.className = 'pb-gate-deck deck-container game-cursor-hover no-hover-anim pb-gate-empty';
            resetOpponentDeckB.innerHTML = buildCartoonGateDeckHTML('o', null);
          } else {
            resetOpponentDeckB.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
            resetOpponentDeckB.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
          }
          resetOpponentDeckB.removeAttribute('style');
        }
        GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
      }
      console.log('[flyToAvatarAndReturn] ✅ 已回主页，按钮已重置为投降');

    }

    // ----------------------------------------------------------------------------
    // 【士气值系统】（原"能量槽"，2026-9-25 正式改名）
    // ----------------------------------------------------------------------------
    // 规则:
    //   - 每 100 分 = 1 格, 最多 18 格/方
    //   - 己方(蓝色): 从底部向顶部填充
    //   - 对方(红色): 从顶部向底部填充
    //   - 每回合结束（放置完成+拼点重算后）：双方各自累加"当前总得分"（滚雪球）
    //   - 每局从 0 开始（不再跨局 localStorage 累计）
    //   - 悬停面板 → 已填充单元闪烁增强（长按消耗功能已删除）
    // ----------------------------------------------------------------------------

    const ENERGY_SLOT_MAX = 18;
    const ENERGY_PER_SLOT = 100;
    const ENERGY_TOTAL_MAX = ENERGY_SLOT_MAX * ENERGY_PER_SLOT; // 1800

    // 士气值状态: 累计传播分数（总点数，0~1800）
    // 渲染规则：每100分点亮一格，剩余分数 (points % 100) 作为下一格的透明度
    let EnergyState = {
      playerPoints: 0,    // 己方蓝槽累计分数
      opponentPoints: 0     // 对方红槽累计分数
    };

    // 计算已填充格数和当前部分填充值
    function getEnergyStats(points) {
      return {
        fullSlots: Math.floor(points / ENERGY_PER_SLOT),
        partialPct: points % ENERGY_PER_SLOT
      };
    }

    // 充能动画锁 (避免重复触发；动画期间新触发的回合只刷新数值不叠加动画)
    let energyPropagationActive = false;

    // 更新累计分数显示标签
    function renderEnergyScoreLabels() {
      const playerLabel = document.getElementById('player-energy-score');
      const opponentLabel = document.getElementById('opponent-energy-score');
      if (playerLabel) playerLabel.textContent = String(EnergyState.playerPoints);
      if (opponentLabel) opponentLabel.textContent = String(EnergyState.opponentPoints);
    }

    // 渲染能量槽 (按当前 EnergyState 更新 DOM 样式)
    function renderEnergySlots() {
      const playerStats = getEnergyStats(EnergyState.playerPoints);
      const opponentStats = getEnergyStats(EnergyState.opponentPoints);

      // 蓝色己方: 从底向上填充；第 (16-playerStats.fullSlots) 个之后的格子全亮
      //   若有 partialPct > 0，则紧接的下一个为部分填充
      //   blue index 范围：从底向上 = 15, 14, ..., (16 - full)
      //   partial slot index = 16 - full - 1（紧邻的那个）
      for (let i = 0; i < ENERGY_SLOT_MAX; i++) {
        const el = document.getElementById('energy-blue-' + i);
        if (!el) continue;

        // 从底部算：i=15 是最底部，i=16-playerStats.fullSlots 是刚好填满的最后一个
        const filledFromBottom = ENERGY_SLOT_MAX - playerStats.fullSlots;

        if (i >= filledFromBottom) {
          // 已填满格子
          el.classList.add('filled');
          el.classList.remove('partial');
          el.style.removeProperty('--fill-pct');
        } else if (i === filledFromBottom - 1 && playerStats.partialPct > 0) {
          // 紧邻的部分填充格
          el.classList.add('filled');
          el.classList.add('partial');
          el.style.setProperty('--fill-pct', String(playerStats.partialPct));
        } else {
          el.classList.remove('filled');
          el.classList.remove('partial');
          el.style.removeProperty('--fill-pct');
        }
      }

      // 红色对方: 从顶向下填充；0, 1, ..., (fullSlots-1) 为满
      //   partial slot index = fullSlots（若 partialPct > 0）
      for (let i = 0; i < ENERGY_SLOT_MAX; i++) {
        const el = document.getElementById('energy-red-' + i);
        if (!el) continue;

        if (i < opponentStats.fullSlots) {
          el.classList.add('filled');
          el.classList.remove('partial');
          el.style.removeProperty('--fill-pct');
        } else if (i === opponentStats.fullSlots && opponentStats.partialPct > 0) {
          el.classList.add('filled');
          el.classList.add('partial');
          el.style.setProperty('--fill-pct', String(opponentStats.partialPct));
        } else {
          el.classList.remove('filled');
          el.classList.remove('partial');
          el.style.removeProperty('--fill-pct');
        }
      }

      renderEnergyScoreLabels();
    }

    // 获取元素相对 viewport 的中心坐标
    function getElementCenter(el) {
      if (!el) return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
      const r = el.getBoundingClientRect();
      return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
    }

    // 发射一个电磁波粒子: from(source) → to(targetSlot)
    // fillPct: 1-100 (100=完全填充, <100=部分填充)
    // 动画时序: 源先闪烁(200ms) → 然后电磁波飞向目标 → 到达后点亮
    function launchEnergyWave(color, sourceId, targetSlotId, delayMs, fillPct) {
      if (fillPct === undefined || fillPct === null) fillPct = 100;

      // 延迟发射（支持多个波次依次发射）
      setTimeout(function () {
        // ★ 中断守卫：如果已被 cleanupOnlineGameShared 标记停止，直接退出
        if (!energyPropagationActive) return;

        const source = document.getElementById(sourceId);
        const target = document.getElementById(targetSlotId);
        if (!source || !target) return;

        const start = getElementCenter(source);
        const end = getElementCenter(target);

        // --- 阶段 1: 源先闪烁（透明度先回到100%，再将能量发出） ---
        source.classList.add('energy-pulse', color);
        // 两次闪烁动画（0.9s × 2 = 1.8s），结束后移除
        setTimeout(function () {
          // ★ 中断守卫
          if (!energyPropagationActive) { source.classList.remove('energy-pulse', color); return; }
          source.classList.remove('energy-pulse', color);
        }, 1800);

        // --- 阶段 2: 闪烁之后发射电磁波 ---
        const waveStartDelay = 360;  // 第一次闪烁的最高峰附近发射（让视觉上"一闪即发"）

        setTimeout(function () {
          // ★ 中断守卫
          if (!energyPropagationActive) return;

          // ★ 2026-9-30 缩放适配（壳+核结构）：
          //   zoom 只缩放元素自身盒子、不缩放 left/top 定位值——此前"坐标÷scale + zoom"组合
          //   会把位置放大 1/scale（电脑微偏、手机直接飞出屏）。
          //   改为：壳(fixed, left/top=0) 全靠 transform 做定位+缩放（transform px 值无歧义），
          //         核(.energy-wave) 只负责视觉，left/top=-7px 使其中心对准壳原点。
          const _ws = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;

          const wave = document.createElement('div');
          wave.style.position = 'fixed';
          wave.style.left = '0';
          wave.style.top = '0';
          wave.style.zIndex = '9999';
          wave.style.pointerEvents = 'none';
          wave.style.transformOrigin = '0 0';
          wave.style.willChange = 'transform';

          const waveCore = document.createElement('div');
          waveCore.className = 'energy-wave ' + color;
          waveCore.style.left = '-7px';
          waveCore.style.top = '-7px';
          wave.appendChild(waveCore);
          document.body.appendChild(wave);

          // 计算参数
          const dx = end.x - start.x;
          const dy = end.y - start.y;
          const duration = 1300; // ms - 飞行时间
          let startTime = null;
          let _stopped = false;  // ★ rAF 中断守卫

          // 飞行动画 (使用 requestAnimationFrame)
          function fly(now) {
            // ★ rAF 每帧也检查中断
            if (!energyPropagationActive || _stopped) { _stopped = true; try { wave.remove(); } catch(e){} return; }

            if (!startTime) startTime = now;
            const elapsed = now - startTime;
            const t = Math.min(elapsed / duration, 1);

            // easeInOutCubic - 中间加速, 两端减速
            const ease = t < 0.5
              ? 4 * t * t * t
              : 1 - Math.pow(-2 * t + 2, 3) / 2;

            // 路径: 直线 + 轻微正弦上下波动 (增加"波"感)
            const waveOffset = Math.sin(t * Math.PI * 3) * 8;

            const x = start.x + dx * ease;
            const y = start.y + dy * ease + waveOffset;

            wave.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + _ws + ')';
            waveCore.style.opacity = String(0.3 + 0.7 * (1 - Math.abs(t - 0.5) * 2 + 0.3));

            if (t < 1) {
              requestAnimationFrame(fly);
            } else {
              // --- 阶段 3: 到达 - 移除粒子 + 爆闪 + 点亮目标槽 ---
              wave.remove();

              // 爆闪（壳+核结构，同波粒子：壳 transform 定位+缩放，核只管视觉，2026-9-30）
              const flash = document.createElement('div');
              flash.style.position = 'fixed';
              flash.style.left = '0';
              flash.style.top = '0';
              flash.style.zIndex = '9998';
              flash.style.pointerEvents = 'none';
              flash.style.transformOrigin = '0 0';
              flash.style.transform = 'translate(' + end.x + 'px, ' + end.y + 'px) scale(' + _ws + ')';
              const flashCore = document.createElement('div');
              flashCore.className = 'energy-arrive-flash ' + color;
              flashCore.style.left = '-40px';
              flashCore.style.top = '-40px';
              flash.appendChild(flashCore);
              document.body.appendChild(flash);
              setTimeout(function () { try { flash.remove(); } catch(e){} }, 1000);

              // 点亮能量槽
              target.classList.add('filling', 'filled');
              if (fillPct < 100) {
                target.classList.add('partial');
                target.style.setProperty('--fill-pct', String(fillPct));
              } else {
                target.classList.remove('partial');
                target.style.removeProperty('--fill-pct');
              }
              setTimeout(function () {
                if (!energyPropagationActive) return;  // ★ 中断守卫
                if (target) target.classList.remove('filling');
              }, 1200);
            }
          }

          // 粒子出发
          waveCore.style.opacity = '1';
          requestAnimationFrame(fly);
        }, waveStartDelay);
      }, delayMs);
    }

    // ★ 2026-9-25 士气值波次构建：对增量进行分拆（每100一波，最后不足100的单独一波部分填充）
    //   isOpponent=false 己方从底向上填充；true 对方从顶向下填充（与槽渲染方向一致）
    function buildMoraleWaves(oldPoints, newPoints, isOpponent) {
      const waves = [];
      let remaining = newPoints - oldPoints;
      let cursor = oldPoints;

      // 根据"当前分数光标 cursor"计算目标 slotIndex 和填充百分比
      function computeSlotIndex(cursor) {
        const fullAtCursor = Math.floor(cursor / ENERGY_PER_SLOT);
        if (cursor % ENERGY_PER_SLOT === 0 && fullAtCursor > 0) {
          if (isOpponent) return fullAtCursor - 1;
          return ENERGY_SLOT_MAX - fullAtCursor;
        }
        if (isOpponent) return fullAtCursor;
        return ENERGY_SLOT_MAX - fullAtCursor - 1;
      }
      function computePct(cursor) {
        const mod = cursor % ENERGY_PER_SLOT;
        return mod === 0 ? 100 : mod;
      }

      // 处理第一波：先对齐到下一个 100 的边界（若 oldPoints 不是 100 的倍数）
      const oldOffset = oldPoints % ENERGY_PER_SLOT;
      if (oldOffset > 0) {
        const toComplete = Math.min(ENERGY_PER_SLOT - oldOffset, remaining);
        if (toComplete <= 0) return waves;
        cursor += toComplete;
        remaining -= toComplete;
        const slotIndex = computeSlotIndex(cursor);
        const pct = computePct(cursor);
        if (slotIndex >= 0 && slotIndex < ENERGY_SLOT_MAX) {
          waves.push({ slotIndex, fillPct: pct });
        }
      }

      // 剩余部分按 100 分 / 格 填充（最后不足 100 的保留部分填充）
      while (remaining > 0) {
        const wavePoints = Math.min(ENERGY_PER_SLOT, remaining);
        cursor += wavePoints;
        remaining -= wavePoints;
        const slotIndex = computeSlotIndex(cursor);
        const pct = computePct(cursor);
        if (slotIndex >= 0 && slotIndex < ENERGY_SLOT_MAX) {
          waves.push({ slotIndex, fillPct: pct });
        }
      }

      return waves;
    }

    // ★ 2026-9-25 士气值：每回合结束（finalizePlacement 拼点重算后）调用——
    //   双方各自把"当前总得分"累加进士气值（滚雪球：回合数越多单次涨幅越大），每局从0开始
    //   - 得分为 0 的一方不播放传播动画
    //   - 上一次传播动画未播完时：数值照常累加+渲染刷新，仅跳过本轮动画（不丢数值、不叠加动画）
    function propagateMoraleAfterTurn() {
      // ★ 2026-9-25 教程模式禁用：不累加、不播动画
      if (isTutorialMode) return;

      // 1. 双方累加当前总得分
      const pScore = calculatePlayerScore('player');
      const oScore = calculatePlayerScore('opponent');
      let pAdd = (pScore && pScore.totalScore > 0) ? pScore.totalScore : 0;
      let oAdd = (oScore && oScore.totalScore > 0) ? oScore.totalScore : 0;
      // ★ 2026-9-25 FIX：任意一方终止出牌后，其士气值不再增加（未终止方继续增长）
      //   四人模式按阵营映射：蓝方停=sub1/sub3 两个玩家都停；红方停=sub0/sub2 两个 AI 都停
      let _pStopped, _oStopped;
      if (GameState.fourPlayerActive) {
        _pStopped = !!(GameState.fourPlayerPlayerStopped && GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1]);
        _oStopped = !!(GameState.fourPlayerAIStopped && GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1]);
      } else {
        _pStopped = !!GameState.playerStoppedPlaying;
        _oStopped = !!GameState.opponentStoppedPlaying;
      }
      if (_pStopped) pAdd = 0;
      if (_oStopped) oAdd = 0;
      if (pAdd <= 0 && oAdd <= 0) return;

      const newPlayerPoints = Math.min(ENERGY_TOTAL_MAX, EnergyState.playerPoints + pAdd);
      const newOpponentPoints = Math.min(ENERGY_TOTAL_MAX, EnergyState.opponentPoints + oAdd);
      const deltaPlayer = newPlayerPoints - EnergyState.playerPoints;
      const deltaOpponent = newOpponentPoints - EnergyState.opponentPoints;
      if (deltaPlayer <= 0 && deltaOpponent <= 0) return;

      // 2. 更新数值（不再持久化 localStorage：每局从0开始）
      EnergyState.playerPoints = newPlayerPoints;
      EnergyState.opponentPoints = newOpponentPoints;
      renderEnergyScoreLabels();

      // 3. 动画锁：上次传播未结束 → 只刷新渲染，跳过本轮波次
      if (energyPropagationActive) {
        renderEnergySlots();
        return;
      }
      energyPropagationActive = true;

      // 4. 发射电磁波（每格间隔 440ms；得分为0的一方没有波次）
      const playerWaves = deltaPlayer > 0
        ? buildMoraleWaves(newPlayerPoints - deltaPlayer, newPlayerPoints, false)
        : [];
      const opponentWaves = deltaOpponent > 0
        ? buildMoraleWaves(newOpponentPoints - deltaOpponent, newOpponentPoints, true)
        : [];

      const waveInterval = 440;
      const pMax = playerWaves.length;
      const oMax = opponentWaves.length;
      const totalSteps = Math.max(pMax, oMax);

      for (let i = 0; i < totalSteps; i++) {
        if (i < pMax) {
          launchEnergyWave('blue', 'player-total-score',
            'energy-blue-' + playerWaves[i].slotIndex,
            i * waveInterval,
            playerWaves[i].fillPct);
        }
        if (i < oMax) {
          launchEnergyWave('red', 'opponent-total-score',
            'energy-red-' + opponentWaves[i].slotIndex,
            i * waveInterval,
            opponentWaves[i].fillPct);
        }
      }

      // 5. 所有动画完成后解除锁（预留时间: 源闪烁360ms + 飞行1300ms + 余量）
      const totalDuration = totalSteps * waveInterval + 2200;
      setTimeout(function () {
        // ★ 中断守卫
        if (!energyPropagationActive) {
          try { renderEnergySlots(); } catch(e){}
          return;
        }
        energyPropagationActive = false;
        renderEnergySlots();
      }, totalDuration);
    }

    // ★ 2026-9-25 士气值面板显隐：教程模式禁用（隐藏），退出教程/回主页恢复
    function setMoralePanelVisible(visible) {
      const _cp = document.getElementById('card-counter-panel');
      if (_cp) _cp.style.display = visible ? '' : 'none';
    }

    // 绑定鼠标交互：悬停提示（跟随鼠标位置）——长按消耗功能已删除（2026-9-25）
    // - 提示条 #panel-tooltip 放在 panel 前，position: fixed，脱离 panel 的 transform
    // - e.clientX / e.clientY 就是视口坐标，可直接写入 left/top
    // - 提示规则：悬停时显示；显示 2 秒后自动消失；必须离开能量槽再重新悬停才会再次显示
    function initEnergySlotInteraction() {
      const panel = document.getElementById('card-counter-panel');
      const tip = document.getElementById('panel-tooltip');
      if (!panel || !tip) return;

      // ★ 2026-9-25 FIX：tip 必须挂到 body 直下——它在 .game-container（transform: scale 缩放容器）内时，
      //   position:fixed 的 left/top 会被 transform 矩阵扭曲，导致提示条跑位不在悬停处
      if (tip.parentElement !== document.body) {
        document.body.appendChild(tip);
      }

      const OFFSET_X = 16;   // 提示条左边 距离 鼠标右边的间距
      const OFFSET_Y = -12;  // 提示条上边 距离 鼠标中心的垂直偏移（负值=向上飘一点）
      const PAD = 6;
      const SHOW_MS = 2000;  // 显示时长 2 秒

      let hideTimer = null;      // 2 秒后自动隐藏的定时器
      let autoHidden = false;    // 是否是"2 秒后自动隐藏"的？（true 时 mouseenter 不再立即显示）

      function updateTipPosition(e) {
        const tipW = tip.offsetWidth || 360;
        const tipH = tip.offsetHeight || 32;
        const vw = window.innerWidth;
        const vh = window.innerHeight;

        // ★ 2026-9-25 FIX：水平位置锚定面板自身（不再用鼠标 x——缩放环境下 clientX 会让提示跑位），
        //   垂直仍跟随鼠标行：提示条永远贴在悬停的面板旁边
        const rect = panel.getBoundingClientRect();
        let left = rect.right + OFFSET_X;
        let top = e.clientY + OFFSET_Y;

        // 防止超出视口右边/下边
        if (left + tipW > vw - PAD) left = rect.left - OFFSET_X - tipW;  // 右边放不下就放面板左边
        if (top + tipH > vh - PAD) top = vh - PAD - tipH;
        if (left < PAD) left = PAD;
        if (top < PAD) top = PAD;

        tip.style.left = Math.round(left) + 'px';
        tip.style.top = Math.round(top) + 'px';
      }

      function showTip(e) {
        if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
        tip.classList.add('is-hover');
        updateTipPosition(e);
        // 2 秒后自动隐藏，并标记为"自动隐藏"——必须离开 panel 再重新悬停才会再显示
        hideTimer = setTimeout(function () {
          tip.classList.remove('is-hover');
          autoHidden = true;
          hideTimer = null;
        }, SHOW_MS);
      }

      function hideTip() {
        if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
        tip.classList.remove('is-hover');
        // 鼠标离开后：重置"自动隐藏"标记，允许下次重新悬停时再显示
        autoHidden = false;
      }

      // 鼠标进入 panel：只有当不是"刚被 2 秒自动隐藏"后的状态时才显示
      panel.addEventListener('mouseenter', function (e) {
        if (autoHidden) return;
        showTip(e);
      });

      // 鼠标移动：仅在提示处于显示状态时跟随更新坐标（避免仍有定时器时反复触发）
      panel.addEventListener('mousemove', function (e) {
        if (tip.classList.contains('is-hover')) {
          updateTipPosition(e);
        }
      });

      // 鼠标离开 panel：隐藏 + 重置"自动隐藏"标记，允许下次重新悬停再显示
      panel.addEventListener('mouseleave', hideTip);
    }

    // ----------------------------------------------------------------------------
    // 【通用卡牌操作】
    // ----------------------------------------------------------------------------
    // getAllCards: 获取指定玩家的所有卡牌(场牌+叠牌+中立区归属牌)
    // 中立区归属规则：
    //   - 我方牌数 > 对方牌数：整路双方所有中立牌归我方
    //   - 对方牌数 > 我方牌数：整路双方所有中立牌归对方
    //   - 双方牌数相等：该路为"中立"，谁的牌都不计入
    // 参数: playerType - 'player'(我方) / 'opponent'(对方)
    // 返回: 所有非空卡牌的数组(含归属的中立牌)
    // ----------------------------------------------------------------------------
    // 【打出状态过滤】打出未放置的卡牌不参与牌型栏/积分栏统计（用户规则）
    //   规则：打出的功能牌算作放置；触发叫牌/匹配时，只有取消/执行匹配后才算作放置。
    //   打出状态期间：不参与牌型显示、不参与"场上多少张牌"、不参与积分栏统计。
    //   定位：lastPlayedCard 为最近打出的牌（回合制下同一时刻至多一张打出未放置，
    //   该牌放置完成 finalizePlacement 后才结束回合），结合卡牌仍在该方路牌区判断归属。
    // 返回: 处于"打出未放置"状态的卡牌 id；无则返回 null
    function getPendingPlayCardExcludeId(playerType) {
      const lpc = GameState.lastPlayedCard;
      if (!lpc || !lpc.card || lpc.index === null || lpc.index === undefined || lpc.index < 0 || lpc.index > 4) return null;
      const field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
      const stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;
      const ri = lpc.index;
      // 卡牌必须仍在该方路牌区（打出时先落到路牌区，放置后才可能被匹配移入中立区）
      const lastOnRoad = (stack[ri] && stack[ri].length > 0) ? stack[ri][stack[ri].length - 1] : field[ri];
      if (!lastOnRoad || lastOnRoad.id !== lpc.card.id) return null;

      let isPending = false;
      if (playerType === 'player') {
        // 本方打出状态（覆盖：叫牌中 / 匹配光环中 / 已打出未放置）
        if (GameState.localCardPlayPending === true && GameState.localCardPlayRoadIndex === ri) isPending = true;
        // 人机2v1模式：队长同步的队友打出状态
        if (!isPending && typeof GameState.teammatePendingCardRoadIndex === 'number' && GameState.teammatePendingCardRoadIndex === ri) isPending = true;
      } else {
        // 对方（AI/远程对手）匹配光环/动画期间：打出未放置
        if (GameState.localMatchInProgress === true) isPending = true;
      }
      if (isPending) return lpc.card.id;

      // 联机叫牌中的那张卡（1v1对方 / 2v2队友或对方）：按 cardId+roadIndex 精确定位
      if (typeof PBOnline !== 'undefined' && PBOnline && (PBOnline.isOnline || PBOnline.isPractice2v2Mode) && PBOnline.getOpponentCallCardState) {
        const _rcs = PBOnline.getOpponentCallCardState();
        if (_rcs && _rcs.pending && _rcs.data && _rcs.data.cardId !== null && _rcs.data.cardId !== undefined &&
            _rcs.data.roadIndex >= 0 && _rcs.data.roadIndex <= 4) {
          const _ri = _rcs.data.roadIndex;
          const _last = (stack[_ri] && stack[_ri].length > 0) ? stack[_ri][stack[_ri].length - 1] : field[_ri];
          if (_last && _last.id === _rcs.data.cardId) return _rcs.data.cardId;
        }
      }
      return null;
    }

    function getAllCards(playerType) {
      const field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
      const stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;
      // ★ 打出状态过滤：打出未放置的卡牌不计入场牌+叠牌统计（只有放置状态才显示）
      const excludeId = getPendingPlayCardExcludeId(playerType);
      const allCards = [];
      // 1. 收集体场牌和叠牌
      field.forEach(card => { if (card && card.id !== excludeId) allCards.push(card); });
      stack.forEach(roadStack => roadStack.forEach(card => { if (card && card.id !== excludeId) allCards.push(card); }));
      // 2. 收集中立区归属牌
      const myNeutral = playerType === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      const oppNeutral = playerType === 'player' ? GameState.opponentNeutralCards : GameState.playerNeutralCards;
      for (let i = 0; i < 7; i++) {
        const myCount = (myNeutral[i] || []).length;
        const oppCount = (oppNeutral[i] || []).length;
        if (myCount > oppCount) {
          // 我占优：整路双方所有中立牌归我
          // ★ 2026-9-18 FIX：判空（null 混入 allCards 会让 identifyCardType 的 card.value 崩溃断链）
          myNeutral[i].forEach(card => { if (card) allCards.push(card); });
          oppNeutral[i].forEach(card => { if (card) allCards.push(card); });
        }
        // oppCount > myCount：对方占优，不计入我
        // myCount === oppCount：双方相等，该路中立，谁都不计入
      }
      return allCards;
    }

    // getPlayerAllCards: (保留兼容) 获取我方所有路的卡牌
    function getPlayerAllCards() { return getAllCards('player'); }

    // getOpponentAllCards: (保留兼容) 获取对方所有路的卡牌
    function getOpponentAllCards() { return getAllCards('opponent'); }

    // getMaxValue: 获取指定玩家某一路的最大牌点
    // ============================================================================
    // 【拼点系统 · 重新设计】核心取值函数
    // 规则：每路比较双方的最大牌点（场牌和叠牌中的最大值）
    //       点数大的一方赢得该路，点数相等时为平局
    // ============================================================================

    /**
     * 获取某玩家某一路的最大牌点值
     * 纯函数：无副作用，不修改任何状态
     * 计算范围：场牌(field[roadIndex]) + 所有叠牌(stack[roadIndex])
     *
     * @param {string} playerType - 'player' | 'opponent'
     * @param {number} roadIndex - 路索引 0-4
     * @returns {number} 最大牌点值（无牌时返回 0）
     */
    function getMaxValue(playerType, roadIndex) {
      var field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
      var stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;
      var maxVal = 0;

      // 场牌（field）
      var fieldCard = field[roadIndex];
      if (fieldCard && fieldCard.value > maxVal) {
        maxVal = fieldCard.value;
      }

      // 叠牌（stack）——所有叠牌中的最大值
      var stackCards = stack[roadIndex];
      if (stackCards && stackCards.length > 0) {
        for (var i = 0; i < stackCards.length; i++) {
          var c = stackCards[i];
          if (c && c.value > maxVal) {
            maxVal = c.value;
          }
        }
      }

      return maxVal;
    }

    // 兼容别名
    function getPlayerMaxValue(roadIndex) { return getMaxValue('player', roadIndex); }
    function getOpponentMaxValue(roadIndex) { return getMaxValue('opponent', roadIndex); }

    // updateDeckCount: 更新牌堆剩余数量显示
    function updateDeckCount(playerType) {
      const deckCountEl = playerType === 'player'
        ? GameElements.player.deckCount
        : GameElements.opponent.deckCount;
      if (deckCountEl) {
        const deck = playerType === 'player' ? GameState.playerDeck : GameState.opponentDeck;
        deckCountEl.textContent = deck.length;
      }
    }

    // updatePlayerDeck: (保留兼容) 更新我方牌堆数量
    function updatePlayerDeck() { updateDeckCount('player'); }

    // updateOpponentDeck: (保留兼容) 更新对方牌堆数量
    function updateOpponentDeck() { updateDeckCount('opponent'); }
    
    // ============================================================================
    // 【牌型识别 · identifyCardType】分析卡牌找出最高级别牌型
    // ============================================================================
    //
    // 算法特点: 基于点数出现次数直接检测，不依赖组合枚举
    //           （避免大数量卡牌时的遗漏与截断）
    //
    // 牌型等级（从高到低）:
    //   L12 花牌3条顺   11-12-13 每个点数各 3 张（JJJ-QQQ-KKK）
    //   L11 3条顺         3个连续点数各 3 张
    //   L10 邻三条         相邻的 2 个点数各 3 张
    //   L9  四条           4 张同点数
    //   L8  5连对          5个连续点数各 2 张
    //   L7  对3条         2个不相邻的点数各 3 张
    //   L6  3连对          3个连续点数各 2 张
    //   L5  三条           3 张同点数
    //   L4  5连顺          5个连续点数各 1 张
    //   L3  3连顺          3个连续点数各 1 张
    //   L2  对子           2 张同点数
    //   L1  单张           最大点数的那张
    //
    // 返回: { type, level, description, maxValue }
    // 用途: 积分栏高亮、牌型展示、胜负评估与分差计算
    // ============================================================================
    function identifyCardType(cards) {
      if (!cards || cards.length === 0) return { type: 'none', level: 0, description: '无牌', maxValue: 0 };

      // 计算每个点数的出现次数
      // ★ 2026-9-18 FIX：跳过 null（四人机制 null 占位混入时不再 TypeError 断链）
      const valueCounts = {};
      cards.forEach(card => {
        if (!card) return;
        const v = card.value;
        valueCounts[v] = (valueCounts[v] || 0) + 1;
      });

      // 提取唯一点数，升序排列
      const values = Object.keys(valueCounts).map(v => parseInt(v)).sort((a, b) => a - b);
      if (values.length === 0) return { type: 'none', level: 0, description: '无牌', maxValue: 0 };
      const globalMax = Math.max(...values);

      // 在 countMap 上检查连续区间
      // findBestSequence(countPerValue, neededLengthEach, totalPointsNeeded):
      //   找出"连续 totalPointsNeeded 个点数"中，每个点数 >= neededLengthEach 的连续区间
      //   返回最大高位点数的起始值
      function findBestContinuous(neededPerValue, totalPoints) {
        // 尝试从高到低的起点
        for (let startIdx = values.length - totalPoints; startIdx >= 0; startIdx--) {
          let ok = true;
          for (let k = 0; k < totalPoints; k++) {
            const v = values[startIdx + k];
            if (valueCounts[v] < neededPerValue) { ok = false; break; }
            if (k > 0 && values[startIdx + k] !== values[startIdx] + k) { ok = false; break; }
          }
          if (ok) return values[startIdx];
        }
        return -1;
      }

      // ========== L12: 花牌3条顺（JJJ-QQQ-KKK，点数11-12-13各有3张）==========
      // 先检查是否构成普通3条顺，且起始点数是11（即11-12-13）
      let s = findBestContinuous(3, 3);
      if (s !== -1 && s === 11) {
        return { type: 'flowerTripleStraight', level: 12, maxValue: 13, description: `花牌3条顺 J-Q-K`, keyPointValues: [11, 12, 13] };
      }

      // ========== L11: 3条顺（连续3个点数，每个至少3张）==========
      // 普通3条顺（不是11-12-13的）
      if (s !== -1 && s !== 11) {
        return { type: 'tripleStraight', level: 11, maxValue: s + 2, description: `3条顺 ${s}-${s + 1}-${s + 2}`, keyPointValues: [s, s + 1, s + 2] };
      }

      // ========== L10: 邻三条（相邻的2个点数各3张）==========
      // 检测：是否存在两个相邻的点数，各有至少3张
      let bestAdjacent = -1;
      for (let i = values.length - 1; i > 0; i--) {
        const v1 = values[i];
        const v0 = values[i - 1];
        if (valueCounts[v1] >= 3 && valueCounts[v0] >= 3 && v1 - v0 === 1) {
          bestAdjacent = v1;  // 记录较高的点数
          break;
        }
      }
      if (bestAdjacent !== -1) {
        return { type: 'adjacentTriples', level: 10, maxValue: bestAdjacent, description: `邻三条 ${bestAdjacent - 1} ${bestAdjacent}`, keyPointValues: [bestAdjacent - 1, bestAdjacent] };
      }

      // ========== L9: 四条（同点数4张）==========
      let bestFour = -1;
      for (let i = values.length - 1; i >= 0; i--) {
        if (valueCounts[values[i]] >= 4) { bestFour = values[i]; break; }
      }
      if (bestFour !== -1) return { type: 'fourOfAKind', level: 9, maxValue: bestFour, description: `四条 ${bestFour}`, keyPointValues: [bestFour] };

      // ========== L8: 5连对（连续5个点数，每个至少2张）==========
      s = findBestContinuous(2, 5);
      if (s !== -1) {
        return { type: 'fivePairStraight', level: 8, maxValue: s + 4, description: `5连对 ${s}-${s + 1}-${s + 2}-${s + 3}-${s + 4}`, keyPointValues: [s, s + 1, s + 2, s + 3, s + 4] };
      }

      // ========== L7: 对3条（两个不同点数各3张，点数不相邻）==========
      const threeList = values.filter(v => valueCounts[v] >= 3).sort((a, b) => b - a);
      if (threeList.length >= 2) {
        // 找出点数不相邻的两个三条（取最大的符合条件的组合）
        let found = null;
        for (let i = 0; i < threeList.length - 1; i++) {
          for (let j = i + 1; j < threeList.length; j++) {
            if (Math.abs(threeList[i] - threeList[j]) !== 1) {
              found = [threeList[i], threeList[j]];
              break;
            }
          }
          if (found) break;
        }
        if (found) {
          return { type: 'twoTriples', level: 7, maxValue: found[0], description: `对3条 ${found[0]} ${found[1]}`, keyPointValues: [found[0], found[1]] };
        }
      }

      // ========== L6: 3连对（连续3个点数，每个至少2张）==========
      s = findBestContinuous(2, 3);
      if (s !== -1) {
        return { type: 'threePairStraight', level: 6, maxValue: s + 2, description: `3连对 ${s}-${s + 1}-${s + 2}`, keyPointValues: [s, s + 1, s + 2] };
      }

      // ========== L5: 三条（同点数3张）==========
      if (threeList.length >= 1) {
        return { type: 'threeOfAKind', level: 5, maxValue: threeList[0], description: `三条 ${threeList[0]}`, keyPointValues: [threeList[0]] };
      }

      // ========== L4: 5连顺（连续5个不同点数，每个至少1张）==========
      s = findBestContinuous(1, 5);
      if (s !== -1) {
        return { type: 'fiveStraight', level: 4, maxValue: s + 4, description: `5连顺 ${s}-${s + 1}-${s + 2}-${s + 3}-${s + 4}`, keyPointValues: [s, s + 1, s + 2, s + 3, s + 4] };
      }

      // ========== L3: 3连顺（连续3个不同点数，每个至少1张）==========
      s = findBestContinuous(1, 3);
      if (s !== -1) {
        return { type: 'threeStraight', level: 3, maxValue: s + 2, description: `3连顺 ${s}-${s + 1}-${s + 2}`, keyPointValues: [s, s + 1, s + 2] };
      }

      // ========== L2: 对子（同点数2张）==========
      let bestPair = -1;
      for (let i = values.length - 1; i >= 0; i--) {
        if (valueCounts[values[i]] >= 2) { bestPair = values[i]; break; }
      }
      if (bestPair !== -1) return { type: 'pair', level: 2, maxValue: bestPair, description: `对子 ${bestPair}`, keyPointValues: [bestPair] };

      // ========== L1: 单张（最大点数）==========
      return { type: 'single', level: 1, maxValue: globalMax, description: `单张 ${globalMax}`, keyPointValues: [globalMax] };
    }

    // ============================================================================
    // ★ 2026-9-22 最大牌型悬停互动（用户需求）：
    //   updateGloryCards —— 给"双方各自场上（路牌区+中立区归属）最大牌型"涉及的卡牌
    //   打 .glory-card 标记（悬停光泽扫过+3D倾斜的 CSS 挂在 .glory-card 上）。
    //   规则：牌型构成点数集合（keyPointValues）内的【所有同点数场上牌】都算——
    //   例：最大牌型 3连顺 3-4-5 且场上有两张 4，则 3、4、4、5 四张全部标记。
    //   调用时机：updateCardTypeDisplay（每次 updateUI 尾部，复用其牌型计算）+
    //            updateFieldDisplay 尾部兜底（无参时自算）。幂等：先清后标。
    // ============================================================================
    function updateGloryCards(pCards, pType, oCards, oType) {
      try {
        if (pCards === undefined) { pCards = getPlayerAllCards(); pType = identifyCardType(pCards); }
        if (oCards === undefined) { oCards = getOpponentAllCards(); oType = identifyCardType(oCards); }
        // 1. 清除旧标记（幂等）
        document.querySelectorAll('.glory-card').forEach(function (el) { el.classList.remove('glory-card'); });
        // 2. 建 id→元素映射（一次全表扫描，避免逐卡 querySelector）
        const idMap = new Map();
        document.querySelectorAll('.card[data-card-id], .card-small[data-card-id]').forEach(function (el) {
          idMap.set(el.getAttribute('data-card-id'), el);
        });
        if (idMap.size === 0) return;
        // 3. 双方各自标记：点数 ∈ 该方最大牌型构成集合 的所有场上牌
        //    ★ 打标时保证宿主有定位上下文（伪元素 absolute;inset:0 依赖）：
        //      classic 中立区非皇家卡是内联 static → 设内联 relative。
        //      用内联而非 CSS 类规则：撞牌/援牌动画会内联写 position:absolute（后写覆盖），
        //      CSS 规则（即使 !important）会反向劫持动画 → 卡牌无法飞行、画面偏移定住。
        [[pCards, pType], [oCards, oType]].forEach(function (pair) {
          const cards = pair[0], t = pair[1];
          if (!cards || cards.length === 0 || !t || !Array.isArray(t.keyPointValues)) return;
          const keys = new Set(t.keyPointValues);
          cards.forEach(function (card) {
            if (!card || typeof card.value !== 'number') return;
            if (!keys.has(card.value)) return;
            const el = idMap.get(String(card.id));
            if (el) {
              el.classList.add('glory-card');
              try {
                if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
                // ★ 2026-9-23 光效层注入内层卡面容器（替代伪元素）：
                //   玻璃/金属卡圆角在嵌套层 + 金属 border3D 外框外扩 8px——伪元素铺宿主
                //   会直角超出卡面（用户两次实测）。找第一个 overflow:hidden 且有圆角的
                //   后代 div（金属/玻璃的卡面层）注入；classic 卡注入宿主自身。
                //   border-radius:inherit + 容器裁剪天然贴合，幂等（已注入跳过）。
                let gTarget = el;
                const divs = el.querySelectorAll('div');
                for (const dv of divs) {
                  const cs = getComputedStyle(dv);
                  if (cs.overflow === 'hidden' && cs.borderTopLeftRadius !== '0px') { gTarget = dv; break; }
                }
                if (getComputedStyle(gTarget).position === 'static') gTarget.style.position = 'relative';
                if (!gTarget.querySelector(':scope > .gloss-sweep')) {
                  const mk = (cls) => { const d = document.createElement('div'); d.className = cls; return d; };
                  gTarget.appendChild(mk('gloss-sweep'));
                  gTarget.appendChild(mk('gloss-cross'));
                  gTarget.appendChild(mk('gloss-spark'));
                }
              } catch (e2) {}
            }
          });
        });
      } catch (e) { /* 静默：标记失败不影响对局 */ }
    }

    // glory 卡 3D 倾斜跟随鼠标（document 级委托，一次绑定；--gry/--grx 供 CSS hover 使用）
    (function () {
      if (window.__pbGloryTiltBound) return;
      window.__pbGloryTiltBound = true;
      document.addEventListener('pointermove', function (e) {
        const el = e.target && e.target.closest ? e.target.closest('.glory-card') : null;
        if (!el) return;
        const r = el.getBoundingClientRect();
        if (!r.width || !r.height) return;
        el.style.setProperty('--gry', (((e.clientX - r.left) / r.width - 0.5) * 24).toFixed(1) + 'deg');
        el.style.setProperty('--grx', ((0.5 - (e.clientY - r.top) / r.height) * 24).toFixed(1) + 'deg');
        // ★ 悬停星光亮斑位置（百分比，供 ::before radial-gradient 使用）
        el.style.setProperty('--gmx', (((e.clientX - r.left) / r.width) * 100).toFixed(1) + '%');
        el.style.setProperty('--gmy', (((e.clientY - r.top) / r.height) * 100).toFixed(1) + '%');
      }, { passive: true });
    })();

    // ============================================================================
    // 【积分栏牌型示例弹窗】悬停后点击牌型行弹出示例，鼠标离开后消失（2026-10-1）
    // ============================================================================
    (function () {
      const EXAMPLES = {
        flowerTripleStraight: 'JJJ-QQQ-KKK',
        tripleStraight: '333-444-555',
        adjacentTriples: '333-444',
        fourOfAKind: 'AAAA',
        fivePairStraight: '33-44-55-66-77',
        twoTriples: '333-555',
        threePairStraight: '33-44-55',
        threeOfAKind: 'KKK',
        fiveStraight: '3-4-5-6-7',
        threeStraight: 'J-Q-K',
        pair: 'QQ',
        single: 'K'
      };
      function bind() {
        const container = document.getElementById('score-bar-container');
        if (!container) { document.addEventListener('DOMContentLoaded', bind); return; }
        const pop = document.createElement('div');
        pop.id = 'score-example-pop';
        document.body.appendChild(pop);
        let openRow = null;
        let rafId = 0;
        // 按行实时定位弹窗（每帧重测行与弹窗尺寸，含左右翻转与视口钳位）
        function placePop(row) {
          const r = row.getBoundingClientRect();
          const pw = pop.offsetWidth, ph = pop.offsetHeight;
          if (!r.width && !r.height) return; // 行不在文档中则保持原位
          let left = r.right + 8;
          if (left + pw > window.innerWidth - 4) left = Math.max(4, r.left - pw - 8);
          let top = r.top + r.height / 2 - ph / 2;
          top = Math.min(Math.max(4, top), Math.max(4, window.innerHeight - ph - 4));
          pop.style.left = left + 'px';
          pop.style.top = top + 'px';
        }
        function hidePop() {
          pop.classList.remove('show');
          openRow = null;
          if (rafId) { cancelAnimationFrame(rafId); rafId = 0; }
        }
        function showPop(row) {
          const ex = EXAMPLES[row.id.replace('score-row-', '')];
          if (!ex) return;
          pop.innerHTML = ex.split('-').map(g =>
            `<span class="grp">${g.split('').map(c => `<span class="chip">${c}</span>`).join('')}</span>`
          ).join('<span class="sep"></span>');
          // 先隐藏完成首帧布局定位再显示，随后逐帧跟随行位置
          // （修复：首次点击时行/弹窗首帧布局后仍会变动（字体回流/hover滤镜过渡等），
          //   单次测量会落在过渡态坐标上导致弹窗错位，逐帧跟踪一帧内自动纠正，2026-10-1）
          pop.style.visibility = 'hidden';
          pop.classList.add('show');
          openRow = row;
          placePop(row);
          pop.style.visibility = 'visible';
          if (rafId) cancelAnimationFrame(rafId);
          (function track() {
            if (openRow !== row || !pop.classList.contains('show')) { rafId = 0; return; }
            placePop(row);
            rafId = requestAnimationFrame(track);
          })();
        }
        container.querySelectorAll('.score-row').forEach(row => {
          row.addEventListener('click', () => {
            if (openRow === row) hidePop(); else showPop(row);
          });
          row.addEventListener('mouseleave', (e) => {
            if (openRow === row && !pop.contains(e.relatedTarget)) hidePop();
          });
        });
        pop.addEventListener('mouseleave', hidePop);
        window.addEventListener('scroll', hidePop, true);
      }
      bind();
    })();

    // ============================================================================
    // 【牌型栏显示 · updateCardTypeDisplay】更新双方牌型与积分栏高亮
    // ============================================================================
    //
    // 功能: 1) 收集双方场上所有卡牌 → identifyCardType 识别最高牌型
    //       2) 在左侧牌型栏显示文字描述
    //       3) 在积分栏根据牌型级别与 maxValue 进行高亮（蓝色/红色/分栏）
    //
    // 调用时机: updateUI() 每次卡牌数据刷新时都会调用本函数
    // ============================================================================
    function updateCardTypeDisplay() {
      const playerCards = getPlayerAllCards();
      const opponentCards = getOpponentAllCards();

      const playerType = identifyCardType(playerCards);
      const opponentType = identifyCardType(opponentCards);

      // ★ 2026-9-22：最大牌型卡打标（复用上方现成牌型计算，悬停光泽+倾斜，见 updateGloryCards）
      updateGloryCards(playerCards, playerType, opponentCards, opponentType);

      // 交互步骤2：检测我方牌型是否变化（如单张变对子），变化时高亮规则2
      if (isFunctionalCardTutorial && (functionalCardTutorialStep === 2 || functionalCardTutorialStep === 3)) {
        const prevType = GameState.fcPrevPlayerCardType;
        const currType = playerType.type;
        // 只有从一种有效牌型（非none）变成另一种有效牌型（非none）时才触发
        if (prevType && currType && prevType !== currType) {
          fcStep2HighlightRule(2);
        }
        GameState.fcPrevPlayerCardType = currType;
      }
      
      function formatCardType(type) {
        var _t = typeof __t === 'function' ? __t : function(k){ var d=__gameTranslations && __gameTranslations[__gameCurrentLang] && __gameTranslations[__gameCurrentLang][k]; return d!=null?d:k; };
        if (type.type === 'none') return _t('hand_none') || '无牌，-';
        
        const typeNames = {
          'single': _t('type_single') || '单张',
          'threeStraight': _t('type_3straight') || '3连顺',
          'pair': _t('type_pair') || '对子',
          'fiveStraight': _t('type_5straight') || '5连顺',
          'threeOfAKind': _t('type_three') || '三条',
          'threePairStraight': _t('type_3pair') || '3连对',
          'twoTriples': _t('type_3double') || '对3条',
          'fourOfAKind': _t('type_four') || '四条',
          'fivePairStraight': _t('type_5pair') || '5连对',
          'adjacentTriples': _t('type_adjacent3') || '邻三条',
          'tripleStraight': _t('type_straight3') || '3条顺',
          'flowerTripleStraight': _t('type_t3straight') || '花牌3条顺'
        };
        
        function getCardDisplay(value) {
          if (value === 1) return 'A';
          if (value === 11) return 'J';
          if (value === 12) return 'Q';
          if (value === 13) return 'K';
          return value.toString();
        }
        
        let valuePart = '-';
        if (type.type === 'single') {
          const match = type.description.match(/(\d+)/);
          if (match) {
            valuePart = getCardDisplay(parseInt(match[1]));
          }
        } else if (type.type === 'pair') {
          const match = type.description.match(/(\d+)/);
          if (match) {
            const val = getCardDisplay(parseInt(match[1]));
            valuePart = `${val}${val}`;
          }
        } else if (type.type === 'threeOfAKind') {
          const match = type.description.match(/(\d+)/);
          if (match) {
            const val = getCardDisplay(parseInt(match[1]));
            valuePart = `${val}${val}${val}`;
          }
        } else if (type.type === 'fourOfAKind') {
          const match = type.description.match(/(\d+)/);
          if (match) {
            const val = getCardDisplay(parseInt(match[1]));
            valuePart = `${val}${val}${val}${val}`;
          }
        } else if (type.type === 'threeStraight') {
          const match = type.description.match(/(\d+)-(\d+)-(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}-${getCardDisplay(parseInt(match[3]))}`;
          } else {
            const parts = type.description.split(' ');
            if (parts.length > 1) {
              valuePart = parts[1];
            }
          }
        } else if (type.type === 'fiveStraight') {
          const match = type.description.match(/(\d+)-(\d+)-(\d+)-(\d+)-(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}-${getCardDisplay(parseInt(match[3]))}-${getCardDisplay(parseInt(match[4]))}-${getCardDisplay(parseInt(match[5]))}`;
          } else {
            const parts = type.description.split(' ');
            if (parts.length > 1) {
              valuePart = parts[1];
            }
          }
        } else if (type.type === 'threePairStraight') {
          const match = type.description.match(/(\d+)-(\d+)-(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}-${getCardDisplay(parseInt(match[3]))}${getCardDisplay(parseInt(match[3]))}`;
          }
        } else if (type.type === 'twoTriples') {
          const match = type.description.match(/(\d+)\s+(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}`;
          }
        } else if (type.type === 'adjacentTriples') {
          const match = type.description.match(/(\d+)\s+(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}`;
          }
        } else if (type.type === 'tripleStraight') {
          const match = type.description.match(/(\d+)-(\d+)-(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}-${getCardDisplay(parseInt(match[3]))}${getCardDisplay(parseInt(match[3]))}${getCardDisplay(parseInt(match[3]))}`;
          }
        } else if (type.type === 'flowerTripleStraight') {
          // 花牌3条顺固定是 JJJ-QQQ-KKK
          valuePart = 'JJJ-QQQ-KKK';
        } else if (type.type === 'fivePairStraight') {
          const match = type.description.match(/5连对 (\d+)-(\d+)-(\d+)-(\d+)-(\d+)/);
          if (match) {
            valuePart = `${getCardDisplay(parseInt(match[1]))}${getCardDisplay(parseInt(match[1]))}-${getCardDisplay(parseInt(match[2]))}${getCardDisplay(parseInt(match[2]))}-${getCardDisplay(parseInt(match[3]))}${getCardDisplay(parseInt(match[3]))}-${getCardDisplay(parseInt(match[4]))}${getCardDisplay(parseInt(match[4]))}-${getCardDisplay(parseInt(match[5]))}${getCardDisplay(parseInt(match[5]))}`;
          }
        }
        
        return `${typeNames[type.type] || type.type}：${valuePart}`;
      }
      
      document.getElementById('player-card-type').textContent = formatCardType(playerType);
      document.getElementById('opponent-card-type').textContent = formatCardType(opponentType);
      
      const playerCardDetails = document.getElementById('player-card-details');
      const opponentCardDetails = document.getElementById('opponent-card-details');
      const _t2 = typeof __t === 'function' ? __t : function(k){ var d=__gameTranslations && __gameTranslations[__gameCurrentLang] && __gameTranslations[__gameCurrentLang][k]; return d!=null?d:k; };
      playerCardDetails.textContent = playerCards.length > 0 ? `${playerCards.length}${_t2('hand_count_zh')}` : _t2('hand_none_detail');
      opponentCardDetails.textContent = opponentCards.length > 0 ? `${opponentCards.length}${_t2('hand_count_zh')}` : _t2('hand_none_detail');

      // ======== 积分栏动态高亮 ========
      // 1a) 检测当前主题，切换对应的高亮颜色体系
      const gc = document.querySelector('.game-container');
      const isMagic = gc && gc.classList.contains('bg-theme-magicforest');
      const isTech  = gc && gc.classList.contains('bg-theme-tech');
      // 主题色配置
      //   playerColor   = 我方高亮主色（星空:蓝 / 森林:绿 / 科技:青）
      //   opponentColor = 对方高亮主色（星空:红 / 森林:紫 / 科技:橙）
      //   playerBorder  = 边框主色（略浓）
      //   opponentBorder
      //   highlightGlow = 光晕强度
      let theme;
      if (isMagic) {
        theme = {
          defaultBg: 'linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.28))',
          typeColor: '#d1fae5',
          scoreColor: '#fbbf24',
          scoreGlow: '0 0 6px rgba(251,191,36,0.3)',
          rowSide: 'rgba(34, 197, 94, 0.30)',
          playerColor: 'rgba(59, 130, 246, 0.38)',
          playerBorder: '#3b82f6',
          playerText: '#60a5fa',
          opponentColor: 'rgba(239, 68, 68, 0.38)',
          opponentBorder: '#ef4444',
          opponentText: '#fca5a5',
          sameRowBg: 'linear-gradient(to right, rgba(59,130,246,0.38) 0%, rgba(59,130,246,0.38) 50%, rgba(239,68,68,0.38) 50%, rgba(239,68,68,0.38) 100%)',
          sameRowGlow: '0 0 8px rgba(59,130,246,0.4) inset, 0 0 8px rgba(239,68,68,0.4) inset'
        };
      } else if (isTech) {
        theme = {
          defaultBg: 'linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(15, 23, 42, 0.28))',
          typeColor: '#cffafe',
          scoreColor: '#22d3ee',
          scoreGlow: '0 0 6px rgba(34,211,238,0.35)',
          rowSide: 'rgba(34, 211, 238, 0.30)',
          playerColor: 'rgba(59, 130, 246, 0.38)',
          playerBorder: '#3b82f6',
          playerText: '#60a5fa',
          opponentColor: 'rgba(239, 68, 68, 0.38)',
          opponentBorder: '#ef4444',
          opponentText: '#fca5a5',
          sameRowBg: 'linear-gradient(to right, rgba(59,130,246,0.38) 0%, rgba(59,130,246,0.38) 50%, rgba(239,68,68,0.38) 50%, rgba(239,68,68,0.38) 100%)',
          sameRowGlow: '0 0 8px rgba(59,130,246,0.4) inset, 0 0 8px rgba(239,68,68,0.4) inset'
        };
      } else {
        // 星空战场（默认）
        theme = {
          defaultBg: 'linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(5, 5, 20, 0.45))',
          typeColor: '#e0e0f5',
          scoreColor: '#e8c98a',
          scoreGlow: '0 0 8px rgba(139,92,246,0.45)',
          rowSide: 'rgba(139, 92, 246, 0.30)',
          playerColor: 'rgba(59, 130, 246, 0.38)',
          playerBorder: '#3b82f6',
          playerText: '#60a5fa',
          opponentColor: 'rgba(239, 68, 68, 0.38)',
          opponentBorder: '#ef4444',
          opponentText: '#fca5a5',
          sameRowBg: 'linear-gradient(to right, rgba(59,130,246,0.38) 0%, rgba(59,130,246,0.38) 50%, rgba(239,68,68,0.38) 50%, rgba(239,68,68,0.38) 100%)',
          sameRowGlow: '0 0 8px rgba(59,130,246,0.4) inset, 0 0 8px rgba(239,68,68,0.4) inset'
        };
      }

      // 统一设置牌型栏文字颜色：card-type 白色；card-details "无卡牌"灰色、其他主题色
      const playerCardTypeEl = document.getElementById('player-card-type');
      const opponentCardTypeEl = document.getElementById('opponent-card-type');
      playerCardTypeEl.style.setProperty('color', '#ffffff', 'important');
      opponentCardTypeEl.style.setProperty('color', '#ffffff', 'important');
      // 对方/我方 "X张牌"时 使用主题的 scoreColor；"无卡牌" 时灰色
      playerCardDetails.style.setProperty('color', (playerCards.length > 0) ? theme.scoreColor : '#9ca3af', 'important');
      opponentCardDetails.style.setProperty('color', (opponentCards.length > 0) ? theme.scoreColor : '#9ca3af', 'important');

      // 1. 先重置所有行为默认样式（用 setProperty('important') 统一方式，同时兼容无 CSS 覆盖的星空战场）
      const whiteTypes = ['fourOfAKind', 'threeOfAKind', 'pair', 'single'];
      const scoreRows = document.querySelectorAll('[id^="score-row-"]');
      scoreRows.forEach(row => {
        row.style.setProperty('background', theme.defaultBg, 'important');
        row.style.setProperty('border-left', '', 'important');
        row.style.setProperty('border-right', '', 'important');
        row.style.setProperty('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 0 ' + theme.rowSide + ', 0 5px 9px rgba(0,0,0,0.5)', 'important');
        row.style.setProperty('animation', '', 'important');
        row.classList.remove('strip-me', 'strip-opp', 'strip-same', 'strip-me-only', 'strip-opp-only', 'strip-tie');
        const typeSpan = row.querySelector('.score-type');
        const scoreSpan = row.querySelector('.score-score');
        if (typeSpan) {
          const typeKey = row.id.replace('score-row-', '');
          if (theme.typeColor) {
            typeSpan.style.setProperty('color', theme.typeColor, 'important');
          } else {
            typeSpan.style.setProperty('color', whiteTypes.includes(typeKey) ? '#ffffff' : '#e0e7ff', 'important');
          }
          typeSpan.style.setProperty('font-weight', '600', 'important');
        }
        if (scoreSpan) {
          scoreSpan.style.setProperty('color', theme.scoreColor, 'important');
          scoreSpan.style.setProperty('font-weight', '700', 'important');
          scoreSpan.style.setProperty('font-size', '0.85rem', 'important');
          scoreSpan.style.setProperty('text-shadow', theme.scoreGlow, 'important');
        }
      });

      // 2. 解析双方当前牌型类型
      const playerTypeName = playerType && playerType.type !== 'none' ? playerType.type : null;
      const opponentTypeName = opponentType && opponentType.type !== 'none' ? opponentType.type : null;

      // 3. 判断双方是否显示在同一行
      const isSameRow = playerTypeName && opponentTypeName && playerTypeName === opponentTypeName;

      // 4. 应用高亮（用 setProperty('important') 确保覆盖 CSS 默认样式）
      if (isSameRow) {
        const row = document.getElementById(`score-row-${playerTypeName}`);
        if (row) {
          row.style.setProperty('background', theme.sameRowBg, 'important');
          row.style.setProperty('border-left', `3px solid ${theme.playerBorder}`, 'important');
          row.style.setProperty('border-right', `3px solid ${theme.opponentBorder}`, 'important');
          row.style.setProperty('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 ' + theme.rowSide + ', 0 5px 9px rgba(0,0,0,0.5), 0 0 10px rgba(59,130,246,0.30), 0 0 18px rgba(239,68,68,0.25)', 'important');
          row.style.setProperty('animation', 'lightStripP 2.4s ease-in-out infinite', 'important');
          // 同型：牌点大的一方独享全行弧光；牌点完全相同两道弧光正中间相撞
          row.classList.add('strip-same');
          if (playerType.maxValue > opponentType.maxValue) row.classList.add('strip-me-only');
          else if (playerType.maxValue < opponentType.maxValue) row.classList.add('strip-opp-only');
          else row.classList.add('strip-tie');
          const typeSpan = row.querySelector('.score-type');
          const scoreSpan = row.querySelector('.score-score');
          if (playerType.maxValue > opponentType.maxValue) {
            if (typeSpan) typeSpan.style.setProperty('color', theme.playerText, 'important');
            if (scoreSpan) scoreSpan.style.setProperty('color', theme.playerText, 'important');
          } else if (playerType.maxValue < opponentType.maxValue) {
            if (typeSpan) typeSpan.style.setProperty('color', theme.opponentText, 'important');
            if (scoreSpan) scoreSpan.style.setProperty('color', theme.opponentText, 'important');
          }
        }
      } else {
        if (playerTypeName) {
          const playerRow = document.getElementById(`score-row-${playerTypeName}`);
          if (playerRow) {
            playerRow.style.setProperty('background', theme.playerColor, 'important');
            playerRow.style.setProperty('border-left', `3px solid ${theme.playerBorder}`, 'important');
            playerRow.style.setProperty('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 rgba(30,64,175,0.9), 0 5px 9px rgba(0,0,0,0.5), 0 0 10px rgba(59,130,246,0.40), 0 0 20px rgba(59,130,246,0.22)', 'important');
            playerRow.style.setProperty('animation', 'lightStripB 2.4s ease-in-out infinite', 'important');
            playerRow.classList.add('strip-me');
            const typeSpan = playerRow.querySelector('.score-type');
            const scoreSpan = playerRow.querySelector('.score-score');
            if (typeSpan) typeSpan.style.setProperty('color', theme.playerText, 'important');
            if (scoreSpan) scoreSpan.style.setProperty('color', theme.playerText, 'important');
            if (typeSpan) typeSpan.style.setProperty('text-shadow', '0 0 6px rgba(96,165,250,0.75)', 'important');
            if (scoreSpan) scoreSpan.style.setProperty('text-shadow', '0 0 6px rgba(96,165,250,0.75)', 'important');
          }
        }
        if (opponentTypeName) {
          const opponentRow = document.getElementById(`score-row-${opponentTypeName}`);
          if (opponentRow) {
            opponentRow.style.setProperty('background', theme.opponentColor, 'important');
            opponentRow.style.setProperty('border-right', `3px solid ${theme.opponentBorder}`, 'important');
            opponentRow.style.setProperty('box-shadow', 'inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 rgba(153,27,27,0.9), 0 5px 9px rgba(0,0,0,0.5), 0 0 10px rgba(239,68,68,0.40), 0 0 20px rgba(239,68,68,0.22)', 'important');
            opponentRow.style.setProperty('animation', 'lightStripR 2.4s ease-in-out infinite', 'important');
            opponentRow.classList.add('strip-opp');
            const typeSpan = opponentRow.querySelector('.score-type');
            const scoreSpan = opponentRow.querySelector('.score-score');
            if (typeSpan) typeSpan.style.setProperty('color', theme.opponentText, 'important');
            if (scoreSpan) scoreSpan.style.setProperty('color', theme.opponentText, 'important');
            if (typeSpan) typeSpan.style.setProperty('text-shadow', '0 0 6px rgba(252,165,165,0.75)', 'important');
            if (scoreSpan) scoreSpan.style.setProperty('text-shadow', '0 0 6px rgba(252,165,165,0.75)', 'important');
          }
        }
      }
    }
    
    // ----------------------------------------------------------------------------
    // 【匹配操作核心逻辑】
    // ----------------------------------------------------------------------------
    // checkAdjacentCards: 检查双方场上是否有点数相邻或相同的卡牌
    // 参数:
    //   playerType: 玩家类型('player'/'opponent')
    //   roadIndex:  路数索引(0-4)
    //   cardValue:  待检查的卡牌点数
    // 返回: 匹配的卡牌数组 [{card, type, index, stackIndex, element}]
    // 匹配规则:
    //   - 点数相差1 (如5和6)
    //   - A和K相邻 (1和13)
    //   - 点数相同
    function checkAdjacentCards(playerType, roadIndex, cardValue) {
      const adjacentCards = [];

      if (playerType === 'player' && GameState.opponentField[roadIndex]) {
        const card = GameState.opponentField[roadIndex];
        if (isCardsMatch(cardValue, card.value)) {
          adjacentCards.push({ card, type: 'field', index: roadIndex, stackIndex: null });
        }
      }

      if (playerType === 'player') {
        const opponentStack = GameState.opponentStack[roadIndex];
        opponentStack.forEach((card, stackIndex) => {
          if (isCardsMatch(cardValue, card.value)) {
            adjacentCards.push({ card, type: 'stack', index: roadIndex, stackIndex });
          }
        });
      }

      if (playerType === 'opponent' && GameState.playerField[roadIndex]) {
        const card = GameState.playerField[roadIndex];
        if (isCardsMatch(cardValue, card.value)) {
          adjacentCards.push({ card, type: 'field', index: roadIndex, stackIndex: null });
        }
        GameState.playerStack[roadIndex].forEach((card, stackIndex) => {
          if (isCardsMatch(cardValue, card.value)) {
            adjacentCards.push({ card, type: 'stack', index: roadIndex, stackIndex });
          }
        });
      }

      return adjacentCards;
    }
    
    // checkAndFillEmptyFieldSlots: 检查并补充五路场牌区空位(将叠牌首位移入场牌)
    // 对我方/对方统一处理
    function checkAndFillEmptyFieldSlots() {
      for (const playerType of ['player', 'opponent']) {
        const field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
        const stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;
        const label = playerType === 'player' ? '我方' : '对方';
        for (let i = 0; i < 5; i++) {
          if (field[i] === null && stack[i].length > 0) {
            const cardToMove = stack[i].shift();
            field[i] = cardToMove;
            updateUI();
          }
        }
      }
    }
    
    // ----------------------------------------------------------------------------
    // 【路牌区匹配检查】
    // ----------------------------------------------------------------------------
    // checkRoadMatchCards: 检查刚打出的牌与对方同路牌的匹配机会
    // 使用统一匹配规则(isCardsMatch)检查相邻/相同
    // 参数: card - 刚打出的卡牌; roadIndex - 打出的路数索引(0-4)
    // 返回: 匹配机会数组，每项含 { type, card, roadIndex, location, stackIndex }
    function checkRoadMatchCards(card, roadIndex) {
      const matchOpportunities = [];

      // 检查对方同一路的场牌
      if (GameState.opponentField[roadIndex]) {
        const opponentCard = GameState.opponentField[roadIndex];
        const matchResult = checkMatchType(card.value, opponentCard.value);
        if (matchResult) {
          matchOpportunities.push({
            type: matchResult,
            card: opponentCard,
            roadIndex: roadIndex,
            location: 'field'
          });
        }
      }

      // 检查对方同一路的叠牌
      GameState.opponentStack[roadIndex].forEach((opponentCard, stackIndex) => {
        const matchResult = checkMatchType(card.value, opponentCard.value);
        if (matchResult) {
          matchOpportunities.push({
            type: matchResult,
            card: opponentCard,
            roadIndex: roadIndex,
            location: 'stack',
            stackIndex: stackIndex
          });
        }
      });

      if (matchOpportunities.length > 0) {
        showRoadMatchOpportunities(matchOpportunities, card, roadIndex);
      }

      return matchOpportunities;
    }
    
    // checkMatchType: 判断两张牌的匹配类型(使用统一匹配规则)
    // 返回: 'drag'(拖牌-相邻) / 'crash'(撞牌-相同) / null(不匹配)
    function checkMatchType(value1, value2) {
      // 匹配操作教程交互步骤：只开放拖牌，屏蔽撞牌
      if (isMatchTutorial && matchTutorialStep === 2) {
        if (isCardsAdjacent(value1, value2)) return 'drag';
        return null;
      }
      if (isCardsSame(value1, value2)) return 'crash';
      if (isCardsAdjacent(value1, value2)) return 'drag';
      return null;
    }
    
    // ----------------------------------------------------------------------------
    // 匹配光环（重要）：路牌区匹配机会的显示与"重渲染后重新加亮"
    // 关键背景：updateFieldDisplay() 会用 slot.innerHTML 重建路牌 DOM，
    //          这会清除已经加在卡牌上的 .match-glow 类与事件监听，导致光环"一闪而过就消失"。
    // 解决办法：把当前匹配光环持久化到 GameState.activeRoadMatchGlow，
    //          并在 updateFieldDisplay() 末尾调用 reapplyRoadMatchGlow() 重新加亮。
    // ----------------------------------------------------------------------------

    // findRoadMatchTargetCard: 在整块棋盘（player 区 + opponent 区）按 data-card-id 查找被匹配的卡
    function findRoadMatchTargetCard(opp) {
      if (!opp || !opp.card || !opp.card.id) return null;
      const allSlots = document.querySelectorAll('.player-road-slot, .opponent-road-slot');
      for (let si = 0; si < allSlots.length; si++) {
        const el = allSlots[si].querySelector(`.card[data-card-id="${opp.card.id}"], .card-small[data-card-id="${opp.card.id}"]`);
        if (el) return el;
      }
      return null;
    }

    // applyRoadGlowToTarget: 给目标卡加匹配光环（class + 信息 + 悬停/点击监听）
    function applyRoadGlowToTarget(targetCard, opp, card, roadIndex) {
      if (!targetCard) return;
      targetCard.classList.add('match-glow');

      targetCard.matchInfo = {
        type: opp.type,
        card: opp.card,
        playerCard: card,
        roadIndex: opp.roadIndex,
        location: opp.location,
        stackIndex: opp.stackIndex
      };

      const handleMatchEnter = function() {
        showMatchTooltip(targetCard);
        // 联机模式：通知对方同步显示悬停效果
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          PBOnline.sendMatchHover({
            hoverType: 'road',
            isEnter: true,
            roadIndex: roadIndex,
            playerCardId: card.id,
            opponentCardIds: [targetCard.dataset.cardId || targetCard.getAttribute('data-card-id')]
          });
        }
      };
      const handleMatchLeave = function() {
        hideMatchTooltip();
        // 联机模式：通知对方同步取消悬停效果
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          PBOnline.sendMatchHover({
            hoverType: 'road',
            isEnter: false,
            roadIndex: roadIndex,
            playerCardId: card.id,
            opponentCardIds: [targetCard.dataset.cardId || targetCard.getAttribute('data-card-id')]
          });
        }
      };
      const handleMatchClick = function() {
        // 先检查中立区是否有完全空的格子——双方都没有空格子时，抖动+提示，不执行拖牌/撞牌
        const playerHasEmpty = hasEmptyNeutralSlot('player');
        const oppHasEmpty = hasEmptyNeutralSlot('opponent');
        if (!playerHasEmpty || !oppHasEmpty) {
          // 抖动光环（左右快速晃动）
          targetCard.animate(
            [
              { transform: 'translateX(0)' },
              { transform: 'translateX(-6px)' },
              { transform: 'translateX(6px)' },
              { transform: 'translateX(-4px)' },
              { transform: 'translateX(4px)' },
              { transform: 'translateX(0)' }
            ],
            { duration: 400, easing: 'ease-in-out' }
          );
          updateGameStatus(__t('st_neutral_full_cancel').replace('{a}', opp.type === 'drag' ? __t('act_drag') : __t('act_clash')), 'st_neutral_full_cancel');
          return;
        }
        // 移除全局点击取消监听器
        if (GameState.matchCancelHandler) {
          document.removeEventListener('click', GameState.matchCancelHandler, true);
          GameState.matchCancelHandler = null;
        }
        performRoadMatch(opp.type, opp.card, card, opp.roadIndex, opp.location, opp.stackIndex);
      };

      targetCard.addEventListener('mouseenter', handleMatchEnter);
      targetCard.addEventListener('mouseleave', handleMatchLeave);
      targetCard.addEventListener('click', handleMatchClick);

      // 保存事件监听器引用以便清除
      targetCard.matchListeners = {
        enter: handleMatchEnter,
        leave: handleMatchLeave,
        click: handleMatchClick
      };
    }

    // showRoadMatchOpportunities: 显示路牌区匹配机会
    function showRoadMatchOpportunities(opportunities, card, roadIndex) {
      clearRoadMatchHighlights();
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——出牌打到场上、检测到可执行匹配操作（拖/撞/援/围）
      //   触发光环的瞬间播放一次（reapplyRoadMatchGlow 重渲染恢复不经过此处，不会重复）
      if (opportunities && opportunities.length > 0 && typeof playSound === 'function') {
        playSound('glowBellSound');
      }
      // ★ 持久化当前匹配光环状态：用于 updateFieldDisplay 重渲染后重新加亮（解决光环"一闪而过"被重渲染清除的问题）
      if (typeof GameState !== 'undefined') {
        GameState.activeRoadMatchGlow = { type: 'road', sender: true, opportunities: opportunities, playerCard: card, roadIndex: roadIndex };
      }
      const processedCards = new Set(); // 防止同一张DOM卡被多次附加监听

      opportunities.forEach(opp => {
        const targetCard = findRoadMatchTargetCard(opp);
        if (!targetCard || processedCards.has(targetCard)) return;
        processedCards.add(targetCard);
        applyRoadGlowToTarget(targetCard, opp, card, roadIndex);
      });

      // 添加全局点击监听器 - 点击非匹配卡时取消匹配，完成放置
      GameState.matchCancelHandler = function(e) {
        const isRoadMatch = e.target.closest('.match-glow');
        const isNeutralMatch = e.target.closest('.neutral-aura');
        if (!isRoadMatch && !isNeutralMatch) {
          clearRoadMatchHighlights();
          clearNeutralAuras();
          document.removeEventListener('click', GameState.matchCancelHandler, true);
          GameState.matchCancelHandler = null;
          // 联机模式：通知对方清除光环
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendMatchGlowClear({ glowType: 'all' });
          }
          confirmCardPlacement('player', roadIndex, card);
        }
      };

      setTimeout(() => {
        document.addEventListener('click', GameState.matchCancelHandler, true);
      }, 100);

      // 联机模式：通知对方同步显示路牌区匹配光环
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        // 收集所有匹配机会的卡牌ID，发送给对方
        // 对方视角的 playerCard = 我的 opponentCard，对方视角的 opponentCard = 我的 playerCard
        var glowData = {
          glowType: 'road',
          roadIndex: roadIndex,
          playerCardId: card.id,      // 我方打出的牌 = 对方的 opponentCard
          opponentCardIds: opportunities.map(function(opp) { return opp.card.id; }) // 对方路牌区匹配的牌 = 对方的 playerCard
        };
        PBOnline.sendMatchGlowStart(glowData);
      }
    }

    // reapplyRoadMatchGlow: 路牌区被重渲染（innerHTML 重建）后，依据持久化的 activeRoadMatchGlow 重新加亮光环。
    // 解决光环"一闪而过就消失"的问题——updateFieldDisplay 会重建卡牌 DOM，清除 .match-glow 类与监听。
    function reapplyRoadMatchGlow() {
      if (typeof GameState === 'undefined' || !GameState.activeRoadMatchGlow) return;
      const g = GameState.activeRoadMatchGlow;
      if (g.type !== 'road') return;
      if (g.sender) {
        // 出牌方（当前操作玩家）：完整重建（class + 信息 + 监听），保证可点击执行匹配
        const processed = new Set();
        (g.opportunities || []).forEach(opp => {
          const targetCard = findRoadMatchTargetCard(opp);
          if (!targetCard || processed.has(targetCard)) return;
          processed.add(targetCard);
          applyRoadGlowToTarget(targetCard, opp, g.playerCard, g.roadIndex);
        });
      } else {
        // 旁观玩家（队友/对手）：纯视觉光环，按卡ID在整块棋盘重新加亮。
        // 队友只重新加亮"被匹配的牌"（与出牌方一致，1 组）；对手重新加亮双方（2 组）。
        if (typeof applyRemoteRoadGlow === 'function') {
          applyRemoteRoadGlow({
            playerCardId: g.playerCardId,
            opponentCardIds: g.opponentCardIds
          }, g.teammateInitiated);
        }
      }
    }

    // reapplyNeutralAura: 中立区被重渲染（innerHTML 重建）后，依据持久化的 activeNeutralMatchGlow 重新加亮光环。
    // 与 reapplyRoadMatchGlow 平行——解决援牌/围牌光环"一闪而过就消失"的问题。
    function reapplyNeutralAura() {
      if (typeof GameState === 'undefined' || !GameState.activeNeutralMatchGlow) return;
      var g = GameState.activeNeutralMatchGlow;
      if (g.type !== 'neutral') return;
      if (g.sender) {
        // 出牌方（当前操作玩家）：完整重建（class + 提示 + 监听），保证可点击执行匹配
        var _spt = g.isSupportOnlyTutorial;
        var _srt = g.isSurroundOnlyTutorial;
        (g.opportunities || []).forEach(function(opp) {
          if (opp.canSupport) {
            showNeutralAura('player', opp.neutralIndex, '援牌', function() {
              performNeutralAction('support', opp.neutralIndex, g.card, opp.matchType);
            }, opp.matchType);
          }
          if (opp.canSurround && !_spt) {
            showNeutralAura('opponent', opp.neutralIndex, '围牌', function() {
              performNeutralAction('surround', opp.neutralIndex, g.card, opp.matchType);
            }, opp.matchType);
          }
        });
      } else {
        // 旁观玩家（队友/对手）：纯视觉光环，委托 online-client.js 重新加亮
        if (typeof PBOnline !== 'undefined' && typeof PBOnline._reapplyRemoteNeutralGlow === 'function') {
          PBOnline._reapplyRemoteNeutralGlow(g);
        }
      }
    }

    // showMatchTooltip: 显示匹配操作提示（使用fixed页面定位，不依赖card的overflow）
    function showMatchTooltip(card) {
      const matchInfo = card.matchInfo;
      if (!matchInfo) return;
      
      hideMatchTooltip();
      
      const rect = card.getBoundingClientRect();
      const tooltip = document.createElement('div');
      tooltip.className = 'match-tooltip';
      tooltip.textContent = matchInfo.type === 'drag' ? '拖牌' : '撞牌';
      tooltip.style.position = 'fixed';
      tooltip.style.top = `${rect.top - 36}px`;
      tooltip.style.left = `${rect.left + rect.width / 2}px`;
      tooltip.style.transform = 'translateX(-50%)';
      tooltip.style.padding = '6px 14px';
      tooltip.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
      tooltip.style.color = '#FBBF24';
      tooltip.style.borderRadius = '8px';
      tooltip.style.fontSize = '14px';
      tooltip.style.fontWeight = 'bold';
      tooltip.style.whiteSpace = 'nowrap';
      tooltip.style.zIndex = '9999';
      tooltip.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(251, 191, 36, 0.3)';
      tooltip.style.border = '1px solid rgba(251, 191, 36, 0.5)';
      tooltip.style.pointerEvents = 'none';
      tooltip.style.letterSpacing = '1px';
      
      // 添加小箭头
      tooltip.innerHTML = `${tooltip.textContent}<div style="position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #374151;"></div>`;
      
      document.body.appendChild(tooltip);
    }
    
    // hideMatchTooltip: 隐藏匹配操作提示
    function hideMatchTooltip() {
      document.querySelectorAll('.match-tooltip').forEach(tip => tip.remove());
    }
    
    // clearRoadMatchHighlights: 清除路牌区匹配高亮
    function clearRoadMatchHighlights() {
      // ★ 联机模式：出牌方(sender=true)的匹配已执行/取消，状态可安全清除。
      //   旁观方(sender=false)的状态由 handleRemoteMatchGlowClear（服务器 match_glow_clear 消息）清除，
      //   提前置空会导致 reapplyRoadMatchGlow 跳过 → 光环永久消失。
      //   ★ 关键：服务器 relayToOpponent 只转发给对方，不回传给发送方，
      //   所以发送方必须在这里主动清除自己的 activeRoadMatchGlow。
      var _isOnline = typeof PBOnline !== 'undefined' && PBOnline.isOnline;
      if (!_isOnline) {
        if (typeof GameState !== 'undefined') GameState.activeRoadMatchGlow = null;
      } else {
        if (typeof GameState !== 'undefined' && GameState.activeRoadMatchGlow && GameState.activeRoadMatchGlow.sender) {
          GameState.activeRoadMatchGlow = null;
        }
      }
      document.querySelectorAll('.match-glow').forEach(card => {
        card.classList.remove('match-glow');
        card.classList.remove('match-glow-hover');

        // 移除事件监听器
        if (card.matchListeners) {
          card.removeEventListener('mouseenter', card.matchListeners.enter);
          card.removeEventListener('mouseleave', card.matchListeners.leave);
          card.removeEventListener('click', card.matchListeners.click);
          delete card.matchListeners;
        }

        delete card.matchInfo;
      });

      // 也清除可能残留的 match-glow-hover
      document.querySelectorAll('.match-glow-hover').forEach(el => {
        el.classList.remove('match-glow-hover');
      });

      // 清理全局点击取消监听器
      if (GameState.matchCancelHandler) {
        document.removeEventListener('click', GameState.matchCancelHandler, true);
        GameState.matchCancelHandler = null;
      }

      hideMatchTooltip();
    }
    
    /**
     * animateCrashSequence: 完整的撞牌动画序列（最复杂的动画，7 阶段）
     *
     * 执行阶段:
     *   Phase 1 - 蓄力       : 双方匹配牌分别向远离方向移动（不缩放，保持原貌）
     *   Phase 2 - 冲撞       : 双方卡牌向接触点高速移动，在接触瞬间触发碰撞音效和粒子
     *   Phase 3 - 碰撞粒子   : 从接触点向四周扩散圆形粒子，逐渐透明至 60%
     *   Phase 4 - 白光闪烁   : 该路剩余卡牌闪烁白光，然后淡出至透明消失
     *   Phase 5 - 飞入中立区 : 两张匹配牌旋转 360°，调整尺寸为中立牌规格，飞向双方中立区
     *   Phase 6 - 粒子收回   : 扩散粒子以聚拢方式收回至匹配牌（速度快于卡牌本身）
     *   Phase 7 - 清理与完成 : 清理所有临时 DOM，resolve Promise
     *
     * @param {HTMLElement} opponentCard      - 对方匹配牌的数据对象（用于写入中立区）
     * @param {HTMLElement} playerCard        - 我方匹配牌的数据对象
     * @param {number} roadIndex              - 该路在 roads 数组中的索引（0-7）
     * @param {HTMLElement} opponentSourceCard- 对方源卡牌 DOM（会被 clone 做飞行）
     * @param {HTMLElement} playerSourceCard  - 我方源卡牌 DOM
     * @param {HTMLElement} playerNeutralSlot - 我方中立区目标容器
     * @param {HTMLElement} opponentNeutralSlot- 对方中立区目标容器
     * @returns {Promise<void>}               - 动画完成后 resolve
     */
    // ★ 2026-9-20 撞牌全屏震动：碰撞瞬间抖动 .game-container-wrapper（外层无 transform，不干扰内层定位）
    //   ★ 2026-9-20 FIX：回放复用此 wrapper 且内联 scale(0.8)——探测当前缩放系数写入 --pb-ss-scale，
    //   震动 keyframes 以 scale(var(--pb-ss-scale)) 保留缩放，回放中震动不再弹回原尺寸
    //   APK 环境下同时触发手机真机短振动（无 VIBRATE 权限时静默失败）
    function pbTriggerScreenShake() {
      try {
        var w = document.querySelector('.game-container-wrapper');
        if (w) {
          var sc = 1, ssTy = 0;
          try {
            var t = getComputedStyle(w).transform;
            if (t && t !== 'none' && t.indexOf('matrix') === 0) {
              var m = t.match(/matrix\(([^)]+)\)/);
              if (m) {
                var parts = m[1].split(',');
                var a = parseFloat(parts[0]);
                var f = parseFloat(parts[5]);
                if (isFinite(a) && a > 0) {
                  sc = a;
                  if (isFinite(f)) ssTy = f / a;   // ★ 平移量（未缩放坐标）= f / 缩放
                }
              }
            }
          } catch (e) {}
          w.style.setProperty('--pb-ss-scale', String(sc));
          // ★ 2026-10-02：回放棋盘带 translateY 上移量（rpLayoutBoard）——震动 keyframes 以
          //   translateY(var(--pb-ss-ty)) 保留平移，否则震动瞬间棋盘跳回未上移位置（画面抖动）
          w.style.setProperty('--pb-ss-ty', ssTy.toFixed(2) + 'px');
          w.classList.remove('pb-screen-shake');
          void w.offsetWidth;  // 强制重排以重启动画（连续撞牌可再次抖动）
          w.classList.add('pb-screen-shake');
          setTimeout(function () { w.classList.remove('pb-screen-shake'); }, 500);
          // ★ 2026-9-22：撞牌动画期间锁定 glory 悬停效果（倾斜 transform 会劫持
          //   撞牌飞行的内联 transform:none → 卡牌歪斜/姿态错乱）。覆盖全序列 ~2.16s
          document.body.classList.add('pb-glory-lock');
          setTimeout(function () { document.body.classList.remove('pb-glory-lock'); }, 2300);
        }
      } catch (e) {}
      try {
        if (window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform()
            && navigator.vibrate) {
          navigator.vibrate(80);
        }
      } catch (e) {}
    }

    // ★ 2026-9-21 对一组卡牌元素依次播放"缩小-放大-还原"脉冲（按数组顺序，间隔 stagger ms）
    function pbPulseCardList(els, stagger) {
      try {
        (els || []).forEach(function (el, i) {
          setTimeout(function () {
            try {
              el.classList.remove('pb-chain-pulse');
              void el.offsetWidth;
              el.classList.add('pb-chain-pulse');
              setTimeout(function () { el.classList.remove('pb-chain-pulse'); }, 420);
            } catch (e) {}
          }, i * (stagger || 90));
        });
      } catch (e) {}
    }

    // ★ 2026-9-21 援牌/围牌归属变化联动动画：对容器内卡牌依次播放"缩小-放大-还原"脉冲。
    //   startMode 'last'（援牌：落下的援牌是我方格 DOM 最后一张，作为连锁起点，带动其余卡牌）
    //   startMode 'first'（围牌：转移后叠牌区排序首张带动其余卡牌）
    //   containerEls 支持数组：援牌归属变化后对方格的牌也算我方，两格卡牌合并为一个连锁序列
    //   延迟触发由调用方控制（需在 updateUI 重渲染后从 DOM 实时取牌）
    function pbPlayChainPulse(containerEls, startMode) {
      try {
        var list = Array.isArray(containerEls) ? containerEls : [containerEls];
        var cards = [];
        list.forEach(function (c) {
          if (!c) return;
          cards = cards.concat(Array.prototype.slice.call(c.querySelectorAll('.card, .card-small')));
        });
        if (cards.length === 0) return;
        var ordered;
        if (startMode === 'last') {
          // ★ 2026-9-21 FIX：起点 = 第一个非空容器的最后一张（援牌在我方格末尾）。
          //   原实现取合并数组的最后一张（多容器时成了对方格末张），方向反了。
          //   正确连锁：援牌 → 我方格其余牌（按序）→ 后续容器的牌（对方格，按序）
          var startIdx = -1;
          for (var ci = 0; ci < list.length; ci++) {
            if (!list[ci]) continue;
            var cc = list[ci].querySelectorAll('.card, .card-small');
            if (cc.length > 0) { startIdx = cards.indexOf(cc[cc.length - 1]); break; }
          }
          if (startIdx >= 0) {
            var startEl = cards.splice(startIdx, 1)[0];
            ordered = [startEl].concat(cards);
          } else {
            ordered = cards;
          }
        } else {
          ordered = cards;
        }
        pbPulseCardList(ordered, 90);
      } catch (e) {}
    }
    // ★ 2026-9-21 挂到 window：供 online-client.js（对方援牌/围牌渲染）调用
    window.pbPlayChainPulse = pbPlayChainPulse;

    function animateCrashSequence(opponentCard, playerCard, roadIndex, opponentSourceCard, playerSourceCard, playerNeutralSlot, opponentNeutralSlot) {
      return new Promise((resolve) => {
        const gameContainer = document.querySelector('.game-container');
        const containerRect = gameContainer ? gameContainer.getBoundingClientRect() : { left: 0, top: 0 };
        // ★ 有效缩放 = 视觉宽/布局宽（getBoundingClientRect 已含容器 scale 与回放 wrapper scale(0.8) 的叠加）
        //   回放模式若只除以 getGameScale()，动画卡坐标会整体偏小 → 撞牌乱飞（与 animateCardMove 同款修正）
        let scale = getGameScale() || 1;
        try {
          const _rawW = gameContainer ? (gameContainer.offsetWidth || 0) : 0;
          const _visW = gameContainer ? (gameContainer.getBoundingClientRect().width || 0) : 0;
          if (_rawW > 0 && _visW > 0 && isFinite(_visW / _rawW) && (_visW / _rawW) > 0) scale = _visW / _rawW;
        } catch (e) {}

        const oppScreenRect = opponentSourceCard ? opponentSourceCard.getBoundingClientRect() : null;
        const playerScreenRect = playerSourceCard ? playerSourceCard.getBoundingClientRect() : null;

        const oppRect = oppScreenRect ? {
          left: (oppScreenRect.left - containerRect.left) / scale,
          top: (oppScreenRect.top - containerRect.top) / scale,
          width: oppScreenRect.width / scale,
          height: oppScreenRect.height / scale
        } : null;
        const playerRect = playerScreenRect ? {
          left: (playerScreenRect.left - containerRect.left) / scale,
          top: (playerScreenRect.top - containerRect.top) / scale,
          width: playerScreenRect.width / scale,
          height: playerScreenRect.height / scale
        } : null;

        // 计算碰撞点：双方卡牌在游戏界面垂直中间处互相触碰
        // 游戏容器内部坐标系统：宽1920，高1080
        // 垂直中间 = 1080 / 2 = 540
        const collideY = 540;
        
        const collideX = oppRect && playerRect
          ? (oppRect.left + oppRect.width / 2 + playerRect.left + playerRect.width / 2) / 2
          : (oppRect ? oppRect.left + oppRect.width / 2 : 960);

        // 计算目标中立区位置（参考 animateCardMove 的中立区逻辑）
        const playerNeutralScreenRect = playerNeutralSlot ? playerNeutralSlot.getBoundingClientRect() : null;
        const opponentNeutralScreenRect = opponentNeutralSlot ? opponentNeutralSlot.getBoundingClientRect() : null;
        const neutralCardHeight = 96;

        const playerNeutralRect = playerNeutralScreenRect ? {
          left: (playerNeutralScreenRect.left - containerRect.left) / scale,
          top: (playerNeutralScreenRect.top - containerRect.top) / scale,
          width: playerNeutralScreenRect.width / scale,
          height: playerNeutralScreenRect.height / scale
        } : null;
        const opponentNeutralRect = opponentNeutralScreenRect ? {
          left: (opponentNeutralScreenRect.left - containerRect.left) / scale,
          top: (opponentNeutralScreenRect.top - containerRect.top) / scale,
          width: opponentNeutralScreenRect.width / scale,
          height: opponentNeutralScreenRect.height / scale
        } : null;

        // 中立区卡牌尺寸
        const playerTargetWidth = playerNeutralRect ? Math.min(playerNeutralRect.width, 90) : 90;
        const playerTargetHeight = neutralCardHeight;
        const opponentTargetWidth = opponentNeutralRect ? Math.min(opponentNeutralRect.width, 90) : 90;
        const opponentTargetHeight = neutralCardHeight;

        // 中立区目标坐标：参考 animateCardMove 的中立区逻辑
        const playerTargetCenterX = playerNeutralRect ? playerNeutralRect.left + playerNeutralRect.width / 2 : collideX;
        const playerTargetTop = playerNeutralRect ? playerNeutralRect.top + 2 : collideY;
        const opponentTargetCenterX = opponentNeutralRect ? opponentNeutralRect.left + opponentNeutralRect.width / 2 : collideX;
        const opponentTargetTop = opponentNeutralRect ? opponentNeutralRect.top + opponentNeutralRect.height - neutralCardHeight - 2 : collideY;

        // 存储目标位置（供粒子收回使用）
        const playerFinalTarget = { centerX: playerTargetCenterX, top: playerTargetTop, centerY: playerTargetTop + neutralCardHeight / 2 };
        const opponentFinalTarget = { centerX: opponentTargetCenterX, top: opponentTargetTop, centerY: opponentTargetTop + neutralCardHeight / 2 };

        // 1. 创建飞行的动画卡牌——克隆完整卡牌 DOM（含类名和样式），保证卡面显示一致（隐藏原始牌）
        const animCards = [];



        // 提前查询路牌区，用于计算正常卡牌尺寸
        const oppRoadSlot = document.querySelector(`.opponent-road-slot[data-road-slot="${roadIndex}"]`);
        const playerRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);

        // 正常卡牌尺寸（场牌尺寸）- offsetWidth/offsetHeight 不受 transform:scale() 影响，直接返回游戏容器内部的布局尺寸
        // 优先从当前路查询，其次从对方路查询，最后从任意路查询
        let normalCardEl = playerRoadSlot?.querySelector('.card:not(.card-small)');
        if (!normalCardEl) normalCardEl = oppRoadSlot?.querySelector('.card:not(.card-small)');
        if (!normalCardEl) normalCardEl = document.querySelector('.player-road-slot .card:not(.card-small)');
        if (!normalCardEl) normalCardEl = document.querySelector('.opponent-road-slot .card:not(.card-small)');
        
        const normalCardWidth = normalCardEl ? normalCardEl.offsetWidth : 90;
        const normalCardHeight = normalCardEl ? normalCardEl.offsetHeight : 96;
        
        // 计算统一的正常卡牌尺寸：优先使用非叠牌方的实际尺寸
        let unifiedWidth = normalCardWidth;
        let unifiedHeight = normalCardHeight;
        const playerIsSmall = playerSourceCard?.classList.contains('card-small');
        const oppIsSmall = opponentSourceCard?.classList.contains('card-small');
        
        if (!playerIsSmall && playerRect) {
          unifiedWidth = playerRect.width;
          unifiedHeight = playerRect.height;
        } else if (!oppIsSmall && oppRect) {
          unifiedWidth = oppRect.width;
          unifiedHeight = oppRect.height;
        }
        
        console.log('[Crash Debug] unifiedWidth:', unifiedWidth, 'unifiedHeight:', unifiedHeight);

        // 我方动画卡牌
        if (playerSourceCard) {
          const isSmall = playerSourceCard.classList.contains('card-small');
          let animCard;
          
          if (isSmall) {
            // 叠牌：创建独立的动画容器，重新渲染为正常大小的卡牌
            const cardHTML = getCardFaceHTML('player', playerCard, false);
            animCard = document.createElement('div');
            animCard.className = 'animation-card rounded-lg shadow-lg z-40 overflow-hidden';
            animCard.style.position = 'absolute';
            animCard.style.left = `${playerRect.left}px`;
            animCard.style.top = `${playerRect.top}px`;
            animCard.style.width = `${normalCardWidth}px`;
            animCard.style.height = `${normalCardHeight}px`;
            animCard.style.margin = '0';
            animCard.style.zIndex = '9999';
            animCard.style.pointerEvents = 'none';
            animCard.innerHTML = cardHTML;
            animCard.style.transform = 'translate(0, 0) rotate(0deg) scaleY(1)';
          } else {
            // 非叠牌：使用 cloneNode(true) 完整复制源元素，确保所有样式和结构一致
            animCard = playerSourceCard.cloneNode(true);
            animCard.classList.add('animation-card', 'rounded-lg', 'shadow-lg', 'z-40', 'overflow-hidden');
            animCard.style.position = 'absolute';
            animCard.style.left = `${playerRect.left}px`;
            animCard.style.top = `${playerRect.top}px`;
            animCard.style.margin = '0';
            animCard.style.zIndex = '9999';
            animCard.style.pointerEvents = 'none';
            animCard.style.width = `${playerRect.width}px`;
            animCard.style.height = `${playerRect.height}px`;
            animCard.style.transform = 'none';
            animCard.style.boxSizing = 'border-box';
          }
          
          gameContainer.appendChild(animCard);
          
          animCards.push({ 
            el: animCard, 
            type: 'player', 
            fromRect: playerRect, 
            card: playerCard,
            isSmall: isSmall,
            normalWidth: normalCardWidth,
            normalHeight: normalCardHeight
          });
          playerSourceCard.style.visibility = 'hidden';
          playerSourceCard.style.opacity = '0';
          playerSourceCard.style.pointerEvents = 'none';
        }

        // 对方动画卡牌
        if (opponentSourceCard) {
          const isSmall = opponentSourceCard.classList.contains('card-small');
          let animCard;
          
          if (isSmall) {
            // 叠牌：创建独立的动画容器，重新渲染为正常大小的卡牌
            const cardHTML = getCardFaceHTML('opponent', opponentCard, false);
            animCard = document.createElement('div');
            animCard.className = 'animation-card rounded-lg shadow-lg z-40 overflow-hidden';
            animCard.style.position = 'absolute';
            animCard.style.left = `${oppRect.left}px`;
            
            // 对方叠牌：视觉顶部是尾部，变大时应从视觉底部开始
            // 对方使用 column-reverse，叠牌的 oppRect.top 是视觉底部
            // 动画卡牌应该从底部开始变大，所以 top = oppRect.top - (normalCardHeight - oppRect.height)
            const animTop = oppRect.top - (normalCardHeight - oppRect.height);
            animCard.style.top = `${animTop}px`;
            animCard.style.width = `${normalCardWidth}px`;
            animCard.style.height = `${normalCardHeight}px`;
            animCard.style.margin = '0';
            animCard.style.zIndex = '9999';
            animCard.style.pointerEvents = 'none';
            animCard.innerHTML = cardHTML;
            animCard.style.transform = 'translate(0, 0) rotate(0deg) scaleY(1)';
            
            // 记录实际的起始位置（已调整的位置）
            const actualFromRect = {
              ...oppRect,
              top: animTop,
              width: normalCardWidth,
              height: normalCardHeight
            };
            
            animCards.push({ 
              el: animCard, 
              type: 'opponent', 
              fromRect: actualFromRect, 
              card: opponentCard,
              isSmall: isSmall,
              normalWidth: normalCardWidth,
              normalHeight: normalCardHeight
            });
          } else {
            // 非叠牌：使用 cloneNode(true) 完整复制源元素，确保所有样式和结构一致
            animCard = opponentSourceCard.cloneNode(true);
            animCard.classList.add('animation-card', 'rounded-lg', 'shadow-lg', 'z-40', 'overflow-hidden');
            animCard.style.position = 'absolute';
            animCard.style.left = `${oppRect.left}px`;
            animCard.style.top = `${oppRect.top}px`;
            animCard.style.margin = '0';
            animCard.style.zIndex = '9999';
            animCard.style.pointerEvents = 'none';
            animCard.style.width = `${oppRect.width}px`;
            animCard.style.height = `${oppRect.height}px`;
            animCard.style.transform = 'none';
            animCard.style.boxSizing = 'border-box';
            
            animCards.push({ 
              el: animCard, 
              type: 'opponent', 
              fromRect: oppRect, 
              card: opponentCard,
              isSmall: isSmall,
              normalWidth: normalCardWidth,
              normalHeight: normalCardHeight
            });
          }
          
          gameContainer.appendChild(animCard);
          
          opponentSourceCard.style.visibility = 'hidden';
          opponentSourceCard.style.opacity = '0';
          opponentSourceCard.style.pointerEvents = 'none';
        }

        // 2. 找到该路其他卡牌（剩余牌，排除匹配牌；也收集 .card-small 叠牌）
        const otherCards = [];

        if (oppRoadSlot) {
          oppRoadSlot.querySelectorAll('.card, .card-small').forEach(card => {
            if (card !== opponentSourceCard) otherCards.push(card);
          });
        }
        if (playerRoadSlot) {
          playerRoadSlot.querySelectorAll('.card, .card-small').forEach(card => {
            if (card !== playerSourceCard) otherCards.push(card);
          });
        }

        // 3. 声明扩散粒子数组（在外层作用域以便所有 Phase 都能访问）
        const diffusedParticles = [];

        // ============ 动画序列 ============
        const chargeTime = 200;
        const collideTime = 60;
        const returnTime = 300;
        const flashTime = 300;
        const fadeTime = 600;
        const moveToNeutralTime = 700;

        // Phase 1: 蓄力（0 - chargeTime）—— 卡牌不后退，叠牌调整位置到统一尺寸的正确位置
        animCards.forEach(item => {
          const el = item.el;
          const isSmall = item.isSmall;
          const isPlayer = item.type === 'player';
          
          // 叠牌在创建时已通过transform设置了正确位置，这里只需调整box-shadow
          // 非叠牌不需要调整尺寸和位置
          el.style.transition = `box-shadow ${chargeTime}ms cubic-bezier(0.25, 0.1, 0.3, 1)`;
          
          el.style.boxShadow = isPlayer
            ? '0 0 30px 10px rgba(59, 130, 246, 0.7), 0 0 60px 20px rgba(59, 130, 246, 0.4)'
            : '0 0 30px 10px rgba(239, 68, 68, 0.7), 0 0 60px 20px rgba(239, 68, 68, 0.4)';
        });

        // Phase 2: 冲撞（chargeTime 后执行）- 双方卡牌在接触线处互相触碰，不重叠
        // ★ 2026-9-21 FIX（撞牌碰不到一起）：碰撞线改用「双方源牌布局位置的垂直中点」，
        //   卡牌高度统一用场牌真实布局高（normalCardHeight）。
        //   原实现写死 collideY=540 且高度取各自 fromRect.height（gBCR/scale 采集，
        //   源牌刚经历放置动画时采集值偏差）→ 单牌对单牌时两牌冲到中途停住没有触碰；
        //   有叠牌的一方（normalHeight=offsetHeight 真实值）则正常——与用户实测现象一致。
        var _pSrcTop = playerRect ? playerRect.top : (collideY - normalCardHeight / 2);
        var _oSrcBottom = oppRect ? (oppRect.top + oppRect.height) : collideY;
        var collideLine = (_pSrcTop + _oSrcBottom) / 2;
        setTimeout(() => {
          // 先禁用所有卡牌的 transition，强制 reflow 提交当前状态
          animCards.forEach(item => {
            item.el.style.transition = 'none';
          });
          void animCards[0]?.el.offsetHeight;

          animCards.forEach(item => {
            const el = item.el;
            const isPlayer = item.type === 'player';
            const isSmall = item.isSmall;

            const cardWidth = isSmall ? item.normalWidth : item.fromRect.width;
            const cardHeight = unifiedHeight;  // ★ 统一用场牌真实布局高
            const targetTop = isPlayer ? collideLine : collideLine - cardHeight;

            console.log('[Crash Debug] Phase 2:', isPlayer ? 'player' : 'opponent',
                        'isSmall:', isSmall,
                        'cardWidth:', cardWidth,
                        'cardHeight:', cardHeight,
                        'targetTop:', targetTop,
                        'collideLine:', collideLine);

            // Phase 2 只过渡：left、top、width、height、boxShadow
            el.style.transition = `left ${collideTime}ms cubic-bezier(0.4, 0, 0.7, 1), top ${collideTime}ms cubic-bezier(0.4, 0, 0.7, 1), width ${collideTime}ms cubic-bezier(0.4, 0, 0.7, 1), height ${collideTime}ms cubic-bezier(0.4, 0, 0.7, 1), box-shadow ${collideTime}ms cubic-bezier(0.4, 0, 0.7, 1)`;
            el.style.left = `${collideX - cardWidth / 2}px`;
            el.style.width = `${cardWidth}px`;
            el.style.height = `${cardHeight}px`;
            el.style.top = `${targetTop}px`;
            el.style.transform = 'none';
            el.style.boxShadow = isPlayer
              ? '0 0 50px 15px rgba(59, 130, 246, 0.9), 0 0 100px 40px rgba(59, 130, 246, 0.5)'
              : '0 0 50px 15px rgba(239, 68, 68, 0.9), 0 0 100px 40px rgba(239, 68, 68, 0.5)';
          });

          // ★ 过渡结束后强制贴到碰撞位置（防个别环境 transition 未走完停在半途）
          setTimeout(() => {
            animCards.forEach(item => {
              const isPlayer = item.type === 'player';
              const cardWidth = item.isSmall ? item.normalWidth : item.fromRect.width;
              item.el.style.transition = 'none';
              item.el.style.left = `${collideX - cardWidth / 2}px`;
              item.el.style.top = isPlayer ? `${collideLine}px` : `${collideLine - unifiedHeight}px`;
            });
          }, collideTime);

          // 碰撞瞬间播放音效 + 全屏震动（★ 2026-9-20 撞牌互动）
          if (typeof playSound === 'function') {
            playSound('crashSound');
          }
          if (typeof pbTriggerScreenShake === 'function') pbTriggerScreenShake();

          // Phase 3: 碰撞点触发扩散粒子（冲撞后）—— 扩散完直接消失
          setTimeout(() => {
            const particleColors = ['#FBBF24', '#F97316', '#FFFFFF', '#60A5FA'];
            const particleCount = 25;
            for (let i = 0; i < particleCount; i++) {
              const particle = document.createElement('div');
              particle.style.position = 'absolute';
              particle.style.left = `${collideX}px`;
              particle.style.top = `${collideLine}px`;
              particle.style.width = '14px';
              particle.style.height = '14px';
              particle.style.borderRadius = '50%';
              particle.style.zIndex = '9998';
              particle.style.pointerEvents = 'none';
              particle.style.backgroundColor = particleColors[Math.floor(Math.random() * particleColors.length)];
              particle.style.boxShadow = `0 0 20px 5px ${particle.style.backgroundColor}`;
              particle.style.transform = 'translate(-50%, -50%) scale(0.3)';
              particle.style.opacity = '0';
              gameContainer.appendChild(particle);
              diffusedParticles.push(particle);
            }

            // 粒子从碰撞点扩散 —— 扩散完淡出消失
            diffusedParticles.forEach((particle, i) => {
              const angle = (Math.PI * 2 / particleCount) * i;
              const distance = 150 + Math.random() * 80;
              const targetX = collideX + Math.cos(angle) * distance;
              const targetY = collideLine + Math.sin(angle) * distance;

              particle.style.transition = `all 500ms cubic-bezier(0.15, 0.7, 0.3, 1)`;
              setTimeout(() => {
                particle.style.opacity = '0.8';
                particle.style.left = `${targetX}px`;
                particle.style.top = `${targetY}px`;
                particle.style.transform = 'translate(-50%, -50%) scale(1)';
              }, 10);

              setTimeout(() => {
                particle.style.transition = `opacity 300ms ease-out, transform 300ms ease-out`;
                particle.style.opacity = '0';
                particle.style.transform = 'translate(-50%, -50%) scale(0.3)';
              }, 520);

              setTimeout(() => {
                if (gameContainer.contains(particle)) gameContainer.removeChild(particle);
              }, 850);
            });
          }, collideTime);

          // Phase 4: 回到原位（冲撞后）—— 叠牌保持正常尺寸不缩回
          setTimeout(() => {
            animCards.forEach(item => {
              item.el.style.transition = 'none';
            });
            void animCards[0]?.el.offsetHeight;
            
            animCards.forEach(item => {
              const el = item.el;
              const from = item.fromRect;
              const isSmall = item.isSmall;
              const isPlayer = item.type === 'player';
              
              // 叠牌保持统一尺寸，非叠牌使用原始尺寸
              const targetWidth = isSmall ? item.normalWidth : from.width;
              const targetHeight = isSmall ? item.normalHeight : from.height;
              
              // 计算正确的位置：叠牌需要调整位置以适应新尺寸
              let targetLeft = from.left;
              let targetTop = from.top;
              
              if (isSmall) {
                // 宽度变化导致的左右偏移
                const widthDiff = targetWidth - from.width;
                targetLeft = from.left - widthDiff / 2;
                
                // 我方叠牌：需要向下调整 top（因为变大后底部应该对齐原始位置的底部）
                if (isPlayer) {
                  const heightDiff = targetHeight - from.height;
                  targetTop = from.top - heightDiff;
                }
              }
              
              // Phase 4 过渡：left、top、width、height、boxShadow
              el.style.transition = `left ${returnTime}ms cubic-bezier(0.2, 0.5, 0.3, 1), top ${returnTime}ms cubic-bezier(0.2, 0.5, 0.3, 1), width ${returnTime}ms cubic-bezier(0.2, 0.5, 0.3, 1), height ${returnTime}ms cubic-bezier(0.2, 0.5, 0.3, 1), box-shadow ${returnTime}ms cubic-bezier(0.2, 0.5, 0.3, 1)`;
              el.style.left = `${targetLeft}px`;
              el.style.top = `${targetTop}px`;
              el.style.width = `${targetWidth}px`;
              el.style.height = `${targetHeight}px`;
              el.style.transform = 'none';
              el.style.boxShadow = isPlayer
                ? '0 0 25px 8px rgba(59, 130, 246, 0.6), 0 0 50px 15px rgba(59, 130, 246, 0.3)'
                : '0 0 25px 8px rgba(239, 68, 68, 0.6), 0 0 50px 15px rgba(239, 68, 68, 0.3)';
            });

            // Phase 5: 该路其他卡牌白光闪烁（回到原位后）
            setTimeout(() => {
              otherCards.forEach(card => {
                card.style.transition = `filter ${flashTime / 2}ms ease-in-out, opacity ${fadeTime}ms ease-out, transform ${fadeTime}ms ease-out`;
                card.style.filter = 'brightness(3) drop-shadow(0 0 15px rgba(255, 255, 255, 1))';
              });

              // 闪烁后逐渐消失
              setTimeout(() => {
                otherCards.forEach(card => {
                  card.style.opacity = '0';
                  card.style.filter = 'brightness(0.5)';
                  card.style.transform = 'scale(0.8)';
                });
              }, flashTime);

              // Phase 6: 匹配牌飞入中立区 + 沿途产生粒子轨迹（白光闪烁后）
              setTimeout(() => {
                // 1. 设置起点位置（禁用 transition）
                // 注意：此时卡牌已经通过 Phase 4 回到了原始位置，所以起点就是 fromRect
                // 叠牌保持统一尺寸，非叠牌使用原始尺寸
                animCards.forEach(item => {
                  const el = item.el;
                  const from = item.fromRect;
                  const isSmall = item.isSmall;
                  const isPlayer = item.type === 'player';
                  
                  const startWidth = isSmall ? item.normalWidth : from.width;
                  const startHeight = isSmall ? item.normalHeight : from.height;
                  
                  // 我方叠牌：需要调整 top 位置
                  let startTop = from.top;
                  if (isSmall && isPlayer) {
                    const heightDiff = startHeight - from.height;
                    startTop = from.top - heightDiff;
                  }
                  
                  el.style.transition = 'none';
                  el.style.left = `${from.left}px`;
                  el.style.top = `${startTop}px`;
                  el.style.width = `${startWidth}px`;
                  el.style.height = `${startHeight}px`;
                });
                
                // 强制 reflow 提交起点状态
                void animCards[0]?.el.offsetHeight;
                
                // 2. 设置目标位置（启用 transition）
                animCards.forEach(item => {
                  const el = item.el;
                  const isPlayer = item.type === 'player';
                  const isSmall = item.isSmall;
                  const from = item.fromRect;
                  
                  let toRect;
                  if (isPlayer && playerNeutralRect) {
                    const cardWidth = Math.min(playerNeutralRect.width, 90);
                    const realCardHeight = cardWidth * 1.4;
                    toRect = {
                      left: playerNeutralRect.left + (playerNeutralRect.width - cardWidth) / 2,
                      top: playerNeutralRect.top + 2,
                      width: cardWidth,
                      height: realCardHeight
                    };
                  } else if (!isPlayer && opponentNeutralRect) {
                    const cardWidth = Math.min(opponentNeutralRect.width, 90);
                    const realCardHeight = cardWidth * 1.4;
                    toRect = {
                      left: opponentNeutralRect.left + (opponentNeutralRect.width - cardWidth) / 2,
                      top: opponentNeutralRect.top + opponentNeutralRect.height - realCardHeight - 2,
                      width: cardWidth,
                      height: realCardHeight
                    };
                  } else {
                    toRect = {
                      left: from.left,
                      top: from.top,
                      width: from.width,
                      height: from.height
                    };
                  }
                  
                  // Phase 6 只过渡：left、top、width、height
                  el.style.transition = `left ${moveToNeutralTime}ms cubic-bezier(0.4, 0.2, 0.4, 1), top ${moveToNeutralTime}ms cubic-bezier(0.4, 0.2, 0.4, 1), width ${moveToNeutralTime}ms cubic-bezier(0.4, 0.2, 0.4, 1), height ${moveToNeutralTime}ms cubic-bezier(0.4, 0.2, 0.4, 1)`;
                  el.style.left = `${toRect.left}px`;
                  el.style.top = `${toRect.top}px`;
                  el.style.width = `${toRect.width}px`;
                  el.style.height = `${toRect.height}px`;
                  el.style.transform = 'none';
                });

                // 2. 卡牌移动时产生粒子轨迹
                const trailParticleColors = ['#FBBF24', '#F97316', '#FFFFFF', '#60A5FA'];
                const trailInterval = 40;
                const trailDuration = moveToNeutralTime;
                let elapsed = 0;

                const trailTimer = setInterval(() => {
                  animCards.forEach(item => {
                    const from = item.fromRect;
                    const isPlayer = item.type === 'player';
                    
                    let targetRect;
                    if (isPlayer && playerNeutralRect) {
                      const cardWidth = Math.min(playerNeutralRect.width, 90);
                      const realCardHeight = cardWidth * 1.4;
                      targetRect = {
                        left: playerNeutralRect.left + (playerNeutralRect.width - cardWidth) / 2,
                        top: playerNeutralRect.top + 2,
                        width: cardWidth,
                        height: realCardHeight
                      };
                    } else if (!isPlayer && opponentNeutralRect) {
                      const cardWidth = Math.min(opponentNeutralRect.width, 90);
                      const realCardHeight = cardWidth * 1.4;
                      targetRect = {
                        left: opponentNeutralRect.left + (opponentNeutralRect.width - cardWidth) / 2,
                        top: opponentNeutralRect.top + opponentNeutralRect.height - realCardHeight - 2,
                        width: cardWidth,
                        height: realCardHeight
                      };
                    } else {
                      targetRect = {
                        left: collideX - from.width / 2,
                        top: collideY,
                        width: from.width,
                        height: from.height
                      };
                    }

                    const startWidth = from.width;
                    const startHeight = from.height;
                    const startLeft = from.left;
                    const startTop = from.top;

                    const t = Math.min(elapsed / trailDuration, 1);
                    const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
                    const currentLeft = startLeft + (targetRect.left - startLeft) * eased;
                    const currentTop = startTop + (targetRect.top - startTop) * eased;
                    const currentWidth = from.width + (targetRect.width - from.width) * eased;
                    const currentHeight = from.height + (targetRect.height - from.height) * eased;

                    for (let k = 0; k < 3; k++) {
                      const p = document.createElement('div');
                      p.style.position = 'absolute';
                      p.style.zIndex = '9998';
                      p.style.pointerEvents = 'none';
                      const size = 10 + Math.random() * 6;
                      p.style.width = `${size}px`;
                      p.style.height = `${size}px`;
                      p.style.borderRadius = '50%';
                      const color = trailParticleColors[Math.floor(Math.random() * trailParticleColors.length)];
                      p.style.backgroundColor = color;
                      p.style.boxShadow = `0 0 15px 4px ${color}`;
                      const cx = currentLeft + currentWidth / 2 + (Math.random() - 0.5) * 20;
                      const cy = currentTop + currentHeight / 2 + (Math.random() - 0.5) * 20;
                      p.style.left = `${cx}px`;
                      p.style.top = `${cy}px`;
                      p.style.transform = 'translate(-50%, -50%) scale(1)';
                      p.style.opacity = '0.7';
                      gameContainer.appendChild(p);

                      const driftX = (Math.random() - 0.5) * 30;
                      const driftY = (Math.random() - 0.5) * 30;
                      p.style.transition = 'all 600ms ease-out';
                      setTimeout(() => {
                        p.style.opacity = '0';
                        p.style.transform = `translate(calc(-50% + ${driftX}px), calc(-50% + ${driftY}px)) scale(0.2)`;
                      }, 10);
                      setTimeout(() => {
                        if (gameContainer.contains(p)) gameContainer.removeChild(p);
                      }, 620);
                    }
                  });

                  elapsed += trailInterval;
                  if (elapsed >= trailDuration) clearInterval(trailTimer);
                }, trailInterval);

                // 3. 卡牌到达中立区后清理并 resolve
                setTimeout(() => {
                  animCards.forEach(item => {
                    if (gameContainer.contains(item.el)) gameContainer.removeChild(item.el);
                  });
                  otherCards.forEach(card => {
                    if (card.parentNode) card.style.display = 'none';
                  });
                  resolve();
                }, moveToNeutralTime + 100);

              }, flashTime + 150);

            }, returnTime);

          }, collideTime);

        }, chargeTime);
      });
    }

    // ============================================================================
    // 【路牌匹配 · performRoadMatch】拖牌/撞牌操作核心执行函数
    // ============================================================================
    //
    // 触发条件: 玩家在匹配操作界面，点击目标路牌/匹配牌
    //
    // 操作流程:
    //   1. 校验：双方中立区必须有空位，否则提示并 return
    //   2. 定位 DOM：查找匹配路牌的源元素与中立区目标容器
    //   3. 播放动画：拖牌(drag) / 撞牌(crash) 分别对应不同的移动动画
    //      撞牌时调用 animateCrashSequence（蓄力冲撞 + 粒子扩散 + 白光闪烁）
    //   4. 更新数据：把双方匹配牌写入中立区，清除该路的叠牌/场牌
    //   5. 记录回合：addTurnRecord 写入操作日志
    //   6. 触发 checkRoadResult 检查胜负
    //
    // 参数: matchType = 'drag'（相邻匹配） / 'crash'（相同点数匹配）
    //       roadIndex 目标路数索引；location 匹配牌的位置
    // ============================================================================
    async function performRoadMatch(matchType, opponentCard, playerCard, roadIndex, location, stackIndex) {
      clearRoadMatchHighlights();
      clearNeutralAuras();

      // ★ 防御标记：本地正在执行 match，忽略 handlePracticeStateSync 来的外部状态覆盖
      if (typeof GameState !== 'undefined') GameState.localMatchInProgress = true;

      // 修复：中立区没有空格子时，阻止拖牌/撞牌执行
      if (!hasEmptyNeutralSlot('player') || !hasEmptyNeutralSlot('opponent')) {
        updateGameStatus(__t('st_neutral_full_block').replace('{a}', matchType === 'drag' ? __t('act_drag') : __t('act_clash')), 'st_neutral_full_block');
        return;
      }
      const playerNeutralIndex = findEmptyNeutralSlot('player');
      const opponentNeutralIndex = findEmptyNeutralSlot('opponent');

      // ★ 回放录制：记录匹配事件（类型/匹配路/目标中立路），回放时精确还原动画（2026-9-11）
      if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
        try { ReplayRecorder.noteMatch(matchType, roadIndex, playerNeutralIndex); } catch (e) {}
      }

      // ★ 先发消息给队员（在 DOM 定位和播放动画之前，让队员和队长同步启动）
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        // 先发清光环（让队员清掉旧的 match glow）
        PBOnline.sendMatchGlowClear({ glowType: 'all' });
        // 再发完整 match 操作
        PBOnline.sendMatchAction({
          matchType: matchType,
          roadIndex: roadIndex,
          playerCard: { id: playerCard.id, value: playerCard.value, display: playerCard.display, suit: playerCard.suit },
          opponentCard: { id: opponentCard.id, value: opponentCard.value, display: opponentCard.display, suit: opponentCard.suit },
          playerNeutralIndex: playerNeutralIndex,
          opponentNeutralIndex: opponentNeutralIndex,
          location: location,
          stackIndex: stackIndex,
          isAI: false
        });
      }

      // ---------- 定位源和目标 DOM 元素 ----------
      // 找到对方匹配牌的源元素（优先用 data-card-id 精确匹配，避免同点数选错）
      const opponentRoadSlot = document.querySelector(`.opponent-road-slot[data-road-slot="${roadIndex}"]`);
      let opponentSourceCard = null;
      if (opponentRoadSlot && opponentCard) {
        // 1) 优先按 data-card-id 精确匹配（最可靠，能区分同点数不同牌）
        opponentSourceCard = opponentRoadSlot.querySelector(`.card[data-card-id="${opponentCard.id}"], .card-small[data-card-id="${opponentCard.id}"]`);
        // 2) 位置回退
        if (!opponentSourceCard) {
          const cards = opponentRoadSlot.querySelectorAll('.card, .card-small');
          if (cards.length > 0) {
            if (location === 'field') {
              opponentSourceCard = cards[0] || null;
            } else if (stackIndex !== null && stackIndex !== undefined) {
              const domIndex = stackIndex + 1;
              opponentSourceCard = cards[domIndex] || null;
            }
            // 3) 文本回退
            if (!opponentSourceCard) {
              for (let i = 0; i < cards.length; i++) {
                const cardText = cards[i].textContent || '';
                if (cardText.trim() === opponentCard.display) {
                  opponentSourceCard = cards[i];
                  break;
                }
              }
            }
            // 4) 最终兜底
            if (!opponentSourceCard && cards.length > 0) {
              opponentSourceCard = cards[0];
            }
          }
        }
      }

      // 找到我方匹配牌的源元素（优先用 data-card-id 精确匹配）
      const playerRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);
      let playerSourceCard = null;
      if (playerRoadSlot && playerCard) {
        // 1) 优先按 data-card-id 精确匹配（最可靠，解决了同点数选错的问题）
        playerSourceCard = playerRoadSlot.querySelector(`.card[data-card-id="${playerCard.id}"], .card-small[data-card-id="${playerCard.id}"]`);
        // 2) 位置/文本回退
        if (!playerSourceCard) {
          const cards = playerRoadSlot.querySelectorAll('.card, .card-small');
          if (cards.length > 0) {
            if (GameState.playerField[roadIndex]?.id === playerCard.id) {
              for (let i = 0; i < cards.length; i++) {
                const cardText = cards[i].textContent || '';
                if (cardText.includes(playerCard.display) || cardText.trim() === playerCard.display) {
                  playerSourceCard = cards[i];
                  break;
                }
              }
              if (!playerSourceCard) playerSourceCard = cards[0];
            } else {
              const stackIdx = GameState.playerStack[roadIndex].findIndex(c => c.id === playerCard.id);
              for (let i = 0; i < cards.length; i++) {
                const cardText = cards[i].textContent || '';
                if (cardText.includes(playerCard.display) || cardText.trim() === playerCard.display) {
                  playerSourceCard = cards[i];
                  break;
                }
              }
              if (!playerSourceCard && stackIdx !== -1 && cards[stackIdx]) {
                playerSourceCard = cards[stackIdx];
              }
              if (!playerSourceCard) playerSourceCard = cards[0];
            }
          }
        }
      }

      // 找到目标中立区格子
      const playerNeutralSlot = document.querySelector(`.player-neutral-slot[data-slot="${playerNeutralIndex}"]`);
      const opponentNeutralSlot = document.querySelector(`.opponent-neutral-slot[data-slot="${opponentNeutralIndex}"]`);

      // ---------- 播放动画 ----------
      const animationPromises = [];
      // 根据栏目管理中的功能开关决定是否播放拖牌/撞牌动画
      const animationEnabled = matchType === 'drag'
        ? (typeof isFeatureEnabled === 'function' ? isFeatureEnabled('drag-animation') : true)
        : (typeof isFeatureEnabled === 'function' ? isFeatureEnabled('crash-animation') : true);

      if (matchType === 'crash') {
        // 撞牌：使用完整的撞牌动画序列（蓄力→冲撞→粒子→白光→移入中立区）
        if (animationEnabled && opponentSourceCard && playerSourceCard && playerNeutralSlot && opponentNeutralSlot) {
          animationPromises.push(
            animateCrashSequence(opponentCard, playerCard, roadIndex, opponentSourceCard, playerSourceCard, playerNeutralSlot, opponentNeutralSlot)
          );
        }
        // 等待撞牌动画完成（最长等待 2500ms，足够完整播放序列）
        if (animationPromises.length > 0) {
          await Promise.race([Promise.all(animationPromises), delay(2500)]);
        }
      } else {
        // 拖牌：使用原有的卡牌移动动画
        if (animationEnabled && opponentSourceCard && opponentNeutralSlot) {
          animationPromises.push(animateCardMove(opponentSourceCard, opponentNeutralSlot, 'opponent', opponentCard, matchType));
        }
        if (animationEnabled && playerSourceCard && playerNeutralSlot) {
          animationPromises.push(animateCardMove(playerSourceCard, playerNeutralSlot, 'player', playerCard, matchType));
        }

        // 等待动画完成（确保两张匹配牌同时结束后再刷新数据）
        if (animationPromises.length > 0) {
          await Promise.all(animationPromises);
        }
      }

      if (matchType === 'drag') {
        // 拖牌: 双方匹配的牌移入各自中立区（已在上面提前检查了空位）
        GameState.playerNeutralCards[playerNeutralIndex].push(playerCard);
        GameState.opponentNeutralCards[opponentNeutralIndex].push(opponentCard);
        var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_drag_success').replace('{opp}', opponentCard.display).replace('{me}', playerCard.display), 'st_drag_success');
        addTurnRecord('拖牌', `对方${opponentCard.display}和我方${playerCard.display}移入中立区`, 'player');

        // 从对方移除匹配的牌
        if (location === 'field') {
          GameState.opponentField[roadIndex] = null;
        } else {
          GameState.opponentStack[roadIndex].splice(stackIndex, 1);
        }

        // 从我方场牌区或叠牌区移除匹配的牌
        if (GameState.playerField[roadIndex]?.id === playerCard.id) {
          GameState.playerField[roadIndex] = null;
        } else {
          const stackIdx = GameState.playerStack[roadIndex].findIndex(c => c.id === playerCard.id);
          if (stackIdx !== -1) {
            GameState.playerStack[roadIndex].splice(stackIdx, 1);
          }
        }

        // 递进逻辑：第1张牌消失后，第2张自动递进到第1张（双方）
        // 对方：field 为空但 stack 有牌时，stack[0] 递进到 field
        if (!GameState.opponentField[roadIndex] && GameState.opponentStack[roadIndex] && GameState.opponentStack[roadIndex].length > 0) {
          GameState.opponentField[roadIndex] = GameState.opponentStack[roadIndex].shift();
        }
        // 我方：field 为空但 stack 有牌时，stack[0] 递进到 field
        if (!GameState.playerField[roadIndex] && GameState.playerStack[roadIndex] && GameState.playerStack[roadIndex].length > 0) {
          GameState.playerField[roadIndex] = GameState.playerStack[roadIndex].shift();
        }

        // 匹配操作教程：第一次完成拖牌时显示"完成学习"按钮
        if (isMatchTutorial && matchTutorialStep === 2 && !matchTutDragCompleted) {
          matchTutDragCompleted = true;
          const btns = document.getElementById('match-step3-end-buttons');
          if (btns) {
            btns.innerHTML = `
              <button id="match-complete-learning-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>
            `;
            btns.style.display = 'flex';
            const completeBtn = document.getElementById('match-complete-learning-btn');
            if (completeBtn) {
              completeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                matchTutorialStep = 3;
                showMatchTutorialStep4();
              });
            }
          }
        }
      } else {
        // 撞牌: 双方匹配的牌移入各自中立区（已在上面提前检查了空位），该路剩余卡牌消失
        GameState.playerNeutralCards[playerNeutralIndex].push(playerCard);
        GameState.opponentNeutralCards[opponentNeutralIndex].push(opponentCard);
        var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_clash_success').replace('{opp}', opponentCard.display).replace('{me}', playerCard.display).replace('{n}', roadIndex+1), 'st_clash_success');
        addTurnRecord('撞牌', `对方${opponentCard.display}和我方${playerCard.display}移入中立区，第${roadIndex + 1}路清空`, 'player');

        // 清空该路所有卡牌
        GameState.playerField[roadIndex] = null;
        GameState.playerStack[roadIndex] = [];
        GameState.opponentField[roadIndex] = null;
        GameState.opponentStack[roadIndex] = [];

        // 匹配操作教程交互步骤3：第一次完成撞牌时显示"完成学习"按钮
        if (isMatchTutorial && matchTutorialStep === 4 && !matchTutCrashCompleted) {
          matchTutCrashCompleted = true;
          const btns = document.getElementById('match-step5-end-buttons');
          if (btns) {
            btns.innerHTML = `
              <button id="match-step5-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>
            `;
            btns.style.display = 'flex';
            const completeBtn = document.getElementById('match-step5-complete-btn');
            if (completeBtn) {
              completeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                stopCrisisMusic();
                stopEndGameMusic();
                matchTutorialStep = 5;
                showMatchTutorialStep6();
              });
            }
          }
        }
      }
      
      // 从我方手牌/明牌/暗牌区移除打出的牌
      // ★ 2v2：左右玩家共用数组，改用 null 占位保持索引稳定，避免 filter 压缩破坏对方玩家的牌
      if (GameState.fourPlayerActive) {
        var _phI = GameState.playerHand.findIndex(c => c && c.id === playerCard.id);
        if (_phI >= 0) GameState.playerHand[_phI] = null;
        var _prI = GameState.playerRevealedCards.findIndex(c => c && c.id === playerCard.id);
        if (_prI >= 0) GameState.playerRevealedCards[_prI] = null;
        var _pdI = GameState.playerDarkCards.findIndex(c => c && c.id === playerCard.id);
        if (_pdI >= 0) GameState.playerDarkCards[_pdI] = null;
      } else {
        GameState.playerHand = GameState.playerHand.filter(c => c.id !== playerCard.id);
        GameState.playerRevealedCards = GameState.playerRevealedCards.filter(c => c.id !== playerCard.id);
        GameState.playerDarkCards = GameState.playerDarkCards.filter(c => c.id !== playerCard.id);
      }
      
      updateUI();
      
      // ★ 2026-9-8 规则修正（出牌两阶段）：玩家执行完 match 仍处于"打出未放置"状态，
      //   此处不再提前全路重算拼点（否则会出现"牌还没放置就显示拼点结果"）。
      //   紧随其后的 finalizePlacement('player', roadIndex) 会统一对 5 路重算，效果一致且时机合规。
      
      finalizePlacement('player', roadIndex);
      // ★ 清除本地 match 标记
      if (typeof GameState !== 'undefined') GameState.localMatchInProgress = false;
    }

    // findEmptyNeutralSlot: 查找空的中立区格子
    function findEmptyNeutralSlot(playerType) {
      const neutralCards = playerType === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      
      for (let i = 0; i < 7; i++) {
        if (neutralCards[i].length === 0) {
          return i;
        }
      }
      
      // 如果没有空的，找一个未满的
      for (let i = 0; i < 7; i++) {
        if (neutralCards[i].length < 4) {
          return i;
        }
      }
      
      return -1;
    }

    // hasEmptyNeutralSlot: 检查是否存在完全空的中立区格子（neutralCards[i].length === 0）
    // 用于判断是否阻止拖牌/撞牌执行：当双方都没有空格子时，不能再放入新牌
    function hasEmptyNeutralSlot(playerType) {
      const neutralCards = playerType === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      for (let i = 0; i < 7; i++) {
        if (neutralCards[i].length === 0) return true;
      }
      return false;
    }
    
    // ----------------------------------------------------------------------------
    // 【出牌条件检查】
    // ----------------------------------------------------------------------------
    // canPlayerPlay/canOpponentPlay: 检查玩家/对方是否可以出牌
    // 条件: 手牌不为空 且 存在空的场牌位置
    function canPlayerPlay() {
      const hasEmptyField = GameState.playerField.includes(null);
      // ★ 2v2 手牌/明牌/暗牌可能含 null 占位（出牌后空槽位），用 some 跳过 null
      const hasHandCards = GameState.playerHand.some(c => !!c);
      const hasDeckCards = GameState.playerDeck.length > 0;
      const hasRevealedCards = GameState.playerRevealedCards.some(c => !!c);
      const hasDarkCards = GameState.playerDarkCards.some(c => !!c);

      const canPlayHandOrDeck = (hasHandCards || hasDeckCards) && hasEmptyField;

      // 明牌/暗牌可叠加路：该路有牌(field有牌 或 stack有牌) 且 stack未满
      // 注：对方拖牌可能把我方 field 设为 null，但 stack 可能还有牌，此时仍可叠加
      let hasStackableRoadForRevealed = false;  // 明牌可放：空路 或 有牌且stack未满
      let hasStackableRoadForDark = false;       // 暗牌可放：有牌(field或stack)且stack未满
      for (let i = 0; i < GameState.playerField.length; i++) {
        const roadHasCards = GameState.playerField[i] !== null ||
                            (GameState.playerStack[i] && GameState.playerStack[i].length > 0);
        const stackNotFull = !GameState.playerStack[i] || GameState.playerStack[i].length < 8;
        if (GameState.playerField[i] === null || (roadHasCards && stackNotFull)) {
          hasStackableRoadForRevealed = true;
        }
        if (roadHasCards && stackNotFull) {
          hasStackableRoadForDark = true;
        }
        if (hasStackableRoadForRevealed && hasStackableRoadForDark) break;
      }
      const canPlayRevealed = hasRevealedCards && hasStackableRoadForRevealed;
      const canPlayDark = hasDarkCards && hasStackableRoadForDark;

      return canPlayHandOrDeck || canPlayRevealed || canPlayDark;
    }

    function canOpponentPlay() {
      const hasEmptyField = GameState.opponentField.includes(null);
      const hasHandCards = GameState.opponentHand.length > 0;
      const hasDeckCards = GameState.opponentDeck.length > 0;
      const hasRevealedCards = GameState.opponentRevealedCards.length > 0;
      const hasDarkCards = GameState.opponentDarkCards.length > 0;

      // 手牌/牌堆需要空路
      const canPlayHandOrDeck = (hasHandCards || hasDeckCards) && hasEmptyField;

      // 明牌/暗牌可叠加路：该路有牌(field有牌 或 stack有牌) 且 stack未满
      // 注：我方拖牌可能把对方 field 设为 null，但 stack 可能还有牌，此时仍可叠加
      let hasStackableRoadForRevealed = false;  // 明牌可放：空路 或 有牌且stack未满
      let hasStackableRoadForDark = false;       // 暗牌可放：有牌(field或stack)且stack未满
      for (let i = 0; i < GameState.opponentField.length; i++) {
        const roadHasCards = GameState.opponentField[i] !== null ||
                            (GameState.opponentStack[i] && GameState.opponentStack[i].length > 0);
        const stackNotFull = !GameState.opponentStack[i] || GameState.opponentStack[i].length < 8;
        if (GameState.opponentField[i] === null || (roadHasCards && stackNotFull)) {
          hasStackableRoadForRevealed = true;
        }
        if (roadHasCards && stackNotFull) {
          hasStackableRoadForDark = true;
        }
        if (hasStackableRoadForRevealed && hasStackableRoadForDark) break;
      }
      const canPlayRevealed = hasRevealedCards && hasStackableRoadForRevealed;
      const canPlayDark = hasDarkCards && hasStackableRoadForDark;

      return canPlayHandOrDeck || canPlayRevealed || canPlayDark;
    }

    // ============================================================================
    // 【四人模式辅助函数】
    // ============================================================================
    // 子玩家定义：
    //   0 = 玩家A（蓝方左，人类）
    //   1 = AI_A （红方左，AI）
    //   2 = AI_B （红方右，AI）
    //   3 = 玩家B（蓝方右，人类）
    //
    // 卡牌分配（每队14张可见牌+12张牌堆）：
    //   左侧子玩家：手牌[0-3](4张), 暗牌[0-1](2张), 明牌[0](1张) = 7张
    //   右侧子玩家：手牌[4-5](2张), 暗牌[2-4](3张), 明牌[1-2](2张) = 7张
    // ============================================================================

    // 判断是否处于四人AI模式
    function isFourPlayerAI() {
      return GameState.fourPlayerActive;
    }

    // 获取当前子玩家是否为AI
    function isCurrentSubPlayerAI() {
      if (!GameState.fourPlayerActive) return false;
      // ★ 2v2在线匹配模式：没有AI，所有4名玩家都是真人
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) return false;
      var sub = GameState.fourPlayerSubTurn;
      // ★ 人机2v1模式：玩家=1(队长)和3(队员)，AI=0和2
      //   联机2v2模式：4个都是玩家，上面已经 return false
      return sub === 0 || sub === 2;
    }

    // 获取当前子玩家是否在左侧
    function isCurrentSubPlayerLeft() {
      if (!GameState.fourPlayerActive) return true;
      var sub = GameState.fourPlayerSubTurn;
      var result = sub === 0 || sub === 1;
      return result;
    }

    // ★ 人机2v1模式：判断指定区域+索引的卡牌是否属于本地玩家
    // areaType: 'hand' | 'darkCards' | 'revealedCards'
    // slotIndex: 槽位索引（data-hand-slot / data-dark-slot / data-revealed-slot 属性值）
    // 返回 true=本地玩家的牌（显示正面），false=队友的牌（显示背面）
    function isLocalPlayerCard2v2(areaType, slotIndex) {
      if (typeof PBOnline === 'undefined' || !PBOnline || !PBOnline.isPractice2v2Mode) return true;
      if (typeof _practiceMySeatIndex === 'undefined' || _practiceMySeatIndex < 0) return true;
      if (areaType === 'hand') {
        // 座位0=左侧（手牌0-4），座位1=右侧（手牌5）
        return _practiceMySeatIndex === 0
          ? (slotIndex >= 0 && slotIndex < 5)
          : (slotIndex >= 5 && slotIndex < 6);
      }
      if (areaType === 'darkCards') {
        // 座位0=左侧（暗牌0），座位1=右侧（暗牌1-4）
        return _practiceMySeatIndex === 0
          ? (slotIndex >= 0 && slotIndex < 1)
          : (slotIndex >= 1 && slotIndex < 5);
      }
      if (areaType === 'revealedCards') {
        // 座位0=左侧（明牌0），座位1=右侧（明牌1-2）
        return _practiceMySeatIndex === 0
          ? (slotIndex >= 0 && slotIndex < 1)
          : (slotIndex >= 1 && slotIndex < 3);
      }
      return true;
    }

    // ★ 人机2v1模式：判断当前回合是否是本地玩家的回合
    // ★★★ 人机2v1映射：玩家=1(左)和3(右)，AI=0(左)和2(右)
    //   队长(座位0=左侧玩家) → sub=1；队员(座位1=右侧玩家) → sub=3
    function isLocalPlayerTurn() {
      // ★ 2v2在线匹配模式：根据 playerIdx 判断
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) {
        if (!GameState.fourPlayerActive) return true;
        var sub = GameState.fourPlayerSubTurn;
        var myIdx = PBOnline.playerIdx;
        return sub === myIdx;
      }
      if (typeof PBOnline === 'undefined' || !PBOnline || !PBOnline.isPractice2v2Mode) return true;
      if (!GameState.fourPlayerActive) return true;
      if (typeof _practiceMySeatIndex === 'undefined' || _practiceMySeatIndex < 0) return true;
      var sub = GameState.fourPlayerSubTurn;
      // ★ 人机2v1：队长(座位0)→sub=1，队员(座位1)→sub=3
      if (_practiceMySeatIndex === 0) return sub === 1;
      if (_practiceMySeatIndex === 1) return sub === 3;
      return true;
    }

    // 获取当前子玩家的手牌索引范围
    function getCurrentSubPlayerHandRange() {
      if (!GameState.fourPlayerActive) return { start: 0, end: 6 };
      var isLeft = isCurrentSubPlayerLeft();
      // ★ 左侧5张(0-4)，右侧1张(5)
      return isLeft ? { start: 0, end: 5 } : { start: 5, end: 6 };
    }

    // 获取当前子玩家的暗牌索引范围
    function getCurrentSubPlayerDarkRange() {
      if (!GameState.fourPlayerActive) return { start: 0, end: 5 };
      var isLeft = isCurrentSubPlayerLeft();
      // ★ 左侧1张(0)，右侧4张(1-4)
      return isLeft ? { start: 0, end: 1 } : { start: 1, end: 5 };
    }

    // 获取当前子玩家的明牌索引范围
    function getCurrentSubPlayerRevealedRange() {
      if (!GameState.fourPlayerActive) return { start: 0, end: 3 };
      var isLeft = isCurrentSubPlayerLeft();
      return isLeft ? { start: 0, end: 1 } : { start: 1, end: 3 };
    }

    // 获取当前子玩家名称
    function getCurrentSubPlayerName() {
      if (!GameState.fourPlayerActive) return '';
      // ★ 2v2在线匹配模式：返回真实玩家昵称（不是AI名称）
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode && PBOnline.getSubPlayerName) {
        var realName = PBOnline.getSubPlayerName(GameState.fourPlayerSubTurn);
        if (realName) return realName;
      }
      var names = ['人机A', '玩家A', '人机B', '玩家B'];
      return names[GameState.fourPlayerSubTurn] || '';
    }

    // 四人模式：检查当前子玩家是否能出牌
    function canFourPlayerSubPlay(side) {
      // side = 'player' 或 'opponent'
      var handRange, darkRange, revealedRange;
      var hand, dark, revealed, field, stack;

      if (side === 'player') {
        hand = GameState.playerHand;
        dark = GameState.playerDarkCards;
        revealed = GameState.playerRevealedCards;
        field = GameState.playerField;
        stack = GameState.playerStack;
      } else {
        hand = GameState.opponentHand;
        dark = GameState.opponentDarkCards;
        revealed = GameState.opponentRevealedCards;
        field = GameState.opponentField;
        stack = GameState.opponentStack;
      }

      // ★ 同阵营的两个子玩家共享全部牌，不区分左右
      // ★ 2026-8-31 FIX: 玩家阵营也必须共享！否则 sub=3(玩家右) 只看 hand 4-6，
      //   恰好没牌就被错误标记 stopped → 回合跳过！
      //   只有 Practice 2v2（有真实队员）才按左/右各分一半
      var is2v1Shared = (GameState.fourPlayerActive
        && typeof PBOnline !== 'undefined' && PBOnline
        && !PBOnline.isOnline2v2Mode
        && !(PBOnline.isPractice2v2Mode && PBOnline.hasTeammate));

      // ★ 2026-9-1 FIX(根因修复)：人机2v1（真实组队练习模式）的【对手侧】必须共享全范围！
      //   对手是 1 个 AI 控制两个位置(sub0/sub2)，AIDecisionEngine.decide 从整个
      //   opponentHand/opponentDarkCards/opponentRevealedCards 数组选牌（不分左右），
      //   若此处按左右切分，牌恰好在"另一半"时会误判"AI无牌"→ 错误标记 stopped →
      //   该 AI 位置整局被跳过（2026-9-1 实测 Run1 的 sub2 被跳过即此因）。
      //   （getFourPlayerSubHand 系列的 is2v1AIShared 早已有此逻辑，此处补齐对齐）
      var _isAI2v1Shared = (GameState.fourPlayerActive
        && typeof PBOnline !== 'undefined' && PBOnline
        && PBOnline.isPractice2v2Mode && PBOnline.hasTeammate
        && !PBOnline.isOnline2v2Mode
        && side === 'opponent');

      if (is2v1Shared || _isAI2v1Shared) {
        // 共享模式：单机2v1双方共享 / 人机2v1的AI对手侧共享
        handRange = { start: 0, end: 6 };
        darkRange = { start: 0, end: 5 };
        revealedRange = { start: 0, end: 3 };
      } else {
        // ★ 2026-9-1 FIX(根因修复)：切分范围必须与点击判定侧完全一致！
        //   此前 right hand={4,6}、dark 左={0,2}/右={2,5} 与 handlePlayerHandClick 实际
        //   使用的 isLocalPlayerCard2v2 / getCurrentSubPlayer*Range（hand 左0-4/右5-6、
        //   dark 左0/右1-4、revealed 左0/右1-2）矛盾，导致两种死锁：
        //   ① 轮到队员(sub3)时 hand[4] 有牌 → 此处判"可出"拒绝终止，但点击 hand[4]
        //     被座位归属拦截 → 出不了也终止不了 → 回合永久卡死（实测 Run3/4 卡 25s+）；
        //   ② 轮到队长(sub1)时仅 dark[1] 有牌 → 此处(左0-2)判"可出"拒绝终止，但
        //     dark[1] 属于队员 → 队长同样卡死。
        //   正确划分（与点击侧逐索引对齐）：
        //     左(座位0/sub1)：hand 0-4，dark 0，revealed 0
        //     右(座位1/sub3)：hand 5，  dark 1-4，revealed 1-2
        var isLeft = isCurrentSubPlayerLeft();
        handRange = isLeft ? { start: 0, end: 5 } : { start: 5, end: 6 };
        darkRange = isLeft ? { start: 0, end: 1 } : { start: 1, end: 5 };
        revealedRange = isLeft ? { start: 0, end: 1 } : { start: 1, end: 3 };
      }

      // 检查手牌：该子玩家的手牌范围是否有牌 且 有空路
      var hasEmptyField = field.includes(null);
      var hasHand = false;
      for (var i = handRange.start; i < handRange.end; i++) {
        if (hand[i]) { hasHand = true; break; }
      }
      // 牌堆是共享的，如果有牌堆且有空路，任何子玩家都可以抽牌
      var hasDeck = (side === 'player' ? GameState.playerDeck : GameState.opponentDeck).length > 0;
      var canPlayHandOrDeck = (hasHand || hasDeck) && hasEmptyField;

      // 检查明牌：该子玩家的明牌范围是否有牌 且 有可叠加路
      var hasStackableForRevealed = false;
      for (var i = 0; i < field.length; i++) {
        var roadHasCards = field[i] !== null || (stack[i] && stack[i].length > 0);
        var stackNotFull = !stack[i] || stack[i].length < 8;
        if (field[i] === null || (roadHasCards && stackNotFull)) {
          hasStackableForRevealed = true; break;
        }
      }
      var hasRevealed = false;
      for (var i = revealedRange.start; i < revealedRange.end; i++) {
        if (revealed[i]) { hasRevealed = true; break; }
      }
      var canPlayRevealed = hasRevealed && hasStackableForRevealed;

      // 检查暗牌：该子玩家的暗牌范围是否有牌 且 有可叠加路
      var hasStackableForDark = false;
      for (var i = 0; i < field.length; i++) {
        var roadHas = field[i] !== null || (stack[i] && stack[i].length > 0);
        var stackNF = !stack[i] || stack[i].length < 8;
        if (roadHas && stackNF) { hasStackableForDark = true; break; }
      }
      var hasDark = false;
      for (var i = darkRange.start; i < darkRange.end; i++) {
        if (dark[i]) { hasDark = true; break; }
      }
      var canPlayDark = hasDark && hasStackableForDark;

      return canPlayHandOrDeck || canPlayRevealed || canPlayDark;
    }

    // 四人模式：获取当前子玩家的可用手牌（过滤null和已使用的）
    function getFourPlayerSubHand(side) {
      var hand = side === 'player' ? GameState.playerHand : GameState.opponentHand;
      // ★ 2v1模式AI共享全部手牌
      var is2v1AIShared = (GameState.fourPlayerActive
        && typeof PBOnline !== 'undefined' && PBOnline
        && !PBOnline.isOnline2v2Mode
        && side === 'opponent' && isCurrentSubPlayerAI());
      var range = is2v1AIShared
        ? { start: 0, end: 6 }
        : (isCurrentSubPlayerLeft() ? { start: 0, end: 5 } : { start: 5, end: 6 });
      var result = [];
      for (var i = range.start; i < range.end; i++) {
        if (hand[i]) result.push({ card: hand[i], index: i });
      }
      return result;
    }

    // 四人模式：获取当前子玩家的可用暗牌
    function getFourPlayerSubDark(side) {
      var dark = side === 'player' ? GameState.playerDarkCards : GameState.opponentDarkCards;
      var is2v1AIShared = (GameState.fourPlayerActive
        && typeof PBOnline !== 'undefined' && PBOnline
        && !PBOnline.isOnline2v2Mode
        && side === 'opponent' && isCurrentSubPlayerAI());
      var range = is2v1AIShared
        ? { start: 0, end: 5 }
        : (isCurrentSubPlayerLeft() ? { start: 0, end: 1 } : { start: 1, end: 5 });
      var result = [];
      for (var i = range.start; i < range.end; i++) {
        if (dark[i]) result.push({ card: dark[i], index: i });
      }
      return result;
    }

    // 四人模式：获取当前子玩家的可用明牌
    function getFourPlayerSubRevealed(side) {
      var revealed = side === 'player' ? GameState.playerRevealedCards : GameState.opponentRevealedCards;
      var is2v1AIShared = (GameState.fourPlayerActive
        && typeof PBOnline !== 'undefined' && PBOnline
        && !PBOnline.isOnline2v2Mode
        && side === 'opponent' && isCurrentSubPlayerAI());
      var range = is2v1AIShared
        ? { start: 0, end: 3 }
        : (isCurrentSubPlayerLeft() ? { start: 0, end: 1 } : { start: 1, end: 3 });
      var result = [];
      for (var i = range.start; i < range.end; i++) {
        if (revealed[i]) result.push({ card: revealed[i], index: i });
      }
      return result;
    }

    // findPlayableCards: 查找所有可打出的牌（用于终止出牌时的视觉提示）
    // 规则:
    //   - 手牌/牌堆牌: 可以放置到场牌区空位
    //   - 明牌: 可以放置到场牌区空位 或 叠加到有牌的路(叠牌<8张)
    //   - 暗牌: 可以叠加到有牌的路(field有牌 或 stack有牌 且 叠牌<8张)，不能放空路
    //   注：对方拖牌可能把我方 field 设为 null，但 stack 可能还有牌，此时暗牌仍可叠加
    // 返回: [{type: 'hand'/'revealed'/'dark'/'deck', index: 索引, card: 卡牌对象}]
    function findPlayableCards() {
      const playableCards = [];
      const hasEmptyField = GameState.playerField.includes(null);

      // 检查每条路是否有牌（field 或 stack，用于明牌/暗牌的叠加判断）
      const roadHasCards = [];
      for (let i = 0; i < GameState.playerField.length; i++) {
        roadHasCards[i] = (GameState.playerField[i] !== null) ||
                          (GameState.playerStack[i] && GameState.playerStack[i].length > 0);
      }

      // 检查每条路的叠牌区是否未满（明牌可放 field 空或 stack<8；暗牌可放 road 有牌且 stack<8）
      const availableStacksForRevealed = [];  // 明牌可叠加：有场牌 或 stack 未满
      const availableStacksForDark = [];      // 暗牌可叠加：该路有牌 且 stack 未满
      for (let i = 0; i < GameState.playerStack.length; i++) {
        const stackCount = GameState.playerStack[i] ? GameState.playerStack[i].length : 0;
        availableStacksForRevealed[i] = (GameState.playerField[i] === null) ||  // field 空（明牌可直接放）
                                        (GameState.playerField[i] !== null && stackCount < 8);  // 或有场牌且 stack 未满
        availableStacksForDark[i] = roadHasCards[i] && stackCount < 8;  // 该路有牌 且 stack 未满
      }
      const hasAnyAvailableStackForRevealed = availableStacksForRevealed.some(v => v);
      const hasAnyAvailableStackForDark = availableStacksForDark.some(v => v);

      // 手牌：可放置到场牌区空位
      GameState.playerHand.forEach((card, index) => {
        if (card && hasEmptyField) {
          playableCards.push({ type: 'hand', index: index, card: card });
        }
      });

      // 明牌：可放置到场牌区空位 或 可叠加到有牌且叠牌未满的路
      GameState.playerRevealedCards.forEach((card, index) => {
        if (card && (hasEmptyField || hasAnyAvailableStackForRevealed)) {
          playableCards.push({ type: 'revealed', index: index, card: card });
        }
      });

      // 暗牌：可叠加到有牌(field或stack)且叠牌未满的路
      GameState.playerDarkCards.forEach((card, index) => {
        if (card && hasAnyAvailableStackForDark) {
          playableCards.push({ type: 'dark', index: index, card: card });
        }
      });

      // 牌堆牌：可放置到场牌区空位
      if (GameState.playerDeck.length > 0 && hasEmptyField) {
        playableCards.push({ type: 'deck', index: 0, card: GameState.playerDeck[GameState.playerDeck.length - 1] });
      }

      return playableCards;
    }

    // showPlayableCardsHint: 在可出牌上显示提示光环（添加 .card-glow 类）
    function showPlayableCardsHint(playableCards) {
      hidePlayableCardsHint();

      playableCards.forEach(info => {
        let element = null;

        switch (info.type) {
          case 'hand':
            element = document.querySelectorAll('.player-hand-slot')[info.index];
            break;
          case 'revealed':
            element = document.querySelectorAll('.player-revealed-slot')[info.index];
            break;
          case 'dark':
            element = document.querySelectorAll('.player-dark-slot')[info.index];
            break;
          case 'deck':
            element = document.getElementById('player-deck');
            break;
        }

        if (element) {
          element.classList.add('card-glow');
          element.style.setProperty('overflow', 'visible', 'important');
          element.style.setProperty('outline', '0.1875rem solid #FBBF24', 'important');
          element.style.setProperty('outline-offset', '-0.1875rem', 'important');
          element.style.setProperty('border-radius', '0.625rem', 'important');

          element.style.setProperty('animation', 'cardGlowPulse 1.5s ease-in-out infinite', 'important');
          element.style.setProperty('z-index', '50', 'important');
          element.style.setProperty('transform', 'scale(1.03)', 'important');
          element.style.setProperty('filter', 'drop-shadow(0 0 0.9375rem rgba(251, 191, 36, 0.5))', 'important');
        }
      });
    }

    // hidePlayableCardsHint: 移除所有可出牌提示光环
    function hidePlayableCardsHint() {
      document.querySelectorAll('.card-glow').forEach(el => {
        el.classList.remove('card-glow');
        el.style.removeProperty('border');
        el.style.removeProperty('outline');
        el.style.removeProperty('outline-offset');
        el.style.removeProperty('border-radius');
        el.style.removeProperty('animation');
        el.style.removeProperty('z-index');
        el.style.removeProperty('transform');
        el.style.removeProperty('box-shadow');
        el.style.removeProperty('filter');
        el.style.removeProperty('overflow');
      });
      // 清除自动消失定时器（防止重复点击时定时器堆积）
      if (GameState.playableHintTimer) {
        clearTimeout(GameState.playableHintTimer);
        GameState.playableHintTimer = null;
      }
    }

    // ============================================================================
    // 【AI 出牌逻辑 · Opponent AI】模拟对手的出牌行为
    // ============================================================================
    //
    // opponentPlayCard(): 对方回合出牌的核心入口函数（async）
    //
    // 执行流程:
    //   1. 状态检查：游戏中断 / 非 playing 阶段 / 非对方回合 → return
    //   2. 终止判断：5路场牌已满 / 手牌&牌堆都空 → 标记终止，触发结算
    //   3. AI 思考延迟：AIConfig.strategy.thinkDelay (模拟人类决策)
    //   4. 选牌：由 PBAIBridge（ai-core 引擎）决策，含出牌+匹配一步到位
    //   5. 出牌：写入对应路的场牌/叠牌区，播放动画与音效
    //   6. 更新：UI、回合计数、玩家牌型显示、胜负检查
    //
    // 策略控制: 出牌决策由 PBAIBridge（ai-core 引擎）执行，AIConfig 仅管节奏延迟
    // ============================================================================
    async function opponentPlayCard() {
      // 联机模式：不使用AI出牌，等待对方网络消息
      // ★ 四人模式除外：人机2v1中AI由本地运行
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && !GameState.fourPlayerActive) return;

      // ★ 人机2v1模式：只有队长端运行AI逻辑，队员端等待队长的AI出牌同步
      // ★ 2026-6-1 FIX：仅限真实组队。单机人机2v1下AI必须在本地运行
      var _hasRealTeammate = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      if (_hasRealTeammate && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader) {
        console.log('[2v2同步] 队员端跳过AI出牌，等待队长同步');
        return;
      }

      // ===== 头部检查 =====
      if (GameState.isGameInterrupted) return;
      // ★ 2026-9-2 FIX: 发牌阶段绝对不能出牌！
      //   上一局残留的 AI thinkDelay 定时器可能在新一局发牌阶段触发 → 发牌动画和 AI 出牌动画重叠
      if (GameState.isDealingCards) return;
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'opponent') {
        return;
      }

      // ★ 重入 guard：generation token 已经在 fourPlayerAdvanceTurn 里设了，
      //   但 opponentPlayCard 执行期间（动画+match可能几秒）如果有新的入口触发，
      //   currentTurn 还是 'opponent'，检查会通过。用 _opponentPlayCardExecuting 确保单次执行。
      if (GameState._opponentPlayCardExecuting) {
        return;
      }
      GameState._opponentPlayCardExecuting = true;
      // ★★ 2026-9-1 诊断日志：AI 出牌触发来源（若同一回合出现两条不同的调用栈 = 双重调度）
      try {
        var _opStack = (new Error().stack || '').split('\n').slice(2, 5)
          .map(function (s) { return s.trim().replace(/^at\s+/, ''); }).join('  <-  ');
        console.log('[AI出牌#] 触发 sub=' + GameState.fourPlayerSubTurn +
          '(' + (typeof getCurrentSubPlayerName === 'function' ? getCurrentSubPlayerName() : '?') + ')' +
          ' idx=' + GameState.fourPlayerTurnIndex + ' turn=' + GameState.turnNumber +
          ' | ' + _opStack);
      } catch (_se) {}
      // ★ 2026-9-1: 3 秒兜底 timer 强制解锁（防止异常路径卡死时残留 guard）
      var _executeForceClear = setTimeout(function() {
        if (GameState._opponentPlayCardExecuting) {
          console.warn('[opponentPlayCard] 3 秒兜底 timer 强制清 guard（异常路径残留）');
          GameState._opponentPlayCardExecuting = false;
        }
      }, 3000);
      if (typeof addTimer === 'function') addTimer(_executeForceClear);

      try {
      // ★ playerType 三重职责分离：
      //   四人2v1阵营划分：AI 两个子玩家(0和2) → opponent 阵营 → 共享 opponentHand/opponentField
      //                    玩家 两个子玩家(1和3) → player 阵营 → 共享 playerHand/playerField
      var aiPlayerType = 'opponent'; // opponentPlayCard 永远是 AI 函数

      // ★ 四人模式：使用专用检查逻辑
      if (GameState.fourPlayerActive) {
        if (!canFourPlayerSubPlay(aiPlayerType)) {
          // ★ 人机2v1：AI=0(idx0)或2(idx1)
          var aiIdx = GameState.fourPlayerSubTurn === 0 ? 0 : 1;
          GameState.fourPlayerAIStopped[aiIdx] = true;
          var subName = getCurrentSubPlayerName();
          updateGameStatus(subName + '无法出牌，已终止！');
          if (typeof addTurnRecord === 'function') {
            addTurnRecord('终止出牌', subName + '无法出牌，终止出牌', 'opponent');
          }
          // ★ 2v2同步：通知队员AI终止
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
            PBOnline.sendPracticeAIMove({
              decision: { action: 'stop' },
              subTurn: GameState.fourPlayerSubTurn,
              subName: subName
            });
          }
          var timer = setTimeout(function() { fourPlayerAdvanceTurn(); }, 500);
          if (typeof addTimer === 'function') addTimer(timer);
          return;
        }
        // 四人模式跳过原有的完整检查，直接进入决策
      } else {
        // 原有逻辑（双人模式）
        if (GameState.opponentStoppedPlaying) {
          checkBothStopped();
          return;
        }

        // ===== 是否可以出牌的完整检查（手牌/牌堆/明牌/暗牌） =====
        const hasEmptyField = GameState.opponentField.includes(null);
        const hasHandOrDeck = (GameState.opponentHand.length > 0 || GameState.opponentDeck.length > 0);
        const canPlayHandOrDeck = hasHandOrDeck && hasEmptyField;

        let hasStackableRoadForRevealed = false;
        let hasStackableRoadForDark = false;
        for (let i = 0; i < GameState.opponentField.length; i++) {
          const roadHasCards = GameState.opponentField[i] !== null ||
                              (GameState.opponentStack[i] && GameState.opponentStack[i].length > 0);
          const stackNotFull = !GameState.opponentStack[i] || GameState.opponentStack[i].length < 8;
          if (GameState.opponentField[i] === null || (roadHasCards && stackNotFull)) {
            hasStackableRoadForRevealed = true;
          }
          if (roadHasCards && stackNotFull) {
            hasStackableRoadForDark = true;
          }
          if (hasStackableRoadForRevealed && hasStackableRoadForDark) break;
        }
        const canPlayRevealed = GameState.opponentRevealedCards.length > 0 && hasStackableRoadForRevealed;
        const canPlayDark = GameState.opponentDarkCards.length > 0 && hasStackableRoadForDark;

        if (!canPlayHandOrDeck && !canPlayRevealed && !canPlayDark) {
          GameState.opponentStoppedPlaying = true;
          updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
          addTurnRecord('终止出牌', '对方无法出牌，终止出牌', 'opponent');
          checkBothStopped();
          return;
        }
      }

      // ===== 思考延迟（保留原状） =====
      await delay(AIConfig.strategy.thinkDelay);

      if (GameState.isGameInterrupted) return;

      // ===== 决策阶段：PBAIBridge（ai-core 引擎，2026-10-04 起） =====
      // 旧 AIDecisionEngine 战术/战略链已删除。引擎内部已含完整合法性判定与匹配决策，
      // decide 返回 stop 仅在引擎 canPlay=false 时出现（规则硬约束：可出牌禁停）。
      // decision.matchAction = 引擎已选定的匹配动作（拖/撞带 explicitTaken，与联机 bot 协议一致）。
      let decision = PBAIBridge.decideAIMove();

      if (decision && decision.action === 'stop') {
        // ★ 四人模式：标记当前AI子玩家终止
        if (GameState.fourPlayerActive) {
          // ★ 人机2v1：AI=0(idx0)或2(idx1)
          var aiIdxStop = GameState.fourPlayerSubTurn === 0 ? 0 : 1;
          GameState.fourPlayerAIStopped[aiIdxStop] = true;
          var stopName = getCurrentSubPlayerName();
          updateGameStatus(stopName + '已终止出牌！');
          if (typeof addTurnRecord === 'function') {
            addTurnRecord('终止出牌', stopName + '主动终止出牌', 'opponent');
          }
          // ★ 2v2同步：通知队员AI终止
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
            PBOnline.sendPracticeAIMove({
              decision: { action: 'stop' },
              subTurn: GameState.fourPlayerSubTurn,
              subName: stopName
            });
          }
          var stopTimer = setTimeout(function() { fourPlayerAdvanceTurn(); }, 500);
          if (typeof addTimer === 'function') addTimer(stopTimer);
          return;
        }
        GameState.opponentStoppedPlaying = true;
        updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
        if (typeof addTurnRecord === 'function') {
          addTurnRecord('终止出牌', '对方主动终止出牌', 'opponent');
        }
        if (typeof checkRoadResult === 'function') {
          for (var _ri = 0; _ri < 5; _ri++) {
            checkRoadResult(_ri);
          }
          // ★ 2026-9-9: 补渲染最后一路拼点标记（checkRoadResult 是先渲染后判定，最后一路没人渲染）
          if (typeof updateResults === 'function') updateResults();
        } else if (typeof checkGameEnd === 'function') {
          checkGameEnd();
        }
        return;
      }

      // fallback：PBAIBridge 正常路径不会返回 null（内部已兜底），防御性保留
      if (!decision) {
        decision = PBAIBridge.decideAIMove();
      }
      if (!decision) {
        // 仍无法决策：理论不会到达，因为上方已做完整条件检查
        if (GameState.fourPlayerActive) {
          // ★ 人机2v1：AI=0(idx0)或2(idx1)
          var aiIdxFallback = GameState.fourPlayerSubTurn === 0 ? 0 : 1;
          GameState.fourPlayerAIStopped[aiIdxFallback] = true;
          var fbTimer = setTimeout(function() { fourPlayerAdvanceTurn(); }, 500);
          if (typeof addTimer === 'function') addTimer(fbTimer);
          return;
        }
        GameState.opponentStoppedPlaying = true;
        updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
        if (typeof checkGameEnd === 'function') checkGameEnd();
        return;
      }

      // ===== 执行阶段：调用 CardPlayExecutor =====
      // - skipMatchCheck 始终为 true（避免调用玩家专用的 DOM 匹配检查函数）
      // - 战术模式的匹配评估在 onAnimationEnd 中由 AIDecisionEngine 独立执行（纯数据层面）
      // - 记录本次出牌来源类型，供下次战术策略定位同类策略（红框原则 #2）
      if (decision && decision.sourceType) {
        GameState.opponentLastSourceType = decision.sourceType;
      }
      // ★ 2v2同步：发送AI出牌决策给队员
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
        PBOnline.sendPracticeAIMove({
          decision: decision,
          subTurn: GameState.fourPlayerSubTurn,
          subName: getCurrentSubPlayerName()
        });
        console.log('[2v2同步] 队长已发送AI出牌, subTurn:', GameState.fourPlayerSubTurn);
      }
      var _playResult = await CardPlayExecutor.executeCardPlay(aiPlayerType, decision, {
        skipMatchCheck: true,
        skipConfirmPlacement: true, // ★ 关键：不让 executeCardPlay 内部调 confirmCardPlacement
                                   // （skipMatchCheck 导致内部 hasMatchOpportunities=false，
                                   //   会让 confirmCardPlacement 在匹配动画之前就执行）
                                   // 改为：匹配动画执行完后，onAnimationEnd 里自己调 confirmCardPlacement
        onStatus: function (isField, card, roadIndex) {
          if (isField) {
            updateGameStatus(__t('st_opp_play_road').replace('{n}', roadIndex + 1).replace('{c}', card.display), 'st_opp_play_road');
          } else {
            updateGameStatus(__t('st_opp_play_stack').replace('{n}', roadIndex + 1).replace('{c}', card.display), 'st_opp_play_stack');
          }
        },
        onTurnRecord: function (isField, card, roadIndex, sourceType) {
          // 根据 sourceType 区分牌种：手牌/牌堆/明牌/暗牌
          let cardSource = '';
          if (sourceType === 'hand') cardSource = '手牌';
          else if (sourceType === 'deck') cardSource = '牌堆';
          else if (sourceType === 'revealed') cardSource = '明牌';
          else if (sourceType === 'dark') cardSource = '暗牌';
          let details = '';
          if (isField) {
            details = '在第' + (roadIndex + 1) + '路打出' + cardSource + card.display;
          } else {
            details = '打出' + cardSource + card.display + '叠加到第' + (roadIndex + 1) + '路';
          }
          // ★ 第三参数保持 'opponent' —— 回合记录用 AI 身份标识，与 confirmCardPlacement 一致
          // ★ v5.26：第 5 参数挂 AI 回合注释（本地人机模式，PBAIBridge 生成）
          addTurnRecord('出牌', details, 'opponent', decision.strategyInfo || null, decision.aiComment || null);
        },
        onAnimationEnd: async function (card, isField, roadIndex) {
          function getValueDisplay(value) {
            if (value === 1) return 'A';
            if (value === 11) return 'J';
            if (value === 12) return 'Q';
            if (value === 13) return 'K';
            return value.toString();
          }
          
          // ====== 匹配动画执行（try/finally 保证回合推进不中断） ======
          try {
            // 引擎匹配动作执行（2026-10-04）：matchAction 由 PBAIBridge 在决策期
            // 用 ai-core 引擎选定（拖/撞带 explicitTaken 指定被拉/被撞牌，与联机 bot 一致）。
            // "放置"型出牌（decision.skipMatch === true）则跳过匹配检查
            if (decision && decision.matchAction) {
              const matchAction = decision.matchAction;
              {
                // ★ 对手侧 = aiPlayerType 的反面
                var _oppType = aiPlayerType === 'player' ? 'opponent' : 'player';
                const oppMax = getMaxValue(_oppType, roadIndex);
                let matchDesc = '';
                if (matchAction.matchType === 'drag') {
                  matchDesc = card.display + '与对方' + getValueDisplay(oppMax) + '相邻，执行拖牌';
                } else if (matchAction.matchType === 'crash') {
                  matchDesc = card.display + '与对方' + getValueDisplay(oppMax) + '相同，执行撞牌';
                } else if (matchAction.matchType === 'surround') {
                  matchDesc = card.display + '围住对方中立区第' + (matchAction.neutralIndex + 1) + '格(' + getValueDisplay(card.value) + ')，执行围牌';
                } else if (matchAction.matchType === 'support') {
                  matchDesc = card.display + '与我方中立区第' + (matchAction.neutralIndex + 1) + '格(' + getValueDisplay(card.value) + ')匹配，执行援牌强化归属';
                }

                const matchLog = [{
                  phase: '匹配策略',
                  step: matchAction.matchType === 'drag' ? '拖牌' : matchAction.matchType === 'crash' ? '撞牌' : matchAction.matchType === 'support' ? '援牌' : '围牌',
                  desc: matchDesc,
                  status: 'success'
                }];

                const matchStrategyInfo = {
                  strategy: '匹配策略',
                  phase: '匹配',
                  step: matchAction.matchType === 'drag' ? '拖牌' : matchAction.matchType === 'crash' ? '撞牌' : matchAction.matchType === 'support' ? '援牌' : '围牌',
                  desc: matchDesc,
                  fullLog: matchLog.map(function(l) {
                    let prefix = '[失败]';
                    if (l.status === 'success') prefix = '[成功]';
                    else if (l.status === 'info') prefix = '[信息]';
                    return prefix + ' ' + l.phase + ' ' + l.step + ': ' + l.desc;
                  }).join('\n'),
                  log: matchLog,
                  keyCardPoints: [],
                  cardType: null
                };

                if (matchAction.action === 'roadMatch') {
                  // 拖牌/撞牌（explicitTaken = 引擎选定的被拉/被撞牌，镜像与实况一致）
                  // ★ 2026-6-1 FIX: opponentPerformRoadMatch 只负责动画+数据更新
                  //   回合推进不在内部处理，统一由下方 confirmCardPlacement 走 finalizePlacement → safeSwitchTurn
                  await opponentPerformRoadMatch(matchAction.matchType, card, roadIndex, matchStrategyInfo, false,
                    matchAction.takenCard || null, matchAction.takenLocation || 'field',
                    (typeof matchAction.takenStackIndex === 'number') ? matchAction.takenStackIndex : -1);
                } else if (matchAction.action === 'surround') {
                  // 围牌
                  // ★ 同上：只负责动画+数据更新
                  await opponentPerformSurroundMatch(card, roadIndex, matchAction.neutralIndex, card.value, matchStrategyInfo, false);
                } else if (matchAction.action === 'support') {
                  // 援牌
                  await opponentPerformSupportMatch(card, roadIndex, matchAction.neutralIndex, matchStrategyInfo, false);
                }
              }
            }
          } catch (_ex) {
            console.error('[AI匹配动画异常]', _ex);
          } finally {

          // ====== 统一回合推进入口 ======
          // ★ 2026-6-1 彻底修复: 所有路径（有match / 无match / 早退分支）都通过 confirmCardPlacement
          //   → finalizePlacement → safeSwitchTurn → switchTurn → fourPlayerAdvanceTurn
          //   这是唯一的回合推进路径，彻底消灭双重推进竞态
          if (typeof confirmCardPlacement === 'function') {
            // ★ 必须硬编码 'opponent' —— playerType 在此处承担回合流转控制职责
            // finalizePlacement → safeSwitchTurn 用它判断是 AI 回合还是人类回合
            // （0ms vs 1500ms 延迟、推进逻辑），如果传 aiPlayerType='player'
            // 会把 AI 回合误当人类回合处理 → fourPlayerSubTurn 不前进 → 无限循环
            confirmCardPlacement('opponent', roadIndex, card);
          }
          // ★ executeCardPlay(aiPlayerType='player') 可能设了 localCardPlayPending=true
          // confirmCardPlacement('opponent') 不会清它 → 手动清除防止残留
          if (GameState.localCardPlayPending) {
            GameState.localCardPlayPending = false;
            GameState.localCardPlayRoadIndex = -1;
          }
          // ★ Bug1 FIX: 清 localMatchInProgress，允许后续正常的 sync 应用
          // （只在有 match 时设过，无 match 时本来就是 false）
          GameState.localMatchInProgress = false;
          } // ← finally 结束
        }
      });

      // ★ executeCardPlay 返回值检查：如果 AI 决策选了不合法的路（规则校验失败），
      //   executeCardPlay 会提前 return {card: null}，此时 runAfterAnimation→onAnimationEnd
      //   不会被执行 → confirmCardPlacement / finalizePlacement / safeSwitchTurn 都不会被调
      //   → currentTurn 永远卡在 'opponent' → thinkDelay 定时器又能触发 opponentPlayCard → 无限出牌！
      //   修复：返回 null 时手动推进回合 safeSwitchTurn(0)
      console.log('%c[AI-NULL-CHECK] _playResult=' + JSON.stringify(_playResult) +
        ' | onAnimationEnd fired? wait=checking...',
        'color:#f0f;background:#000;font-weight:bold');
      if (!_playResult || !_playResult.card) {
        console.warn('%c[AI-NULL-CHECK] ⚠ NULL PATH TAKEN! safeSwitchTurn(0)',
          'color:#fff;background:#f00;font-weight:bold');
        if (GameState.fourPlayerActive) {
          safeSwitchTurn(0);
        }
      } else {
        console.log('%c[AI-NULL-CHECK] ✅ NORMAL PATH (card=' + (_playResult.card ? _playResult.card.display : '?') + ') skip null safeSwitchTurn',
          'color:#000;background:#0f0;font-weight:bold');
      }

      } catch (e) {
        // ★★ 2026-9-18 FIX（AI 链路异常兜底·治本）：决策/执行任何未捕获异常（如 null 访问）
        //   会让本函数直接跳到 finally——回合不推进、无人再调度 → 对局永久卡死
        //   （2026-9-18 两次人机2v1卡死均此机制）。兜底：视同该 AI"无法出牌，终止出牌"，
        //   标记 stopped 并推进回合，对局绝不因 AI 异常而断链。
        console.error('[opponentPlayCard] ⚠ AI 链路异常，兜底终止出牌并推进回合:', e);
        try {
          if (GameState.fourPlayerActive && GameState.gamePhase === 'playing' && GameState.currentTurn === 'opponent') {
            var _aiErrIdx = GameState.fourPlayerSubTurn === 0 ? 0 : 1;
            GameState.fourPlayerAIStopped[_aiErrIdx] = true;
            var _subErrName = (typeof getCurrentSubPlayerName === 'function') ? getCurrentSubPlayerName() : 'AI';
            updateGameStatus(_subErrName + '无法出牌，已终止！');
            if (typeof addTurnRecord === 'function') {
              addTurnRecord('终止出牌', _subErrName + '无法出牌，终止出牌', 'opponent');
            }
            var _tErrAdv = setTimeout(function() { fourPlayerAdvanceTurn(); }, 500);
            if (typeof addTimer === 'function') addTimer(_tErrAdv);
          }
        } catch (e2) { console.error('[opponentPlayCard] 兜底推进也失败:', e2); }
      } finally {
        // ★ 所有退出路径（正常return/提前return/异常）都清执行标记
        clearTimeout(_executeForceClear);
        GameState._opponentPlayCardExecuting = false;
      }
    }
    // ============================================================================
    // 与玩家执行的 performRoadMatch 保持一致的动画和视觉效果：
    //   1) 在两张匹配牌上显示金色 match-glow 光环
    //   2) 等待 1.5 秒（让玩家看清匹配牌）
    //   3) 清除光环
    //   4) 调用 performRoadMatch 播放完整匹配动画（拖牌 animateCardMove / 撞牌 animateCrashSequence）
    //
    // 参数:
    //   matchType     - 'drag'(拖牌/相邻) | 'crash'(撞牌/相同)
    //   opponentCard  - AI刚打出的牌，用于定位匹配动画中的 AI 卡牌
    //   roadIndex     - 目标路数索引（0-4）
    //
    // 返回: Promise<void>
    // ============================================================================
    async function opponentPerformRoadMatch(matchType, opponentCard, roadIndex, strategyInfo, skipAura, explicitTaken, explicitLocation, explicitStackIndex) {
      if (GameState.isGameInterrupted) return;

      // ★ Bug1 FIX: 标记本地正在执行 match，防止队员端 relay 回来的 practice_state_sync 覆盖队长端 UI
      // 对比 performRoadMatch L26301-26302，那里已经设了 localMatchInProgress，这里之前漏掉了
      GameState.localMatchInProgress = true;
      try {

      // ★ AI 永远 = opponent 阵营（1v1 和 2v1 都一样：AI 两个子玩家都属于 opponent）
      var _matchField = GameState.playerField;
      var _matchStack = GameState.playerStack;
      var _aiField = GameState.opponentField;
      var _aiStack = GameState.opponentStack;
      var _matchRoadSlotSel = '.player-road-slot';
      var _aiRoadSlotSel = '.opponent-road-slot';
      var _aiNeutralKey = 'opponent';
      var _matchNeutralKey = 'player';

      // ---------- 步骤1：查找 AI 对手侧在该路中与 AI 打出牌匹配的牌 ----------
      // 撞牌(crash)：相同点数；拖牌(drag)：相邻点数（优先取最大）
      let playerMatchCard = null;
      let matchLocation = 'field';
      let matchStackIndex = -1;

      const matchFn = matchType === 'crash' ? isCardsSame : isCardsAdjacent;

      // ★ 2026-09-21 v5.13 FIX：优先使用发起方（AI/bot）指定的被拉/被撞牌（消息 opponentCard）——
      //   bot 引擎按"场牌优先"选拉并随 match_action 下发 takenCard；若本端仍按覆盖式逻辑自选拉
      //   （叠牌相邻即覆盖场牌），会与 bot 引擎分歧 → 镜像脱节 → bot 在幻影局面上做出"合法"匹配。
      //   定位顺序：id 精确 → value+消息位置 → 退回原自选逻辑（单人模式无 explicitTaken 不受影响）。
      if (explicitTaken && explicitTaken.id) {
        if (_matchField[roadIndex] && _matchField[roadIndex].id === explicitTaken.id) {
          playerMatchCard = _matchField[roadIndex];
          matchLocation = 'field';
        } else {
          const _ei = (_matchStack[roadIndex] || []).findIndex(function (c) { return c && c.id === explicitTaken.id; });
          if (_ei !== -1) {
            playerMatchCard = _matchStack[roadIndex][_ei];
            matchLocation = 'stack';
            matchStackIndex = _ei;
          }
        }
        if (!playerMatchCard && typeof explicitTaken.value === 'number') {
          if (explicitLocation === 'stack' && (_matchStack[roadIndex] || [])[explicitStackIndex] && _matchStack[roadIndex][explicitStackIndex].value === explicitTaken.value) {
            playerMatchCard = _matchStack[roadIndex][explicitStackIndex];
            matchLocation = 'stack';
            matchStackIndex = explicitStackIndex;
          } else if (_matchField[roadIndex] && _matchField[roadIndex].value === explicitTaken.value) {
            playerMatchCard = _matchField[roadIndex];
            matchLocation = 'field';
          } else {
            const _vi = (_matchStack[roadIndex] || []).findIndex(function (c) { return c && c.value === explicitTaken.value; });
            if (_vi !== -1) {
              playerMatchCard = _matchStack[roadIndex][_vi];
              matchLocation = 'stack';
              matchStackIndex = _vi;
            }
          }
        }
      }

      // 对手侧场牌区（撞牌/拖牌都优先查场牌）
      if (_matchField[roadIndex]) {
        const fieldCard = _matchField[roadIndex];
        if (matchFn(opponentCard.value, fieldCard.value)) {
          playerMatchCard = fieldCard;
          matchLocation = 'field';
        }
      }
      // 对手侧叠牌区
      let maxStackValue = 0;
      for (let i = 0; i < _matchStack[roadIndex].length; i++) {
        const stackCard = _matchStack[roadIndex][i];
        if (matchFn(opponentCard.value, stackCard.value)) {
          if (matchType === 'crash') {
            playerMatchCard = stackCard;
            matchLocation = 'stack';
            matchStackIndex = i;
            break;
          } else if (stackCard.value > maxStackValue) {
            playerMatchCard = stackCard;
            matchLocation = 'stack';
            matchStackIndex = i;
            maxStackValue = stackCard.value;
          }
        }
      }
      if (!playerMatchCard) {
        // ★ 防御性：虽然 AIDecisionEngine 已预检查，但匹配牌可能在出牌后被其他操作移除
        // ★ 2026-9-1 FIX: 去掉内部 confirmCardPlacement 调用，统一由 onAnimationEnd finally 块调一次
        return;
      }

      // ---------- 步骤2：检查双方中立区是否有空位 ----------
      // ★ _aiNeutralKey='opponent', _matchNeutralKey='player' 已在函数开头正确定义
      if (!hasEmptyNeutralSlot(_aiNeutralKey) || !hasEmptyNeutralSlot(_matchNeutralKey)) {
        // 中立区无空位，按普通出牌处理
        // ★ 2026-9-1 FIX: 去掉内部 confirmCardPlacement 调用，统一由 onAnimationEnd finally 块调一次
        return;
      }
      var _aiNeutralIndex = findEmptyNeutralSlot(_aiNeutralKey);
      var _matchNeutralIndex = findEmptyNeutralSlot(_matchNeutralKey);

      // ★ 先发 sendMatchAction：在 DOM 定位和加 match-glow 之前，让队员和队长同步启动
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
        if (typeof PBOnline.sendMatchAction === 'function') {
          PBOnline.sendMatchAction({
            matchType: matchType,
            roadIndex: roadIndex,
            playerCard: playerMatchCard ? { id: playerMatchCard.id, value: playerMatchCard.value, display: playerMatchCard.display, suit: playerMatchCard.suit } : null,
            opponentCard: opponentCard ? { id: opponentCard.id, value: opponentCard.value, display: opponentCard.display, suit: opponentCard.suit } : null,
            playerNeutralIndex: _matchNeutralKey === 'player' ? _matchNeutralIndex : _aiNeutralIndex,
            opponentNeutralIndex: _matchNeutralKey === 'opponent' ? _matchNeutralIndex : _aiNeutralIndex,
            location: matchLocation,
            stackIndex: matchStackIndex,
            isAI: true
          });
        }
      }

      // ---------- 步骤2.5：DOM 定位（★ 封装为可重复调用）----------
      // ★ 2026-9-8 FIX（光环闪一下就灭 / 动画从左上角飞出）：
      //   1.5s 光环等待期间若发生 updateUI（收到 sync / turn_sync / 任何状态刷新），
      //   路牌区 DOM 会被**重建**：
      //     - match-glow 类随旧元素销毁而丢失 → 光环"闪一下就灭"
      //     - 此前捕获的元素引用变成 detached（getBoundingClientRect 全 0）
      //       → animateCardMove 从容器 (0,0) 起飞 → "从左上角飞出来"
      //   对策：① 定位封装成函数，等待期间定时重新补加光环（同联机 ensureRoadGlowReapply 思路）
      //        ② 动画前重新定位，取最新有效元素引用
      function _locateMatchCards() {
        const aiRoadSlot = document.querySelector(`${_aiRoadSlotSel}[data-road-slot="${roadIndex}"]`);
        let _ai = null;
        if (aiRoadSlot && opponentCard) {
          // 1) 优先按 data-card-id 精确匹配（最可靠，能区分同点数不同牌）
          _ai = aiRoadSlot.querySelector(`.card[data-card-id="${opponentCard.id}"], .card-small[data-card-id="${opponentCard.id}"]`);
          // 2) 位置回退
          if (!_ai) {
            const aiCards = aiRoadSlot.querySelectorAll('.card, .card-small');
            if (_aiField && _aiField.id === opponentCard.id && aiCards.length > 0) {
              _ai = aiCards[0];
            } else {
              const stackIdx = _aiStack.findIndex(c => c.id === opponentCard.id);
              if (stackIdx !== -1) {
                _ai = aiCards[stackIdx + 1];
              }
            }
            if (!_ai && aiCards.length > 0) {
              _ai = aiCards[aiCards.length - 1];
            }
          }
        }

        // ★ Bug3 FIX: 匹配牌 DOM 定位也要用修正后的选择器
        const playerRoadSlot = document.querySelector(`${_matchRoadSlotSel}[data-road-slot="${roadIndex}"]`);
        let _player = null;
        if (playerRoadSlot && playerMatchCard) {
          // 1) 优先按 data-card-id 精确匹配（最可靠，避免同点数选错）
          _player = playerRoadSlot.querySelector(`.card[data-card-id="${playerMatchCard.id}"], .card-small[data-card-id="${playerMatchCard.id}"]`);
          // 2) 位置回退
          if (!_player) {
            const playerCards = playerRoadSlot.querySelectorAll('.card, .card-small');
            if (matchLocation === 'field' && playerCards.length > 0) {
              _player = playerCards[0];
            } else if (matchLocation === 'stack') {
              _player = playerCards[matchStackIndex + 1] || playerCards[playerCards.length - 1];
            }
            // fallback：通过内容精确查找
            if (!_player && playerCards.length > 0) {
              for (let i = 0; i < playerCards.length; i++) {
                const text = (playerCards[i].textContent || '').trim();
                if (text === playerMatchCard.display || text.includes(playerMatchCard.display)) {
                  _player = playerCards[i];
                  break;
                }
              }
            }
          }
        }
        return { ai: _ai, player: _player };
      }

      var _locatedCards = _locateMatchCards();
      var aiSourceCard = _locatedCards.ai;
      var playerSourceCard = _locatedCards.player;

      // ★ 防御性：若匹配双方卡牌已不在源路牌/叠牌区（被前次执行或同步移入中立区），
      //   说明本场匹配已结算，跳过光环+动画+数据更新，避免"卡牌已在中立区仍播动画"的视觉异常与重复入区。
      const _aiCardInSource = (_aiField[roadIndex] && _aiField[roadIndex].id === opponentCard.id) ||
                              (_aiStack[roadIndex] && _aiStack[roadIndex].some(c => c.id === opponentCard.id));
      const _matchCardInSource = (matchLocation === 'field' && _matchField[roadIndex] && _matchField[roadIndex].id === playerMatchCard.id) ||
                                 (matchLocation === 'stack' && _matchStack[roadIndex] && _matchStack[roadIndex].some(c => c.id === playerMatchCard.id));
      if (!_aiCardInSource || !_matchCardInSource) {
        console.warn('[opponentPerformRoadMatch] ⚠ 匹配牌已不在源路牌区（疑似已结算/被同步），跳过本次匹配',
          { opp: opponentCard && opponentCard.id, match: playerMatchCard && playerMatchCard.id });
        return;
      }

      // 添加 match-glow 金色光环
      if (aiSourceCard) aiSourceCard.classList.add('match-glow');
      if (playerSourceCard) playerSourceCard.classList.add('match-glow');
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——skipAura=true 表示光环已经由 match_glow_start 提前显示并播过，不重复
      if (!skipAura && typeof playSound === 'function') playSound('glowBellSound');

      // ★ 光环保持器：等待期间若 DOM 被重建，光环会丢失 → 每 100ms 重新定位并补加
      var _glowKeepTimer = null;
      function _startGlowKeep() {
        if (_glowKeepTimer) return;
        _glowKeepTimer = setInterval(function () {
          if (GameState.isGameInterrupted) { _stopGlowKeep(); return; }
          var l = _locateMatchCards();
          if (l.ai) l.ai.classList.add('match-glow');
          if (l.player) l.player.classList.add('match-glow');
        }, 100);
      }
      function _stopGlowKeep() {
        if (_glowKeepTimer) { clearInterval(_glowKeepTimer); _glowKeepTimer = null; }
      }
      if (!skipAura) _startGlowKeep();

      // ★ 2026-9-1: 1.5 秒等待用 _matchChainGen 保护——可被新 match chain 中断
      //   generation token：每次进入 ++_matchChainGen；若新 chain 期间 token 已变 → 提前 return
      GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
      var _matchGen = GameState._matchChainGen;

      // 等待 1.5 秒（让玩家看清匹配牌）
      // 联机模式下跳过延迟：光环已通过 match_glow_start 提前显示给对方
      if (!skipAura) {
        await interruptedDelay(1500, _matchGen);
        // ★ 被新 chain 覆盖或游戏被中断：清光环后 return（不要继续动画/数据/sync）
        //   注意：不主动发 match_glow_clear——本端 removeClass 已经够了，
        //   队员端的 1.5s 等待也是基于它收到 match_action 的时间来对齐，
        //   WS 往返带来的 ~50-200ms 漂移可接受，与 1v1 模式一致
        if (GameState._matchChainGen !== _matchGen || GameState.isGameInterrupted) {
          _stopGlowKeep();
          var _lgAbort = _locateMatchCards();
          if (_lgAbort.ai) _lgAbort.ai.classList.remove('match-glow');
          if (_lgAbort.player) _lgAbort.player.classList.remove('match-glow');
          if (aiSourceCard) aiSourceCard.classList.remove('match-glow');
          if (playerSourceCard) playerSourceCard.classList.remove('match-glow');
          return;
        }
      }

      // 清除 match-glow 光环（先停保持器；用最新定位清理，避免 DOM 重建后残留）
      _stopGlowKeep();
      var _lgEnd = _locateMatchCards();
      if (_lgEnd.ai) _lgEnd.ai.classList.remove('match-glow');
      if (_lgEnd.player) _lgEnd.player.classList.remove('match-glow');
      if (aiSourceCard) aiSourceCard.classList.remove('match-glow');
      if (playerSourceCard) playerSourceCard.classList.remove('match-glow');

      // ★ 动画前重新定位：等待期间 DOM 可能已被 updateUI 重建，
      //   旧引用会 detached（rect 全 0 → 从左上角飞出），必须换成最新有效元素。
      var _reloc = _locateMatchCards();
      if (_reloc.ai) aiSourceCard = _reloc.ai;
      if (_reloc.player) playerSourceCard = _reloc.player;

      // ---------- 步骤3：播放匹配动画 ----------
      // ★ Bug3 FIX: 中立区 DOM 按修正后的阵营定位
      var _aiNeutralSlotSel = _aiNeutralKey === 'player' ? '.player-neutral-slot' : '.opponent-neutral-slot';
      var _matchNeutralSlotSel = _matchNeutralKey === 'player' ? '.player-neutral-slot' : '.opponent-neutral-slot';
      const aiNeutralSlotEl = document.querySelector(`${_aiNeutralSlotSel}[data-slot="${_aiNeutralIndex}"]`);
      const matchNeutralSlotEl = document.querySelector(`${_matchNeutralSlotSel}[data-slot="${_matchNeutralIndex}"]`);

      if (matchType === 'crash') {
        // 撞牌：播放完整的撞牌动画序列（蓄力→冲撞→粒子→白光→移入中立区）
        if (aiSourceCard && playerSourceCard && aiNeutralSlotEl && matchNeutralSlotEl) {
          await animateCrashSequence(opponentCard, playerMatchCard, roadIndex, aiSourceCard, playerSourceCard, matchNeutralSlotEl, aiNeutralSlotEl);
        } else {
          if (typeof playSound === 'function') playSound('crashSound');
          if (typeof pbTriggerScreenShake === 'function') pbTriggerScreenShake();
        }
      } else {
        // 拖牌：卡牌移动动画
        const animationEnabled = (typeof isFeatureEnabled === 'function' ? isFeatureEnabled('drag-animation') : true);
        const animationPromises = [];
        if (animationEnabled && aiSourceCard && aiNeutralSlotEl) {
          animationPromises.push(animateCardMove(aiSourceCard, aiNeutralSlotEl, _aiNeutralKey, opponentCard, matchType));
        }
        if (animationEnabled && playerSourceCard && matchNeutralSlotEl) {
          animationPromises.push(animateCardMove(playerSourceCard, matchNeutralSlotEl, _matchNeutralKey, playerMatchCard, matchType));
        }
        if (animationPromises.length > 0) {
          await Promise.all(animationPromises);
        }
      }

      // ---------- 步骤4：数据更新 ----------
      // ★ Bug3 FIX: 所有数据操作都用修正后的阵营
      var _aiNeutralCardsArr = _aiNeutralKey === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      var _matchNeutralCardsArr = _matchNeutralKey === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      _aiNeutralCardsArr[_aiNeutralIndex].push(opponentCard);
      _matchNeutralCardsArr[_matchNeutralIndex].push(playerMatchCard);
      // ★ 2026-9-17：补录对方发起的拖/撞 mv（此前缺失 → 回放只能靠快照差分推断动画类型）
      try { if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) ReplayRecorder.noteMatch(matchType, roadIndex, _aiNeutralIndex); } catch (e) {}

      if (matchType === 'drag') {
        // 拖牌：AI侧移除匹配牌
        if (_aiField[roadIndex] && _aiField[roadIndex].id === opponentCard.id) {
          _aiField[roadIndex] = null;
        } else {
          const idx = _aiStack[roadIndex].findIndex(c => c.id === opponentCard.id);
          if (idx !== -1) _aiStack[roadIndex].splice(idx, 1);
        }
        // 对手侧移除匹配牌
        if (matchLocation === 'field') {
          _matchField[roadIndex] = null;
        } else {
          _matchStack[roadIndex].splice(matchStackIndex, 1);
        }
        // 递进逻辑
        if (!_aiField[roadIndex] && _aiStack[roadIndex] && _aiStack[roadIndex].length > 0) {
          _aiField[roadIndex] = _aiStack[roadIndex].shift();
        }
        if (!_matchField[roadIndex] && _matchStack[roadIndex] && _matchStack[roadIndex].length > 0) {
          _matchField[roadIndex] = _matchStack[roadIndex].shift();
        }
        updateGameStatus(__t('st_opp_drag').replace('{o}', opponentCard.display).replace('{m}', playerMatchCard.display), 'st_opp_drag');
        addTurnRecord('拖牌', '对方' + opponentCard.display + '和我方' + playerMatchCard.display + '移入中立区', 'opponent', strategyInfo || null);
      } else {
        // 撞牌：清空双方该路
        _aiField[roadIndex] = null;
        _aiStack[roadIndex] = [];
        _matchField[roadIndex] = null;
        _matchStack[roadIndex] = [];
        updateGameStatus(__t('st_opp_clash').replace('{o}', opponentCard.display).replace('{m}', playerMatchCard.display).replace('{n}', roadIndex + 1), 'st_opp_clash');
        addTurnRecord('撞牌', '对方' + opponentCard.display + '和我方' + playerMatchCard.display + '移入中立区，第' + (roadIndex + 1) + '路清空', 'opponent', strategyInfo || null);
      }

      if (typeof updateUI === 'function') updateUI();

      // ★ 2026-9-8 规则修正（出牌两阶段）：出牌分「打出」和「放置」两个阶段，
      //   AI 此时只刚执行完 match，仍处于"打出未放置"状态，回合尚未结束 → **不得提前判定拼点**。
      //   拼点统一延后到"放置"入口 finalizePlacement（confirmCardPlacement 之后）执行，
      //   那里会对 5 路统一重算，且随后再发一次 practice_state_sync，
      //   队员端最终仍会收到正确的 playerWins（只是时机推迟到放置后，符合规则）。
      //   ★ 此前在此处提前重算，导致"AI 牌还在打出状态就显示拼点结果"的违规表现。

      // ★ 人机2v1模式：匹配执行完成后，发送全状态同步给队员
      //   确保队员端更新路牌、中立区、拼点结果（match 完成后 checkRoadResult 已算正确）
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
        if (typeof collectPracticeState === 'function') {
          PBOnline.sendPracticeStateSync(collectPracticeState());
        }
      }

      // ---------- 步骤5：★ 不再在这里调 startOpponentPlayDelay ----------
      // 2026-6-1 FIX: 回合推进统一由调用者（onAnimationEnd）调 confirmCardPlacement → finalizePlacement → safeSwitchTurn
      // 这里只做 sync + return
      return;

      } finally {
        // ★ 防御性：确保任何路径（正常/提前return/异常）都清 localMatchInProgress
        GameState.localMatchInProgress = false;
      }
    }

    // ============================================================================
    // 【AI 围牌执行 · opponentPerformSurroundMatch】
    // ============================================================================
    // 规则：AI打出的牌与玩家/AI中立区某格的牌匹配（相同或相邻），
    //       该格 max 牌点 > AI该路当前最大牌点 → 围住后转移到AI该路，增加我方此路最大牌点
    //       围牌应夺走该格中的全部中立牌（玩家的 + AI自己的），而不是只夺走玩家的
    // 视觉效果：与 performRoadMatch 一致
    //   1) 在AI打出的牌和双方中立区格上显示金色 match-glow 光环
    //   2) 等待 1.5 秒
    //   3) 清除光环，播放卡牌移动动画：中立区卡牌移动到AI该路牌区
    //   4) 更新数据：playerNeutralCards[neutralIndex] + opponentNeutralCards[neutralIndex] 全部转移到 opponentStack[roadIndex]
    // ============================================================================
    async function opponentPerformSurroundMatch(opponentCard, roadIndex, neutralIndex, matchValue, strategyInfo, skipAura) {
      if (GameState.isGameInterrupted) return;

      // ★ Bug1 FIX: 同 opponentPerformRoadMatch，防止队员端 relay 回来的 sync 覆盖
      GameState.localMatchInProgress = true;
      try {

      // ★ AI 永远 = opponent 阵营（1v1 和 2v1 都一样：AI 两个子玩家都属于 opponent）
      var _aiField = GameState.opponentField;
      var _aiStack = GameState.opponentStack;
      var _aiRoadSlotSel = '.opponent-road-slot';
      var _aiNeutralKey = 'opponent';
      var _oppNeutralKey = 'player';

      var playerNeutralCards = GameState.playerNeutralCards;
      var opponentNeutralCards = GameState.opponentNeutralCards;

      // ---------- 预检查：中立区已满时不执行围牌 ----------
      const playerCell = playerNeutralCards ? playerNeutralCards[neutralIndex] : [];
      const oppCell = opponentNeutralCards ? opponentNeutralCards[neutralIndex] : [];

      // 1. 中立区此路任一方已满 4 张 → 按普通出牌处理
      if ((playerCell && playerCell.length >= 4) || (oppCell && oppCell.length >= 4)) {
        // ★ 2026-9-1 FIX: 去掉内部 confirmCardPlacement 调用，统一由 onAnimationEnd finally 块调一次
        return;
      }

      // 2. 目标路叠牌区 + 双方中立牌总数超过 8 张 → 按普通出牌处理
      const totalNeutral = (playerCell ? playerCell.length : 0) + (oppCell ? oppCell.length : 0);
      // ★ Bug3 FIX: 用 _aiStack 而不是硬编码 opponentStack
      const stackCount = _aiStack && _aiStack[roadIndex]
        ? _aiStack[roadIndex].length
        : 0;
      if (stackCount + totalNeutral > 8) {
        // ★ 2026-9-1 FIX: 去掉内部 confirmCardPlacement 调用，统一由 onAnimationEnd finally 块调一次
        return;
      }

      // 同时读取玩家和 AI 双方的中立牌，围牌应夺走该路的所有中立牌
      const playerCardsInSlot = (playerNeutralCards && playerNeutralCards[neutralIndex]) ? playerNeutralCards[neutralIndex].slice() : [];
      const opponentCardsInSlot = (opponentNeutralCards && opponentNeutralCards[neutralIndex]) ? opponentNeutralCards[neutralIndex].slice() : [];
      const neutralCards = playerCardsInSlot.concat(opponentCardsInSlot);

      if (neutralCards.length === 0) {
        // ★ 2026-9-1 FIX: 去掉内部 confirmCardPlacement 调用，统一由 onAnimationEnd finally 块调一次
        return;
      }

      // ★ 防御性：AI 路牌区源卡若已不在（被前次执行/同步移走），说明围牌已结算，跳过本次围牌（避免重复入区/动画重播）
      const _aiCardInSourceS = (_aiField[roadIndex] && _aiField[roadIndex].id === opponentCard.id) ||
                               (_aiStack[roadIndex] && _aiStack[roadIndex].some(c => c.id === opponentCard.id));
      if (!_aiCardInSourceS) {
        console.warn('[opponentPerformSurroundMatch] ⚠ AI路牌区源卡已不在（疑似已结算），跳过本次围牌');
        return;
      }

      // ★ 回放录制：记录围牌事件（2026-9-13 FIX：AI 围牌此前未记录 mv → 回放无围牌动画）
      //   语义与 performNeutralAction 一致：road=转移目标路，neutral=转移源中立路
      if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
        try { ReplayRecorder.noteMatch('surround', roadIndex, neutralIndex); } catch (e) {}
      }

      // ---------- 步骤1：先发 sendMatchAction（在 DOM 定位和加光环之前，让队员和队长同步启动） ----------
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
        if (typeof PBOnline.sendMatchAction === 'function') {
          PBOnline.sendMatchAction({
            matchType: 'surround',
            playedCard: opponentCard ? { id: opponentCard.id, value: opponentCard.value, display: opponentCard.display, suit: opponentCard.suit } : null,
            targetRoadIndex: roadIndex,
            neutralIndex: neutralIndex,
            matchValue: matchValue,
            isAI: true
          });
        }
      }

      // ---------- 步骤1.5：DOM 定位 ----------
      const aiRoadSlot = document.querySelector(`${_aiRoadSlotSel}[data-road-slot="${roadIndex}"]`);
      let aiSourceCard = null;
      if (aiRoadSlot) {
        const aiCards = aiRoadSlot.querySelectorAll('.card, .card-small');
        if (_aiField && _aiField.id === opponentCard.id && aiCards.length > 0) {
          aiSourceCard = aiCards[0];
        } else {
          const stackIdx = _aiStack.findIndex(c => c.id === opponentCard.id);
          if (stackIdx !== -1) {
            aiSourceCard = aiCards[stackIdx + 1];
          }
        }
        if (!aiSourceCard && aiCards.length > 0) {
          aiSourceCard = aiCards[aiCards.length - 1];
        }
      }

      const playerNeutralSlotEl = document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`);
      const opponentNeutralSlotEl = document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`);

      // ---------- 步骤2：显示金色光环（AI 路牌区源卡 + 我方中立区，AI 方中立区不显示）----------
      // ★ 先清除所有 neutral-aura 相关的样式（确保不会叠加成两道光环）
      if (typeof clearNeutralAuras === 'function') clearNeutralAuras();
      if (playerNeutralSlotEl) {
        playerNeutralSlotEl.classList.remove('neutral-aura');
        playerNeutralSlotEl.style.boxShadow = '';
        playerNeutralSlotEl.style.border = '';
        playerNeutralSlotEl.style.animation = '';
      }
      if (opponentNeutralSlotEl) {
        opponentNeutralSlotEl.classList.remove('neutral-aura');
        opponentNeutralSlotEl.style.boxShadow = '';
        opponentNeutralSlotEl.style.border = '';
        opponentNeutralSlotEl.style.animation = '';
      }
      // 然后才显示光环（AI出牌用 match-glow，中立区格子用专用的 ai-surround-glow，避免两道）
      if (aiSourceCard) aiSourceCard.classList.add('match-glow');
      if (playerNeutralSlotEl) {
        playerNeutralSlotEl.classList.add('ai-surround-glow');
      }
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——skipAura=true 时光环已提前显示过，不重复
      if (!skipAura && typeof playSound === 'function') playSound('glowBellSound');

      // ★ 光环保持器（2026-9-8）：等待期间若 updateUI 重建了 DOM，
      //   match-glow / ai-surround-glow 会随旧元素销毁而丢失（光环"闪一下就灭"）。
      //   每 100ms 重新定位并补加，确保 1.5s 内光环持续可见。
      var _sglowTimer = null;
      function _startSurroundGlowKeep() {
        if (_sglowTimer) return;
        _sglowTimer = setInterval(function () {
          if (GameState.isGameInterrupted) { _stopSurroundGlowKeep(); return; }
          var _slot = document.querySelector('.player-neutral-slot[data-slot="' + neutralIndex + '"]');
          if (_slot) _slot.classList.add('ai-surround-glow');
          var _aiSlot = document.querySelector(`${_aiRoadSlotSel}[data-road-slot="${roadIndex}"]`);
          if (_aiSlot && opponentCard) {
            var _el = _aiSlot.querySelector(`.card[data-card-id="${opponentCard.id}"], .card-small[data-card-id="${opponentCard.id}"]`);
            if (_el) _el.classList.add('match-glow');
          }
        }, 100);
      }
      function _stopSurroundGlowKeep() {
        if (_sglowTimer) { clearInterval(_sglowTimer); _sglowTimer = null; }
      }
      if (!skipAura) _startSurroundGlowKeep();

      // ---------- 步骤2：等待 1.5 秒 ----------
      // 联机模式下跳过延迟：光环已通过 match_glow_start 提前显示给对方
      // ★ 2026-9-1: 引入 _matchChainGen 与 interruptedDelay，可被新 chain 提前中断
      GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
      var _matchGenS = GameState._matchChainGen;
      if (!skipAura) {
        await interruptedDelay(1500, _matchGenS);
        // ★ 被新 chain 覆盖或游戏中断：清光环后 return
        //   队员端的 1.5s 等待是它自己走，它的结束时间 = 它收到 match_action 的时间 + 1.5s
        //   本端 add→remove 的 1.5s = 队长端 add 时间 + 1.5s
        //   两者漂移 ≈ WS 往返（50-200ms），与 1v1 一致，不需要主动发 glow_clear
        if (GameState._matchChainGen !== _matchGenS || GameState.isGameInterrupted) {
          _stopSurroundGlowKeep();
          if (aiSourceCard) aiSourceCard.classList.remove('match-glow');
          if (playerNeutralSlotEl) {
            playerNeutralSlotEl.classList.remove('ai-surround-glow');
            playerNeutralSlotEl.style.boxShadow = '';
            playerNeutralSlotEl.style.border = '';
            playerNeutralSlotEl.style.animation = '';
          }
          if (opponentNeutralSlotEl) {
            opponentNeutralSlotEl.classList.remove('ai-surround-glow');
            opponentNeutralSlotEl.style.boxShadow = '';
            opponentNeutralSlotEl.style.border = '';
            opponentNeutralSlotEl.style.animation = '';
          }
          return;
        }
      }

      _stopSurroundGlowKeep();
      if (aiSourceCard) aiSourceCard.classList.remove('match-glow');
      if (playerNeutralSlotEl) {
        playerNeutralSlotEl.classList.remove('ai-surround-glow');
        playerNeutralSlotEl.style.boxShadow = '';
        playerNeutralSlotEl.style.border = '';
        playerNeutralSlotEl.style.animation = '';
      }
      if (opponentNeutralSlotEl) {
        opponentNeutralSlotEl.classList.remove('ai-surround-glow');
        opponentNeutralSlotEl.style.boxShadow = '';
        opponentNeutralSlotEl.style.border = '';
        opponentNeutralSlotEl.style.animation = '';
      }

      // ---------- 步骤3：播放卡牌移动动画（使用 animateCardMove，与我方一致）----------
      // ★ Bug3 FIX: 围牌的目标路牌区用修正后的选择器
      const aiRoadTarget = document.querySelector(`${_aiRoadSlotSel}[data-road-slot="${roadIndex}"]`);

      function findAITargetCardElement(container, card) {
        if (!container || !card) return null;
        const cards = container.querySelectorAll('.card, .card-small');
        for (let i = 0; i < cards.length; i++) {
          const text = cards[i].textContent || '';
          if (text.includes(card.display)) return cards[i];
        }
        return null;
      }
      const aiItemsToMove = [];
      // ★ 2026-9-24 FIX：AI 路（column-reverse，数组末尾在屏幕最上方）要保持屏幕视觉时序，
      //   入栈顺序 = 屏幕顺序的逆序：先我方牌数组倒序（屏幕我方槽最下方的牌先进，落在最下），
      //   再对方牌数组正序（屏幕对方槽最上方的牌最后进，落在最上）
      for (let i = playerCardsInSlot.length - 1; i >= 0; i--) {
        const cardEl = findAITargetCardElement(playerNeutralSlotEl, playerCardsInSlot[i]);
        aiItemsToMove.push({ card: playerCardsInSlot[i], el: cardEl, playerType: 'player' });
      }
      for (let i = 0; i < opponentCardsInSlot.length; i++) {
        const cardEl = findAITargetCardElement(opponentNeutralSlotEl, opponentCardsInSlot[i]);
        aiItemsToMove.push({ card: opponentCardsInSlot[i], el: cardEl, playerType: 'opponent' });
      }

      GameState.playerNeutralCards[neutralIndex] = [];
      GameState.opponentNeutralCards[neutralIndex] = [];
      for (let i = 0; i < aiItemsToMove.length; i++) {
        // ★ Bug3 FIX: 围牌夺过来的中立牌加到 AI 自己侧的 stack（不是硬编码的 opponentStack）
        _aiStack[roadIndex].push(aiItemsToMove[i].card);
      }

      const surroundAnimEnabledForAI = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('surround-animation') : true;

      if (surroundAnimEnabledForAI && aiItemsToMove && aiItemsToMove.some(function (i) { return i.el; }) && aiRoadTarget) {
        // ★ AI 围牌动画：每张牌独立计算目标位置，第一顺序牌顶端对齐路牌尾部，后续依次向上堆叠
        //   - AI 路牌区是 column-reverse 布局：最后一张牌的尾部 = top 边缘（从底部向上堆）
        const aiValidItems = aiItemsToMove.filter(function (item) { return item.el; });
        if (aiValidItems.length > 0) {
          const aiCachedStyles = aiValidItems.map(function (item) {
            const computed = getComputedStyle(item.el);
            return {
              background: item.el.style.background || computed.background,
              border: item.el.style.border || computed.border,
              borderRadius: item.el.style.borderRadius || computed.borderRadius,
              boxShadow: item.el.style.boxShadow || computed.boxShadow,
              color: item.el.style.color || computed.color,
              fontWeight: item.el.style.fontWeight || computed.fontWeight,
              fontSize: item.el.style.fontSize || computed.fontSize,
              innerHTML: item.el.innerHTML
            };
          });
          // ★ 2026-9-30 重构（对齐援牌 animateCardMove 结构）：克隆挂 game-container 内 + 容器设计坐标
          //   此前挂 body 用视口坐标：克隆尺寸随缩放变小、内部设计 px 字号撑爆 → 手机"圆圈牌"；
          //   wrapper 反向缩放补丁又使数字失去 flex 居中（偏左）。容器内坐标系随容器 transform scale
          //   一同缩放，坐标/尺寸/内容一次全对——与援牌完全同构。
          const _aiGc = document.querySelector('.game-container');
          const _aiCr = _aiGc ? _aiGc.getBoundingClientRect() : { left: 0, top: 0 };
          // 有效缩放 = 容器视觉宽/布局宽（已含容器 scale 与回放 wrapper scale 的叠加，比 currentGameScale 可靠）
          let _aiSc = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
          try {
            const _rw = _aiGc ? (_aiGc.offsetWidth || 0) : 0;
            const _vw = _aiGc ? (_aiGc.getBoundingClientRect().width || 0) : 0;
            if (_rw > 0 && _vw > 0 && isFinite(_vw / _rw) && (_vw / _rw) > 0) _aiSc = _vw / _rw;
          } catch (e) {}
          const _aiToDesign = function (r) {
            return { left: (r.left - _aiCr.left) / _aiSc, top: (r.top - _aiCr.top) / _aiSc, width: r.width / _aiSc, height: r.height / _aiSc };
          };
          const _aiSlotRectCenter = _aiToDesign(aiRoadTarget.getBoundingClientRect());  // 目标槽设计坐标（每张牌居中 X 复用）
          const aiSourceRects = aiValidItems.map(function (item) { return _aiToDesign(item.el.getBoundingClientRect()); });

          // 获取 AI 路牌区最后一张牌
          const aiRoadCards = aiRoadTarget.querySelectorAll('.card');
          const aiGap = 2;
          const aiCardTargetTops = new Array(aiValidItems.length);

          if (aiRoadCards.length > 0) {
            const aiLastCard = aiRoadCards[aiRoadCards.length - 1];
            const aiLastCardRect = _aiToDesign(aiLastCard.getBoundingClientRect());

            // 第一顺序牌：按"顶端"对齐到 AI 路牌区最后一张牌的尾部（top - gap）
            //   - 对方牌：顶端=bottom → targetBottom = lastCard.top - gap → targetTop = lastCard.top - gap - height
            //   - 我方牌：顶端=top → targetTop = lastCard.top - gap - height
            aiCardTargetTops[0] = aiLastCardRect.top - aiGap - aiSourceRects[0].height;

            // 后续每张牌：在当前牌上方继续堆叠（targetTop = 当前牌的 targetTop - 下一张height - gap）
            for (let idx = 1; idx < aiValidItems.length; idx++) {
              aiCardTargetTops[idx] = aiCardTargetTops[idx - 1] - aiSourceRects[idx].height - aiGap;
            }
          } else {
            // 路牌区为空：第一张从 slot 底部开始向上堆
            const aiSlotRectBase = _aiToDesign(aiRoadTarget.getBoundingClientRect());
            aiCardTargetTops[0] = aiSlotRectBase.top + aiSlotRectBase.height - aiSourceRects[0].height - 2;
            for (let idx = 1; idx < aiValidItems.length; idx++) {
              aiCardTargetTops[idx] = aiCardTargetTops[idx - 1] - aiSourceRects[idx].height - aiGap;
            }
          }

          // 为每张牌创建临时卡牌，独立平移（每张牌有自己的 deltaY/deltaX）
          // ★ 残留防御（2026-9-9 FIX 延续）：克隆挂 game-container 内、absolute 定位，
          //   引用收集 + onfinish/oncancel/超时 三重兜底 + race 后强制清理——防止动画被打断后克隆残留。
          const _surroundTempCards = [];
          const aiAnimations = aiValidItems.map(function (item, idx) {
            return new Promise(function (resolveInner) {
              const tempCard = document.createElement('div');
              _surroundTempCards.push(tempCard);
              const src = aiSourceRects[idx];
              const style = aiCachedStyles[idx];
              const cardDeltaY = aiCardTargetTops[idx] - src.top;

              // 目标X：路牌区居中位置（设计坐标，一次获取）
              const targetLeft = _aiSlotRectCenter.left + (_aiSlotRectCenter.width - src.width) / 2;
              const cardDeltaX = targetLeft - src.left;

              tempCard.style.left = src.left + 'px';
              tempCard.style.top = src.top + 'px';
              tempCard.style.width = src.width + 'px';
              tempCard.style.height = src.height + 'px';
              tempCard.style.position = 'absolute';
              tempCard.style.zIndex = '50';
              tempCard.style.pointerEvents = 'none';
              tempCard.style.background = style.background;
              tempCard.style.border = style.border;
              tempCard.style.borderRadius = style.borderRadius;
              tempCard.style.boxShadow = style.boxShadow;
              tempCard.style.color = style.color;
              tempCard.style.fontWeight = style.fontWeight;
              tempCard.style.fontSize = style.fontSize;
              tempCard.style.display = 'flex';
              tempCard.style.alignItems = 'center';
              tempCard.style.justifyContent = 'center';
              tempCard.style.overflow = 'hidden';
              tempCard.innerHTML = style.innerHTML;

              // ★ 挂 game-container 内（容器坐标随 transform scale 一同缩放，与援牌同构）
              if (_aiGc) _aiGc.appendChild(tempCard); else document.body.appendChild(tempCard);

              if (item.el && item.el.parentNode) item.el.parentNode.removeChild(item.el);

              const anim = tempCard.animate([
                { transform: 'translate(0, 0)', opacity: 1 },
                { transform: 'translate(' + cardDeltaX + 'px, ' + cardDeltaY + 'px)', opacity: 1 }
              ], {
                duration: 500,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                fill: 'forwards'
              });
              // ★ onfinish / oncancel / 3s 超时三重兜底：任何一条触发都移除克隆并 resolve
              var _innerDone = false;
              var _finishInner = function () {
                if (_innerDone) return;
                _innerDone = true;
                if (tempCard && tempCard.parentNode) tempCard.parentNode.removeChild(tempCard);
                resolveInner();
              };
              anim.onfinish = _finishInner;
              anim.oncancel = _finishInner;
              setTimeout(_finishInner, 3000);
            });
          });

          await Promise.race([Promise.all(aiAnimations), delay(2500)]);

          // ★ race 兜底后强制清理：超时路径下 onfinish 可能永远不触发，克隆必须在此移除
          _surroundTempCards.forEach(function (tc) {
            if (tc && tc.parentNode) tc.parentNode.removeChild(tc);
          });

          // 动画后：按 targetTop 排序插入到 AI 路牌区 DOM
          // opponent-road-slot 是 column-reverse 布局：DOM 先 = 视觉下方，DOM 后 = 视觉上方
          // 所以应按 targetTop 从大到小排序（top 大的在下方，先插入 DOM）
          const aiIndexedItems = aiValidItems.map(function (item, idx) {
            return {
              item: item,
              style: aiCachedStyles[idx],
              src: aiSourceRects[idx],
              targetTop: aiCardTargetTops[idx]
            };
          });
          aiIndexedItems.sort(function (a, b) { return b.targetTop - a.targetTop; });
          aiIndexedItems.forEach(function (_ref) {
            const style = _ref.style;
            const src = _ref.src;
            const newCard = document.createElement('div');
            // ★ 2026-09-09 FIX（围牌后叠牌"突然变大再恢复"）：见下方 31866 同源修复。
            //   中立小卡进路牌区叠牌区本应使用 .card-small，否则 .road-slot .card {height:96px !important}
            //   把叠牌撑成 96px 大卡，造成视觉跳变。移除 inline width/height 让 .road-slot .card-small 接管。
            newCard.className = 'card card-small';
            newCard.style.background = style.background;
            newCard.style.border = style.border;
            newCard.style.borderRadius = style.borderRadius;
            newCard.style.boxShadow = style.boxShadow;
            newCard.style.color = style.color;
            newCard.style.fontWeight = style.fontWeight;
            newCard.style.display = 'flex';
            newCard.style.alignItems = 'center';
            newCard.style.justifyContent = 'center';
            newCard.style.overflow = 'hidden';
            newCard.style.position = 'relative';
            newCard.style.marginBottom = '2px';
            newCard.innerHTML = style.innerHTML;
            aiRoadTarget.appendChild(newCard);
          });

          aiRoadTarget.classList.add('card-road-pop');
          const aiPopTimer = setTimeout(function () {
            aiRoadTarget.classList.remove('card-road-pop');
          }, 600);
          addTimer(aiPopTimer);

          if (typeof playSound === 'function') playSound('surroundCardSound');
        }
      } else {
        aiItemsToMove.forEach(function (item) {
          if (item.el && item.el.parentNode) item.el.parentNode.removeChild(item.el);
        });
      }

      // ---------- 步骤4：数据更新（已在步骤3b完成）----------

      updateGameStatus(__t('st_opp_encircle').replace('{i}', neutralIndex + 1).replace('{t}', neutralCards.length).replace('{p}', playerCardsInSlot.length).replace('{a}', opponentCardsInSlot.length).replace('{r}', roadIndex + 1), 'st_opp_encircle');
      addTurnRecord('围牌', '中立区第' + (neutralIndex + 1) + '路' + neutralCards.length + '张牌转移到对方第' + (roadIndex + 1) + '路', 'opponent', strategyInfo || null);

      // 增量更新：与玩家围牌一致，避免整区重绘导致动画后DOM被替换
      if (typeof updatePlayerDeck === 'function') updatePlayerDeck();
      if (typeof updateOpponentDeck === 'function') updateOpponentDeck();
      if (typeof updateCardDisplayArea === 'function') {
        updateCardDisplayArea('player', 'hand', GameState.playerHand);
        updateCardDisplayArea('player', 'revealedCards', GameState.playerRevealedCards);
        updateCardDisplayArea('player', 'darkCards', GameState.playerDarkCards);
        updateCardDisplayArea('opponent', 'hand', GameState.opponentHand);
        updateCardDisplayArea('opponent', 'revealedCards', GameState.opponentRevealedCards);
        updateCardDisplayArea('opponent', 'darkCards', GameState.opponentDarkCards);
      }
      if (typeof updateNeutralDisplay === 'function') updateNeutralDisplay();
      if (typeof updateResults === 'function') updateResults();
      if (typeof updateCardTypeDisplay === 'function') updateCardTypeDisplay();

      // ★ 2026-9-21 AI 围牌联动波浪：从 AI 打出的牌开始 → 被围的牌按转移顺序依次脉冲，
      //   同一路的其他旧牌不动（★ 2026-9-21 用户反馈：方向为 A → 2 → 3）
      setTimeout(function () {
        if (typeof pbPulseCardList !== 'function') return;
        var _aiSurSlot = document.querySelector(_aiRoadSlotSel + '[data-road-slot="' + roadIndex + '"]');
        if (!_aiSurSlot) return;
        var _aiSurAll = Array.prototype.slice.call(_aiSurSlot.querySelectorAll('.card, .card-small'));
        var _aiSurN = Math.min(neutralCards.length, _aiSurAll.length);
        var _aiSeq = _aiSurAll.slice(_aiSurAll.length - _aiSurN);
        var _aiStartIdx = _aiSurAll.length - _aiSurN - 1;
        if (_aiStartIdx >= 0) _aiSeq.unshift(_aiSurAll[_aiStartIdx]);
        else if (_aiSurAll.length) _aiSeq.unshift(_aiSurAll[0]);
        pbPulseCardList(_aiSeq, 90);
      }, 150);

      // ★ 2026-9-8 规则修正（出牌两阶段）：同 opponentPerformRoadMatch，
      //   AI 围牌执行完仍是"打出未放置"状态，不在此提前判定拼点，
      //   统一由放置入口 finalizePlacement 的 5 路重算处理。

      // ★ 人机2v1模式：匹配执行完成后，发送全状态同步给队员
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
        if (typeof collectPracticeState === 'function') {
          PBOnline.sendPracticeStateSync(collectPracticeState());
        }
      }

      // ---------- 步骤5：★ 不再在这里调 startOpponentPlayDelay ----------
      // 2026-6-1 FIX: 回合推进统一由调用者（onAnimationEnd）调 confirmCardPlacement → finalizePlacement → safeSwitchTurn
      // 这里只做 sync + return
      return;

      } finally {
        // ★ 防御性：确保任何路径（正常/提前return/异常）都清 localMatchInProgress
        GameState.localMatchInProgress = false;
      }
    }

    // ============================================================================
    // 【AI 援牌执行 · opponentPerformSupportMatch】(2026-10-02 PlanBook O3)
    // ============================================================================
    // 此前 AI 无援牌链路：evaluateBestMatch 只覆盖拖/撞/围，AI 打出牌即使与我方
    // 中立区匹配（可援牌强化归属），机会也被无声放弃（直接 confirmCardPlacement）。
    // 本函数补齐：AI 打出的牌移入我方中立区第 neutralIndex 格。
    // 数据流同 opponentPerformSurroundMatch：只做动画+数据更新，回合推进由
    // onAnimationEnd finally 块的 confirmCardPlacement 统一处理。
    // ★ 2v1 联机模式守卫：援牌暂无队友同步协议，直接 return（回落普通放置，不破坏同步）。
    // ============================================================================
    async function opponentPerformSupportMatch(opponentCard, roadIndex, neutralIndex, strategyInfo, skipAura) {
      if (GameState.isGameInterrupted) return;
      // ★ 2v1 同步守卫：援牌无队友同步协议，联机练习模式回落普通放置
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) return;

      GameState.localMatchInProgress = true;
      try {
        var _aiField = GameState.opponentField;
        var _aiStack = GameState.opponentStack;

        // 防御性：源卡必须还在 AI 路牌区（避免重复结算）
        var _cardInSource = (_aiField[roadIndex] && _aiField[roadIndex].id === opponentCard.id) ||
                            (_aiStack[roadIndex] && _aiStack[roadIndex].some(function (c) { return c && c.id === opponentCard.id; }));
        if (!_cardInSource) {
          console.warn('[opponentPerformSupportMatch] ⚠ AI路牌区源卡已不在（疑似已结算），跳过本次援牌');
          return;
        }
        // 防御性：中立区该格未满
        var _aiNeutral = GameState.opponentNeutralCards[neutralIndex];
        if (!_aiNeutral || _aiNeutral.length >= 4) return;

        // ★ 2026-10-04（用户反馈）：AI 援牌先在场上显示匹配光环 1.5s（源卡金圈+中立区格高亮），
        //   再移入中立区——与玩家/队友援牌流程对齐
        var _aiRoadSlot = document.querySelector(`.opponent-road-slot[data-road-slot="${roadIndex}"]`);
        var _srcCard = null;
        if (_aiRoadSlot && opponentCard) {
          _srcCard = _aiRoadSlot.querySelector(`.card[data-card-id="${opponentCard.id}"], .card-small[data-card-id="${opponentCard.id}"]`);
          if (!_srcCard) {
            var _cards = _aiRoadSlot.querySelectorAll('.card, .card-small');
            if (_cards.length > 0) _srcCard = _cards[_cards.length - 1];
          }
        }
        var _tgtNeutralSlot = document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`);
        if (_srcCard) _srcCard.classList.add('match-glow');
        if (_tgtNeutralSlot) _tgtNeutralSlot.classList.add('ai-surround-glow');
        if (typeof playSound === 'function') playSound('glowBellSound');
        await delay(1500);
        if (GameState.isGameInterrupted) {
          if (_srcCard) _srcCard.classList.remove('match-glow');
          return;
        }
        if (_srcCard) _srcCard.classList.remove('match-glow');
        if (_tgtNeutralSlot) {
          _tgtNeutralSlot.classList.remove('ai-surround-glow');
          _tgtNeutralSlot.style.boxShadow = '';
          _tgtNeutralSlot.style.border = '';
          _tgtNeutralSlot.style.animation = '';
        }

        // ★ 2026-10-04（用户反馈）：补上援牌飞行动画（与玩家/队友援牌一致——
        //   飞行卡从路牌区飞向中立区落点，skipTargetWrite 由随后的 updateUI 渲染真身）
        var _supportAnimEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('support-animation') : true;
        if (_supportAnimEnabled && _srcCard && _tgtNeutralSlot && typeof animateCardMove === 'function') {
          try { await animateCardMove(_srcCard, _tgtNeutralSlot, 'opponent', opponentCard, 'support', { skipTargetWrite: true }); }
          catch (e) { console.warn('[opponentPerformSupportMatch] 援牌动画失败:', e); }
        }

        // ★ 回放录制：援牌事件（与围牌同格式）
        if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
          try { ReplayRecorder.noteMatch('support', roadIndex, neutralIndex); } catch (e) {}
        }

        // 数据更新：从 AI 路牌区移除 → 进 AI 中立区该格
        if (_aiField[roadIndex] && _aiField[roadIndex].id === opponentCard.id) {
          _aiField[roadIndex] = null;
        } else {
          var _stackIdx = -1;
          for (var _si = 0; _si < _aiStack[roadIndex].length; _si++) {
            if (_aiStack[roadIndex][_si] && _aiStack[roadIndex][_si].id === opponentCard.id) { _stackIdx = _si; break; }
          }
          if (_stackIdx !== -1) _aiStack[roadIndex].splice(_stackIdx, 1);
        }
        _aiNeutral.push(opponentCard);

        if (typeof addTurnRecord === 'function') {
          addTurnRecord('援牌', '将' + opponentCard.display + '移入中立区第' + (neutralIndex + 1) + '路', 'opponent', strategyInfo || null);
        }
        if (typeof updateUI === 'function') updateUI();
        // 该路少了一张牌，拼点重算（skipSound=true：援牌不拼路权）
        if (typeof checkRoadResult === 'function') checkRoadResult(roadIndex, true);
        // ★ 2026-10-11 补波浪（用户报：人机援牌无波浪；对齐玩家版 36097 归属判断）：
        //   AI 援牌落下后 AI 中立牌数量多于我方 → 此路归属 AI → 以落下的援牌
        //   （AI 格末张）为起点，带动两格卡牌依次"缩小-放大-还原"（对方格在前）
        var _aiSupMine = _aiNeutral.length > ((GameState.playerNeutralCards[neutralIndex] || []).length);
        if (_aiSupMine && typeof pbPlayChainPulse === 'function') {
          setTimeout(function () {
            pbPlayChainPulse([
              document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`),
              document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`)
            ], 'last');
          }, 120);
        }
        return;
      } finally {
        GameState.localMatchInProgress = false;
      }
    }

    // ============================================================================
    // 【2v2 队友匹配执行 · playerPerformRoadMatch】
    // 用途：2v2联机模式下，队友（蓝方）打出的牌触发拖牌/撞牌时，本客户端渲染该匹配。
    //   队友打出的牌位于 playerField（蓝方），匹配的红方牌位于 opponentField（红方）。
    //   仅渲染+更新数据，不发网络消息、不切换回合（回合由服务器 / turn_complete 控制）。
    // ============================================================================
    async function playerPerformRoadMatch(matchType, myCard, oppCard, roadIndex, oppLocation, oppStackIndex, skipAura, triggerPlayerIdx) {
      if (GameState.isGameInterrupted) return;

      // ★ 2026-8-31 FIX: 队员端执行 match 期间设 localMatchInProgress=true，
      //   防止 1.5s 光环等待窗口内 handlePracticeStateSync 介入导致重复执行
      GameState.localMatchInProgress = true;
      try {

      // 定位队友打出的牌（playerField/Stack）
      let myLocation = 'field';
      let myStackIndex = -1;
      if (!(GameState.playerField[roadIndex] && GameState.playerField[roadIndex].id === myCard.id)) {
        myStackIndex = GameState.playerStack[roadIndex].findIndex(function(c) { return c && c.id === myCard.id; });
        if (myStackIndex !== -1) myLocation = 'stack';
      }

      // 定位红方匹配牌（opponentField/Stack）
      let calLoc = oppLocation || 'field';
      let calStackIndex = (typeof oppStackIndex === 'number') ? oppStackIndex : -1;
      if (!(GameState.opponentField[roadIndex] && GameState.opponentField[roadIndex].id === oppCard.id)) {
        if (calStackIndex === -1) {
          calStackIndex = GameState.opponentStack[roadIndex].findIndex(function(c) { return c && c.id === oppCard.id; });
        }
        if (calStackIndex !== -1) calLoc = 'stack';
      }

      // DOM：队友打出的牌（.player-road-slot）
      const myRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);
      let mySourceCard = null;
      if (myRoadSlot && myCard) {
        mySourceCard = myRoadSlot.querySelector(`.card[data-card-id="${myCard.id}"], .card-small[data-card-id="${myCard.id}"]`);
        if (!mySourceCard) {
          const cards = myRoadSlot.querySelectorAll('.card, .card-small');
          if (myLocation === 'field' && cards.length > 0) mySourceCard = cards[0];
          else if (myLocation === 'stack' && myStackIndex >= 0) mySourceCard = cards[myStackIndex + 1] || cards[cards.length - 1];
          if (!mySourceCard && cards.length > 0) mySourceCard = cards[cards.length - 1];
        }
      }

      // DOM：红方匹配牌（.opponent-road-slot）
      const oppRoadSlot = document.querySelector(`.opponent-road-slot[data-road-slot="${roadIndex}"]`);
      let oppSourceCard = null;
      if (oppRoadSlot && oppCard) {
        oppSourceCard = oppRoadSlot.querySelector(`.card[data-card-id="${oppCard.id}"], .card-small[data-card-id="${oppCard.id}"]`);
        if (!oppSourceCard) {
          const cards = oppRoadSlot.querySelectorAll('.card, .card-small');
          if (calLoc === 'field' && cards.length > 0) oppSourceCard = cards[0];
          else if (calLoc === 'stack' && calStackIndex >= 0) oppSourceCard = cards[calStackIndex + 1] || cards[cards.length - 1];
          if (!oppSourceCard && cards.length > 0) oppSourceCard = cards[cards.length - 1];
        }
      }

      // 中立区
      const myNeutralIndex = findEmptyNeutralSlot('player');
      const oppNeutralIndex = findEmptyNeutralSlot('opponent');
      if (myNeutralIndex === -1 || oppNeutralIndex === -1) return;
      const myNeutralSlotEl = document.querySelector(`.player-neutral-slot[data-slot="${myNeutralIndex}"]`);
      const oppNeutralSlotEl = document.querySelector(`.opponent-neutral-slot[data-slot="${oppNeutralIndex}"]`);

      // ★ 与 opponentPerformRoadMatch 完全一致的光环处理：先加后移除。
      //   skipAura=true 时跳过 1.5s 延迟（联机模式下光环已通过 match_glow_start 提前显示）。
      //   Phase-1 的 applyRemoteRoadGlow + ensureRoadGlowReapply 重试循环负责持久显示，
      //   这里仅做清理（移除残留光环），与对手路径行为完全一致。
      // ★ 2026-9-1: 引入 _matchChainGen + interruptedDelay，可被新 chain 中断
      GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
      var _matchGenP = GameState._matchChainGen;
      if (mySourceCard) mySourceCard.classList.add('match-glow');
      if (oppSourceCard) oppSourceCard.classList.add('match-glow');
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——skipAura=true 时光环已由 applyRemoteRoadGlow 提前显示并播过
      if (!skipAura && typeof playSound === 'function') playSound('glowBellSound');
      if (!skipAura) {
        await interruptedDelay(1500, _matchGenP);
        // ★ 被新 chain 覆盖或游戏中断：清光环后 return
        if (GameState._matchChainGen !== _matchGenP || GameState.isGameInterrupted) {
          if (mySourceCard) mySourceCard.classList.remove('match-glow');
          if (oppSourceCard) oppSourceCard.classList.remove('match-glow');
          return;
        }
      }
      if (mySourceCard) mySourceCard.classList.remove('match-glow');
      if (oppSourceCard) oppSourceCard.classList.remove('match-glow');

      // 动画
      if (matchType === 'crash') {
        if (mySourceCard && oppSourceCard && myNeutralSlotEl && oppNeutralSlotEl && typeof animateCrashSequence === 'function') {
          await animateCrashSequence(oppCard, myCard, roadIndex, oppSourceCard, mySourceCard, myNeutralSlotEl, oppNeutralSlotEl);
        } else if (typeof playSound === 'function') {
          playSound('crashSound');
          if (typeof pbTriggerScreenShake === 'function') pbTriggerScreenShake();
        }
      } else {
        const animationEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('drag-animation') : true;
        const promises = [];
        if (animationEnabled && mySourceCard && myNeutralSlotEl && typeof animateCardMove === 'function') {
          promises.push(animateCardMove(mySourceCard, myNeutralSlotEl, 'player', myCard, matchType));
        }
        if (animationEnabled && oppSourceCard && oppNeutralSlotEl && typeof animateCardMove === 'function') {
          promises.push(animateCardMove(oppSourceCard, oppNeutralSlotEl, 'opponent', oppCard, matchType));
        }
        if (promises.length > 0) await Promise.all(promises);
      }

      // 数据更新
      GameState.playerNeutralCards[myNeutralIndex].push(myCard);
      GameState.opponentNeutralCards[oppNeutralIndex].push(oppCard);

      if (matchType === 'drag') {
        const pIdx = GameState.playerStack[roadIndex].findIndex(function(c) { return c && c.id === myCard.id; });
        if (GameState.playerField[roadIndex] && GameState.playerField[roadIndex].id === myCard.id) {
          GameState.playerField[roadIndex] = null;
        } else if (pIdx !== -1) {
          GameState.playerStack[roadIndex].splice(pIdx, 1);
        }
        if (calLoc === 'field') {
          GameState.opponentField[roadIndex] = null;
        } else if (calStackIndex !== -1) {
          GameState.opponentStack[roadIndex].splice(calStackIndex, 1);
        }
        if (!GameState.playerField[roadIndex] && GameState.playerStack[roadIndex] && GameState.playerStack[roadIndex].length > 0) {
          GameState.playerField[roadIndex] = GameState.playerStack[roadIndex].shift();
        }
        if (!GameState.opponentField[roadIndex] && GameState.opponentStack[roadIndex] && GameState.opponentStack[roadIndex].length > 0) {
          GameState.opponentField[roadIndex] = GameState.opponentStack[roadIndex].shift();
        }
        if (typeof updateGameStatus === 'function') var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_teammate_drag').replace('{me}', myCard.display).replace('{opp}', oppCard.display), 'st_teammate_drag');
        if (typeof addTurnRecord === 'function') addTurnRecord('拖牌', `队友${myCard.display}和对方${oppCard.display}移入中立区`, 'player');
      } else {
        GameState.playerField[roadIndex] = null;
        GameState.playerStack[roadIndex] = [];
        GameState.opponentField[roadIndex] = null;
        GameState.opponentStack[roadIndex] = [];
        if (typeof updateGameStatus === 'function') var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_teammate_clash').replace('{me}', myCard.display).replace('{opp}', oppCard.display).replace('{n}', roadIndex+1), 'st_teammate_clash');
        if (typeof addTurnRecord === 'function') addTurnRecord('撞牌', `队友${myCard.display}和对方${oppCard.display}移入中立区，第${roadIndex + 1}路清空`, 'player');
      }

      if (typeof updateUI === 'function') updateUI();
      for (let _ri = 0; _ri < 5; _ri++) {
        if (typeof checkRoadResult === 'function') checkRoadResult(_ri);
      }
      // ★ 2026-9-9: 补渲染最后一路拼点标记（checkRoadResult 先渲染后判定，最后一路没人渲染）
      if (typeof updateResults === 'function') updateResults();
      // ★ 队长端：处理完队员 match_action 后，把更新后的完整状态（含正确 playerWins）同步回队员端
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (typeof collectPracticeState === 'function') {
          PBOnline.sendPracticeStateSync(collectPracticeState());
        }
      }

      } finally {
        GameState.localMatchInProgress = false;
      }
    }

    // ============================================================================
    // 【2v2 队友围牌执行 · playerPerformSurroundMatch】
    // 用途：2v2联机模式下，队友打出的牌触发围牌时，本客户端渲染围牌。
    //   中立区该路双方卡牌转移到队友刚打出牌的那一路叠牌区（蓝方=playerStack）。
    //   仅渲染+更新数据，不发网络消息、不切换回合。
    // ============================================================================
    async function playerPerformSurroundMatch(myCard, roadIndex, neutralIndex, matchValue, strategyInfo, skipAura) {
      if (GameState.isGameInterrupted) return;

      // ★ 2026-8-31 FIX: 队员端执行 match 期间设 localMatchInProgress=true
      GameState.localMatchInProgress = true;
      try {

      const playerCell = GameState.playerNeutralCards ? GameState.playerNeutralCards[neutralIndex] : [];
      const oppCell = GameState.opponentNeutralCards ? GameState.opponentNeutralCards[neutralIndex] : [];
      const playerCardsInSlot = playerCell.slice();
      const opponentCardsInSlot = oppCell.slice();
      const neutralCards = playerCardsInSlot.concat(opponentCardsInSlot);
      if (neutralCards.length === 0) return;

      // 光环：队友打出的牌（.player-road-slot）+ 中立区格子
      const playerRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);
      let sourceCard = null;
      if (playerRoadSlot && myCard) {
        const cards = playerRoadSlot.querySelectorAll('.card, .card-small');
        for (let i = 0; i < cards.length; i++) {
          const text = cards[i].textContent || '';
          if (text.includes(myCard.display)) { sourceCard = cards[i]; break; }
        }
        if (!sourceCard && cards.length > 0) sourceCard = cards[cards.length - 1];
      }
      const playerNeutralSlotEl = document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`);
      const opponentNeutralSlotEl = document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`);
      // ★ 2026-9-1: 引入 _matchChainGen + interruptedDelay，可被新 chain 中断
      GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
      var _matchGenPS = GameState._matchChainGen;
      if (typeof clearNeutralAuras === 'function') clearNeutralAuras();
      if (sourceCard) sourceCard.classList.add('match-glow');
      if (playerNeutralSlotEl) playerNeutralSlotEl.classList.add('ai-surround-glow');
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——skipAura=true 时光环已提前显示过，不重复
      if (!skipAura && typeof playSound === 'function') playSound('glowBellSound');

      if (!skipAura) {
        await interruptedDelay(1500, _matchGenPS);
        // ★ 被新 chain 覆盖或游戏中断：清光环后 return
        if (GameState._matchChainGen !== _matchGenPS || GameState.isGameInterrupted) {
          if (sourceCard) sourceCard.classList.remove('match-glow');
          if (playerNeutralSlotEl) {
            playerNeutralSlotEl.classList.remove('ai-surround-glow');
            playerNeutralSlotEl.style.boxShadow = '';
            playerNeutralSlotEl.style.border = '';
            playerNeutralSlotEl.style.animation = '';
          }
          if (opponentNeutralSlotEl) {
            opponentNeutralSlotEl.classList.remove('ai-surround-glow');
            opponentNeutralSlotEl.style.boxShadow = '';
            opponentNeutralSlotEl.style.border = '';
            opponentNeutralSlotEl.style.animation = '';
          }
          return;
        }
      }

      if (sourceCard) sourceCard.classList.remove('match-glow');
      if (playerNeutralSlotEl) {
        playerNeutralSlotEl.classList.remove('ai-surround-glow');
        playerNeutralSlotEl.style.boxShadow = '';
        playerNeutralSlotEl.style.border = '';
        playerNeutralSlotEl.style.animation = '';
      }
      if (opponentNeutralSlotEl) {
        opponentNeutralSlotEl.classList.remove('ai-surround-glow');
        opponentNeutralSlotEl.style.boxShadow = '';
        opponentNeutralSlotEl.style.border = '';
        opponentNeutralSlotEl.style.animation = '';
      }

      // 收集要移动的卡牌及 DOM
      const itemsToMove = [];
      const targetRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);
      function findCardByText(container, card) {
        if (!container || !card) return null;
        const cards = container.querySelectorAll('.card');
        for (let i = 0; i < cards.length; i++) {
          const text = cards[i].textContent || '';
          if (text.includes(card.display)) return cards[i];
        }
        return null;
      }
      // ★ 2026-9-24 FIX：按"屏幕视觉时序"转移（同主流程围牌修复）——
      //   对方槽倒序渲染（数组末尾在屏幕最上）→ 取数组倒序；我方槽正序 → 取数组正序。
      //   转移后叠牌从上到下与围牌前中立区屏幕顺序一致
      for (let _oj = opponentCardsInSlot.length - 1; _oj >= 0; _oj--) {
        const card = opponentCardsInSlot[_oj];
        itemsToMove.push({ card, el: findCardByText(opponentNeutralSlotEl, card), playerType: 'opponent' });
      }
      playerCardsInSlot.forEach(card => { itemsToMove.push({ card, el: findCardByText(playerNeutralSlotEl, card), playerType: 'player' }); });

      // 清空中立区数据，放入目标路牌区叠牌区（蓝方=playerStack）
      GameState.opponentNeutralCards[neutralIndex] = [];
      GameState.playerNeutralCards[neutralIndex] = [];
      itemsToMove.forEach(item => { GameState.playerStack[roadIndex].push(item.card); });

      const surroundAnimEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('surround-animation') : true;

      if (surroundAnimEnabled && itemsToMove.some(i => i.el) && targetRoadSlot) {
        const validItems = itemsToMove.filter(item => item.el);
        if (validItems.length > 0) {
          // ★ 2026-9-30 重构（对齐援牌 animateCardMove 结构）：克隆挂 game-container 内 + 容器设计坐标
          //   此前挂 body 用视口坐标 → 手机上"圆圈牌"。容器内坐标随 transform scale 一同缩放。
          const _tmGc = document.querySelector('.game-container');
          const _tmCr = _tmGc ? _tmGc.getBoundingClientRect() : { left: 0, top: 0 };
          let _tmSc = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
          try {
            const _rw = _tmGc ? (_tmGc.offsetWidth || 0) : 0;
            const _vw = _tmGc ? (_tmGc.getBoundingClientRect().width || 0) : 0;
            if (_rw > 0 && _vw > 0 && isFinite(_vw / _rw) && (_vw / _rw) > 0) _tmSc = _vw / _rw;
          } catch (e) {}
          const _tmToDesign = function (r) {
            return { left: (r.left - _tmCr.left) / _tmSc, top: (r.top - _tmCr.top) / _tmSc, width: r.width / _tmSc, height: r.height / _tmSc };
          };
          const endRect = _tmToDesign(targetRoadSlot.getBoundingClientRect());
          const stackGap = 2;
          let baseTop = endRect.top;
          const existingCards = targetRoadSlot.querySelectorAll('.card');
          if (existingCards.length > 0) {
            const lastCardRectD = _tmToDesign(existingCards[existingCards.length - 1].getBoundingClientRect());
            baseTop = lastCardRectD.top + lastCardRectD.height + stackGap;
          }
          const sourceRects = validItems.map(item => _tmToDesign(item.el.getBoundingClientRect()));
          const cardHeights = sourceRects.map(r => r.height);
          const cachedStyles = validItems.map(item => {
            const computed = getComputedStyle(item.el);
            return {
              background: item.el.style.background || computed.background,
              border: item.el.style.border || computed.border,
              borderRadius: item.el.style.borderRadius || computed.borderRadius,
              boxShadow: item.el.style.boxShadow || computed.boxShadow,
              color: item.el.style.color || computed.color,
              fontWeight: item.el.style.fontWeight || computed.fontWeight,
              fontSize: item.el.style.fontSize || computed.fontSize,
              innerHTML: item.el.innerHTML
            };
          });
          const _tmSurroundTemps = [];  // ★ 残留兜底收集（同 AI 围牌三重兜底）
          const animations = validItems.map((item, idx) => {
            return new Promise((resolveInner) => {
              const tempCard = document.createElement('div');
              _tmSurroundTemps.push(tempCard);
              const sourceRect = sourceRects[idx];
              let currentTargetTop = baseTop;
              for (let i = 0; i < idx; i++) { currentTargetTop += cardHeights[i] + stackGap; }
              const style = cachedStyles[idx];
              tempCard.style.left = sourceRect.left + 'px';
              tempCard.style.top = sourceRect.top + 'px';
              tempCard.style.width = sourceRect.width + 'px';
              tempCard.style.height = sourceRect.height + 'px';
              tempCard.style.position = 'absolute';
              tempCard.style.zIndex = '50';
              tempCard.style.pointerEvents = 'none';
              tempCard.style.background = style.background;
              tempCard.style.border = style.border;
              tempCard.style.borderRadius = style.borderRadius;
              tempCard.style.boxShadow = style.boxShadow;
              tempCard.style.color = style.color;
              tempCard.style.fontWeight = style.fontWeight;
              tempCard.style.fontSize = style.fontSize;
              tempCard.style.display = 'flex';
              tempCard.style.alignItems = 'center';
              tempCard.style.justifyContent = 'center';
              tempCard.style.overflow = 'hidden';
              tempCard.innerHTML = style.innerHTML;
              // ★ 挂 game-container 内（容器坐标随 transform scale 一同缩放，与援牌同构）
              if (_tmGc) _tmGc.appendChild(tempCard); else document.body.appendChild(tempCard);
              if (item.el && item.el.parentNode) item.el.parentNode.removeChild(item.el);
              const targetLeft = endRect.left + (endRect.width - sourceRect.width) / 2;
              const deltaX = targetLeft - sourceRect.left;
              const deltaY = currentTargetTop - sourceRect.top;
              const animation = tempCard.animate([
                { transform: 'translate(0, 0)', opacity: 1 },
                { transform: 'translate(' + deltaX + 'px, ' + deltaY + 'px)', opacity: 1 }
              ], {
                duration: 500,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                fill: 'forwards'
              });
              var _innerDone = false;
              var _finishInner = function () {
                if (_innerDone) return;
                _innerDone = true;
                if (tempCard && tempCard.parentNode) tempCard.parentNode.removeChild(tempCard);
                resolveInner();
              };
              animation.onfinish = _finishInner;
              animation.oncancel = _finishInner;
              setTimeout(_finishInner, 3000);
            });
          });
          await Promise.race([Promise.all(animations), delay(2500)]);
          // ★ race 兜底后强制清理残留克隆
          _tmSurroundTemps.forEach(function (tc) {
            if (tc && tc.parentNode) tc.parentNode.removeChild(tc);
          });

          validItems.forEach((item, idx) => {
            const newCard = document.createElement('div');
            const style = cachedStyles[idx];
            // ★ 2026-09-09 FIX（围牌后叠牌"突然变大再恢复"）：见 31866 同源修复。
            newCard.className = 'card card-small';
            newCard.style.background = style.background;
            newCard.style.border = style.border;
            newCard.style.borderRadius = style.borderRadius;
            newCard.style.boxShadow = style.boxShadow;
            newCard.style.color = style.color;
            newCard.style.fontWeight = style.fontWeight;
            newCard.style.display = 'flex';
            newCard.style.alignItems = 'center';
            newCard.style.justifyContent = 'center';
            newCard.style.overflow = 'hidden';
            newCard.style.position = 'relative';
            newCard.style.marginBottom = '2px';
            newCard.innerHTML = style.innerHTML;
            targetRoadSlot.appendChild(newCard);
          });
          targetRoadSlot.classList.add('card-road-pop');
          const popTimer = setTimeout(function () { targetRoadSlot.classList.remove('card-road-pop'); }, 600);
          if (typeof addTimer === 'function') addTimer(popTimer);
          if (typeof playSound === 'function') playSound('surroundCardSound');
        }
      } else {
        itemsToMove.forEach(function (item) {
          if (item.el && item.el.parentNode) item.el.parentNode.removeChild(item.el);
        });
      }

      if (typeof updateGameStatus === 'function') var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_teammate_encircle').replace('{n}', neutralIndex+1).replace('{cnt}', neutralCards.length).replace('{road}', roadIndex+1), 'st_teammate_encircle');
      if (typeof addTurnRecord === 'function') addTurnRecord('围牌', `中立区第${neutralIndex + 1}路${neutralCards.length}张牌转移到第${roadIndex + 1}路`, 'player');

      if (typeof updateUI === 'function') updateUI();
      for (let _ri = 0; _ri < 5; _ri++) {
        if (typeof checkRoadResult === 'function') checkRoadResult(_ri);
      }
      // ★ 2026-9-9: 补渲染最后一路拼点标记（checkRoadResult 先渲染后判定，最后一路没人渲染）
      if (typeof updateResults === 'function') updateResults();
      // ★ 队长端：处理完队员围牌 match_action 后，同步更新后的完整状态回队员端
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (typeof collectPracticeState === 'function') {
          PBOnline.sendPracticeStateSync(collectPracticeState());
        }
      }

      } finally {
        GameState.localMatchInProgress = false;
      }
    }

    // ============================================================================
    // 【2v2 队友援牌执行 · playerPerformSupportMatch】
    // 用途：2v2联机模式下，队友打出的牌触发援牌时，本客户端渲染援牌。
    //   队友打出的牌（playerField/蓝方）移入己方中立区（playerNeutralCards）。
    //   仅渲染+更新数据，不发网络消息、不切换回合。
    // ============================================================================
    async function playerPerformSupportMatch(myCard, roadIndex, neutralIndex, skipAura) {
      if (GameState.isGameInterrupted) return;

      // ★ 2026-8-31 FIX: 队员端执行 match 期间设 localMatchInProgress=true
      GameState.localMatchInProgress = true;
      try {

      const playerRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${roadIndex}"]`);
      let sourceCard = null;
      if (playerRoadSlot && myCard) {
        sourceCard = playerRoadSlot.querySelector(`.card[data-card-id="${myCard.id}"], .card-small[data-card-id="${myCard.id}"]`);
        if (!sourceCard) {
          const cards = playerRoadSlot.querySelectorAll('.card, .card-small');
          for (let i = 0; i < cards.length; i++) {
            const text = cards[i].textContent || '';
            if (text.includes(myCard.display)) { sourceCard = cards[i]; break; }
          }
          if (!sourceCard && cards.length > 0) sourceCard = cards[cards.length - 1];
        }
      }
      const targetSlot = document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`);
      if (sourceCard) sourceCard.classList.add('match-glow');
      if (targetSlot) targetSlot.classList.add('ai-surround-glow');
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——skipAura=true 时光环已提前显示过，不重复
      if (!skipAura && typeof playSound === 'function') playSound('glowBellSound');
      if (!skipAura) { await delay(1500); }
      if (sourceCard) sourceCard.classList.remove('match-glow');
      if (targetSlot) {
        targetSlot.classList.remove('ai-surround-glow');
        targetSlot.style.boxShadow = '';
        targetSlot.style.border = '';
        targetSlot.style.animation = '';
      }

      // 数据更新
      if (GameState.playerField[roadIndex] && GameState.playerField[roadIndex].id === myCard.id) {
        GameState.playerField[roadIndex] = null;
      } else {
        const stackIdx = GameState.playerStack[roadIndex].findIndex(function(c) { return c && c.id === myCard.id; });
        if (stackIdx !== -1) GameState.playerStack[roadIndex].splice(stackIdx, 1);
      }
      GameState.playerNeutralCards[neutralIndex].push(myCard);

      const animationEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('support-animation') : true;
      if (animationEnabled && sourceCard && targetSlot && typeof animateCardMove === 'function') {
        try { await animateCardMove(sourceCard, targetSlot, 'player', myCard, 'support', { skipTargetWrite: true }); }
        catch (e) { console.warn('[联机] 队友援牌动画失败:', e); }
      }

      if (typeof updateGameStatus === 'function') var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_teammate_support').replace('{card}', myCard.display).replace('{n}', neutralIndex+1), 'st_teammate_support');
      if (typeof addTurnRecord === 'function') addTurnRecord('援牌', `队友${myCard.display}移入中立区第${neutralIndex + 1}路`, 'player');

      if (typeof updateUI === 'function') updateUI();
      // ★ 2026-10-11 补波浪（联机队友援牌此前缺失；对齐玩家版 36097 归属判断）：
      //   队友援牌落下后我方中立牌数量多于对方 → 此路归属我方 → 波浪连锁（我方格在前）
      var _tmSupMine = GameState.playerNeutralCards[neutralIndex].length > ((GameState.opponentNeutralCards[neutralIndex] || []).length);
      if (_tmSupMine && typeof pbPlayChainPulse === 'function') {
        setTimeout(function () {
          pbPlayChainPulse([
            document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`),
            document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`)
          ], 'last');
        }, 120);
      }
      if (typeof checkRoadResult === 'function') checkRoadResult(roadIndex, true);

      } finally {
        GameState.localMatchInProgress = false;
      }
    }

    // startOpponentPlayDelay: AI 出牌后的回合处理
    // 如果玩家已终止 → AI 连续出牌；否则 → 切换回玩家回合
    function startOpponentPlayDelay() {
      // 联机模式：对方出牌动画完成后不自动切换回合，等待对方的 turn_complete 信号
      // ★ 人机2v1模式除外：AI出牌后需要自动推进回合
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && !(PBOnline.isPractice2v2Mode)) {
        console.log('[联机] startOpponentPlayDelay 跳过（联机模式）');
        return;
      }
      // ★ 人机2v1模式：正在处理队友的远程匹配操作时，跳过回合切换（由队长统一管理回合推进）
      if (typeof PBOnline !== 'undefined' && PBOnline.isPractice2v2Mode && PBOnline.isMatchActionInProgress) {
        console.log('[人机2v1] startOpponentPlayDelay 跳过（远程匹配操作进行中）');
        return;
      }
      // ★ 四人模式：AI出牌后直接推进到下一个子玩家
      if (GameState.fourPlayerActive) {
        const timer = setTimeout(() => {
          if (GameState.isGameInterrupted) return;
          if (GameState.gamePhase !== 'playing') return;
          fourPlayerAdvanceTurn();
        }, 300);
        if (typeof addTimer === 'function') addTimer(timer);
        return;
      }
      const timer = setTimeout(() => {
        if (GameState.isGameInterrupted) return;
        if (GameState.gamePhase !== 'playing') return;

        if (GameState.playerStoppedPlaying) {
          // 玩家已终止 → AI 继续出牌（连续出牌模式）
          startOpponentContinuousPlay();
        } else {
          // 玩家未终止 → 切换回玩家回合
          switchTurnImmediately();
        }
      }, AIConfig.strategy.playDelay);
      addTimer(timer);
    }
    

    // ----------------------------------------------------------------------------
    // 【玩家手牌点击处理】
    // ============================================================================
    // 【JS-9/10】出牌管理系统
    // ============================================================================
    // 统一管理牌堆、手牌、明牌、暗牌的出牌逻辑
    // 规则:
    //   手牌/牌堆: 只能放入路牌区最左边空位，点击即打出
    //   明牌:      可选择放入空位或叠加到已有牌的路后
    //   暗牌:      只能叠加到已有牌的路后(叠牌区)
    
    // ----------------------------------------------------------------------------
    // 【出牌状态】
    // ----------------------------------------------------------------------------
    // playState: 出牌状态对象，管理当前正在进行的出牌操作
    //   isPlaying:      是否正在出牌
    //   cardType:       卡牌类型('hand'/'deck'/'revealed'/'dark')
    //   sourceIndex:    来源位置索引
    //   card:           要打出的卡牌
    //   availableSlots: 可用放置位置数组
    const playState = {
      isPlaying: false,
      cardType: null,
      sourceIndex: null,
      card: null,
      availableSlots: []
    };
    
    // ----------------------------------------------------------------------------
    // 【计算可用放置位置】
    // ----------------------------------------------------------------------------
    // calculateAvailableSlots: 根据卡牌类型计算可用的放置位置
    // 参数:
    //   cardType: 'hand'/'deck' -> 只能放入空位
    //             'revealed'     -> 可放入空位或叠牌区(已有场牌的路)
    //             'dark'         -> 只能放入叠牌区(已有场牌的路)
    // 返回: 可用位置数组 [{index, type}, ...]
    //       type: 'field'(场牌空位) / 'stack'(叠牌区)
    function calculateAvailableSlots(cardType) {
      const slots = [];
      
      if (cardType === 'hand' || cardType === 'deck') {
        const emptyFieldIndex = GameState.playerField.findIndex(c => c === null);
        if (emptyFieldIndex !== -1) {
          slots.push({index: emptyFieldIndex, type: 'field'});
        }
      } else if (cardType === 'revealed') {
        const emptyFieldIndex = GameState.playerField.findIndex(c => c === null);
        if (emptyFieldIndex !== -1) {
          slots.push({index: emptyFieldIndex, type: 'field'});
        }
        
        for (let i = 0; i < 5; i++) {
          if (GameState.playerField[i] !== null && GameState.playerStack[i].length < 8) {
            slots.push({index: i, type: 'stack'});
          }
        }
      } else if (cardType === 'dark') {
        for (let i = 0; i < 5; i++) {
          if (GameState.playerField[i] !== null && GameState.playerStack[i].length < 8) {
            slots.push({index: i, type: 'stack'});
          }
        }
      }
      
      return slots;
    }
    
    // ----------------------------------------------------------------------------
    // 【显示放置高亮】
    // ----------------------------------------------------------------------------
    // showPlacementHighlights: 高亮显示可用的放置位置
    // 参数: availableSlots - 可用位置数组
    function showPlacementHighlights(availableSlots) {
      clearPlacementHighlights();

      availableSlots.forEach(slotInfo => {
        const slot = document.querySelector(`.player-road-slot[data-road-slot="${slotInfo.index}"]`);

        if (slot) {
          slot.classList.add('slot-highlight');
          slot.style.borderColor = '#FBBF24';
          slot.style.borderWidth = '2px';
          slot.style.borderStyle = 'solid';
          // ★ 卡通风格（2026-10-04）：注入中线展开填充层（.ct-slot-fill，插为首节点垫在卡牌下，
          //   transform scaleY 从路线中线向两边生长至满格+惯性回稳；CSS 背景动画被路槽
          //   background !important 简写压制，故必须用覆盖层实现）
          if (selectedCardFaceStyle === 'cartoon') {
            const fill = document.createElement('div');
            fill.className = 'ct-slot-fill';
            slot.insertBefore(fill, slot.firstChild);
          }
        }
      });
    }
    
    // ----------------------------------------------------------------------------
    // 【清除放置高亮】
    // ----------------------------------------------------------------------------
    // clearPlacementHighlights: 清除所有放置位置的高亮效果
    function clearPlacementHighlights() {
      const allSlots = document.querySelectorAll('.player-road-slot');
      allSlots.forEach(slot => {
        slot.classList.remove('slot-highlight');
        slot.style.borderColor = '';
        slot.style.borderWidth = '';
        slot.style.borderStyle = '';
        // ★ 卡通风格：移除中线展开填充层
        slot.querySelectorAll('.ct-slot-fill').forEach(fill => fill.remove());
      });
    }
    
    // ----------------------------------------------------------------------------
    // 【取消放置】
    // ----------------------------------------------------------------------------
    // cancelPlacement: 取消当前的出牌放置操作
    function cancelPlacement() {
      playState.isPlaying = false;
      playState.cardType = null;
      playState.sourceIndex = null;
      playState.card = null;
      playState.availableSlots = [];

      clearPlacementHighlights();
      clearNeutralAuras();
      hidePlayableCardsHint();
      const roadHole = document.getElementById('fc-tut-road-hole');
      if (roadHole) roadHole.remove();
      
      GameState.cardPlayedThisTurn = false;
      
      updateGameStatus(__t('st_cancel_place'), 'st_cancel_place');
      setTimeout(() => {
        if (GameState.currentTurn === 'player' && GameState.gamePhase === 'playing') {
          updateGameStatus(__t('st_my_turn'), 'st_my_turn');
        }
      }, 2000);
      
      document.removeEventListener('click', handleGlobalClickToCancelPlacement, true);
    }
    
    // ----------------------------------------------------------------------------
    // 【全局点击取消放置】
    // ----------------------------------------------------------------------------
    // handleGlobalClickToCancelPlacement: 点击非目标区域时取消放置
    function handleGlobalClickToCancelPlacement(e) {
      if (e.target.closest('.player-road-slot')) {
        return;
      }
      
      cancelPlacement();
    }
    
    // ----------------------------------------------------------------------------
    // 【放置卡牌到指定位置】
    // ----------------------------------------------------------------------------
    // placeCard: 将选中的卡牌放置到指定位置
    // 参数:
    //   targetIndex: 目标路索引(0-4)
    function placeCard(targetIndex) {
      if (!playState.isPlaying || !playState.card) return;

      const { cardType, sourceIndex, card } = playState;

      playState.isPlaying = false;
      playState.cardType = null;
      playState.sourceIndex = null;
      playState.card = null;
      playState.availableSlots = [];

      clearPlacementHighlights();
      document.removeEventListener('click', handleGlobalClickToCancelPlacement, true);

      GameState.cardPlayedThisTurn = true;

      const decision = {
        cardIndex: sourceIndex,
        sourceType: cardType,
        roadIndex: targetIndex
      };

      // 联机模式：发送出牌信息给对方（包含实际卡牌数据含ID，确保对方客户端使用相同的卡牌ID用于匹配操作同步）
      // ★ 人机2v1模式：跳过联机出牌同步，由sendPracticePlayerMove处理
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && !PBOnline.isPractice2v2Mode) {
        // ★ 2026-9-17 FIX（叫牌瞬间对方看到牌面）：暗牌/牌堆来源且叫牌开启时，该牌即将进入
        //   叫牌流程——随出牌消息携带 willCallCard 标记，对方客户端落地瞬间即按背面渲染 +
        //   置叫牌待决态，消除"出牌→call_card_pending 到达"窗口内的牌面泄露
        var _willCallCard = (cardType === 'dark' || cardType === 'deck')
          && GameState.callCardEnabled && !GameState.pendingCallCard;
        console.log('[联机调试] placeCard → 发 sendPlayerMove, sourceType=', cardType,
          'roadIndex=', targetIndex, 'willCallCard=', _willCallCard);
        PBOnline.sendPlayerMove({
          cardIndex: sourceIndex,
          sourceType: cardType,
          roadIndex: targetIndex,
          willCallCard: _willCallCard,
          cardData: { id: card.id, value: card.value, display: card.display, suit: card.suit }
        });
      }

      // ★ 人机2v1模式：同步玩家出牌给队友
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        PBOnline.sendPracticePlayerMove({
          decision: {
            cardIndex: sourceIndex,
            sourceType: cardType,
            roadIndex: targetIndex
          },
          subTurn: GameState.fourPlayerSubTurn,
          cardData: { id: card.id, value: card.value, display: card.display, suit: card.suit }
        });
        console.log('[2v2同步] 已发送玩家出牌, subTurn:', GameState.fourPlayerSubTurn);
      }

      CardPlayExecutor.executeCardPlay('player', decision, {
        onAnimationEnd: function () {
          updatePlayerDeck();
          // ★ 2026-9-27 FIX（教程步骤6对方每回合出两张）：此处原保留教程步骤6的旧自定义回合
          //   切换（500ms 后 switchTurn）——自 finalizePlacement 在教程步骤6实战体验放行正式
          //   回合推进起，两路切换叠加 = 一次出牌两次"player→opponent"，对方每回合连出两张。
          //   现删除旧分支：回合推进统一走 executeCardPlay → confirmCardPlacement →
          //   finalizePlacement 正式链路（拼点判定由其内部 5 路重算覆盖，不遗漏）。
          // 教程步骤4：玩家出牌后，对方从牌堆出牌到最左空位
          if (isTutorialMode && currentTutorialStep === 3) {
            tutorialRoundLocked = true;
            setTimeout(() => {
              GameState.currentTurn = 'opponent';
              setTimeout(() => {
                const oppEmpty = GameState.opponentField.findIndex(c => c === null);
                if (oppEmpty !== -1) {
                  CardPlayExecutor.executeCardPlay('opponent', {
                    cardIndex: 0,
                    sourceType: 'deck',
                    roadIndex: oppEmpty
                  }, {
                    skipMatchCheck: true,
                    onAnimationEnd: function() {
                      checkRoadResult(oppEmpty, false);
                      setTimeout(() => {
                        GameState.currentTurn = 'player';
                        GameState.cardPlayedThisTurn = false;
                        tutorialRoundLocked = false;
                        if (GameState.playerField.every(c => c !== null) && GameState.opponentField.every(c => c !== null)) {
                          setTimeout(() => { nextTutorialStep(); }, 1500);
                        }
                      }, 1000);
                    }
                  });
                } else {
                  GameState.currentTurn = 'player';
                  GameState.cardPlayedThisTurn = false;
                  tutorialRoundLocked = false;
                  if (GameState.playerField.every(c => c !== null)) {
                    setTimeout(() => { nextTutorialStep(); }, 1500);
                  }
                }
              }, 1000);
            }, 1000);
          }
        }
      });
    }
    
    // ----------------------------------------------------------------------------
    // 【统一放置完成入口 · finalizePlacement】
    // ----------------------------------------------------------------------------
    // ★ 2v2重新设计：这是唯一的拼点+回合推进入口
    //   所有4条路径（本地出牌无匹配/匹配执行/匹配取消/远程接收）都汇聚到此
    //   内部逻辑：
    //     1. 始终调用 checkRoadResult（双方客户端独立显示拼点）
    //     2. 仅当 playerType==='player' 且非远程出牌时才推进回合
    //        （远程出牌由服务器 turn_sync_2v2 处理回合推进）
    // 参数: playerType - 'player' 或 'opponent'
    //       originalRoadIndex - 打出的那一路（不是匹配后移动到的路）
    function finalizePlacement(playerType, originalRoadIndex, skipSound) {
      // ★ Bug D FIX（2026-09-07）：统一在"放置完成"入口清除本地打出状态标记。
      //   多个直接调用 finalizePlacement('player', …) 的路径（performRoadMatch 执行匹配、
      //   neutralCancelHandler 取消匹配、performNeutralAction 援/围牌）会绕过 confirmCardPlacement，
      //   导致 localCardPlayPending 一直为 true、下方的 checkRoadResult 被 Step7 守卫暂缓而漏结算。
      //   此处统一清除，确保放置完成后能正常结算，且不影响"等待放置后再结算"的语义
      //   （打出状态期间的 checkRoadResult 已被 Step7 的 localCardPlayPending 守卫拦下）。
      if (playerType === 'player' && GameState.localCardPlayPending) {
        GameState.localCardPlayPending = false;
        GameState.localCardPlayRoadIndex = -1;
        console.log('[Bug D FIX] finalizePlacement 清除本地打出状态标记, road=', originalRoadIndex);
      }
      // ★ 拼点判定：对所有5路重算（match操作可能清空打出那一路，
      //   其他路可能被 match 逻辑间接影响，或被 handlePracticeStateSync 覆盖）
      // ★ 2026-9-18 FIX：拼点/渲染异常不得阻断回合推进（崩在这段会永久卡死对局）
      if (typeof checkRoadResult === 'function') {
        try {
          for (let _ri = 0; _ri < 5; _ri++) {
            checkRoadResult(_ri, skipSound);
          }
          // ★ 2026-9-9 修复：checkRoadResult 是"开头先 updateUI 渲染、之后才判定"——
          //   循环里最后一路判定完后没有任何渲染点，其拼点标记（×/✓）永远不会显示，
          //   紧接着 checkWinCondition 就结算了（实证：4 个×+最后一路空盘，"对方五路全胜"却看不到第5路结果）。
          //   循环结束后补一次结果区渲染，保证"放置 → 显示拼点"这一步完整可见。
          if (typeof updateResults === 'function') updateResults();
        } catch (e) {
          console.error('[finalizePlacement] ⚠ 拼点重算异常（已跳过，回合继续推进）:', e);
        }
      }

      // ★ 回放录制：放置完成 + 拼点重算后记录全盘快照（2026-9-11）
      if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
        try { ReplayRecorder.action(playerType, originalRoadIndex); } catch (e) {}
      }

      // ★ 2026-9-25 士气值：每回合结束（放置完成+拼点重算后），双方各自累加当前得分并播放传播动画
      //   try 包裹：士气值异常不得阻断回合推进（卡死防御体系）
      if (typeof propagateMoraleAfterTurn === 'function') {
        try { propagateMoraleAfterTurn(); } catch (e) {
          console.error('[士气值] ⚠ 每回合累加异常（已跳过，回合继续推进）:', e);
        }
      }

      // ★ Bug D 联机修复（2026-9-8）：补触发被推迟的联机结算。
      //   联机下 allStopped / 双方停牌 可能在"打出未放置"时到达，online-client 会置
      //   GameState._pendingOnlineSettlement 并 return；此处是唯一的放置完成入口，
      //   此时 localCardPlayPending 已清、拼点已重算，才允许真正结算。
      if (GameState._pendingOnlineSettlement) {
        GameState._pendingOnlineSettlement = false;
        if (GameState.gamePhase !== 'ended' && typeof checkWinCondition === 'function') {
          console.log('[Bug D FIX] 放置完成，补触发被推迟的联机结算');
          checkWinCondition();
        }
      }

      const gameEnded = GameState.gamePhase === 'ended';
      const isRemotePlay = (typeof GameState !== 'undefined' && GameState.remotePlayInProgress === true);

      // ★ 人机2v1模式：队员端不推进回合、不发状态同步——全部等队长端的 practice_state_sync
      // ★ 2026-6-1 FIX：仅限真实组队（hasTeammate=true）。单机人机2v1不是队员端
      var _hasRealTeammate = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      var _isPracticeTeammate = (_hasRealTeammate && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader);

      // 2. 回合推进：本地执行的出牌（不管 playerType 是 'player' 还是 'opponent'）都推进
      //    - 人类玩家出牌：playerType='player'
      //    - AI 出牌（队长端本地执行）：playerType='opponent'
      //    - 远程出牌：isRemotePlay=true 跳过
      //    - 队员端：_isPracticeTeammate=true 跳过（等队长 sync）
      // ★ 2026-9-27 FIX（教程步骤6实战体验无法出牌）：shouldAdvance 原一刀切排除教程模式——
      //   步骤1-5 的回合切换由教程自定义链管理（正确），但步骤6"实战体验"（重新开始后）用正式
      //   opponentPlayCard + 自由对局，finalizePlacement 不推进回合 → AI 出完牌回合永远停在
      //   'opponent' → 玩家手牌点击被 currentTurn!=='player' 拦截（点击无反应）。
      //   现放行：教程步骤6实战体验阶段（currentTutorialStep=5 且 interactive）走正式回合推进。
      const _tutFreePlay = (isTutorialMode && currentTutorialStep === 5 && tutorialPhase === 'interactive');
      const shouldAdvance = (!isRemotePlay && !gameEnded && (!isTutorialMode || _tutFreePlay) && !_isPracticeTeammate);

      console.log('%c[FINALIZE] playerType=' + playerType + ' shouldAdvance=' + shouldAdvance +
        ' isRemote=' + isRemotePlay + ' gameEnded=' + gameEnded + ' isTutorial=' + isTutorialMode +
        ' _isPracticeTeammate=' + _isPracticeTeammate + ' _hasRealTeammate=' + _hasRealTeammate +
        ' idx=' + GameState.fourPlayerTurnIndex + ' sub=' + GameState.fourPlayerSubTurn +
        ' localMatchInProgress=' + GameState.localMatchInProgress +
        ' _switchTurnPending=' + GameState._switchTurnPending,
        'color:#000;background:#ff0;font-weight:bold');

      if (shouldAdvance) {
        console.log('[联机调试] finalizePlacement shouldAdvance=true, playerType=', playerType,
          'isOnline2v2Mode=', PBOnline?.isOnline2v2Mode, 'isOnline=', PBOnline?.isOnline,
          'isPractice2v2Mode=', PBOnline?.isPractice2v2Mode, 'isRemotePlay=', isRemotePlay,
          '_isPracticeTeammate=', _isPracticeTeammate);
        if (typeof PBOnline !== 'undefined' && PBOnline.isOnline2v2Mode) {
          if (typeof PBOnline.sendTurnComplete === 'function') {
            PBOnline.sendTurnComplete({
              subTurn: GameState.fourPlayerSubTurn,
              turnIndex: GameState.fourPlayerTurnIndex,
              roadIndex: originalRoadIndex
            });
          }
        } else if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && !PBOnline.isPractice2v2Mode) {
          console.log('[联机调试] → 联机1v1/2v2 发 sendTurnComplete, roadIndex=', originalRoadIndex);
          if (typeof PBOnline.sendTurnComplete === 'function') {
            PBOnline.sendTurnComplete({ roadIndex: originalRoadIndex });
          }
        } else {
          // 1v1人机 / 人机2v1(队长端)：本地推进
          // ★ 2026-6-1 FIX: AI 出牌（playerType==='opponent'）动画已播完，直接切换
          safeSwitchTurn(playerType === 'opponent' ? 0 : 1500);
        }
      } else {
        console.log('[联机调试] finalizePlacement shouldAdvance=false → 不推进回合, playerType=', playerType,
          'isRemotePlay=', isRemotePlay, 'gameEnded=', gameEnded, 'isTutorial=', isTutorialMode,
          '_isPracticeTeammate=', _isPracticeTeammate);
      }

      // 3. 人机2v1模式：**两端都发 practice_state_sync**
      //   队员端发（带 _isTeammateFinalize=true）：出牌完成后通知队长"我的出牌OK了，你可以推进回合"
      //   队长端发（不带 _isTeammateFinalize）：推进回合后的权威状态
      //   ★ 竞态防御：handlePracticeStateSync 已加 turnIndex 新鲜度校验，
      //     过期 sync（turnIndex 比本地小）会被丢弃，不会覆盖正确状态
      //   ★ 人机2v1模式（hasTeammate=false）不发 sync
      var _hasRealTeammate = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      if (_hasRealTeammate && typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (typeof collectPracticeState === 'function') {
          var _sync = collectPracticeState();
          _sync._isTeammateFinalize = !PBOnline.isPracticeLeader; // 队员端标 true，队长端标 false
          PBOnline.sendPracticeStateSync(_sync);
        }
      }

      // 4. 清除远程出牌标记
      if (isRemotePlay) {
        GameState.remotePlayInProgress = false;
      }
    }

    // 【确认卡牌放置】
    // ----------------------------------------------------------------------------
    // confirmCardPlacement: 确认卡牌放置并进行拼点判定
    // 参数: skipSound - 若为 true，则本次拼点跳过 winSound/loseSound（例如叫牌成功时，已有金色闪光音效）
    function confirmCardPlacement(playerType, roadIndex, card, skipSound = false) {
      // 清除可出牌提示光环（出牌后不再需要提示）
      hidePlayableCardsHint();

      // ★ 2026-9-1 FIX: match-glow/neutral-aura 检查只对玩家（playerType==='player'）生效
      //   AI（playerType==='opponent'）已经自己执行完了 match，不应该再等点击光环
      //   否则 AI 出牌后如果页面上有残留光环，confirmCardPlacement 会 return 不推进回合 → AI 无限出牌
      if (playerType !== 'opponent') {
        // 检查是否有对路匹配机会需要处理
        const hasRoadMatches = document.querySelectorAll('.match-glow').length > 0;
        // 检查是否有中立区匹配机会需要处理
        const hasNeutralMatches = document.querySelectorAll('.neutral-aura').length > 0;

        // 两种匹配可以同时存在，统一提示玩家选择
        if (hasRoadMatches || hasNeutralMatches) {
          if (hasRoadMatches && hasNeutralMatches) {
            updateGameStatus(__t('st_click_match_or_cancel'), 'st_click_match_or_cancel');
          } else if (hasRoadMatches) {
            updateGameStatus(__t('st_click_drag_clash'), 'st_click_drag_clash');
          } else {
            updateGameStatus(__t('st_click_support_encircle'), 'st_click_support_encircle');
          }
          return; // 不进行拼点判定和回合切换，等待玩家操作
        }
      }

      // ★ 清除打出状态标记：即将确认放置
      if (playerType === 'player' && GameState.localCardPlayPending) {
        GameState.localCardPlayPending = false;
        GameState.localCardPlayRoadIndex = -1;
        console.log('[打出状态] 确认放置，清除本地打出状态标记, road=', roadIndex);
      }

      // 1v1/2v2联机模式：发送match_skip通知对方没有匹配操作（必须在finalizePlacement前发送）
      const isRemotePlay = (typeof GameState !== 'undefined' && GameState.remotePlayInProgress === true);
      if (playerType === 'player' && !isRemotePlay && typeof PBOnline !== 'undefined' && PBOnline.isOnline
          && !PBOnline.isPractice2v2Mode) {
        console.log('[联机调试] confirmCardPlacement → 发 sendMatchSkip, roadIndex=', roadIndex);
        PBOnline.sendMatchSkip({ roadIndex: roadIndex });
      }

      // ★ 统一入口：所有拼点+回合推进都通过 finalizePlacement
      console.log('[联机调试] confirmCardPlacement → 调 finalizePlacement, playerType=', playerType,
        'roadIndex=', roadIndex, 'isRemotePlay=', isRemotePlay);
      finalizePlacement(playerType, roadIndex);
    }
    
    // ----------------------------------------------------------------------------
    // 【拼点判定】
    // ----------------------------------------------------------------------------
    // checkRoadResult: 检查某一路的拼点结果
    // 参数: roadIndex - 路数索引(0-4)
    //       skipSound - 是否跳过拼点音效（援牌/围牌时传 true）
    // 返回: true=游戏结束, false=游戏继续
    function checkRoadResult(roadIndex, skipSound) {
      if (typeof skipSound === 'undefined') skipSound = false;

      // ★ 路索引校验：防止无参或越界调用
      if (typeof roadIndex !== 'number' || roadIndex < 0 || roadIndex > 4) {
        console.warn('[拼点] 无效的路索引:', roadIndex, '调用栈:', new Error().stack);
        return false;
      }

      // ============================================================================
      // 【拼点系统 · 重新设计】核心拼点逻辑
      // 规则：每路比较双方的最大牌点（场牌和叠牌中的最大值）
      //       点数大的一方赢得该路，点数相等时为平局
      //       每次放置卡牌后自动进行拼点判定
      //
      // 设计原则：本函数是纯计算+写结果，不含任何守卫/拦截逻辑
      //           调用方负责确保时机正确（confirmCardPlacement 确认放置后调用）
      // ============================================================================

      // Step 1: 计算双方最大牌点
      var playerMax = getMaxValue('player', roadIndex);
      var opponentMax = getMaxValue('opponent', roadIndex);

      // Step 2: 确定拼点结果
      var result;
      if (playerMax === 0 && opponentMax === 0) {
        result = 'none';
      } else if (playerMax > opponentMax) {
        result = 'player';
      } else if (opponentMax > playerMax) {
        result = 'opponent';
      } else {
        result = 'draw';
      }

      // Step 3: 写入结果（仅在结果改变时播放音效/更新状态，避免重复触发）
      // ★ 2v2修复：由于 turn_sync 会在同回合内多次触发拼点（不同玩家在同一路出牌），
      //   需要对比前后结果，仅在结果实际改变时才播放音效和更新状态消息
      var _prevPlayerWin = GameState.playerWins[roadIndex];
      var _prevOpponentWin = GameState.opponentWins[roadIndex];
      var _resultChanged = true;
      
      switch (result) {
        case 'player':
          GameState.playerWins[roadIndex] = true;
          GameState.opponentWins[roadIndex] = false;
          _resultChanged = !_prevPlayerWin;
          if (!skipSound && _resultChanged) playSound('winSound');
          if (_resultChanged) { var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_lane_win').replace('{n}', roadIndex+1), 'st_lane_win'); }
          break;
        case 'opponent':
          GameState.playerWins[roadIndex] = false;
          GameState.opponentWins[roadIndex] = true;
          _resultChanged = !_prevOpponentWin;
          if (!skipSound && _resultChanged) playSound('loseSound');
          if (_resultChanged) { var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_lane_lose').replace('{n}', roadIndex+1), 'st_lane_lose'); }
          break;
        case 'draw':
          GameState.playerWins[roadIndex] = false;
          GameState.opponentWins[roadIndex] = false;
          _resultChanged = _prevPlayerWin || _prevOpponentWin;
          if (_resultChanged) { var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_lane_draw').replace('{n}', roadIndex+1), 'st_lane_draw'); }
          break;
        default: // 'none'
          GameState.playerWins[roadIndex] = false;
          GameState.opponentWins[roadIndex] = false;
          _resultChanged = _prevPlayerWin || _prevOpponentWin;
          break;
      }

      // Step 4: UI 渲染
      updateUI();


      // Step 5: 教程高亮（保留兼容性）
      if (isFunctionalCardTutorial && (functionalCardTutorialStep === 2 || functionalCardTutorialStep === 3)) {
        // ★ 2026-9-23 FIX：规则1（拼点规则）应在【出牌改变当前拼点结果】时才高亮——
        //   原条件（该路形成拼点结果就亮）导致每出一张牌都高亮（用户实测）。
        //   _resultChanged = 本手前后该路胜负归属发生变化（上面的 switch 已算好）
        if (_resultChanged) {
          fcStep2HighlightRule(1);
        }
      }

      // Step 6: 联机模式服务器权威验证（异步，不阻塞本地）
      if (typeof PBOnline !== 'undefined' && PBOnline.requestVerifyRoadResult) {
        var localResult;
        if (result === 'player') localResult = 'player';
        else if (result === 'opponent') localResult = 'opponent';
        else if (result === 'draw') localResult = 'draw';

        PBOnline.requestVerifyRoadResult(roadIndex, function(serverResult) {
          if (!serverResult) return;
          var serverWinner = serverResult.result;
          if (serverWinner !== null && serverWinner !== undefined) {
            // ★ 保护逻辑：当服务器权威数据无效时（服务器 max 值为 0），不信任服务器结果
            // 因为服务器的 roadData 可能未被填充（客户端未上报数据）
            var _serverBlueMax = serverResult.blueMax || 0;
            var _serverRedMax = serverResult.redMax || 0;
            var _localPlayerMax = getMaxValue('player', roadIndex);
            var _localOpponentMax = getMaxValue('opponent', roadIndex);
            
            // 如果服务器双方 max 都是 0，但本地有牌，说明服务器数据无效
            if (_serverBlueMax === 0 && _serverRedMax === 0 && (_localPlayerMax > 0 || _localOpponentMax > 0)) {
              console.warn('[权威拼点] 服务器数据无效(双方max=0)，保留本地计算结果, road=', roadIndex,
                'localPlayerMax=', _localPlayerMax, 'localOpponentMax=', _localOpponentMax);
              return; // 不覆盖本地结果
            }
            
            // ★ 视角映射：根据服务器返回的 is2v2 标志正确映射到当前客户端视角
            var serverIsPlayerWin, serverIsOpponentWin;
            if (serverWinner === 'draw') {
              serverIsPlayerWin = false;
              serverIsOpponentWin = false;
            } else if (serverResult.is2v2) {
              // 2v2：服务器返回 blue(座位0,2) 或 red(座位1,3)
              // 需要根据当前客户端的队伍归属映射到"我方/对方"视角
              // 注意：PBOnline.playerIdx 是 subTurn 值（0,1,3,2），映射到队伍：
              //   subTurn 0→蓝方, 1→红方, 2→红方, 3→蓝方
              var _mySeatIdx = (typeof PBOnline !== 'undefined' && typeof PBOnline.playerIdx === 'number') ? PBOnline.playerIdx : 0;
              var _myTeamIsBlue = (_mySeatIdx === 0 || _mySeatIdx === 3);
              serverIsPlayerWin = _myTeamIsBlue ? (serverWinner === 'blue') : (serverWinner === 'red');
              serverIsOpponentWin = _myTeamIsBlue ? (serverWinner === 'red') : (serverWinner === 'blue');
              console.log('[权威拼点] 2v2映射: mySeatIdx=', _mySeatIdx, 'myTeamIsBlue=', _myTeamIsBlue,
                'serverWinner=', serverWinner, '→ playerWin=', serverIsPlayerWin, 'opponentWin=', serverIsOpponentWin);
            } else {
              // 1v1：服务器返回座位号(0/1)，需要映射到当前客户端视角
              var mySeatIdx = (typeof PBOnline !== 'undefined' && typeof PBOnline.playerIdx === 'number') ? PBOnline.playerIdx : 0;
              serverIsPlayerWin = (serverWinner === mySeatIdx);
              serverIsOpponentWin = (serverWinner !== mySeatIdx);
            }

            var localIsPlayerWin = GameState.playerWins[roadIndex];
            var localIsOpponentWin = GameState.opponentWins[roadIndex];

            if (serverIsPlayerWin !== localIsPlayerWin || serverIsOpponentWin !== localIsOpponentWin) {
              console.warn('[权威拼点] 服务器结果与本地不一致! 路:', roadIndex,
                '本地:', { playerWin: localIsPlayerWin, opponentWin: localIsOpponentWin },
                '服务器:', serverResult);

              GameState.playerWins[roadIndex] = serverIsPlayerWin;
              GameState.opponentWins[roadIndex] = serverIsOpponentWin;

              if (!skipSound) {
                playSound(serverIsPlayerWin ? 'winSound' : 'loseSound');
              }
              updateGameStatus(__t('st_lane_n').replace('{n}', roadIndex + 1) + ': ' +
                (serverIsPlayerWin ? '我方' : (serverIsOpponentWin ? '对方' : '平局')) +
                '获胜！（服务器权威判定）');
              updateUI();
            }
          }
        });
      }

      // Step 7: 战术胜利判定（先到5路者胜）
      var playerWinCount = GameState.playerWins.filter(function(w) { return w; }).length;
      var opponentWinCount = GameState.opponentWins.filter(function(w) { return w; }).length;

      if (playerWinCount >= 5 || opponentWinCount >= 5) {
        // ★ Bug D FIX（2026-09-07）：卡牌处于"打出未放置"状态（localCardPlayPending=true）时，
        //   不调用 checkWinCondition 结算，直接返回。后续匹配操作(拖/撞/援/围)仍可能改变胜负，
        //   必须等玩家放置卡牌后（finalizePlacement 清除标记）再由 checkRoadResult→checkWinCondition 正常结算。
        //   此守卫是 checkWinCondition 内守卫（修复③）之外的第二道防线，避免任何路径在打出状态误结算。
        if (GameState.localCardPlayPending) {
          console.warn('[checkRoadResult] 路数已满5但卡牌处于打出未放置状态，暂缓结算，等待放置');
          return false;
        }
        if (typeof checkWinCondition === 'function') checkWinCondition();
        return true;
      }

      return false;
    }
    
    // ----------------------------------------------------------------------------
    // 【安全切换回合】
    // ----------------------------------------------------------------------------
    // safeSwitchTurn: 安全切换回合，防止重复调用
    // 延迟后调用 switchTurn 进行统一的回合切换（检查终止状态等）
    function safeSwitchTurn(delayMs = 1500) {
      // ★ 防重入 guard（原始正确设计）：
      //   - delayMs=0（队员finalize触发的权威推进）：取消之前 pending 的，立即执行
      //   - delayMs>0：正常防重入
      var _dbgPrevIdx = GameState.fourPlayerTurnIndex;
      var _dbgPrevSub = GameState.fourPlayerSubTurn;
      var _dbgStack = (new Error().stack || '').split('\n').slice(2, 4).map(function(s){return s.trim();}).join(' ← ');
      console.log('%c[TURN] safeSwitchTurn delayMs=' + delayMs +
        ' pending=' + GameState._switchTurnPending +
        ' prevIdx=' + _dbgPrevIdx + ' prevSub=' + _dbgPrevSub +
        ' | ' + _dbgStack,
        'color:#fff;background:#22c;font-weight:bold');
      if (typeof GameState !== 'undefined' && GameState._switchTurnPending === true) {
        if (delayMs === 0) {
          // 立即执行：先清 pending，取消旧 timer，直接调
          GameState._switchTurnPending = false;
          if (GameState._switchTurnTimer) { clearTimeout(GameState._switchTurnTimer); GameState._switchTurnTimer = null; }
        } else {
          console.log('【围牌调试·safeSwitchTurn】 ⚠ 被 guard 拦截，return');
          return;
        }
      }
      GameState._switchTurnPending = true;
      GameState._switchTurnDelay = delayMs;
      // 联机模式/人机2v1模式：减少延迟，同步由 turn_complete / practice_turn_advance 消息保证
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        delayMs = Math.min(delayMs, 500);
      }
      const timer = setTimeout(() => {
        GameState._switchTurnPending = false;
        GameState._switchTurnTimer = null;
        switchTurn();
      }, delayMs);
      GameState._switchTurnTimer = timer;
      addTimer(timer);
    }

    // ----------------------------------------------------------------------------
    // 【路牌区点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerRoadClick: 玩家点击路牌区的处理逻辑
    // 用于选择放置位置
    function handlePlayerRoadClick(slotInfo) {
      if (!playState.isPlaying) return;
      
      const isAvailable = playState.availableSlots.some(slot => 
        slot.index === slotInfo.index
      );
      
      if (isAvailable) {
        placeCard(slotInfo.index);
      }
    }
    
    // ----------------------------------------------------------------------------
    // 【手牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerHandClick: 玩家点击手牌区卡牌的处理逻辑
    // 规则: 手牌只能放入路牌区最左边空位，点击即打出
        // ----------------------------------------------------------------------------
    // 【手牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerHandClick: 规则: 手牌只能放入路牌区最左边空位，点击即打出
    // ★ 2026-9-9: 判断"对方/AI 出牌或匹配动画是否仍在进行"，进行中则禁止玩家出牌。
    //   带 20s 残留兜底：AI 一整套动画（光环1.5s + 移动动画）最长约 8s，
    //   若标志因异常路径未清除而卡住超过 20s，强制放行并清理，避免玩家永远无法出牌。
    function _isOpponentAnimLockingInput() {
      var gs = (typeof GameState !== 'undefined') ? GameState : null;
      if (!gs) return false;
      var locked = (gs._opponentPlayCardExecuting === true || gs.localMatchInProgress === true);
      if (!locked) { gs._oppAnimLockSince = 0; return false; }
      var now = Date.now();
      if (!gs._oppAnimLockSince) { gs._oppAnimLockSince = now; return true; }
      if (now - gs._oppAnimLockSince > 20000) {
        console.warn('[输入锁] ⚠ AI动画锁残留超过20s，强制解锁（防玩家无法出牌）',
          { oppExec: gs._opponentPlayCardExecuting, matchInProgress: gs.localMatchInProgress });
        gs._opponentPlayCardExecuting = false;
        gs.localMatchInProgress = false;
        gs._oppAnimLockSince = 0;
        return false;
      }
      return true;
    }

    function handlePlayerHandClick(index, e) {
      if (isTutorialMode) {
        const step = TutorialSteps[currentTutorialStep];
        if (step.interactive && step.validate && tutorialPhase === 'interactive') {
          handleTutorialCardClick(index, 'hand', e);
          return;
        }
      }
      
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      // ★ 2026-9-9: AI/对方出牌或匹配动画执行期间，回合尚未交还，禁止玩家出牌
      //   （此前 turn_sync 可能在 AI 匹配动画期间提前切回合，导致动画没播完玩家就能出牌）
      if (_isOpponentAnimLockingInput()) return;
      if (GameState.playerStoppedPlaying || GameState.cardPlayedThisTurn) return;
      if (GameState.isDealingCards) return;
      if (playState.isPlaying) return;
      // ★ 人机2v1模式：非自己回合不能点击手牌
      if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) return;

      // ★ 四人模式：检查点击的手牌是否属于当前子玩家
      if (GameState.fourPlayerActive) {
        var range = getCurrentSubPlayerHandRange();
        if (index < range.start || index >= range.end) return;
        // ★ 人机2v1模式：额外检查是否属于本地玩家的座位
        if (!isLocalPlayerCard2v2('hand', index)) return;
      }

      const card = GameState.playerHand[index];
      if (!card) return;

      const availableSlots = calculateAvailableSlots('hand');
      if (availableSlots.length === 0) {
        updateGameStatus(__t('st_field_full'), 'st_field_full');
        return;
      }

      playState.isPlaying = true;
      playState.cardType = 'hand';
      playState.sourceIndex = index;
      playState.card = card;
      playState.availableSlots = availableSlots;

      if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) {
        fcTutAddRoadHighlight();
      }

      if (availableSlots.length === 1) {
        placeCard(availableSlots[0].index);
      } else {
        showPlacementHighlights(availableSlots);
        document.addEventListener('click', handleGlobalClickToCancelPlacement, true);
      }
    }


    // ----------------------------------------------------------------------------
    // 【中立区支援/夹击检查】
    // ----------------------------------------------------------------------------
    // checkNeutralAdjacentCards：按规则分别计算每格的 canSupport/canSurround
    //
    // 规则要点（中文翻译版）：
    //  援牌：将打出的相邻/相同牌点移入中立区
    //    条件1（相邻）：打出的牌点与我方中立牌点相邻 + 那一路对方没有其他「与中立牌同点」的牌
    //    条件2（相同）：打出的牌点与我方中立牌点相同 + 那一路对方没有其他「不同点」的牌
    //  围牌：将对方中立牌转移至打出的那一路
    //    条件1（相邻）：打出的牌点与对方中立牌点相邻 + 那一路我方没有其他「与中立牌同点」的牌
    //    条件2（相同）：打出的牌点与对方中立牌点相同 + 那一路我方没有其他「不同点」的牌
    function checkNeutralAdjacentCards(card, fieldIndex) {
      // 匹配操作教程交互步骤3：禁用援牌和围牌
      // 交互步骤5：开启援牌，禁用围牌（围牌在下个教程中介绍）
      if (isMatchTutorial && matchTutorialStep === 4) {
        return;
      }
      const isSupportOnlyTutorial = isMatchTutorial && matchTutorialStep === 7;
      // 交互步骤6：开启所有匹配功能（援牌+围牌），不再禁用任何功能
      const isSurroundOnlyTutorial = false;

      const opportunities = [];
      const rule2MatchedSlots = [];

      // ====== 规则2（同点匹配，优先）：双方中立区都有与打出牌同点的牌，且该路（双方中立区）无其他不同点数 → 同时显示援牌+围牌 ======
      for (let i = 0; i < 7; i++) {
        const playerCards = GameState.playerNeutralCards[i];
        const opponentCards = GameState.opponentNeutralCards[i];

        if (playerCards.length === 0 || opponentCards.length === 0) continue;

        const playerHasValue = playerCards.some(c => c.value === card.value);
        const opponentHasValue = opponentCards.some(c => c.value === card.value);
        if (!playerHasValue || !opponentHasValue) continue;

        const allValues = [...playerCards, ...opponentCards].map(c => c.value);
        const hasDifferentValue = allValues.some(v => v !== card.value);
        if (hasDifferentValue) continue;

        rule2MatchedSlots.push(i);
        opportunities.push({ neutralIndex: i, canSupport: !isSurroundOnlyTutorial, canSurround: !isSupportOnlyTutorial, matchType: 'same' });
      }

      // ====== 规则1（相邻匹配，跳过已规则2命中的格）======
      for (let i = 0; i < 7; i++) {
        if (rule2MatchedSlots.includes(i)) continue;

        const playerCards = GameState.playerNeutralCards[i];
        const opponentCards = GameState.opponentNeutralCards[i];

        // 通用检查：该路（双方中立区）不能有与打出牌相同的点数 & 不能有重复点数
        const allValues = [...playerCards, ...opponentCards].map(c => c.value);
        if (allValues.includes(card.value)) continue;
        const hasDuplicate = allValues.length !== new Set(allValues).size;
        if (hasDuplicate) continue;

        let canSupport = false;
        let canSurround = false;

        // 围牌：对方中立区顶牌与打出牌相邻
        if (opponentCards.length > 0) {
          const oppTop = opponentCards[opponentCards.length - 1];
          if (isCardsAdjacent(card.value, oppTop.value)) {
            canSurround = true;
          }
        }
        // 援牌：我方中立区顶牌与打出牌相邻（围牌教程中禁用）
        if (playerCards.length > 0 && !isSurroundOnlyTutorial) {
          const plrTop = playerCards[playerCards.length - 1];
          if (isCardsAdjacent(card.value, plrTop.value)) {
            canSupport = true;
          }
        }

        // ★ 2026-9-24 FIX（援牌教程）：屏蔽先于入列——被屏蔽后双 false 的空壳机会
        //   不再 push，否则光环不显示但取消监听仍挂起，玩家需多点一次才能放置
        if (isSurroundOnlyTutorial) canSupport = false;
        if (isSupportOnlyTutorial) canSurround = false;
        if (canSupport || canSurround) {
          opportunities.push({ neutralIndex: i, canSupport: canSupport, canSurround: canSurround, matchType: 'adjacent' });
        }
      }

      if (opportunities.length > 0) {
        showNeutralOpportunities(opportunities, card, isSupportOnlyTutorial, isSurroundOnlyTutorial);
      }
      return opportunities;
    }

    // ----------------------------------------------------------------------------
    // 【支援条件检查】
    // ----------------------------------------------------------------------------
    // canSupportCard: 判断是否可以将牌支援到我方中立区（保留用于其他调用点）
    // 支援规则（与 checkNeutralAdjacentCards 一致，仅检查中立区内容）：
    //   1. 我方中立区必须有牌，且未满（< 4 张）
    //   条件2：打出牌与我方中立牌同点 + 对方中立区所有牌都是 card.value（无不同点）+ 对方中立区至少一张
    //   条件1：打出牌与我方中立顶牌相邻 + 双方中立区无同点数牌 & 无重复点数
    function canSupportCard(card, neutralIndex) {
      const playerNeutral = GameState.playerNeutralCards[neutralIndex];
      const opponentNeutral = GameState.opponentNeutralCards[neutralIndex] || [];
      if (playerNeutral.length === 0) return false;
      if (playerNeutral.length >= 4) return false;

      const topCard = playerNeutral[playerNeutral.length - 1];
      const isAdjacent = isCardsAdjacent(card.value, topCard.value);
      const isSame = isCardsSame(card.value, topCard.value);
      if (!isAdjacent && !isSame) return false;

      // 条件2（同点）：双方都有 card.value，且双方中立区所有牌都是 card.value
      if (isSame) {
        const playerHasSame = playerNeutral.some(c => c.value === card.value);
        const opponentHasSame = opponentNeutral.length > 0 && opponentNeutral.some(c => c.value === card.value);
        const allSame = [...playerNeutral, ...opponentNeutral].every(c => c.value === card.value);
        return playerHasSame && opponentHasSame && allSame;
      }

      // 条件1（相邻）：通用检查（无同点数 & 无重复）+ 相邻成立
      if (isAdjacent) {
        const allValues = [...playerNeutral, ...opponentNeutral].map(c => c.value);
        if (allValues.includes(card.value)) return false;
        if (allValues.length !== new Set(allValues).size) return false;
        return true;
      }

      return false;
    }

    // ----------------------------------------------------------------------------
    // 【夹击条件检查】
    // ----------------------------------------------------------------------------
    // canSurroundCard: 判断是否可以执行围牌
    // 围牌规则（与 checkNeutralAdjacentCards 一致，仅检查中立区内容）：
    //   1. 对方中立区有牌
    //   条件2：打出牌与对方中立牌同点 + 双方中立区所有牌都是 card.value
    //   条件1：打出牌与对方中立顶牌相邻 + 双方中立区无同点数牌 & 无重复点数
    function canSurroundCard(card, neutralIndex) {
      const opponentNeutral = GameState.opponentNeutralCards[neutralIndex];
      const playerNeutral = GameState.playerNeutralCards[neutralIndex] || [];
      if (!opponentNeutral || opponentNeutral.length === 0) return false;

      const topCard = opponentNeutral[opponentNeutral.length - 1];
      const isAdjacent = isCardsAdjacent(card.value, topCard.value);
      const isSame = isCardsSame(card.value, topCard.value);
      if (!isAdjacent && !isSame) return false;

      // 条件2（同点）：双方都有 card.value，且双方中立区所有牌都是 card.value
      if (isSame) {
        const opponentHasSame = opponentNeutral.some(c => c.value === card.value);
        const playerHasSame = playerNeutral.length > 0 && playerNeutral.some(c => c.value === card.value);
        const allSame = [...opponentNeutral, ...playerNeutral].every(c => c.value === card.value);
        return opponentHasSame && playerHasSame && allSame;
      }

      // 条件1（相邻）：通用检查（无同点数 & 无重复）+ 相邻成立
      if (isAdjacent) {
        const allValues = [...opponentNeutral, ...playerNeutral].map(c => c.value);
        if (allValues.includes(card.value)) return false;
        if (allValues.length !== new Set(allValues).size) return false;
        return true;
      }

      return false;
    }

    // showNeutralOpportunities: 在中立区显示可操作的卡牌提示
    // 根据 opportunities 数组中记录的可操作路数，显示"援牌/围牌"按钮
    // 点击后调用 performNeutralAction 执行具体操作
    function showNeutralOpportunities(opportunities, card, isSupportOnlyTutorial, isSurroundOnlyTutorial) {
      clearNeutralAuras();
      // ★ 2026-9-19：匹配光环音效（神圣钟鸣）——出牌打到场上、检测到可援牌/围牌时播一次
      if (opportunities && opportunities.length > 0 && typeof playSound === 'function') {
        playSound('glowBellSound');
      }

      // 交互步骤5：根据援牌匹配类型，显示对应限定条件文字
      if (isSupportOnlyTutorial) {
        const hasAdjacent = opportunities.some(opp => opp.canSupport && opp.matchType === 'adjacent');
        const hasSame = opportunities.some(opp => opp.canSupport && opp.matchType === 'same');

        if (hasAdjacent && !matchTutSeenAdjacent) {
          matchTutSeenAdjacent = true;
          const adjDiv = document.getElementById('match-step8-cond-adjacent');
          if (adjDiv) {
            adjDiv.style.display = 'block';
          }
        }
        if (hasSame && !matchTutSeenSame) {
          matchTutSeenSame = true;
          const sameDiv = document.getElementById('match-step8-cond-same');
          if (sameDiv) {
            sameDiv.style.display = 'block';
          }
        }

      }

      // 交互步骤6：根据围牌匹配类型，显示对应限定条件文字
      if (isMatchTutorial && matchTutorialStep === 9) {
        const hasAdjacent = opportunities.some(opp => opp.canSurround && opp.matchType === 'adjacent');
        const hasSame = opportunities.some(opp => opp.canSurround && opp.matchType === 'same');

        if (hasAdjacent && !matchTutSeenSurroundAdjacent) {
          matchTutSeenSurroundAdjacent = true;
          const adjDiv = document.getElementById('match-step10-cond-adjacent');
          if (adjDiv) {
            adjDiv.style.display = 'block';
          }
        }
        if (hasSame && !matchTutSeenSurroundSame) {
          matchTutSeenSurroundSame = true;
          const sameDiv = document.getElementById('match-step10-cond-same');
          if (sameDiv) {
            sameDiv.style.display = 'block';
          }
        }
      }

      // 交互步骤5：在中立区下方弹出援牌操作提示（已取消）

      opportunities.forEach(opp => {
        if (opp.canSupport) {
          showNeutralAura('player', opp.neutralIndex, '援牌', () => {
            performNeutralAction('support', opp.neutralIndex, card, opp.matchType);
          }, opp.matchType);
        }

        // 交互步骤5：禁用围牌
        if (opp.canSurround && !isSupportOnlyTutorial) {
          showNeutralAura('opponent', opp.neutralIndex, '围牌', () => {
            performNeutralAction('surround', opp.neutralIndex, card, opp.matchType);
          }, opp.matchType);
        }
      });

      // 添加全局点击监听器 - 点击非匹配区时取消匹配操作
      setTimeout(() => {
        GameState.neutralCancelHandler = function(e) {
          const isNeutralAura = e.target.closest('.neutral-aura');
          const isRoadMatch = e.target.closest('.match-glow');
          const isActionBtn = e.target.closest('.neutral-action-btn');
          if (!isNeutralAura && !isRoadMatch && !isActionBtn) {
            // 同时清除两类匹配光环
            clearNeutralAuras();
            clearRoadMatchHighlights();
            // 联机模式：通知对方清除光环
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendMatchGlowClear({ glowType: 'all' });
            }
            // 视为放弃匹配操作，卡牌已放置，在放置的路数进行拼点后切换回合
            let roadIndex = -1;
            if (GameState.lastPlayedCard) {
              roadIndex = GameState.lastPlayedCard.index;
            }
            // 1v1联机：发送match_skip
            if (typeof PBOnline !== 'undefined' && PBOnline.isOnline && !(PBOnline.isPractice2v2Mode) && !PBOnline.isOnline2v2Mode) {
              PBOnline.sendMatchSkip({ roadIndex: roadIndex });
            }
            // ★ 统一入口：取消匹配 → 拼点+推进
            finalizePlacement('player', roadIndex);
          }
        };
        document.addEventListener('click', GameState.neutralCancelHandler, true);
      }, 100);

      // 联机模式：通知对方同步显示中立区匹配光环
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        var targetRoadIdx = -1;
        if (GameState.lastPlayedCard) {
          targetRoadIdx = GameState.lastPlayedCard.index;
        }
        // 逐个发送每个匹配机会
        opportunities.forEach(function(opp) {
          PBOnline.sendMatchGlowStart({
            glowType: 'neutral',
            neutralIndex: opp.neutralIndex,
            canSupport: opp.canSupport,
            canSurround: opp.canSurround,
            playedCardId: card.id,
            targetRoadIndex: targetRoadIdx
          });
        });
      }

      // ★ 持久化中立区匹配光环状态（与 activeRoadMatchGlow 平行）
      //   updateNeutralDisplay() 重建中立区 DOM 后，reapplyNeutralAura() 依据此状态重新加亮。
      //   超时 handler 也检查此状态（DOM 元素可能被重渲染清除），确保"打出未放置"状态被正确识别。
      var _targetRoadIdx2 = -1;
      if (GameState.lastPlayedCard) {
        _targetRoadIdx2 = GameState.lastPlayedCard.index;
      }
      GameState.activeNeutralMatchGlow = {
        type: 'neutral',
        sender: true,
        opportunities: opportunities,
        card: card,
        roadIndex: _targetRoadIdx2,
        isSupportOnlyTutorial: isSupportOnlyTutorial,
        isSurroundOnlyTutorial: isSurroundOnlyTutorial
      };
    }

    // showNeutralAura: 在指定中立区格子显示操作按钮(如"援牌"/"围牌")
    // slotIndex 指定第几路，点击按钮触发 onClickCallback
    function showNeutralAura(playerType, slotIndex, buttonText, onClickCallback, matchType) {
      const neutralArea = playerType === 'player' ? GameElements.player.neutralArea : GameElements.opponent.neutralArea;
      const slot = neutralArea?.children[slotIndex];
      if (!slot) return;

      // 使用 CSS 类应用圆润光环效果
      slot.classList.add('neutral-aura');

      // 存储按钮文字用于悬停提示
      slot.neutralActionText = buttonText;

      // 悬停时显示操作提示（样式保持原样，仅位置和文字不同）
      const handleNeutralEnter = function() {
          hideMatchTooltip();
          // 交互步骤5：悬停时高亮面板中对应的限定条件文字
          // ★ 2026-9-23 FIX：仅我方（援牌）光环触发援牌限定高亮——对方围牌光环不误触
          if (isMatchTutorial && matchTutorialStep === 7 && matchType && playerType === 'player') {
            const targetId = matchType === 'same' ? 'match-step8-cond-same' : 'match-step8-cond-adjacent';
            const targetEl = document.getElementById(targetId);
            if (targetEl) {
              targetEl.style.background = 'rgba(16, 185, 129, 0.45)';
              targetEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.7)';
            }
          }
          // 交互步骤6：悬停时高亮面板中对应的限定条件文字
          // ★ 2026-9-23 FIX：仅对方（围牌）光环触发围牌限定高亮——我方援牌光环不误触
          if (isMatchTutorial && matchTutorialStep === 9 && matchType && playerType === 'opponent') {
            const targetId = matchType === 'same' ? 'match-step10-cond-same' : 'match-step10-cond-adjacent';
            const targetEl = document.getElementById(targetId);
            if (targetEl) {
              targetEl.style.background = 'rgba(16, 185, 129, 0.45)';
              targetEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.7)';
            }
          }
          const rect = slot.getBoundingClientRect();
        const tooltip = document.createElement('div');
        tooltip.className = 'match-tooltip';
        tooltip.textContent = buttonText;
        tooltip.style.position = 'fixed';
        tooltip.style.left = `${rect.left + rect.width / 2}px`;
        tooltip.style.transform = 'translateX(-50%)';
        tooltip.style.padding = '6px 14px';
        tooltip.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
        tooltip.style.color = '#FBBF24';
        tooltip.style.borderRadius = '8px';
        tooltip.style.fontSize = '14px';
        tooltip.style.fontWeight = 'bold';
        tooltip.style.whiteSpace = 'nowrap';
        tooltip.style.zIndex = '9999';
        tooltip.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(251, 191, 36, 0.3)';
        tooltip.style.border = '1px solid rgba(251, 191, 36, 0.5)';
        tooltip.style.pointerEvents = 'none';
        tooltip.style.letterSpacing = '1px';

        if (playerType === 'player') {
          // 我方中立区：显示在卡牌下方
          tooltip.style.top = `${rect.bottom + 8}px`;
          tooltip.innerHTML = `${tooltip.textContent}<div style="position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #374151;"></div>`;
        } else {
          // 对方中立区：显示在卡牌上方
          tooltip.style.top = `${rect.top - 36}px`;
          tooltip.innerHTML = `${tooltip.textContent}<div style="position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #374151;"></div>`;
        }

        document.body.appendChild(tooltip);
        // 联机模式：通知对方同步显示悬停效果
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          var targetRoadIdx = -1;
          if (typeof GameState !== 'undefined' && GameState.lastPlayedCard) {
            targetRoadIdx = GameState.lastPlayedCard.index;
          }
          PBOnline.sendMatchHover({
            hoverType: 'neutral',
            isEnter: true,
            neutralIndex: slotIndex,
            canSupport: playerType === 'player',
            canSurround: playerType === 'opponent',
            playedCardId: (typeof GameState !== 'undefined' && GameState.lastPlayedCard) ? GameState.lastPlayedCard.card.id : null,
            targetRoadIndex: targetRoadIdx
          });
        }
      };
      const handleNeutralLeave = function() {
          hideMatchTooltip();
          // 交互步骤5：移除高亮（若援牌已完成则保持常亮）——仅我方（援牌）光环
          if (isMatchTutorial && matchTutorialStep === 7 && matchType && playerType === 'player') {
            const targetId = matchType === 'same' ? 'match-step8-cond-same' : 'match-step8-cond-adjacent';
            const targetEl = document.getElementById(targetId);
            if (targetEl) {
              const isDone = matchType === 'same' ? matchTutSupportSameDone : matchTutSupportAdjacentDone;
              if (isDone) {
                targetEl.style.background = 'rgba(16, 185, 129, 0.35)';
                targetEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.6)';
              } else {
                targetEl.style.background = 'rgba(16, 185, 129, 0.08)';
                targetEl.style.boxShadow = 'none';
              }
            }
          }
          // 交互步骤6：移除高亮（若围牌已完成则保持常亮）——仅对方（围牌）光环
          if (isMatchTutorial && matchTutorialStep === 9 && matchType && playerType === 'opponent') {
            const targetId = matchType === 'same' ? 'match-step10-cond-same' : 'match-step10-cond-adjacent';
            const targetEl = document.getElementById(targetId);
            if (targetEl) {
              const isDone = matchType === 'same' ? matchTutSurroundSameDone : matchTutSurroundAdjacentDone;
              if (isDone) {
                targetEl.style.background = 'rgba(16, 185, 129, 0.35)';
                targetEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.6)';
              } else {
                targetEl.style.background = 'rgba(16, 185, 129, 0.08)';
                targetEl.style.boxShadow = 'none';
              }
            }
          }
        // 联机模式：通知对方同步取消悬停效果
        if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
          var _targetRoadIdx = -1;
          if (typeof GameState !== 'undefined' && GameState.lastPlayedCard) {
            _targetRoadIdx = GameState.lastPlayedCard.index;
          }
          PBOnline.sendMatchHover({
            hoverType: 'neutral',
            isEnter: false,
            neutralIndex: slotIndex,
            canSupport: playerType === 'player',
            canSurround: playerType === 'opponent',
            playedCardId: (typeof GameState !== 'undefined' && GameState.lastPlayedCard) ? GameState.lastPlayedCard.card.id : null,
            targetRoadIndex: _targetRoadIdx
          });
        }
        };
      const handleNeutralClick = function() {
        onClickCallback();
      };

      slot.addEventListener('mouseenter', handleNeutralEnter);
      slot.addEventListener('mouseleave', handleNeutralLeave);
      slot.addEventListener('click', handleNeutralClick);

      // 保存事件监听器引用以便清除
      slot.neutralListeners = {
        enter: handleNeutralEnter,
        leave: handleNeutralLeave,
        click: handleNeutralClick
      };
    }

    // ----------------------------------------------------------------------------
    // 【清除中立区高亮】
    // ----------------------------------------------------------------------------
    // clearNeutralAuras: 清除中立区所有高亮效果和操作按钮
    function clearNeutralAuras() {
      // ★ 联机模式：出牌方(sender=true)的匹配已执行/取消，状态可安全清除。
      //   旁观方(sender=false)的状态由 handleRemoteMatchGlowClear（服务器 match_glow_clear 消息）清除，
      //   提前置空会导致 reapplyNeutralAura 和 _ensureNeutralGlowReapply 跳过 → 光环永久消失。
      var _isOnline = typeof PBOnline !== 'undefined' && PBOnline.isOnline;
      if (!_isOnline) {
        if (typeof GameState !== 'undefined') GameState.activeNeutralMatchGlow = null;
      } else {
        if (typeof GameState !== 'undefined' && GameState.activeNeutralMatchGlow && GameState.activeNeutralMatchGlow.sender) {
          GameState.activeNeutralMatchGlow = null;
        }
      }
      document.querySelectorAll('.neutral-aura, .neutral-aura-hover, .player-neutral-slot, .opponent-neutral-slot').forEach(slot => {
        slot.classList.remove('neutral-aura');
        slot.classList.remove('neutral-aura-hover');
        slot.style.boxShadow = '';
        slot.style.border = '';

        // 移除悬停和点击事件监听器
        if (slot.neutralListeners) {
          slot.removeEventListener('mouseenter', slot.neutralListeners.enter);
          slot.removeEventListener('mouseleave', slot.neutralListeners.leave);
          slot.removeEventListener('click', slot.neutralListeners.click);
          delete slot.neutralListeners;
        }
      });

      // 清理中立区全局点击取消监听器
      if (GameState.neutralCancelHandler) {
        document.removeEventListener('click', GameState.neutralCancelHandler, true);
        GameState.neutralCancelHandler = null;
      }

      // 清理悬停提示 tooltip
      hideMatchTooltip();
    }

    // ============================================================================
    // 【中立区操作 · performNeutralAction】执行援牌或围牌操作
    // ============================================================================
    //
    // 参数:
    //   action       'support' = 援牌  /  'surround' = 围牌
    //   neutralIndex 中立区格子索引 (0-6)
    //   playedCard   本回合刚打出的卡牌（作为操作目标）
    //
    // ▶ 援牌 (support) 规则:
    //    从路牌区移除刚打出的牌 → 移入我方中立区末尾
    //    → 该路进行拼点比较 → 切换回合
    //
    // ▶ 围牌 (surround) 规则:
    //    清空中立区目标格中的所有卡牌（双方牌全部移除）
    //    → 转移到玩家刚打出牌的那一路叠牌区（打出的牌不动）
    //    → 该路拼点比较 → 切换回合
    //
    // 动画: 卡牌移动使用统一的 animateCardMove
    //       援牌使用 support 类型动画；围牌使用 surround 类型
    // 音效: 援牌在动画结束后播放 supportCardSound；围牌在全部卡牌归位后播放 surroundCardSound
    // ============================================================================
    async function performNeutralAction(action, neutralIndex, playedCard, supportMatchType) {
      // ============================================================
      // 【容量前置检查】：已满则抖动+提示，不清除光环，不切换回合
      // 在清除任何状态之前执行，确保光环保留，用户可继续操作其他路
      // ============================================================
      let previewTargetRoadIndex = -1;
      if (GameState.lastPlayedCard) {
        previewTargetRoadIndex = GameState.lastPlayedCard.index;
      }

      // 在 DOM 容器中找到卡牌节点并执行抖动动画
      // 动画期间临时添加 .shaking 类，覆盖父容器 :hover 的 transform: scale(1.05)
      // 避免缩放干扰 Web Animation API 的 translateX 动画渲染
      function shakeCardsInSlot(playerType, slotIdx) {
        const selector = playerType === 'player'
          ? `.player-neutral-slot[data-slot="${slotIdx}"]`
          : `.opponent-neutral-slot[data-slot="${slotIdx}"]`;
        const slot = document.querySelector(selector);
        if (!slot) return;
        const cards = slot.querySelectorAll('.card');
        if (cards.length === 0) return;

        // 临时添加 shaking 类，移除 :hover 的 transform: scale(1.05) 干扰
        slot.classList.add('shaking');

        const animations = [];
        cards.forEach(cardEl => {
          const anim = cardEl.animate(
            [
              { transform: 'translateX(0) rotate(0deg)' },
              { transform: 'translateX(-14px) rotate(-4deg)' },
              { transform: 'translateX(14px) rotate(4deg)' },
              { transform: 'translateX(-9px) rotate(-2deg)' },
              { transform: 'translateX(9px) rotate(2deg)' },
              { transform: 'translateX(0) rotate(0deg)' }
            ],
            { duration: 500, easing: 'ease-in-out' }
          );
          animations.push(anim.finished);
        });

        // 所有卡牌动画完成后移除 shaking 类
        Promise.all(animations).then(() => {
          slot.classList.remove('shaking');
        });
      }

      if (action === 'support') {
        // 援牌：检查我方中立区该路是否已满（4 张上限）
        if (GameState.playerNeutralCards[neutralIndex].length >= 4) {
          shakeCardsInSlot('player', neutralIndex);
          updateGameStatus(__t('st_neutral_slot_full_support'), 'st_neutral_slot_full_support');
          return;  // 不清除光环，不切换回合
        }
      } else if (action === 'surround') {
        // ★ 2026-9-21 FIX（用户反馈）：对方中立区满 4 张时不可围牌——与援牌面对满四张逻辑一致：
        //   抖动对方中立牌 + 弹出提示，不清除光环，不切换回合
        var _surOppCnt = (GameState.opponentNeutralCards[neutralIndex] || []).filter(Boolean).length;
        if (_surOppCnt >= 4) {
          shakeCardsInSlot('opponent', neutralIndex);
          updateGameStatus(__t('st_neutral_slot_full_surround'), 'st_neutral_slot_full_surround');
          return;
        }
        // 围牌：检查目标路叠牌区是否有足够空间（8 张上限）
        const totalCards = GameState.playerNeutralCards[neutralIndex].length
                         + GameState.opponentNeutralCards[neutralIndex].length;
        if (previewTargetRoadIndex !== -1
            && (GameState.playerStack[previewTargetRoadIndex]?.length ?? 0) + totalCards > 8) {
          shakeCardsInSlot('opponent', neutralIndex);
          updateGameStatus(__t('st_neutral_slot_full_encircle'), 'st_neutral_slot_full_encircle');
          return;  // 不清除光环，不切换回合
        }
      }

      // 清除所有高亮和光环
      clearNeutralAuras();
      clearRoadMatchHighlights();

      // ★ 先发消息给队员（在 DOM 定位和播放动画之前，让队员和队长同步启动）
      // 关键：通过 lastPlayedCard.index 找到卡牌所在的路数（不管是在场牌区还是叠牌区）
      let targetRoadIndex = -1;
      if (GameState.lastPlayedCard) {
        targetRoadIndex = GameState.lastPlayedCard.index;
      }

      // 兜底：如果 lastPlayedCard 无效，通过卡牌 ID 查找
      if (targetRoadIndex === -1) {
        const fieldIdx = GameState.playerField.findIndex(c => c && c.id === playedCard.id);
        if (fieldIdx !== -1) {
          targetRoadIndex = fieldIdx;
        } else {
          for (let i = 0; i < 5; i++) {
            if (GameState.playerStack[i].some(c => c.id === playedCard.id)) {
              targetRoadIndex = i;
              break;
            }
          }
        }
      }

      // ★ 统一发送 match 操作给队员（在任何 DOM 定位和动画之前）
      // ★ 回放录制：记录援/围事件（类型/目标路/源中立路），回放时精确还原动画（2026-9-11）
      if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder) {
        try { ReplayRecorder.noteMatch(action, targetRoadIndex, neutralIndex); } catch (e) {}
      }
      if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
        PBOnline.sendMatchGlowClear({ glowType: 'all' });
        PBOnline.sendMatchAction({
          matchType: action,
          neutralIndex: neutralIndex,
          playedCard: { id: playedCard.id, value: playedCard.value, display: playedCard.display, suit: playedCard.suit },
          targetRoadIndex: targetRoadIndex,
          isAI: false
        });
      }

      // ====== 公共的失败处理：清理状态 + 拼点 + 切换回合 ======
      // 玩家已经打出了一张牌到路牌区，援牌/围牌失败时应正常拼点并继续
      function handleFailure(statusText) {
        updateGameStatus(statusText);
        GameState.lastPlayedCard = null;
        updateUI();
        if (targetRoadIndex !== -1) {
          // ★ 统一入口：finalizePlacement
          finalizePlacement('player', targetRoadIndex);
        }
      }

      // 在 DOM 容器中通过卡面文字匹配卡牌节点
      // ★ 2026-9-21 FIX（援牌飞错牌）：原来只按卡面文本匹配——打出叠牌8 援牌时，路内场牌8 与
      //   叠牌8 文本相同，文本匹配永远命中 DOM 顺序第一张（场牌），导致"转移过去的是场牌8"。
      //   改为优先按 data-card-id 精确匹配（与拖牌/撞牌同款模式），文本匹配仅作老数据兜底。
      function findCardElement(container, card) {
        if (!container || !card) return null;
        if (card.id) {
          const byId = container.querySelector(`.card[data-card-id="${card.id}"], .card-small[data-card-id="${card.id}"]`);
          if (byId) return byId;
        }
        const cards = container.querySelectorAll('.card, .card-small');
        for (let i = 0; i < cards.length; i++) {
          const text = cards[i].textContent || '';
          if (text.includes(card.display)) return cards[i];
        }
        return null;
      }

      if (action === 'support') {
        // ====== 援牌：从路牌区移除刚打出的牌，移入我方中立区末尾 ======
        if (targetRoadIndex === -1) {
          handleFailure('找不到卡牌位置，无法援牌');
          return;
        }

        // 检查中立区是否已满
        if (GameState.playerNeutralCards[neutralIndex].length >= 4) {
          handleFailure('中立区此路已满，无法援牌');
          return;
        }

        // 先定位源和目标的 DOM，便于动画
        const playerRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${targetRoadIndex}"]`);
        const sourceElement = findCardElement(playerRoadSlot, playedCard);
        const targetSlot = document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`);

        // ★ 2026-9-21 归属判断：援牌落下后我方中立牌数量多于对方 → 此路归属为我方 → 触发联动动画
        //   ★ 2026-9-21 FIX：原判断"仅反超时触发"导致首次后不再触发；改为"落下后归属我方即触发"（每次援牌都生效）
        var _supMyBefore = GameState.playerNeutralCards[neutralIndex].length;
        var _supOppCnt = (GameState.opponentNeutralCards[neutralIndex] || []).length;
        var _supOwnershipMine = (_supMyBefore + 1 > _supOppCnt);

        // 从路牌区移除刚打出的牌（先找场牌区，找不到再找叠牌区）
        let removedFrom = -1;
        if (GameState.playerField[targetRoadIndex]?.id === playedCard.id) {
          GameState.playerField[targetRoadIndex] = null;
          removedFrom = targetRoadIndex;
        } else {
          const stackIdx = GameState.playerStack[targetRoadIndex].findIndex(c => c.id === playedCard.id);
          if (stackIdx !== -1) {
            GameState.playerStack[targetRoadIndex].splice(stackIdx, 1);
            removedFrom = targetRoadIndex;
          }
        }

        // 加入我方中立区（追加到末尾，不覆盖原有的牌）
        GameState.playerNeutralCards[neutralIndex].push(playedCard);

        // 从手牌/明牌/暗牌区移除
        // ★ 2v2：左右玩家共用数组，改用 null 占位保持索引稳定，避免 filter 压缩破坏对方玩家的牌
        if (GameState.fourPlayerActive) {
          var _phI2 = GameState.playerHand.findIndex(c => c && c.id === playedCard.id);
          if (_phI2 >= 0) GameState.playerHand[_phI2] = null;
          var _prI2 = GameState.playerRevealedCards.findIndex(c => c && c.id === playedCard.id);
          if (_prI2 >= 0) GameState.playerRevealedCards[_prI2] = null;
          var _pdI2 = GameState.playerDarkCards.findIndex(c => c && c.id === playedCard.id);
          if (_pdI2 >= 0) GameState.playerDarkCards[_pdI2] = null;
        } else {
          GameState.playerHand = GameState.playerHand.filter(c => c.id !== playedCard.id);
          GameState.playerRevealedCards = GameState.playerRevealedCards.filter(c => c.id !== playedCard.id);
          GameState.playerDarkCards = GameState.playerDarkCards.filter(c => c.id !== playedCard.id);
        }

        GameState.lastPlayedCard = null;

        // 栏目管理开关控制动画
        const animationEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('support-animation') : true;

        if (animationEnabled && sourceElement && targetSlot) {
          await animateCardMove(sourceElement, targetSlot, 'player', playedCard, 'support', { skipTargetWrite: true });
        }

        // ★ 2026-9-21 归属变化联动动画：援牌落下后此路归属为我方时触发，
        //   以落下的援牌（我方格 DOM 最后一张）为起点，带动两格卡牌（含对方中立牌，归属后同为我方）
        //   依次"缩小-放大-还原"
        //   ★ 2026-9-21 FIX：加入对方中立格的牌（归属后全部算我方）
        if (_supOwnershipMine) {
          setTimeout(function () {
            pbPlayChainPulse([
              document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`),
              document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`)
            ], 'last');
          }, 120);
        }

        const count = GameState.playerNeutralCards[neutralIndex].length;
        var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_support_success').replace('{card}', playedCard.display).replace('{n}', neutralIndex+1).replace('{cnt}', count), 'st_support_success');

        // 交互步骤5：援牌成功后标记完成类型并显示中立牌归属说明
        if (isMatchTutorial && matchTutorialStep === 7) {
          if (supportMatchType === 'adjacent') matchTutSupportAdjacentDone = true;
          if (supportMatchType === 'same') matchTutSupportSameDone = true;
          // 援牌成功后设置对应限定条件文字为常亮
          const condId = supportMatchType === 'same' ? 'match-step8-cond-same' : 'match-step8-cond-adjacent';
          const condEl = document.getElementById(condId);
          if (condEl) {
            condEl.style.background = 'rgba(16, 185, 129, 0.35)';
            condEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.6)';
          }
          if (!matchTutSupportCompleted) {
            matchTutSupportCompleted = true;
            const attributionDiv = document.getElementById('match-step8-attribution');
            if (attributionDiv) {
              attributionDiv.style.display = 'block';
            }
          }
          // 两种援牌都完成后，立即显示完成学习按钮（无需等待游戏结束）
          if (matchTutSupportAdjacentDone && matchTutSupportSameDone) {
            const btns = document.getElementById('match-step8-end-buttons');
            if (btns) {
              btns.innerHTML = `<button id="match-step8-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>`;
              btns.style.display = 'flex';
              btns.style.flexWrap = 'wrap';
              const completeBtn = document.getElementById('match-step8-complete-btn');
              if (completeBtn) {
                completeBtn.addEventListener('click', function(e) {
                  e.stopPropagation();
                  stopCrisisMusic();
                  stopEndGameMusic();
                  showMatchTutorialStep9();
                });
              }
            }
          }
        }
        if (!animationEnabled && typeof playSound === 'function') playSound('supportCardSound');
        addTurnRecord('援牌', `将${playedCard.display}移入中立区第${neutralIndex + 1}路`);

        updateUI();

        const roadIndex = removedFrom !== -1 ? removedFrom : targetRoadIndex;
        // ★ 统一入口：援牌成功后拼点+推进
        finalizePlacement('player', roadIndex, true);

      } else if (action === 'surround') {
        // ====== 围牌：清空中立区该路双方卡牌，转移到玩家打出牌的那一路叠牌区 ======
        if (targetRoadIndex === -1) {
          handleFailure('找不到打出牌的位置，无法围牌');
          return;
        }

        // 获取中立区该路双方所有卡牌数据
        // ★ 2026-9-18 FIX：filter(Boolean)——cell 内 null 占位混入会被 push 进叠牌区，
        //   随后拼点/牌型/渲染链崩溃 → finalizePlacement 推进中断 → 对局卡死
        const opponentCards = (GameState.opponentNeutralCards[neutralIndex] || []).filter(Boolean);
        const playerCards = (GameState.playerNeutralCards[neutralIndex] || []).filter(Boolean);
        const totalCards = opponentCards.length + playerCards.length;

        if (totalCards === 0) {
          handleFailure('中立区该路没有卡牌，无法围牌');
          return;
        }

        // 收集所有要移动的卡牌及 DOM 元素
        // ★ 2026-9-24 FIX（用户反馈：围牌后顺序颠倒）：按"屏幕视觉时序"转移——
        //   对方中立区倒序渲染（数组末尾在屏幕最上方），故对方牌取数组倒序；
        //   我方中立区正序渲染（数组开头在屏幕最上方），故我方牌取数组正序。
        //   转移后叠牌从上到下与围牌前中立区从上到下完全一致（2 在最上方仍是 2 在最上方）
        const itemsToMove = [];
        const opponentNeutralSlot = document.querySelector(`.opponent-neutral-slot[data-slot="${neutralIndex}"]`);
        const playerNeutralSlot = document.querySelector(`.player-neutral-slot[data-slot="${neutralIndex}"]`);
        const targetRoadSlot = document.querySelector(`.player-road-slot[data-road-slot="${targetRoadIndex}"]`);

        for (let _oj = opponentCards.length - 1; _oj >= 0; _oj--) {
          const card = opponentCards[_oj];
          itemsToMove.push({ card, el: findCardElement(opponentNeutralSlot, card), playerType: 'opponent' });
        }
        playerCards.forEach(card => {
          itemsToMove.push({ card, el: findCardElement(playerNeutralSlot, card), playerType: 'player' });
        });

        // 清空中立区数据，并放入目标路牌区叠牌区
        GameState.opponentNeutralCards[neutralIndex] = [];
        GameState.playerNeutralCards[neutralIndex] = [];
        itemsToMove.forEach(item => {
          GameState.playerStack[targetRoadIndex].push(item.card);
        });

        GameState.lastPlayedCard = null;

        // 栏目管理开关控制动画
        const surroundAnimEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled('surround-animation') : true;

        if (surroundAnimEnabled && itemsToMove && itemsToMove.some(i => i.el) && targetRoadSlot) {
          // ====== 围牌动画（参考老版 performSurroundAnimation）======
          // 每张中立牌从各自源位置独立飞向路牌区堆叠位置
          //   - 目标 X：统一为路牌区 left（不对齐中立区原水平位置）
          //   - 目标 Y：按顺序堆叠，targetTop[i] = baseTop + sum_0..i-1(cardHeight + gap)
          //   - 动画 ：Web Animation API (tempCard.animate)
          const validItems = itemsToMove.filter(item => item.el);
          if (validItems.length > 0) {
            // ★ 2026-9-30 重构（对齐援牌 animateCardMove 结构）：克隆挂 game-container 内 + 容器设计坐标
            //   此前挂 body 用视口坐标 → 手机上克隆缩小、内部设计 px 字号撑爆 = "圆圈牌"；
            //   wrapper 补丁又使数字失去 flex 居中（电脑数字偏左）。容器内坐标一次全对。
            const _pfGc = document.querySelector('.game-container');
            const _pfCr = _pfGc ? _pfGc.getBoundingClientRect() : { left: 0, top: 0 };
            let _pfSc = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
            try {
              const _rw = _pfGc ? (_pfGc.offsetWidth || 0) : 0;
              const _vw = _pfGc ? (_pfGc.getBoundingClientRect().width || 0) : 0;
              if (_rw > 0 && _vw > 0 && isFinite(_vw / _rw) && (_vw / _rw) > 0) _pfSc = _vw / _rw;
            } catch (e) {}
            const _pfToDesign = function (r) {
              return { left: (r.left - _pfCr.left) / _pfSc, top: (r.top - _pfCr.top) / _pfSc, width: r.width / _pfSc, height: r.height / _pfSc };
            };
            const endRect = _pfToDesign(targetRoadSlot.getBoundingClientRect());
            const stackGap = 2;
            let baseTop = endRect.top;
            const existingCards = targetRoadSlot.querySelectorAll('.card');
            if (existingCards.length > 0) {
              const lastCardRectD = _pfToDesign(existingCards[existingCards.length - 1].getBoundingClientRect());
              baseTop = lastCardRectD.top + lastCardRectD.height + stackGap;
            }

            const sourceRects = validItems.map(item => _pfToDesign(item.el.getBoundingClientRect()));
            const cardHeights = sourceRects.map(r => r.height);

            // 提前缓存每张卡牌的样式信息（item.el 在动画开始后会被删除，不能之后再访问）
            const cachedStyles = validItems.map(item => {
              const computed = getComputedStyle(item.el);
              return {
                background: item.el.style.background || computed.background,
                border: item.el.style.border || computed.border,
                borderRadius: item.el.style.borderRadius || computed.borderRadius,
                boxShadow: item.el.style.boxShadow || computed.boxShadow,
                color: item.el.style.color || computed.color,
                fontWeight: item.el.style.fontWeight || computed.fontWeight,
                fontSize: item.el.style.fontSize || computed.fontSize,
                innerHTML: item.el.innerHTML
              };
            });

            const _playerSurroundTemps = [];  // ★ 残留兜底收集（对齐 AI 围牌三重兜底，2026-9-30）
            const animations = validItems.map((item, idx) => {
              return new Promise((resolveInner) => {
                const tempCard = document.createElement('div');
                const sourceRect = sourceRects[idx];
                let currentTargetTop = baseTop;
                for (let i = 0; i < idx; i++) {
                  currentTargetTop += cardHeights[i] + stackGap;
                }
                const style = cachedStyles[idx];

                tempCard.style.left = sourceRect.left + 'px';
                tempCard.style.top = sourceRect.top + 'px';
                tempCard.style.width = sourceRect.width + 'px';
                tempCard.style.height = sourceRect.height + 'px';
                tempCard.style.position = 'absolute';
                tempCard.style.zIndex = '50';
                tempCard.style.pointerEvents = 'none';
                tempCard.style.background = style.background;
                tempCard.style.border = style.border;
                tempCard.style.borderRadius = style.borderRadius;
                tempCard.style.boxShadow = style.boxShadow;
                tempCard.style.color = style.color;
                tempCard.style.fontWeight = style.fontWeight;
                tempCard.style.fontSize = style.fontSize;
                tempCard.style.display = 'flex';
                tempCard.style.alignItems = 'center';
                tempCard.style.justifyContent = 'center';
                tempCard.style.overflow = 'hidden';
                tempCard.innerHTML = style.innerHTML;

                // ★ 挂 game-container 内（容器坐标随 transform scale 一同缩放，与援牌同构）
                if (_pfGc) _pfGc.appendChild(tempCard); else document.body.appendChild(tempCard);

                if (item.el && item.el.parentNode) item.el.parentNode.removeChild(item.el);

                // 目标X：路牌区居中位置
                const targetLeft = endRect.left + (endRect.width - sourceRect.width) / 2;
                const deltaX = targetLeft - sourceRect.left;
                const deltaY = currentTargetTop - sourceRect.top;

                const animation = tempCard.animate([
                  { transform: 'translate(0, 0)', opacity: 1 },
                  { transform: 'translate(' + deltaX + 'px, ' + deltaY + 'px)', opacity: 1 }
                ], {
                  duration: 500,
                  easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                  fill: 'forwards'
                });
                // ★ onfinish / oncancel / 3s 超时三重兜底：任何一条触发都移除克隆并 resolve
                var _innerDone = false;
                var _finishInner = function () {
                  if (_innerDone) return;
                  _innerDone = true;
                  if (tempCard && tempCard.parentNode) tempCard.parentNode.removeChild(tempCard);
                  resolveInner();
                };
                animation.onfinish = _finishInner;
                animation.oncancel = _finishInner;
                setTimeout(_finishInner, 3000);
              });
            });

            await Promise.race([Promise.all(animations), delay(2500)]);

            // ★ race 兜底后强制清理残留克隆：超时路径下 onfinish 可能永远不触发（防"圆圈牌"残留槽内）
            _playerSurroundTemps.forEach(function (tc) {
              if (tc && tc.parentNode) tc.parentNode.removeChild(tc);
            });

            validItems.forEach((item, idx) => {
              const newCard = document.createElement('div');
              const style = cachedStyles[idx];
              // ★ 2026-09-09 FIX（围牌后叠牌"突然变大再恢复"）：见 29605 同源修复说明。
              newCard.className = 'card card-small';
              newCard.style.background = style.background;
              newCard.style.border = style.border;
              newCard.style.borderRadius = style.borderRadius;
              newCard.style.boxShadow = style.boxShadow;
              newCard.style.color = style.color;
              newCard.style.fontWeight = style.fontWeight;
              newCard.style.display = 'flex';
              newCard.style.alignItems = 'center';
              newCard.style.justifyContent = 'center';
              newCard.style.overflow = 'hidden';
              newCard.style.position = 'relative';
              newCard.style.marginBottom = '2px';
              newCard.innerHTML = style.innerHTML;
              targetRoadSlot.appendChild(newCard);
            });

            targetRoadSlot.classList.add('card-road-pop');
            const popTimer = setTimeout(() => {
              targetRoadSlot.classList.remove('card-road-pop');
            }, 600);
            addTimer(popTimer);

            if (typeof playSound === 'function') playSound('surroundCardSound');
          }
        }

        var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(_t('st_encircle_success').replace('{n}', neutralIndex+1).replace('{cnt}', totalCards).replace('{road}', targetRoadIndex+1), 'st_encircle_success');
        // ★ 2026-9-21 围牌联动动画：波浪从打出的牌 A 开始 → 被围的 2 → 3（转移牌按序），
        //   同一路的其他旧牌不动（★ 2026-9-21 用户反馈：方向为 A → 2 → 3）
        setTimeout(function () {
          var _surSlot = document.querySelector(`.player-road-slot[data-road-slot="${targetRoadIndex}"]`);
          if (!_surSlot) return;
          var _surAll = Array.prototype.slice.call(_surSlot.querySelectorAll('.card, .card-small'));
          var _surN = Math.min(totalCards, _surAll.length);
          var _seq = _surAll.slice(_surAll.length - _surN);                       // 被围牌：2, 3
          var _startIdx = _surAll.length - _surN - 1;                             // 打出的牌 A（转移牌前一张）
          if (_startIdx >= 0) _seq.unshift(_surAll[_startIdx]);
          else if (_surAll.length) _seq.unshift(_surAll[0]);
          pbPulseCardList(_seq, 90);
        }, 150);
        if (!surroundAnimEnabled && typeof playSound === 'function') playSound('surroundCardSound');
        addTurnRecord('围牌', `中立区第${neutralIndex + 1}路${totalCards}张卡牌转移至第${targetRoadIndex + 1}路叠牌区`);

        // 交互步骤6：围牌成功后标记完成类型
        if (isMatchTutorial && matchTutorialStep === 9) {
          if (supportMatchType === 'adjacent') matchTutSurroundAdjacentDone = true;
          if (supportMatchType === 'same') matchTutSurroundSameDone = true;
          // 围牌成功后设置对应限定条件文字为常亮
          const condId = supportMatchType === 'same' ? 'match-step10-cond-same' : 'match-step10-cond-adjacent';
          const condEl = document.getElementById(condId);
          if (condEl) {
            condEl.style.background = 'rgba(16, 185, 129, 0.35)';
            condEl.style.boxShadow = '0 0 16px rgba(16, 185, 129, 0.6)';
          }
          if (!matchTutSurroundCompleted) {
            matchTutSurroundCompleted = true;
          }
          // 两种围牌都完成后，立即显示完成学习按钮
          if (matchTutSurroundAdjacentDone && matchTutSurroundSameDone) {
            const btns = document.getElementById('match-step10-end-buttons');
            if (btns) {
              btns.innerHTML = `<button id="match-step10-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>`;
              btns.style.display = 'flex';
              btns.style.flexWrap = 'wrap';
              const completeBtn = document.getElementById('match-step10-complete-btn');
              if (completeBtn) {
                completeBtn.addEventListener('click', function(e) {
                  e.stopPropagation();
                  stopCrisisMusic();
                  stopEndGameMusic();
                  showMatchTutorialStep11();
                });
              }
            }
          }
        }

        // 围牌动画：路牌区由动画管理（动画已插入 card-small DOM），中立区源卡牌也已从 DOM 中删除
        // 不调用 updateUI() 避免整区重绘（会导致卡牌短暂消失再出现）
        // 改为增量更新：牌堆/手牌/结果/牌型栏
        updatePlayerDeck();
        updateOpponentDeck();
        updateCardDisplayArea('player', 'hand', GameState.playerHand);
        updateCardDisplayArea('player', 'revealedCards', GameState.playerRevealedCards);
        updateCardDisplayArea('player', 'darkCards', GameState.playerDarkCards);
        updateCardDisplayArea('opponent', 'hand', GameState.opponentHand);
        updateCardDisplayArea('opponent', 'revealedCards', GameState.opponentRevealedCards);
        updateCardDisplayArea('opponent', 'darkCards', GameState.opponentDarkCards);
        updateNeutralDisplay();
        updateResults();
        updateCardTypeDisplay();

        // ★ 统一入口：围牌成功后拼点+推进
        finalizePlacement('player', targetRoadIndex, true);
      }
    }

    // ----------------------------------------------------------------------------
    // 【UI统一更新】
    // ----------------------------------------------------------------------------
    // updateUI: 更新所有UI区域的显示
    // 更新内容:
    //   牌堆数量、手牌区、明牌区、暗牌区、场牌区、中立区
    function updateUI() {
      updatePlayerDeck();
      updateOpponentDeck();
      
      updateCardDisplayArea('player', 'hand', GameState.playerHand);
      updateCardDisplayArea('player', 'revealedCards', GameState.playerRevealedCards);
      updateCardDisplayArea('player', 'darkCards', GameState.playerDarkCards);
      updateCardDisplayArea('opponent', 'hand', GameState.opponentHand);
      updateCardDisplayArea('opponent', 'revealedCards', GameState.opponentRevealedCards);
      updateCardDisplayArea('opponent', 'darkCards', GameState.opponentDarkCards);
      
      updateFieldDisplay();
      updateNeutralDisplay();
      // ★ 中立区渲染完成后再复亮匹配光环：执行匹配后卡牌已移入中立区，
      //   若仅在 updateFieldDisplay 末尾复亮，中立区卡牌尚未渲染会 MISS 导致光环消失。
      reapplyRoadMatchGlow();
      // ★ 援牌/围牌光环同样需要在中立区重渲染后恢复（与路牌区光环平行）
      reapplyNeutralAura();
      updateResults();
      
      updateCardTypeDisplay();
      updateScoreDisplay();
    }

    // ----------------------------------------------------------------------------
    // 【得分计算与显示】
    // ----------------------------------------------------------------------------
    // 公式: 总分 = (获胜路数 + 中立牌路数) × 有效牌型得分
    // 牌型得分表（与积分栏保持一致）:
    //   花牌3条顺=150, 3条顺=120, 邻三条=100, 四条=90, 5连对=80
    //   对3条=70, 3连对=60, 三条=50, 5连顺=40, 3连顺=30
    //   对子=20, 单张=10
    function evaluateHandTypeScore(cards) {
      if (!cards || cards.length === 0) return 0;

      // 使用 identifyCardType 识别牌型，然后映射到积分栏定义的分值
      const type = identifyCardType(cards);

      const scoreMap = {
        'single': 10,
        'pair': 20,
        'threeStraight': 30,
        'fiveStraight': 40,
        'threeOfAKind': 50,
        'threePairStraight': 60,
        'twoTriples': 70,
        'fourOfAKind': 90,
        'fivePairStraight': 80,
        'adjacentTriples': 100,
        'tripleStraight': 120,
        'flowerTripleStraight': 150
      };

      return scoreMap[type.type] || 0;
    }

    function calculatePlayerScore(playerType) {
      const wins = playerType === 'player' ? GameState.playerWins : GameState.opponentWins;
      const field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
      const stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;

      // 1. 获胜路数
      let winningRoads = 0;
      for (let i = 0; i < wins.length; i++) {
        if (wins[i] === true) winningRoads++;
      }

      // 2. 中立牌路数：该玩家在中立区某格的卡牌 > 对方
      let neutralRoads = 0;
      for (let i = 0; i < 7; i++) {
        const playerCards = GameState.playerNeutralCards[i] || [];
        const opponentCards = GameState.opponentNeutralCards[i] || [];
        if (playerType === 'player' && playerCards.length > opponentCards.length) {
          neutralRoads++;
        } else if (playerType === 'opponent' && opponentCards.length > playerCards.length) {
          neutralRoads++;
        }
      }

      // 3. 有效牌型得分：获胜路卡牌 + 归属中立格卡牌 组合成一个整体评估
      //    中立格归属：己方卡牌数 > 对方卡牌数时，该格内双方所有卡牌都归属己方
      const combinedCards = [];

      // 3a. 收集所有获胜路的卡牌
      // ★ 打出状态过滤：打出未放置的卡牌不计入积分栏统计（只有放置状态才显示）
      const _excludeId = getPendingPlayCardExcludeId(playerType);
      for (let i = 0; i < 5; i++) {
        if (wins[i] === true) {
          if (field[i] && field[i].id !== _excludeId) combinedCards.push(field[i]);
          if (stack[i]) {
            for (let j = 0; j < stack[i].length; j++) {
              if (stack[i][j] && stack[i][j].id !== _excludeId) combinedCards.push(stack[i][j]);
            }
          }
        }
      }

      // 3b. 收集归属中立格的卡牌（该格内双方所有卡牌都归属己方）
      const myNeutral = playerType === 'player' ? GameState.playerNeutralCards : GameState.opponentNeutralCards;
      const oppNeutral = playerType === 'player' ? GameState.opponentNeutralCards : GameState.playerNeutralCards;
      for (let i = 0; i < 7; i++) {
        const myCount = (myNeutral[i] || []).length;
        const oppCount = (oppNeutral[i] || []).length;
        if (myCount > oppCount) {
          // 我占优：该格内双方所有中立牌都归我
          (myNeutral[i] || []).forEach(card => combinedCards.push(card));
          (oppNeutral[i] || []).forEach(card => combinedCards.push(card));
        }
      }

      const cardTypeScore = evaluateHandTypeScore(combinedCards) + (playerType === 'player' ? GameState.callCardCardTypeBonus : 0);

      // 4. 总分 = (获胜路数 + 中立牌路数) × 有效牌型得分 + 叫牌奖励
      let totalScore = (winningRoads + neutralRoads) * cardTypeScore;
      if (playerType === 'player') {
        totalScore += GameState.callCardBonusScore;
      }

      return {
        winningRoads: winningRoads,
        neutralRoads: neutralRoads,
        cardTypeScore: cardTypeScore,
        totalScore: totalScore
      };
    }

    function updateScoreDisplay() {
      // 我方得分
      const playerScore = calculatePlayerScore('player');
      const pwr = document.getElementById('player-winning-roads');
      const pnr = document.getElementById('player-neutral-roads');
      const pcs = document.getElementById('player-card-score');
      const pt = document.getElementById('player-total-score');
      if (pwr) pwr.textContent = playerScore.winningRoads;
      if (pnr) pnr.textContent = playerScore.neutralRoads;
      if (pcs) {
        pcs.textContent = playerScore.cardTypeScore;
        // 叫牌成功超过5次后，牌型得分也变金色
        if (GameState.callCardCardTypeBonus > 0) {
          pcs.classList.add('call-card-gold');
        } else {
          pcs.classList.remove('call-card-gold');
        }
      }
      if (pt) {
        pt.textContent = playerScore.totalScore;
        // 叫牌成功后，总分变金色
        if (GameState.callCardHasSuccess) {
          pt.classList.add('call-card-gold');
        } else {
          pt.classList.remove('call-card-gold');
        }
      }

      // 对方得分
      const opponentScore = calculatePlayerScore('opponent');
      const owr = document.getElementById('opponent-winning-roads');
      const onr = document.getElementById('opponent-neutral-roads');
      const ocs = document.getElementById('opponent-card-score');
      const ot = document.getElementById('opponent-total-score');
      if (owr) owr.textContent = opponentScore.winningRoads;
      if (onr) onr.textContent = opponentScore.neutralRoads;
      if (ocs) ocs.textContent = opponentScore.cardTypeScore;
      if (ot) ot.textContent = opponentScore.totalScore;
    }

    // ----------------------------------------------------------------------------
    // 【更新卡牌显示区域】
    // ----------------------------------------------------------------------------
    // updateCardDisplayArea: 更新手牌区/暗牌区/明牌区的卡牌显示
    // 参数:
    //   playerType: 'player'(我方)/'opponent'(对方)
    //   areaType:   'hand'(手牌)/'darkCards'(暗牌)/'revealedCards'(明牌)
    //   cards:      卡牌数组，按槽位顺序排列
    // 显示逻辑:
    //   - 有卡牌时: 隐藏边框和背景色，显示卡牌内容
    //   - 无卡牌时: 恢复边框和背景色(由CSS类定义)
    // 注意: 对方手牌和双方暗牌显示卡背，明牌和我方手牌显示卡面
    function updateCardDisplayArea(playerType, areaType, cards) {
      // ★ 四人模式：使用 querySelectorAll 获取所有槽位（包括右侧容器），
      // 而非仅使用左侧容器的 children，确保右侧槽位也能正确更新
      const areaTypeMap = {
        hand: 'hand',
        darkCards: 'dark',
        revealedCards: 'revealed'
      };
      const slotClassName = '.' + playerType + '-' + areaTypeMap[areaType] + '-slot';
      const slots = document.querySelectorAll(slotClassName);

      if (slots.length === 0) {
        // 回退：使用原始方式（左侧容器的 children）
        const element = playerType === 'player'
          ? GameElements.player[areaType]
          : GameElements.opponent[areaType];
        if (!element) return;
        const fallbackSlots = element.children;
        for (let i = 0; i < fallbackSlots.length; i++) {
          updateSingleSlot(fallbackSlots[i], cards[i], playerType, areaType, i);
        }
        return;
      }

      for (let i = 0; i < slots.length; i++) {
        updateSingleSlot(slots[i], cards[i], playerType, areaType, i);
      }
    }

    // ★ 辅助函数：更新单个槽位的卡牌显示
    // slotIndex: 槽位在 querySelectorAll 中的索引（也与 data-hand-slot 等属性一致）
    function updateSingleSlot(slot, card, playerType, areaType, slotIndex) {
      if (!slot) return;
      // ★ 如果未传入 slotIndex，尝试从属性中获取
      if (typeof slotIndex === 'undefined') {
        var attrName = areaType === 'hand' ? 'data-hand-slot'
          : areaType === 'darkCards' ? 'data-dark-slot'
          : areaType === 'revealedCards' ? 'data-revealed-slot' : null;
        if (attrName) {
          slotIndex = parseInt(slot.getAttribute(attrName));
          if (isNaN(slotIndex)) slotIndex = 0;
        } else {
          slotIndex = 0;
        }
      }
      // ★ 防御性检查：card 必须是有效卡牌对象（有 display 属性），否则视为空槽位
      // 防止 collectPracticeState 中 null 被错误转为 {} 空对象导致的 "defin" 卡牌渲染
      // ★ card.back === true：旧版回放回填的占位卡（真实牌面未知）→ 渲染卡背
      var isValidCard = card && typeof card === 'object' && (card.back === true || (card.display && typeof card.display === 'string'));
      if (isValidCard) {
        slot.classList.add('slot-has-card');
        // 卡通石板手牌槽保留石框与厚度阴影；其他风格按原行为隐藏边框/阴影
        if (!slot.classList.contains('stone-hand-slot')) {
          slot.style.border = 'none';
          if (!slot.classList.contains('tutorial-card-glow')) {
            slot.style.boxShadow = 'none';
          }
        }
        // 对方手牌和双方暗牌显示卡背，明牌和我方手牌显示卡面
        if (card.back === true) {
          // 旧版回放占位：牌面未知，一律卡背
          slot.innerHTML = getCardBackElementHTML(playerType === 'player');
        } else if ((playerType === 'opponent' && areaType !== 'revealedCards') || areaType === 'darkCards') {
          slot.innerHTML = getCardBackElementHTML(playerType === 'player');
        } else {
          // ★ 人机2v1模式：队友的手牌显示卡背（不可见）
          if (playerType === 'player' && areaType === 'hand') {
            var _isMyCard = isLocalPlayerCard2v2('hand', slotIndex);
            if (!_isMyCard) {
              // 队友的手牌：显示卡背
              slot.innerHTML = getCardBackElementHTML(true);
              slot.querySelectorAll('.card').forEach(function(cardEl) { cardEl.classList.add('no-hover-anim'); });
              return;
            }
          }
          slot.innerHTML = getCardFaceHTML(playerType, card);
        }
        // 对方明牌禁用悬停动画
        if (playerType === 'opponent' && areaType === 'revealedCards') {
          slot.querySelectorAll('.card').forEach(cardEl => cardEl.classList.add('no-hover-anim'));
        }
      } else {
        slot.style.border = '';
        slot.style.background = '';
        slot.style.boxShadow = '';
        slot.classList.remove('slot-has-card');
        slot.innerHTML = '';
      }
    }

    // updateFieldDisplay: 更新五路场牌/叠牌的卡牌显示
    // 每路第一张为大卡(场牌)，后续为小卡(叠牌)
    function updateFieldDisplay() {
      const playerRoadSlots = document.querySelectorAll('.player-road-slot');
      const opponentRoadSlots = document.querySelectorAll('.opponent-road-slot');

      // 路牌区容器高度22rem, padding 0.5rem, 叠牌之间gap 0.375rem
      // 场牌高度: 6rem
      // 叠牌高度: (22rem - 6rem - 0.5rem - 0.375rem * 8) / 8
      const smallHeightRem = (22 - 6 - 0.5 - 0.375 * 8) / 8;
      const gapRem = 0.375;

      // 渲染每一路的卡牌：第一张场牌大，其他叠牌小
      for (let i = 0; i < 5; i++) {
        for (const playerType of ['player', 'opponent']) {
          const field = playerType === 'player' ? GameState.playerField : GameState.opponentField;
          const stack = playerType === 'player' ? GameState.playerStack : GameState.opponentStack;
          const slot = playerType === 'player' ? playerRoadSlots[i] : opponentRoadSlots[i];
          if (!slot) continue;
          const cards = [];
          if (field[i]) cards.push(field[i]);
          // ★ 2026-9-18 FIX：stack[i] 判空 + 元素过滤（null 混入会让下方 card.id 渲染崩溃断链）
          cards.push(...(stack[i] || []).filter(Boolean));

          // 叫牌检测：获取远程对方/队友的叫牌状态（用于识别叫牌卡片）
          let remoteCallCardState = null;
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            remoteCallCardState = PBOnline.getOpponentCallCardState();
          }

          // 保留具体的待叫牌信息（用于叫牌卡片识别）
          // 1v1模式：对方的叫牌卡在opponent侧；2v2模式：队友的叫牌卡也在player侧
          const pending = playerType === 'player' ? GameState.pendingCallCard : null;
          const pendingCardId = pending ? pending.cardId : (remoteCallCardState && remoteCallCardState.pending ? remoteCallCardState.data.cardId : null);
          const pendingRoadIndex = pending ? pending.roadIndex : (remoteCallCardState && remoteCallCardState.pending ? remoteCallCardState.data.roadIndex : -1);

          slot.innerHTML = cards.map((card, index) => {
            // 只有正在叫牌的那张牌（id匹配且roadIndex匹配）显示背面，其他路牌正常显示正面
            if (pendingCardId !== null && pendingCardId !== undefined &&
                pendingRoadIndex === i && card.id === pendingCardId) {
              return getCardBackElementHTML(playerType === 'player', index > 0);
            }
            return getCardFaceHTML(playerType, card, index > 0);
          }).join('');

          // 对方路牌区禁用悬停动画
          if (playerType === 'opponent') {
            slot.querySelectorAll('.card, .card-small').forEach(cardEl => {
              cardEl.classList.add('no-hover-anim');
            });
          }

          // 超过9张时，对该路所有路牌做垂直高度等比缩放
          if (cards.length > 9) {
            const originalTotal = 6 + (cards.length - 1) * smallHeightRem + cards.length * gapRem;
            const availableRem = 22 - 8/16;
            const scale = availableRem / originalTotal;

            const cardEls = slot.querySelectorAll('.card, .card-small');
            cardEls.forEach((cardEl, idx) => {
              const originalHeight = idx === 0 ? '6rem' : `${smallHeightRem}rem`;
              const scaledHeight = idx === 0 ? `${6 * scale}rem` : `${smallHeightRem * scale}rem`;
              cardEl.style.setProperty('height', scaledHeight, 'important');
              cardEl.style.setProperty('transition', 'height 0.2s ease', 'important');
              cardEl.classList.add('road-card-scaled');

              // hover时恢复原高度
              cardEl.addEventListener('mouseenter', () => {
                cardEl.style.setProperty('height', originalHeight, 'important');
                cardEl.style.zIndex = '10';
              });
              cardEl.addEventListener('mouseleave', () => {
                cardEl.style.setProperty('height', scaledHeight, 'important');
                cardEl.style.zIndex = '';
              });
            });
            slot.classList.add('road-slot-scaled');
          } else {
            slot.classList.remove('road-slot-scaled');
          }
        }
      }

      // ★ 重渲染后重新加亮匹配光环（解决"一闪而过就消失"）——光环状态持久化在 GameState.activeRoadMatchGlow
      reapplyRoadMatchGlow();
      // ★ 2026-9-22：路牌重渲染后兜底刷新最大牌型卡标记（updateUI 全量路径外的独立刷新）
      updateGloryCards();
    }

    // ----------------------------------------------------------------------------
    // 【中立区渲染】
    // ----------------------------------------------------------------------------
    // updateNeutralDisplay: 更新7路中立区的卡牌显示
    // 渲染规则:
    //   1. 每路双方的卡牌纵向堆叠
    //   2. 排序第一(index=0, 第一张放入)为大正方形，其他为小横条
    //   3. 我方区: 从上向下堆叠(index=0在最上)
    //   4. 对方区: 从下向上堆叠(index=0在最下)
    //   5. 归属变色: 对方数量多时我方牌变红，我方数量多时对方牌变蓝
    //   6. 颜色/边框使用 CardFaceConfig 统一管理
    function updateNeutralDisplay() {
      const playerNeutralSlots = document.querySelectorAll('.player-neutral-slot');
      const opponentNeutralSlots = document.querySelectorAll('.opponent-neutral-slot');
      
      const getConfig = (isPlayer) => {
        if (selectedCardFaceStyle === 'metal') {
          return isPlayer ? MetalCardFaceConfig.player : MetalCardFaceConfig.opponent;
        } else if (selectedCardFaceStyle === 'glass') {
          return isPlayer ? GlassCardFaceConfig.player : GlassCardFaceConfig.opponent;
        } else if (selectedCardFaceStyle === 'cartoon') {
          return isPlayer ? CartoonCardFaceConfig.player : CartoonCardFaceConfig.opponent;
        }
        return isPlayer ? CardFaceConfig.player : CardFaceConfig.opponent;
      };

      const playerCfg = getConfig(true);
      const opponentCfg = getConfig(false);
      const isMetalStyle = selectedCardFaceStyle === 'metal';
      const isGlassStyle = selectedCardFaceStyle === 'glass';
      const isCartoonStyle = selectedCardFaceStyle === 'cartoon';

      // 统一计算基准尺寸，避免 flex-1 布局下逐路渲染导致各路 slot.clientWidth 不一致
      const neutralAreaEl = document.querySelector('.neutral-area');
      const neutralAreaWidth = neutralAreaEl ? neutralAreaEl.clientWidth : 448;
      const baseSlotWidth = (neutralAreaWidth - 8) / 7; // 去除边框和间距后平均分配
      const uniformSquareSize = baseSlotWidth - 8;

      for (let i = 0; i < 7; i++) {
        const playerCards = GameState.playerNeutralCards[i] || [];
        const opponentCards = GameState.opponentNeutralCards[i] || [];

        // ===== 我方中立区 =====
        const playerIsOccupied = opponentCards.length > playerCards.length;
        const playerColorCfg = playerIsOccupied ? opponentCfg : playerCfg;
        const playerGlow = playerColorCfg.shadow;

        if (playerNeutralSlots[i]) {
          const numberLabel = playerNeutralSlots[i].querySelector('.absolute');
          playerNeutralSlots[i].innerHTML = '';
          if (numberLabel) {
            playerNeutralSlots[i].appendChild(numberLabel);
          }
          
          if (playerCards.length > 0) {
            const slot = playerNeutralSlots[i];
            const squareSize = uniformSquareSize;
            const availableHeight = slot.clientHeight - 20;
            const maxSquareSize = Math.min(squareSize, availableHeight * 0.55);
            
            const cardsContainer = document.createElement('div');
            cardsContainer.style.display = 'flex';
            cardsContainer.style.flexDirection = 'column';
            cardsContainer.style.alignItems = 'center';
            cardsContainer.style.justifyContent = 'flex-start';
            cardsContainer.style.width = '100%';
            cardsContainer.style.overflow = 'visible';
            
            for (let j = 0; j < playerCards.length; j++) {
              const card = playerCards[j];
              if (!card) continue;  // ★ 2026-9-18 FIX：null 占位跳过（card.display 渲染崩溃断链）
              const isRoyal = isRoyalCard(card.display);
              const styleCfg = isRoyal ? playerColorCfg.royal : playerColorCfg;
              
              let cardHTML = '';
              if (isCartoonStyle) {
                const ctRadius = styleCfg.borderRadius || '10px';
                if (isRoyal) {
                  cardHTML = `
                    <div class="card" data-card-id="${card.id}" style="position:relative;display:flex;align-items:center;justify-content:center;${j === 0 ? `width:${squareSize}px;height:${maxSquareSize}px;font-size:${Math.min(maxSquareSize * 0.55, 20)}px;margin-bottom:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-bottom:2px;`}background:${playerColorCfg.gradient};border:${styleCfg.borderWidth} solid ${playerColorCfg.borderColor};border-radius:${ctRadius};box-shadow:${styleCfg.shadow};overflow:hidden;">
                      ${getShieldBorderHTML(!playerIsOccupied, card.display, j !== 0, 'cartoon')}
                      <span style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;z-index:3;font-weight:900;color:#fff;font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;${j === 0 ? `text-shadow:${playerColorCfg.pipShadowBig};` : 'text-shadow:0 1px 2px rgba(0,0,0,.35);'}">${card.display}</span>
                    </div>
                  `;
                } else {
                  const ctNumBg = j === 0 ? playerColorCfg.gradient : (playerColorCfg.small ? playerColorCfg.small.background : '#ffffff');
                  const ctNumColor = j === 0 ? playerColorCfg.pipColor : (playerColorCfg.small ? playerColorCfg.small.pipColor : playerColorCfg.pipColor);
                  // ★ 2026-10-04：中立小筹码补齐下方果冻阴影（与路牌区小卡一致，用户反馈图4）
                  const ctSmallShadow = 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)';
                  cardHTML = `
                    <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${maxSquareSize}px;font-size:${Math.min(maxSquareSize * 0.55, 20)}px;margin-bottom:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-bottom:2px;`}background:${ctNumBg};border:${j === 0 ? playerColorCfg.borderWidth : '2px'} solid ${playerColorCfg.borderColor};border-radius:${j === 0 ? ctRadius : '9px'};box-shadow:${j === 0 ? playerColorCfg.shadow : ctSmallShadow};display:flex;align-items:center;justify-content:center;overflow:hidden;">
                      ${j === 0 ? `<div style="position:absolute;inset:4px;border-radius:${parseInt(ctRadius)-4}px;border:2px solid ${playerColorCfg.ringColor};pointer-events:none;z-index:2;"></div>` : ''}
                      <span style="position:relative;z-index:3;font-weight:900;color:${ctNumColor};font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;${j === 0 ? `text-shadow:${playerColorCfg.pipShadowBig};` : ''}">${card.display}</span>
                    </div>
                  `;
                }
              } else if (isMetalStyle) {
                const borderRadius = styleCfg.borderRadius || '10px';
                const innerRadius = parseInt(borderRadius) - 2;
                cardHTML = `
                  <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${maxSquareSize}px;font-size:${Math.min(maxSquareSize * 0.55, 20)}px;margin-bottom:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-bottom:2px;`}">
                    <div style="width:100%;height:100%;${playerColorCfg.metalBorder};border-radius:${borderRadius};padding:2px;box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.3);">
                      <div style="width:100%;height:100%;background:${playerColorCfg.gradient};border-radius:${innerRadius}px;box-shadow:${styleCfg.shadow || playerGlow};${playerColorCfg.innerShadow || ''};display:flex;align-items:center;justify-content:center;color:#e0e0e0;font-weight:bold;position:relative;overflow:hidden;">
                        ${isRoyal ? getShieldBorderHTML(!playerIsOccupied, card.display, j !== 0, 'metal') : ''}
                        <span style="${isRoyal ? 'position:relative;z-index:4;' : ''}text-shadow:-1px -1px 0 rgba(255,255,255,0.9), 0px -1px 0 rgba(255,255,255,0.7), -1px 0px 0 rgba(255,255,255,0.7), 1px 1px 0 rgba(0,0,0,0.8), 2px 2px 0 rgba(0,0,0,0.6), 3px 3px 0 rgba(0,0,0,0.4);">${card.display}</span>
                      </div>
                    </div>
                  </div>
                `;
              } else if (isGlassStyle) {
                const borderRadius = styleCfg.borderRadius || '10px';
                const innerRadius = parseInt(borderRadius) - 2;
                cardHTML = `
                  <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${maxSquareSize}px;font-size:${Math.min(maxSquareSize * 0.55, 20)}px;margin-bottom:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-bottom:2px;`}">
                    <div style="width:100%;height:100%;${playerColorCfg.metalBorder};border-radius:${borderRadius};padding:2px;box-shadow:0 6px 16px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);">
                      <div style="width:100%;height:100%;background:${playerColorCfg.gradient};border-radius:${innerRadius}px;box-shadow:${playerColorCfg.shadow};${playerColorCfg.innerShadow || ''};display:flex;align-items:center;justify-content:center;color:#f0f0f0;font-weight:bold;position:relative;overflow:hidden;">
                        ${playerColorCfg.metalTexture ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${playerColorCfg.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>` : ''}
                        ${playerColorCfg.metalTexture ? `<div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>` : ''}
                        ${playerColorCfg.glassTopHighlight ? `<div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${playerColorCfg.glassTopHighlight}pointer-events:none;z-index:2;border-radius:${borderRadius} ${borderRadius} 0 0;"></div>` : ''}
                        ${isRoyal ? getShieldBorderHTML(!playerIsOccupied, card.display, j !== 0, 'glass') : ''}
                        <span style="${isRoyal ? 'position:relative;z-index:4;' : ''}pointer-events:none;text-shadow:0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.35), 0 0 14px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.6), 0 2px 2px rgba(0,0,0,0.8), 0 4px 4px rgba(0,0,0,0.6), 0 6px 6px rgba(0,0,0,0.4);">${card.display}</span>
                        ${playerColorCfg.edgeHighlight ? `<div style="position:absolute;top:0;left:0;width:100%;height:35%;${playerColorCfg.edgeHighlight}pointer-events:none;z-index:3;border-radius:${borderRadius} ${borderRadius} 0 0;"></div>` : ''}
                        ${playerColorCfg.edgeHighlight ? `<div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${playerColorCfg.edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${borderRadius} ${borderRadius};transform:rotate(180deg);"></div>` : ''}
                        ${playerColorCfg.metalOverlay ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${playerColorCfg.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>` : ''}
                      </div>
                    </div>
                  </div>
                `;
              } else {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.setAttribute('data-card-id', card.id);
                cardElement.style.background = playerColorCfg.gradient;
                cardElement.style.border = `${styleCfg.borderWidth} solid ${styleCfg.shieldStroke || playerColorCfg.borderColor}`;
                cardElement.style.borderRadius = styleCfg.borderRadius || '10px';
                cardElement.style.color = 'white';
                cardElement.style.fontWeight = 'bold';
                cardElement.style.display = 'flex';
                cardElement.style.alignItems = 'center';
                cardElement.style.justifyContent = 'center';
                cardElement.style.boxShadow = isRoyal ? `${styleCfg.shadow}, ${playerGlow}` : playerGlow;
                cardElement.style.position = isRoyal ? 'relative' : 'static';
                cardElement.style.overflow = isRoyal ? 'hidden' : 'visible';
                if (j === 0) {
                  cardElement.style.width = `${squareSize}px`;
                  cardElement.style.height = `${maxSquareSize}px`;
                  cardElement.style.fontSize = `${Math.min(maxSquareSize * 0.55, 20)}px`;
                  cardElement.style.marginBottom = '4px';
                  if (isRoyal) {
                    cardElement.innerHTML = `${getShieldBorderHTML(!playerIsOccupied, card.display)}<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; z-index: 1;">${card.display}</span>`;
                  } else {
                    cardElement.innerHTML = `<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);">${card.display}</span>`;
                  }
                } else {
                  cardElement.style.width = `${squareSize * 0.85}px`;
                  cardElement.style.height = '24px';
                  cardElement.style.fontSize = '12px';
                  cardElement.style.marginBottom = '2px';
                  if (isRoyal) {
                    cardElement.innerHTML = `${getShieldBorderHTML(!playerIsOccupied, card.display, true)}<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; z-index: 1;">${card.display}</span>`;
                  } else {
                    cardElement.innerHTML = `<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);">${card.display}</span>`;
                  }
                }
                cardsContainer.appendChild(cardElement);
                continue;
              }
              
              const cardWrapper = document.createElement('div');
              cardWrapper.innerHTML = cardHTML;
              cardsContainer.appendChild(cardWrapper.firstElementChild);
            }
            
            playerNeutralSlots[i].appendChild(cardsContainer);
          }
        }
        
        // ===== 对方中立区 =====
        const opponentIsOccupied = playerCards.length > opponentCards.length;
        const opponentColorCfg = opponentIsOccupied ? playerCfg : opponentCfg;
        const opponentGlow = opponentColorCfg.shadow;
        
        if (opponentNeutralSlots[i]) {
          const numberLabel = opponentNeutralSlots[i].querySelector('.absolute');
          opponentNeutralSlots[i].innerHTML = '';
          if (numberLabel) {
            opponentNeutralSlots[i].appendChild(numberLabel);
          }
          
          if (opponentCards.length > 0) {
            const slot = opponentNeutralSlots[i];
            const squareSize = uniformSquareSize;
            
            const cardsContainer = document.createElement('div');
            cardsContainer.style.display = 'flex';
            cardsContainer.style.flexDirection = 'column';
            cardsContainer.style.alignItems = 'center';
            cardsContainer.style.justifyContent = 'flex-end';
            cardsContainer.style.width = '100%';
            cardsContainer.style.height = '100%';
            cardsContainer.style.overflow = 'visible';
            
            for (let j = opponentCards.length - 1; j >= 0; j--) {
              const card = opponentCards[j];
              if (!card) continue;  // ★ 2026-9-18 FIX：null 占位跳过
              const isRoyal = isRoyalCard(card.display);
              const styleCfg = isRoyal ? opponentColorCfg.royal : opponentColorCfg;
              
              let cardHTML = '';
              if (isCartoonStyle) {
                const ctRadius = styleCfg.borderRadius || '10px';
                if (isRoyal) {
                  cardHTML = `
                    <div class="card" data-card-id="${card.id}" style="position:relative;display:flex;align-items:center;justify-content:center;${j === 0 ? `width:${squareSize}px;height:${squareSize}px;font-size:${Math.min(squareSize * 0.55, 20)}px;margin-top:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-top:2px;`}background:${opponentColorCfg.gradient};border:${styleCfg.borderWidth} solid ${opponentColorCfg.borderColor};border-radius:${ctRadius};box-shadow:${styleCfg.shadow};overflow:hidden;">
                      ${getShieldBorderHTML(opponentIsOccupied, card.display, j !== 0, 'cartoon')}
                      <span style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;z-index:3;font-weight:900;color:#fff;font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;${j === 0 ? `text-shadow:${opponentColorCfg.pipShadowBig};` : 'text-shadow:0 1px 2px rgba(0,0,0,.35);'}">${card.display}</span>
                    </div>
                  `;
                } else {
                  const ctNumBg = j === 0 ? opponentColorCfg.gradient : (opponentColorCfg.small ? opponentColorCfg.small.background : '#ffffff');
                  const ctNumColor = j === 0 ? opponentColorCfg.pipColor : (opponentColorCfg.small ? opponentColorCfg.small.pipColor : opponentColorCfg.pipColor);
                  // ★ 2026-10-04：中立小筹码补齐下方果冻阴影（与路牌区小卡一致）
                  const ctSmallShadow = 'inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(67,49,94,.08), 0 4px 0 rgba(67,49,94,.28)';
                  cardHTML = `
                    <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${squareSize}px;font-size:${Math.min(squareSize * 0.55, 20)}px;margin-top:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-top:2px;`}background:${ctNumBg};border:${j === 0 ? opponentColorCfg.borderWidth : '2px'} solid ${opponentColorCfg.borderColor};border-radius:${j === 0 ? ctRadius : '9px'};box-shadow:${j === 0 ? opponentColorCfg.shadow : ctSmallShadow};display:flex;align-items:center;justify-content:center;overflow:hidden;">
                      ${j === 0 ? `<div style="position:absolute;inset:4px;border-radius:${parseInt(ctRadius)-4}px;border:2px solid ${opponentColorCfg.ringColor};pointer-events:none;z-index:2;"></div>` : ''}
                      <span style="position:relative;z-index:3;font-weight:900;color:${ctNumColor};font-family:'Arial Rounded MT Bold','PingFang SC','Microsoft YaHei',sans-serif;${j === 0 ? `text-shadow:${opponentColorCfg.pipShadowBig};` : ''}">${card.display}</span>
                    </div>
                  `;
                }
              } else if (isMetalStyle) {
                const borderRadius = styleCfg.borderRadius || '10px';
                const innerRadius = parseInt(borderRadius) - 2;
                cardHTML = `
                  <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${squareSize}px;font-size:${Math.min(squareSize * 0.55, 20)}px;margin-top:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-top:2px;`}">
                    <div style="width:100%;height:100%;${opponentColorCfg.metalBorder};border-radius:${borderRadius};padding:2px;box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.3);">
                      <div style="width:100%;height:100%;background:${opponentColorCfg.gradient};border-radius:${innerRadius}px;box-shadow:${styleCfg.shadow || opponentGlow};${opponentColorCfg.innerShadow || ''};display:flex;align-items:center;justify-content:center;color:#e0e0e0;font-weight:bold;position:relative;overflow:hidden;">
                        ${isRoyal ? getShieldBorderHTML(opponentIsOccupied, card.display, j !== 0, 'metal') : ''}
                        <span style="${isRoyal ? 'position:relative;z-index:4;' : ''}text-shadow:-1px -1px 0 rgba(255,255,255,0.9), 0px -1px 0 rgba(255,255,255,0.7), -1px 0px 0 rgba(255,255,255,0.7), 1px 1px 0 rgba(0,0,0,0.8), 2px 2px 0 rgba(0,0,0,0.6), 3px 3px 0 rgba(0,0,0,0.4);">${card.display}</span>
                      </div>
                    </div>
                  </div>
                `;
              } else if (isGlassStyle) {
                const borderRadius = styleCfg.borderRadius || '10px';
                const innerRadius = parseInt(borderRadius) - 2;
                cardHTML = `
                  <div class="card" data-card-id="${card.id}" style="position:relative;${j === 0 ? `width:${squareSize}px;height:${squareSize}px;font-size:${Math.min(squareSize * 0.55, 20)}px;margin-top:4px;` : `width:${squareSize * 0.85}px;height:24px;font-size:12px;margin-top:2px;`}">
                    <div style="width:100%;height:100%;${opponentColorCfg.metalBorder};border-radius:${borderRadius};padding:2px;box-shadow:0 6px 16px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);">
                      <div style="width:100%;height:100%;background:${opponentColorCfg.gradient};border-radius:${innerRadius}px;box-shadow:${opponentColorCfg.shadow};${opponentColorCfg.innerShadow || ''};display:flex;align-items:center;justify-content:center;color:#f0f0f0;font-weight:bold;position:relative;overflow:hidden;">
                        ${opponentColorCfg.metalTexture ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${opponentColorCfg.metalTexture}pointer-events:none;z-index:1;border-radius:inherit;"></div>` : ''}
                        ${opponentColorCfg.metalTexture ? `<div style="position:absolute;top:-20%;left:-20%;width:140%;height:140%;background:radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.02) 45%, transparent 65%);pointer-events:none;z-index:1.5;border-radius:inherit;"></div>` : ''}
                        ${opponentColorCfg.glassTopHighlight ? `<div style="position:absolute;top:-10%;left:-10%;width:120%;height:60%;${opponentColorCfg.glassTopHighlight}pointer-events:none;z-index:2;border-radius:${borderRadius} ${borderRadius} 0 0;"></div>` : ''}
                        ${isRoyal ? getShieldBorderHTML(opponentIsOccupied, card.display, j !== 0, 'glass') : ''}
                        <span style="${isRoyal ? 'position:relative;z-index:4;' : ''}pointer-events:none;text-shadow:0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.35), 0 0 14px rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.6), 0 2px 2px rgba(0,0,0,0.8), 0 4px 4px rgba(0,0,0,0.6), 0 6px 6px rgba(0,0,0,0.4);">${card.display}</span>
                        ${opponentColorCfg.edgeHighlight ? `<div style="position:absolute;top:0;left:0;width:100%;height:35%;${opponentColorCfg.edgeHighlight}pointer-events:none;z-index:3;border-radius:${borderRadius} ${borderRadius} 0 0;"></div>` : ''}
                        ${opponentColorCfg.edgeHighlight ? `<div style="position:absolute;bottom:0;left:0;width:100%;height:10%;${opponentColorCfg.edgeHighlight}pointer-events:none;z-index:3;border-radius:0 0 ${borderRadius} ${borderRadius};transform:rotate(180deg);"></div>` : ''}
                        ${opponentColorCfg.metalOverlay ? `<div style="position:absolute;top:0;left:0;width:100%;height:100%;${opponentColorCfg.metalOverlay}pointer-events:none;z-index:4;border-radius:inherit;"></div>` : ''}
                      </div>
                    </div>
                  </div>
                `;
              } else {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.setAttribute('data-card-id', card.id);
                cardElement.style.background = opponentColorCfg.gradient;
                cardElement.style.border = `${styleCfg.borderWidth} solid ${styleCfg.shieldStroke || opponentColorCfg.borderColor}`;
                cardElement.style.borderRadius = styleCfg.borderRadius || '10px';
                cardElement.style.color = 'white';
                cardElement.style.fontWeight = 'bold';
                cardElement.style.display = 'flex';
                cardElement.style.alignItems = 'center';
                cardElement.style.justifyContent = 'center';
                cardElement.style.boxShadow = isRoyal ? `${styleCfg.shadow}, ${opponentGlow}` : opponentGlow;
                cardElement.style.position = isRoyal ? 'relative' : 'static';
                cardElement.style.overflow = isRoyal ? 'hidden' : 'visible';
                if (j === 0) {
                  cardElement.style.width = `${squareSize}px`;
                  cardElement.style.height = `${squareSize}px`;
                  cardElement.style.fontSize = `${Math.min(squareSize * 0.55, 20)}px`;
                  cardElement.style.marginTop = '4px';   // ★ 2026-9-30：对方主牌与上方叠牌的间距（对齐我方 4px，对方为底部向上生长布局）
                  if (isRoyal) {
                    cardElement.innerHTML = `${getShieldBorderHTML(opponentIsOccupied, card.display)}<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; z-index: 1;">${card.display}</span>`;
                  } else {
                    cardElement.innerHTML = `<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);">${card.display}</span>`;
                  }
                } else {
                  cardElement.style.width = `${squareSize * 0.85}px`;
                  cardElement.style.height = '24px';
                  cardElement.style.fontSize = '12px';
                  cardElement.style.marginTop = '2px';
                  if (isRoyal) {
                    cardElement.innerHTML = `${getShieldBorderHTML(opponentIsOccupied, card.display, true)}<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; z-index: 1;">${card.display}</span>`;
                  } else {
                    cardElement.innerHTML = `<span style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);">${card.display}</span>`;
                  }
                }
                cardsContainer.appendChild(cardElement);
                continue;
              }
              
              const cardWrapper = document.createElement('div');
              cardWrapper.innerHTML = cardHTML;
              cardsContainer.appendChild(cardWrapper.firstElementChild);
            }
            
            opponentNeutralSlots[i].appendChild(cardsContainer);
          }
        }
      }
    }

    // ----------------------------------------------------------------------------
    // 【开始游戏】
    // ----------------------------------------------------------------------------
    // ★ 四人模式布局切换
    // ----------------------------------------------------------------------------
    // 全局变量：当前是否为四人模式
    let isFourPlayerMode = false;
    // 四人模式下的玩家配置（0=蓝方左, 1=红方左, 2=蓝方右, 3=红方右）
    let fourPlayerConfig = { opponent: 'player', turnOrder: [] };

    // 应用四人模式布局：将部分槽位移动到右侧容器
    // 四人模式右侧槽位是否已创建
    var _fpRightSlotsCreated = false;

    // 创建右侧槽位元素（首次调用时）
    function ensureRightSlotsCreated() {
      if (_fpRightSlotsCreated) return;
      _fpRightSlotsCreated = true;

      // 对方右侧
      var oDarkR = document.getElementById('opponent-dark-cards-right');
      var oHandR = document.getElementById('opponent-hand-right');
      var oRevR = document.getElementById('opponent-revealed-cards-right');
      // 对方暗牌3张
      for (var i = 0; i < 3; i++) {
        var s = document.createElement('div');
        s.className = 'opponent-dark-slot border border-secondary/50 rounded flex items-center justify-center opponent-classic-dark-slot';
        s.style.cssText = 'width: 64px; height: 96px;';
        s.setAttribute('data-dark-slot', String(2 + i));
        if (oDarkR) oDarkR.appendChild(s);
      }
      // 对方手牌2张
      for (var i2 = 0; i2 < 2; i2++) {
        var s2 = document.createElement('div');
        s2.className = 'opponent-hand-slot bg-secondary rounded card-shadow opponent-classic-hand-slot';
        s2.style.cssText = 'width: 64px; height: 96px;';
        s2.setAttribute('data-hand-slot', String(4 + i2));
        if (oHandR) oHandR.appendChild(s2);
      }
      // 对方明牌2张
      for (var i3 = 0; i3 < 2; i3++) {
        var s3 = document.createElement('div');
        s3.className = 'opponent-revealed-slot border border-yellow-400 rounded flex items-center justify-center classic-revealed-slot';
        s3.style.cssText = 'width: 64px; height: 96px;';
        s3.setAttribute('data-revealed-slot', String(1 + i3));
        if (oRevR) oRevR.appendChild(s3);
      }

      // 我方右侧
      var pDarkR = document.getElementById('player-dark-cards-right');
      var pHandR = document.getElementById('player-hand-right');
      var pRevR = document.getElementById('player-revealed-cards-right');
      // 我方暗牌3张
      for (var j = 0; j < 3; j++) {
        var ps = document.createElement('div');
        ps.className = 'player-dark-slot border border-primary/50 rounded flex items-center justify-center game-cursor-hover dark-card-hover classic-dark-slot';
        ps.style.cssText = 'width: 64px; height: 96px;';
        ps.setAttribute('data-dark-slot', String(2 + j));
        if (pDarkR) pDarkR.appendChild(ps);
      }
      // 我方手牌2张
      for (var j2 = 0; j2 < 2; j2++) {
        var ps2 = document.createElement('div');
        ps2.className = 'player-hand-slot bg-primary rounded card-shadow game-cursor-hover card-hover flex items-center justify-center classic-hand-slot';
        ps2.style.cssText = 'width: 64px; height: 96px;';
        ps2.setAttribute('data-hand-slot', String(4 + j2));
        if (pHandR) pHandR.appendChild(ps2);
      }
      // 我方明牌2张
      for (var j3 = 0; j3 < 2; j3++) {
        var ps3 = document.createElement('div');
        ps3.className = 'player-revealed-slot border border-yellow-400 rounded flex items-center justify-center game-cursor-hover card-hover classic-revealed-slot';
        ps3.style.cssText = 'width: 64px; height: 96px;';
        ps3.setAttribute('data-revealed-slot', String(1 + j3));
        if (pRevR) pRevR.appendChild(ps3);
      }
    }

    function applyFourPlayerLayout() {
      console.log('[四人布局] applyFourPlayerLayout 开始执行');
      isFourPlayerMode = true;
      var gc = document.querySelector('.game-container');
      if (gc) gc.classList.add('four-player-mode');
      console.log('[四人布局] game-container 找到:', !!gc);

      // ★ 先将所有槽位重置回原容器（防止重启时槽位已在右侧）
      moveAllSlotsBack('opponent-dark-cards-right', 'opponent-dark-cards');
      moveAllSlotsBack('opponent-hand-right', 'opponent-hand');
      moveAllSlotsBack('opponent-revealed-cards-right', 'opponent-revealed-cards');
      moveAllSlotsBack('player-dark-cards-right', 'player-dark-cards');
      moveAllSlotsBack('player-hand-right', 'player-hand');
      moveAllSlotsBack('player-revealed-cards-right', 'player-revealed-cards');

      // 日志：重置后的槽位数量
      console.log('[四人布局] 重置后槽位数:',
        'oDark=' + (document.getElementById('opponent-dark-cards')?.children.length),
        'oHand=' + (document.getElementById('opponent-hand')?.children.length),
        'oRev=' + (document.getElementById('opponent-revealed-cards')?.children.length)
      );

      // ★ 四人模式布局：以界面中线为分界
      // 卡牌宽度64px，间距8px，牌区间距80px，中线间距100px
      //
      // 我方卡牌区域宽度（拆分左右）：
      //   暗牌1槽: 64px             暗牌4槽: 4*64+3*8=280px
      //   手牌5槽: 5*64+4*8=352px   手牌1槽: 64px
      //   明牌1槽: 64px             明牌2槽: 2*64+1*8=136px
      //
      // 对方(AI)卡牌区域：保持原样（暗牌5+手牌6+明牌3），不拆分

      var GAP = 80; // 牌区间距（拉大，更明显）
      var CENTER_MARGIN = 100; // 距中线间距（左右远离中间）

      // === 对方侧布局 ===
      // ★ 联机2v2模式：对方也拆分为左右两组（与玩家对称）
      // ★ 人机人机2v1：对方(AI)保持原始布局（暗牌5+手牌6+明牌3，不拆分）
      // ★ 2026-9-18：2v2 回放（_rpReplay2v2Kind）也走联机拆分布局（仅联机双人匹配回放；练习回放保持练习式）
      var _isOnline2v2 = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) || window._rpReplay2v2Kind === 'online_2v2';
      var oDark = document.getElementById('opponent-dark-cards');
      var oHand = document.getElementById('opponent-hand');
      var oRev = document.getElementById('opponent-revealed-cards');
      if (_isOnline2v2) {
        // ★ 联机2v2：对方左侧定位（与玩家左侧对称）
        if (oDark) { oDark.style.left = 'calc(50% - 740px)'; oDark.style.right = 'auto'; }
        if (oHand) { oHand.style.left = 'calc(50% - 596px)'; oHand.style.transform = 'none'; oHand.style.right = 'auto'; }
        if (oRev) { oRev.style.left = 'calc(50% - 164px)'; oRev.style.right = 'auto'; }
      } else {
        // ★ 人机人机2v1：对方(AI)保持原始布局（不拆分）
        if (oDark) { oDark.style.left = 'calc(50% - 748px)'; oDark.style.right = 'auto'; }
        if (oHand) { oHand.style.left = '50%'; oHand.style.transform = 'translateX(-50%)'; oHand.style.right = 'auto'; }
        if (oRev) { oRev.style.left = 'auto'; oRev.style.right = 'calc(12% + 120px)'; }
      }

      // === 我方左侧定位（从右往左算，明牌靠近中线）===
      // 明牌1槽(64px): 右边缘距中线100px → left = 50% - 100 - 64 = 50% - 164px
      // 手牌5槽(352px): left = 50% - 164 - 80 - 352 = 50% - 596px
      // 暗牌1槽(64px): left = 50% - 596 - 80 - 64 = 50% - 740px

      var pDark = document.getElementById('player-dark-cards');
      if (pDark) { pDark.style.left = 'calc(50% - 740px)'; pDark.style.right = 'auto'; }
      var pHand = document.getElementById('player-hand');
      if (pHand) { pHand.style.left = 'calc(50% - 596px)'; pHand.style.transform = 'none'; pHand.style.right = 'auto'; }
      var pRev = document.getElementById('player-revealed-cards');
      if (pRev) { pRev.style.left = 'calc(50% - 164px)'; pRev.style.right = 'auto'; }

      // === 我方右侧定位（从中线向右）===
      // 暗牌4槽(280px): left = 50% + 100px
      // 手牌1槽(64px): left = 50% + 100 + 280 + 80 = 50% + 460px
      // 明牌2槽(136px): left = 50% + 460 + 64 + 80 = 50% + 604px

      var pDarkR = document.getElementById('player-dark-cards-right');
      if (pDarkR) { pDarkR.style.left = 'calc(50% + 100px)'; }
      var pHandR = document.getElementById('player-hand-right');
      if (pHandR) { pHandR.style.left = 'calc(50% + 460px)'; }
      var pRevR = document.getElementById('player-revealed-cards-right');
      if (pRevR) { pRevR.style.left = 'calc(50% + 604px)'; }

      // ★ 只移动我方槽位到右侧容器（对方不拆分）
      // 暗牌：索引1,2,3,4移到右侧 → 左侧保留0（1张）
      // 手牌：索引5移到右侧 → 左侧保留0,1,2,3,4（5张）
      // 明牌：索引1,2移到右侧 → 左侧保留0（1张）
      moveSlotsToRight('player-dark-cards', 'player-dark-cards-right', 1, 5);
      moveSlotsToRight('player-hand', 'player-hand-right', 5, 6);
      moveSlotsToRight('player-revealed-cards', 'player-revealed-cards-right', 1, 3);

      // ★ 只显示我方右侧容器（对方右侧容器不显示）
      document.getElementById('player-dark-cards-right').style.display = 'flex';
      document.getElementById('player-hand-right').style.display = 'flex';
      document.getElementById('player-revealed-cards-right').style.display = 'flex';

      // ★ 对方右侧容器处理
      var oDarkR2 = document.getElementById('opponent-dark-cards-right');
      var oHandR2 = document.getElementById('opponent-hand-right');
      var oRevR2 = document.getElementById('opponent-revealed-cards-right');
      if (_isOnline2v2) {
        // ★ 联机2v2：对方也拆分槽位到右侧容器（与玩家相同的拆分方式）
        // 对方右侧定位（与玩家右侧对称）
        if (oDarkR2) { oDarkR2.style.left = 'calc(50% + 100px)'; }
        if (oHandR2) { oHandR2.style.left = 'calc(50% + 460px)'; }
        if (oRevR2) { oRevR2.style.left = 'calc(50% + 604px)'; }
        // 拆分对方槽位：暗牌索引1-4移到右侧，手牌索引5移到右侧，明牌索引1-2移到右侧
        moveSlotsToRight('opponent-dark-cards', 'opponent-dark-cards-right', 1, 5);
        moveSlotsToRight('opponent-hand', 'opponent-hand-right', 5, 6);
        moveSlotsToRight('opponent-revealed-cards', 'opponent-revealed-cards-right', 1, 3);
        // 显示对方右侧容器
        if (oDarkR2) oDarkR2.style.display = 'flex';
        if (oHandR2) oHandR2.style.display = 'flex';
        if (oRevR2) oRevR2.style.display = 'flex';
      } else {
        // ★ 人机人机2v1：隐藏对方右侧容器（对方不拆分）
        if (oDarkR2) oDarkR2.style.display = 'none';
        if (oHandR2) oHandR2.style.display = 'none';
        if (oRevR2) oRevR2.style.display = 'none';
      }

      console.log('[四人布局] 完成! 左侧剩余:',
        'oDark=' + (document.getElementById('opponent-dark-cards')?.children.length),
        'oHand=' + (document.getElementById('opponent-hand')?.children.length),
        'oRev=' + (document.getElementById('opponent-revealed-cards')?.children.length),
        '| 右侧:',
        'oDarkR=' + (document.getElementById('opponent-dark-cards-right')?.children.length),
        'oHandR=' + (document.getElementById('opponent-hand-right')?.children.length),
        'oRevR=' + (document.getElementById('opponent-revealed-cards-right')?.children.length)
      );
    }
    function restoreTwoPlayerLayout() {
      isFourPlayerMode = false;
      var gc = document.querySelector('.game-container');
      if (gc) gc.classList.remove('four-player-mode');

      // ★ 恢复原始inline样式
      var oDark = document.getElementById('opponent-dark-cards');
      if (oDark) { oDark.style.left = 'calc(50% - 748px)'; oDark.style.right = 'auto'; }
      var oHand = document.getElementById('opponent-hand');
      if (oHand) { oHand.style.left = '50%'; oHand.style.transform = 'translateX(-50%)'; oHand.style.right = 'auto'; }
      var oRev = document.getElementById('opponent-revealed-cards');
      if (oRev) { oRev.style.left = 'auto'; oRev.style.right = 'calc(12% + 120px)'; }
      var pDark = document.getElementById('player-dark-cards');
      if (pDark) { pDark.style.left = 'calc(50% - 748px)'; pDark.style.right = 'auto'; }
      var pHand = document.getElementById('player-hand');
      if (pHand) { pHand.style.left = '50%'; pHand.style.transform = 'translateX(-50%)'; pHand.style.right = 'auto'; }
      var pRev = document.getElementById('player-revealed-cards');
      if (pRev) { pRev.style.left = 'auto'; pRev.style.right = 'calc(12% + 120px)'; }

      // 将槽位移回原容器
      moveAllSlotsBack('opponent-dark-cards-right', 'opponent-dark-cards');
      moveAllSlotsBack('opponent-hand-right', 'opponent-hand');
      moveAllSlotsBack('opponent-revealed-cards-right', 'opponent-revealed-cards');
      moveAllSlotsBack('player-dark-cards-right', 'player-dark-cards');
      moveAllSlotsBack('player-hand-right', 'player-hand');
      moveAllSlotsBack('player-revealed-cards-right', 'player-revealed-cards');

      // 隐藏所有右侧容器
      document.querySelectorAll('.four-player-only').forEach(function(el) {
        el.style.display = 'none';
      });
    }
    // ★ 2026-9-18：暴露到 window——回放播放器（另一作用域）需要按模式调用四人布局
    window.applyFourPlayerLayout = applyFourPlayerLayout;
    window.restoreTwoPlayerLayout = restoreTwoPlayerLayout;

    // 将指定索引范围的槽位从源容器移动到目标容器
    function moveSlotsToRight(fromId, toId, startIdx, endIdx) {
      var fromEl = document.getElementById(fromId);
      var toEl = document.getElementById(toId);
      if (!fromEl || !toEl) return;
      var children = Array.from(fromEl.children);
      for (var i = startIdx; i < endIdx && i < children.length; i++) {
        toEl.appendChild(children[i]);
      }
    }

    // 将目标容器的所有槽位移回源容器
    function moveAllSlotsBack(fromId, toId) {
      var fromEl = document.getElementById(fromId);
      var toEl = document.getElementById(toId);
      if (!fromEl || !toEl) return;
      while (fromEl.children.length > 0) {
        toEl.appendChild(fromEl.children[0]);
      }
    }

    // startGame: 开始新游戏的主入口函数
    // 流程:
    //   1. 清除所有卡牌槽位
    //   2. 重置游戏状态(GameState)
    //   3. 创建并洗牌(52张分成两堆各26张)
    //   4. 设置游戏阶段为playing
    //   5. 播放开始音效
    //   6. 禁用开始/终止按钮(发牌期间)
    //   7. 延迟执行发牌流程
    //   8. 发牌完成后根据先手设置决定谁先出牌
    //   9. 先手玩家开始出牌
    function startGame() {
      try {
        // ★ 2026-9-2: 恢复开始按钮文字为"开始游戏"（游戏结束时被改成了"重新开始"）
        if (GameElements.ui.startBtn && GameElements.ui.startBtn.textContent === (typeof __t === 'function' ? __t('tut_btn_restart') : '重新开始')) {
          GameElements.ui.startBtn.textContent = '开始游戏';
        }
        clearAllCardSlots();

        // ★ 2026-9-1 FIX: 新开一局必须清空"延迟补应用"暂存的 sync！
        //   否则上一局残留的 state 带着更大的 turnNumber，在新局 turnNumber 归零后
        //   会被新鲜度校验误判为"更新状态"→ 把上一局的牌面盖到新局上。
        if (typeof GameState !== 'undefined') {
          GameState._deferredPracticeSync = null;
          if (GameState._deferredSyncTimer) {
            clearInterval(GameState._deferredSyncTimer);
            GameState._deferredSyncTimer = null;
          }
          GameState.localMatchInProgress = false;
          if (typeof GameState._matchChainGen === 'number') GameState._matchChainGen++;
        }

        // ★ 人数判定统一由 window.playerCountSetting 驱动（联机=game_start 服务器下发；单机=设置面板）
        var isFourPlayer = window.playerCountSetting === '4';
        if (isFourPlayer) {
          applyFourPlayerLayout();
        } else {
          restoreTwoPlayerLayout();
        }

        // ★ 四人模式：人机2v1模式需要激活四人回合逻辑
        // (resetGameState会重置fourPlayerActive为false，所以在resetGameState之后再设置)

        if (typeof updateRoadAndCompareStyle === 'function') {
          updateRoadAndCompareStyle();
        }

        // ★ 确保风格背景状态正确应用（设置style-bg-on类）
        if (typeof applyCardFaceBg === 'function') {
          applyCardFaceBg();
        }

        // 游戏开始：显示完整的牌堆卡背和数字
        renderDeckCardBacks();

        if (GameElements.player.deck) {
          GameElements.player.deck.style.backgroundColor = '';
        }
        if (GameElements.opponent.deck) {
          GameElements.opponent.deck.style.backgroundColor = '';
        }
        
        document.body.offsetHeight;
        document.body.scrollTop;
        document.documentElement.offsetHeight;
        
        resetGameState();

        // ★ AI 解说：新局重置节流状态（赛点/牌型播报标记，2026-10-02）

        // ★ 四人模式：在resetGameState之后激活四人模式状态
        if (isFourPlayer) {
          GameState.fourPlayerActive = true;
        }

        updateTurnDisplay();
        
        createCards();
        
        updatePlayerDeck();
        updateOpponentDeck();
        
        GameState.gamePhase = 'playing';
        GameState.isGameInterrupted = false;

        // 根据先手设置调整当前回合（默认是player；若设置了opponent则切换）
        // 联机模式：根据服务器分配的玩家序号决定先手，确保双方一致
        if (GameState.fourPlayerActive) {
          // ★ 四人模式：决定回合顺序
          // 子玩家定义：0=蓝左, 1=红左, 2=蓝右, 3=红右（联机2v2均为真人）
          // ★ 2v2在线匹配模式：回合顺序固定为 [0,1,3,2]（蓝左→红左→红右→蓝右），
          //   先手固定为座位0（蓝左）。不再使用【先手选择】随机——
          //   每局的随机性由服务器随机分配玩家0123座位实现。
          // 4名玩家各出一回合，才算1回合计数
          // ★ 人机2v1模式：使用队长同步的回合顺序
          var _isOnline2v2Start = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode;
          if (_isOnline2v2Start) {
            GameState.fourPlayerTurnOrder = [0, 1, 3, 2];
            if (window._online2v2TurnOrder && window._online2v2TurnOrder.length === 4
                && JSON.stringify(window._online2v2TurnOrder) !== JSON.stringify([0, 1, 3, 2])) {
              console.log('[2v2联机] 强制使用固定回合顺序 [0,1,3,2]（忽略旧版同步顺序', JSON.stringify(window._online2v2TurnOrder), '）');
            }
            console.log('[2v2联机] 固定回合顺序: [0,1,3,2]');
          } else if (typeof _practiceDeckData !== 'undefined' && _practiceDeckData && _practiceDeckData.turnOrder) {
            GameState.fourPlayerTurnOrder = _practiceDeckData.turnOrder.slice();
            console.log('[2v2同步] 使用同步的回合顺序:', JSON.stringify(GameState.fourPlayerTurnOrder));
          } else if (GameState.firstPlayerSetting === 'opponent') {
            // ★ 人机2v1 AI先手: 0-1-3-2
            GameState.fourPlayerTurnOrder = [0, 1, 3, 2];
          } else if (GameState.firstPlayerSetting === 'player') {
            // ★ 人机2v1 玩家先手: 1-0-2-3
            GameState.fourPlayerTurnOrder = [1, 0, 2, 3];
          } else {
            // random：从 2v1 模式两种顺序中随机
            if (Math.random() < 0.5) {
              GameState.fourPlayerTurnOrder = [0, 1, 3, 2];
            } else {
              GameState.fourPlayerTurnOrder = [1, 0, 2, 3];
            }
          }
          GameState.fourPlayerTurnIndex = 0;
          GameState.fourPlayerSubTurn = GameState.fourPlayerTurnOrder[0];
          var sub = GameState.fourPlayerSubTurn;
          // ★ 2v2在线匹配模式：currentTurn 基于本地玩家索引判断（与 fourPlayerAdvanceTurn 保持一致）
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) {
            GameState.currentTurn = (typeof isLocalPlayerTurn === 'function' && isLocalPlayerTurn()) ? 'player' : 'opponent';
          } else {
            // ★ 人机2v1：玩家=1和3，AI=0和2
            GameState.currentTurn = (sub === 1 || sub === 3) ? 'player' : 'opponent';
          }
        } else if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
          if (PBOnline.arrayIdx === 0) {
            GameState.currentTurn = 'player';
          } else {
            GameState.currentTurn = 'opponent';
          }
        } else if (GameState.firstPlayerSetting === 'opponent') {
          GameState.currentTurn = 'opponent';
        } else if (GameState.firstPlayerSetting === 'random' && Math.random() < 0.5) {
          GameState.currentTurn = 'opponent';
        }

        // 记录先手方（用于回合递增计数）
        GameState.firstPlayer = GameState.currentTurn;

        updateTurnDisplay();
        updateTurnIndicator();

        GameState.playerStoppedPlaying = false;
        GameState.opponentStoppedPlaying = false;
        GameState.turnHistory = [];

        updateGameStatus(__t('st_deal'), 'st_deal');
        
        // ★ 2v2重新加入：跳过发牌动画，等待状态同步
        var _skipDeal = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.practiceSkipDealAnimation);
        if (_skipDeal) {
          console.log('[2v2同步] 跳过发牌动画，等待状态同步');
          PBOnline.practiceSkipDealAnimation = false; // 用完即清
          GameState.isDealingCards = false;
          // 直接渲染当前（空）状态，等状态同步到达后 updateUI 会刷新
          if (typeof updateUI === 'function') updateUI();
          // ★ 安全网：重新应用背景图，防止跳过发牌动画时背景未正确设置
          if (typeof applyCardFaceBg === 'function') {
            applyCardFaceBg();
          }
          if (GameState.fourPlayerActive && typeof fourPlayerHighlightActiveArea === 'function') {
            fourPlayerHighlightActiveArea();
          }
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_sync'), 'st_sync');
          }
          return;
        }

        GameState.isDealingCards = true;
        
        GameElements.ui.stopBtn.disabled = true;
        GameElements.ui.stopBtn.style.opacity = '0.5';
        GameElements.ui.stopBtn.style.cursor = 'not-allowed';
        GameElements.ui.startBtn.disabled = true;
        GameElements.ui.startBtn.style.opacity = '0.5';
        GameElements.ui.startBtn.style.cursor = 'not-allowed';
        
        setTimeout(async () => {
          try {
            await dealInitialCards();
            
            if (GameState.isGameInterrupted) return;
            
            // ★ 人机2v1模式：发牌完成后，强制将队友手牌设置为背面
            // 这是一道安全网，确保即使发牌动画中有遗漏，updateUI之前也会修正
            if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode &&
                typeof _practiceMySeatIndex !== 'undefined' && _practiceMySeatIndex >= 0) {
              var _handSlots = document.querySelectorAll('.player-hand-slot');
              for (var _si = 0; _si < _handSlots.length; _si++) {
                var _isMine = isLocalPlayerCard2v2('hand', _si);
                if (!_isMine && _handSlots[_si].innerHTML) {
                  _handSlots[_si].innerHTML = getCardBackElementHTML(true);
                  _handSlots[_si].querySelectorAll('.card').forEach(function(c) { c.classList.add('no-hover-anim'); });
                }
              }
              console.log('[2v2发牌] 发牌后验证完成, seatIndex:', _practiceMySeatIndex, '手牌槽总数:', _handSlots.length);
            }
            
            updateUI();
            
            // ★ 安全网：发牌完成后重新应用背景图，防止初始化过程中背景被覆盖
            if (typeof applyCardFaceBg === 'function') {
              applyCardFaceBg();
            }
            
            GameState.isDealingCards = false;

            // ★ 2v2在线模式：发牌完成后通知服务器初始化权威回合状态
            // 必须在发牌完成后发送，否则服务器提前广播 turn_sync_2v2，
            // 客户端会在发牌阶段就显示线框/头像高亮/倒计时
            if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode && PBOnline.arrayIdx === 0) {
              if (typeof PBOnline.sendTurnInit2v2 === 'function') {
                PBOnline.sendTurnInit2v2([0, 1, 3, 2]);
                console.log('[2v2联机] 发牌完成，初始化权威回合状态');
              }
            }
            
            // ★ 四人模式：高亮当前活跃区域
            if (GameState.fourPlayerActive) {
              fourPlayerHighlightActiveArea();
              // ★ 人机2v1模式：队长端发送初始状态同步
              if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
                if (typeof collectPracticeState === 'function') {
                  PBOnline.sendPracticeStateSync(collectPracticeState());
                  console.log('[2v2同步] 队长发送初始状态同步');
                }
              }
            }
            
            if (GameState.currentTurn === 'player') {
              GameElements.ui.stopBtn.disabled = false;
              GameElements.ui.stopBtn.style.opacity = '1';
              GameElements.ui.stopBtn.style.cursor = 'pointer';
            } else {
              GameElements.ui.stopBtn.disabled = true;
              GameElements.ui.stopBtn.style.opacity = '0.5';
              GameElements.ui.stopBtn.style.cursor = 'not-allowed';
            }
            
            const _myTurnStr = (typeof __t==='function')?__t('st_my_turn'):'我方回合'; const _oppTurnStr = (typeof __t==='function')?__t('st_opp_turn'):'对方回合'; const turnText = GameState.currentTurn === 'player' ? _myTurnStr : _oppTurnStr;
            var fpText = '';
            if (GameState.fourPlayerActive) {
              fpText = ' [' + getCurrentSubPlayerName() + ']';
            }
            var _tStart = typeof __t === 'function' ? __t : function(k){ var d=__gameTranslations&&__gameTranslations[__gameCurrentLang]; return d&&d[k]!=null?d[k]:k; };
            var _startMsg = _tStart('st_game_start_turn').replace('{turn}', turnText + fpText);
            updateGameStatus(_startMsg, 'st_game_start_turn');
            
            // 联机模式：发牌完成后启动首回合倒计时
            // ★ 2v2在线匹配模式：不论先手如何，所有客户端都启动倒计时并定位到当前子玩家头像
            // ★ 1v1联机模式：也必须无条件触发 onTurnSwitch，让服务器启动权威计时器
            //   旧逻辑只在 currentTurn==='player' 时触发，导致后手方(playerIdx=1,currentTurn='opponent')
            //   永远不发 server_timer_start → 服务器不启动计时器 → 倒计时不动！
            if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
              var _is2v2Start = PBOnline.isOnline2v2Mode && GameState.fourPlayerActive;
              var _is1v1Start = !PBOnline.isOnline2v2Mode;
              console.log('[联机调试] 发牌完成, isOnline2v2Mode=', PBOnline.isOnline2v2Mode,
                'currentTurn=', GameState.currentTurn, 'playerIdx=', PBOnline.playerIdx,
                '_is2v2Start=', _is2v2Start, '_is1v1Start=', _is1v1Start,
                '→ 触发onTurnSwitch:', (_is2v2Start || _is1v1Start || GameState.currentTurn === 'player'));
              if (_is2v2Start || _is1v1Start || GameState.currentTurn === 'player') {
                setTimeout(() => PBOnline.onTurnSwitch(), 500);
              }
            }
            
            setTimeout(() => {
              if (GameState.isGameInterrupted) return;
              
              if (GameState.fourPlayerActive) {
                // ★ 2v2在线匹配模式：没有AI，所有4名玩家都是真人
                // 不触发AI出牌也不检查玩家终止，直接等待远程玩家操作（回合由网络消息推进）
                var _isOnline2v2Start = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode;
                if (_isOnline2v2Start) {
                  console.log('[2v2联机] 游戏开始，等待 Player ' + GameState.fourPlayerSubTurn + ' 出牌');
                  return;
                }
                // ★ 人机2v1模式：队员端不主动触发AI出牌
                // ★ 2026-6-1 FIX：仅限真实组队。单机人机2v1需要本地触发
                var _hasRealTeammateStart = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate;
                var _isPracticeTeammate = _hasRealTeammateStart && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader;
                
                if (isCurrentSubPlayerAI()) {
                  if (_isPracticeTeammate) {
                    // 队员端：AI先手时等待队长同步，不主动触发
                    console.log('[2v2同步] 队员端：AI先手，等待队长同步');
                  } else {
                    // AI先手
                    // ★ 正确阵营划分：AI子玩家(0,2)→'opponent'，人类子玩家(1,3)→'player'
                    var _aiSideInit = (GameState.fourPlayerSubTurn === 0 || GameState.fourPlayerSubTurn === 2) ? 'opponent' : 'player';
                    if (!canFourPlayerSubPlay(_aiSideInit)) {
                      // AI无法出牌，标记并切换
                      // ★ 人机2v1：AI=0(idx0)或2(idx1)
                      var aiIdx = GameState.fourPlayerSubTurn === 0 ? 0 : 1;
                      GameState.fourPlayerAIStopped[aiIdx] = true;
                      updateGameStatus(getCurrentSubPlayerName() + '无法出牌，已终止！');
                      fourPlayerAdvanceTurn();
                    } else {
                      setTimeout(() => {
                        if (GameState.isGameInterrupted) return;
                        opponentPlayCard();
                      }, AIConfig.strategy.initialDelay);
                    }
                  }
                } else {
                  // 玩家先手
                  // ★ 正确阵营划分：AI子玩家(0,2)→'opponent'，人类子玩家(1,3)→'player'
                  var _playerSideInit = (GameState.fourPlayerSubTurn === 0 || GameState.fourPlayerSubTurn === 2) ? 'opponent' : 'player';
                  if (!canFourPlayerSubPlay(_playerSideInit)) {
                    // ★ 2v2在线匹配模式：sub-turn 1/2也可能是本地玩家回合，需正确映射
                    var _subStart = GameState.fourPlayerSubTurn;
                    // ★ 人机2v1：AI=0和2，玩家=1和3
                    var _isAIStart = (_subStart === 0 || _subStart === 2);
                    if (_isAIStart) {
                      var _aiStartIdx = (_subStart === 0) ? 0 : 1;
                      GameState.fourPlayerAIStopped[_aiStartIdx] = true;
                    } else {
                      var pIdx = _subStart === 1 ? 0 : 1;
                      GameState.fourPlayerPlayerStopped[pIdx] = true;
                    }
                    updateGameStatus(getCurrentSubPlayerName() + '无法出牌，已终止！');
                    fourPlayerAdvanceTurn();
                  }
                }
                return;
              }
              
              if (GameState.currentTurn === 'player') {
                const canPlay = canPlayerPlay();
                if (!canPlay) {
                  GameState.playerStoppedPlaying = true;
                  updateGameStatus(__t('st_my_stopped'), 'st_my_stopped');
                  addTurnRecord('终止出牌', '我方无法出牌，终止出牌');
                  checkBothStopped();
                }
              } else {
                // 联机模式：对方先手时等待网络出牌，不调用AI
                if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
                  updateGameStatus(__t('st_wait_opp'), 'st_wait_opp');
                  return;
                }
                const canOpponentPlayNow = canOpponentPlay();
                
                if (!canOpponentPlayNow) {
                  GameState.opponentStoppedPlaying = true;
                  updateGameStatus(__t('st_opp_stopped'), 'st_opp_stopped');
                  addTurnRecord('终止出牌', '对方无法出牌，终止出牌', 'opponent');
                  checkBothStopped();
                } else {
                  setTimeout(() => {
                    if (GameState.isGameInterrupted) return;
                    opponentPlayCard();
                  }, AIConfig.strategy.initialDelay);
                }
              }
            }, 500);
            
          } catch (error) {
            console.error('发牌完成回调出错:', error);
            updateGameStatus(__t('st_game_error'), 'st_game_error');
          }
        }, 500);
        
      } catch (error) {
        console.error('开始游戏过程出错:', error);
        updateGameStatus(__t('st_game_start_fail'), 'st_game_start_fail');
      }
    }

    // 开始游戏按钮点击事件绑定
    GameElements.ui.startBtn.addEventListener('click', function() {
      if (isTutorialMode) {
        playSound('uiClickSound');
        nextTutorialStep();
        return;
      }
      // ★ 2026-9-2: 游戏结束后点击__t('tut_btn_restart')
      if (GameState.gamePhase === 'ended') {
        console.log('[重新开始] 检测到游戏已结束，执行全量重置');
        interruptGame();
        resetCrisisMusicState();
        stopEndGameMusic();
        resetGameState();
        clearAllCardSlots();
        // ★ 清 practice DOM（只清座位/牌组数据，绝不碰 PBOnline 模式标志！
        //   PBOnline.isPractice2v2Mode 是背景/布局判断的依据，清了就变成 1v1 背景了）
        _practiceDeckData = null;
        // ★ 2026-9-2 FIX: 只清 practiceSeatMode（选座阶段模式），但保留 _practiceMySeatIndex 和 practiceSeats！
        //   清了 _practiceMySeatIndex=-1 但保留 practiceSeats 数据 → handleTeammateExitedPractice
        //   里找不到自己座位（所有座位都 != -1）→ 把队长自己的座位也标记成 disconnected → 两个邀请框！
        practiceSeatMode = false;
        // ★ 保留 _practiceMySeatIndex — 和 practiceSeats 数组保持一致
        // ★ 保留 practiceSeats 数组 — 里面存着头像数据，重开始后头像还在
        //   但要确保两个座位的 disconnected=false（重开始意味着新一局，之前的断线是上一局的）
        if (practiceSeats && practiceSeats.length > 0) {
          for (var _si = 0; _si < practiceSeats.length; _si++) {
            if (practiceSeats[_si]) practiceSeats[_si].disconnected = false;
          }
        }
        // ★ 清所有 match/turn 锁（彻底中断上一局的异步链）
        GameState._matchChainGen = (GameState._matchChainGen || 0) + 1;
        GameState._opponentPlayCardExecuting = false;
        GameState._turnGen = (GameState._turnGen || 0) + 1;
        GameState._fourPlayerAdvancing = false;
        GameState.localMatchInProgress = false;
        GameState._switchTurnPending = false;
        GameState._deferredPracticeSync = null;
        if (GameState._deferredSyncTimer) { clearInterval(GameState._deferredSyncTimer); GameState._deferredSyncTimer = null; }

        // ★ Practice 2v2 模式：队长重新发牌组给队员（队员收到后自动开局）
        //   绝对不能在这里清 PBOnline.isPractice2v2Mode/generateAndSyncDeck 里要靠它发 sync
        var _isPracticeLeaderRestart = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader);
        var _isTeammateRestart = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader);
        if (_isPracticeLeaderRestart) {
          console.log('[重新开始] Practice 2v2 队长路径 → generateAndSyncDeck(true)');
          generateAndSyncDeck(true); // ★ restart=true → 队员端重置 _practiceDeckReceived
          return;
        }
        if (_isTeammateRestart) {
          console.log('[重新开始] Practice 2v2 队员路径 → 等待队长发牌组');
          updateGameStatus(__t('st_wait_leader_restart'), 'st_wait_leader_restart');
          // 队员端按钮隐藏掉：收到队长的牌组同步后会自动开局，不需要手动点
          if (GameElements.ui.startBtn) GameElements.ui.startBtn.style.display = 'none';
          return;
        }
        // 单人/人机模式 → 继续往下走正常 startGame 流程（清 practiceSeatMode=false 后不会进 Practice 分支）
      }
      // ★ 四人模式练习：检查双方是否都已入座
      if (typeof practiceSeatMode !== 'undefined' && practiceSeatMode) {
        if (typeof allSeatsFilled === 'function' && !allSeatsFilled()) {
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_both_seated_to_start'), 'st_both_seated_to_start');
          }
          return;
        }
        // ★ 只有队长才能开始游戏
        if (!_practiceMyIsLeader) {
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_wait_leader_start'), 'st_wait_leader_start');
          }
          return;
        }
        // 入座后隐藏座位区，进入正式游戏
        // ★ 保持头像显示，但禁用点击（只读模式）
        if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(true);
        practiceSeatMode = false;
        // ★ 队长：设置2v2模式标志，生成牌组并发送给队员
        if (typeof PBOnline !== 'undefined' && PBOnline) {
          PBOnline.isPractice2v2Mode = true;
          PBOnline.isPracticeLeader = true;
        }
        // 生成牌组（在startGame之前生成，以便发送给队员）
        generateAndSyncDeck();
        return; // 不直接调用startGame，等队员确认后再开始
      }
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();
      startGame();
    });

    // ★ 绑定练习座位事件（左键加入，右键离开）
    (function bindPracticeSeats() {
      var seatL = document.getElementById('practice-seat-left');
      var seatR = document.getElementById('practice-seat-right');
      if (seatL) {
        seatL.addEventListener('click', function(e) {
          if (typeof handlePracticeSeatClick === 'function') handlePracticeSeatClick(e);
        });
        seatL.addEventListener('contextmenu', function(e) {
          if (typeof handlePracticeSeatClick === 'function') handlePracticeSeatClick(e);
        });
      }
      if (seatR) {
        seatR.addEventListener('click', function(e) {
          if (typeof handlePracticeSeatClick === 'function') handlePracticeSeatClick(e);
        });
        seatR.addEventListener('contextmenu', function(e) {
          if (typeof handlePracticeSeatClick === 'function') handlePracticeSeatClick(e);
        });
      }
    })();

    // ----------------------------------------------------------------------------
    // 【终止出牌】
    // ----------------------------------------------------------------------------
    // handleStopPlaying: 玩家点击终止出牌按钮的处理
    // 前置检查:
    //   1. 游戏必须在playing阶段且是我方回合
    //   2. 我方尚未终止出牌
    //   3. 检查是否有中立区光环(围牌/援牌选择中) → 有则不允许终止
    //   4. 检查是否有牌可打 → 有牌则提示玩家继续出牌，不终止
    // 操作:
    //   1. 如果正在出牌，先取消当前出牌
    //   2. 确认无牌可打后设置playerStoppedPlaying为true
    //   3. 更新状态栏和添加回合记录
    //   4. 禁用终止按钮
    //   5. 检查双方是否都终止出牌

    // ----------------------------------------------------------------------------
    // autoStopIfPlayerCannotPlay: 回合开始时自动检测"本回合是否还有可打出到场上的牌"
    // ----------------------------------------------------------------------------
    // ★ 规则（2026-9-9 用户明确）：
    //   终止条件**不是**"手牌为空"，而是"本回合没有任何一张牌能合法落到场上"——
    //   手牌 / 明牌 / 暗牌 / 牌堆 全部算在内，只要存在任意一张能落场的牌就不终止。
    //   一旦无牌可落场 → 视为该玩家终止出牌，直接进入回合流转/结算，
    //   绝不能卡在"等待玩家点击"的状态。
    // 判定复用 findPlayableCards()（与玩家手动点【终止出牌】按钮时的判定完全一致）。
    // 返回 true 表示已自动终止。
    function autoStopIfPlayerCannotPlay(reason) {
      if (typeof GameState === 'undefined' || !GameState) return false;
      if (GameState.gamePhase !== 'playing') return false;
      if (GameState.currentTurn !== 'player') return false;
      // 四人模式走 fourPlayerAdvanceTurn 自己的 canFourPlayerSubPlay 检测
      if (GameState.fourPlayerActive) return false;
      if (GameState.playerStoppedPlaying) return false;
      if (GameState.isDealingCards || GameState._onlineDealingPhase) return false;
      // 打出未放置：回合尚未结束，此时不能判终止
      if (GameState.localCardPlayPending === true) return false;
      // AI/匹配动画进行中：状态还在变动，不判定
      if (GameState._opponentPlayCardExecuting === true || GameState.localMatchInProgress === true) return false;
      // 正在选择落点
      if (typeof playState !== 'undefined' && playState && playState.isPlaying) return false;
      // 存在中立区光环/匹配光环（围牌、援牌、匹配选择中）→ 不判定
      try {
        if (document.querySelectorAll('.neutral-aura').length > 0) return false;
        if (document.querySelectorAll('.match-glow').length > 0) return false;
      } catch (e) { /* 忽略 DOM 异常 */ }

      var playable = [];
      try {
        playable = (typeof findPlayableCards === 'function') ? findPlayableCards() : [];
      } catch (e) {
        console.warn('[自动终止出牌] findPlayableCards 异常，跳过本次判定:', e);
        return false;
      }
      if (playable.length > 0) return false;

      console.warn('[自动终止出牌] 本回合无任何可打出的牌 → 视为终止出牌（' + (reason || '') + '）');
      GameState.playerStoppedPlaying = true;
      GameState.cardPlayedThisTurn = false;

      // 联机：通知对方我方终止
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline) {
        try { PBOnline.sendPlayerStop(); } catch (e) { console.warn('[自动终止出牌] sendPlayerStop 失败', e); }
      }

      try {
        if (typeof updateGameStatus === 'function') {
          updateGameStatus(typeof __t === 'function' ? __t('st_my_stop') : '我方无牌可出，终止出牌', 'st_my_stop');
        }
        if (typeof addTurnRecord === 'function') addTurnRecord('终止出牌', '我方无牌可出，终止出牌');
        if (typeof GameElements !== 'undefined' && GameElements.ui && GameElements.ui.stopBtn) {
          GameElements.ui.stopBtn.disabled = true;
          GameElements.ui.stopBtn.style.opacity = '0.5';
          GameElements.ui.stopBtn.style.cursor = 'not-allowed';
        }
      } catch (e) { console.warn('[自动终止出牌] UI 更新异常', e); }

      if (typeof checkBothStopped === 'function') checkBothStopped();
      return true;
    }

    function handleStopPlaying() {
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      // ★ 2026-9-9: AI/对方出牌或匹配动画执行期间，回合尚未交还，禁止玩家出牌
      //   （此前 turn_sync 可能在 AI 匹配动画期间提前切回合，导致动画没播完玩家就能出牌）
      if (_isOpponentAnimLockingInput()) return;
      if (GameState.playerStoppedPlaying) return;

      // 检查是否有中立区光环存在，如果有则不允许停止出牌
      const hasNeutralAuras = document.querySelectorAll('.neutral-aura').length > 0;
      const hasRoadMatches = document.querySelectorAll('.match-glow').length > 0;
      if (hasNeutralAuras || hasRoadMatches) {
        updateGameStatus(__t('st_cant_place'), 'st_cant_place');
        return;
      }

      if (playState.isPlaying) {
        cancelPlacement();
      }

      // ★ 四人模式：使用专用终止逻辑
      if (GameState.fourPlayerActive) {
        // ★ 正确阵营划分：AI子玩家(0,2)→'opponent'，人类子玩家(1,3)→'player'
        var _stopSide = (GameState.fourPlayerSubTurn === 0 || GameState.fourPlayerSubTurn === 2) ? 'opponent' : 'player';
        if (canFourPlayerSubPlay(_stopSide)) {
          var subName = getCurrentSubPlayerName();
          updateGameStatus(subName + '存在可打出的牌，请继续出牌！');
          return;
        }
        // 标记当前子玩家终止
        // ★ 2v2在线匹配模式：sub-turn 1/2也可能是本地玩家回合，需正确映射 stopped 数组
        var _subForStop = GameState.fourPlayerSubTurn;
        // ★ 人机2v1：AI=0和2，玩家=1和3
        var _isAISub = (_subForStop === 0 || _subForStop === 2);
        if (_isAISub) {
          var _aiStopIdx = (_subForStop === 0) ? 0 : 1;
          GameState.fourPlayerAIStopped[_aiStopIdx] = true;
        } else {
          var pIdx = _subForStop === 1 ? 0 : 1;
          GameState.fourPlayerPlayerStopped[pIdx] = true;
        }
        GameState.cardPlayedThisTurn = false;
        var stopName = getCurrentSubPlayerName();
        updateGameStatus(stopName + '终止出牌！');
        if (typeof addTurnRecord === 'function') {
          addTurnRecord('终止出牌', stopName + '无牌可出，终止出牌');
        }
        GameElements.ui.stopBtn.disabled = true;
        GameElements.ui.stopBtn.style.opacity = '0.5';
        GameElements.ui.stopBtn.style.cursor = 'not-allowed';
        // ★ 2v2同步：通知对方玩家终止
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
          PBOnline.sendPracticeStopPlaying({
            subTurn: GameState.fourPlayerSubTurn,
            side: 'player'
          });
          console.log('[2v2同步] 已发送玩家终止出牌, subTurn:', GameState.fourPlayerSubTurn);
        }
        // ★ 2v2在线匹配模式：通知其他玩家终止出牌（回合推进由 fourPlayerAdvanceTurn 统一发送权威同步）
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline2v2Mode) {
          PBOnline.sendPlayerStop();
          console.log('[2v2联机] 已发送终止出牌+回合完成, subTurn:', GameState.fourPlayerSubTurn);
        }
        // ★ 防重复本地推进：服务器收到 stop_playing 后立即广播 turn_sync_2v2 推进回合。
        //   若广播已到达（subTurn 已变成下一名玩家），本机不再本地推进，否则会多推进一次，
        //   导致本机界面显示错误的下一名玩家（如显示玩家3而非玩家1）。
        var stopTimer = setTimeout(function() {
          if (GameState.fourPlayerSubTurn === _subForStop) fourPlayerAdvanceTurn();
        }, 500);
        if (typeof addTimer === 'function') addTimer(stopTimer);
        return;
      }

      // 检查是否有牌可打，有牌则不允许终止，给可出牌添加提示光环
      const playableCards = findPlayableCards();
      if (playableCards.length > 0) {
        // 状态栏显示简洁提示（不再详细列出各类型牌数）
        updateGameStatus(__t('st_prompt_continue'), 'st_prompt_continue');

        // 在可出牌上显示提示光环
        showPlayableCardsHint(playableCards);

        // 2秒后自动清除提示光环（使用 GameState.playableHintTimer 统一管理，避免重复点击时定时器堆积）
        GameState.playableHintTimer = setTimeout(() => {
          hidePlayableCardsHint();
        }, 2000);
        addTimer(GameState.playableHintTimer);

        return;
      }

      // 确认没有可打出的牌，允许终止
      GameState.playerStoppedPlaying = true;
      // 交互步骤2：玩家终止出牌时，高亮规则3
      if (isFunctionalCardTutorial && functionalCardTutorialStep === 2) {
        fcStep2HighlightRule(3);
      }
      GameState.cardPlayedThisTurn = false;

      // 联机模式：发送终止出牌信号给对方
      if (typeof PBOnline !== 'undefined' && PBOnline.isOnline) {
        PBOnline.sendPlayerStop();
      }

      updateGameStatus(__t('st_my_stop'), 'st_my_stop');
      addTurnRecord('终止出牌', '我方无牌可出，终止出牌');

      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';

      checkBothStopped();
    }

    // 终止出牌按钮点击事件绑定
    GameElements.ui.stopBtn.addEventListener('click', function() {
      if (isTutorialMode) {
        playSound('uiClickSound');
        prevTutorialStep();
        return;
      }
      playSound('uiClickSound');
      handleStopPlaying();
    });

    // ----------------------------------------------------------------------------
    // 【重新开始】
    // ----------------------------------------------------------------------------
    // 重新开始按钮点击事件处理
    // 流程:
    //   1. 中断游戏(清除定时器、移除动画卡牌)
    //   2. 清除所有卡牌槽位
    //   3. 重置游戏状态(GameState)
    //   4. 更新回合显示和状态栏
    //   5. 更新拼点结果显示
    //   6. 重置按钮状态(启用开始按钮，禁用终止按钮)
    GameElements.ui.restartBtn.addEventListener('click', function() {
      // ★ 游戏结束时：投降按钮变成"返回主页"，由 showGameEndProfile 系统接管
      if (typeof __gameEndProfileShown !== 'undefined' && __gameEndProfileShown) return;
      playSound('uiClickSound');
      if (isTutorialMode) {
        exitTutorial();
        return;
      }
      // ★ 人机2v1模式：退出前通知服务器，由服务器通知对方，并清理2v2状态
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (typeof PBOnline.sendPractice2v2Exit === 'function') {
          PBOnline.sendPractice2v2Exit();
        }
        // ★ 清理2v2状态（防止重新进入时状态残留）
        PBOnline.isPractice2v2Mode = false;
        PBOnline.isPracticeLeader = false;
        _practiceDeckData = null;
        if (typeof window !== 'undefined') window._practiceDeckReceived = false;
        if (typeof practiceSeatMode !== 'undefined') practiceSeatMode = false;
        if (typeof _practiceMySeatIndex !== 'undefined') _practiceMySeatIndex = -1;
        if (typeof practiceSeats !== 'undefined') practiceSeats = [null, null];
        if (typeof showPracticeSeats === 'function') showPracticeSeats(false);
        if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(false);
        if (typeof restoreTwoPlayerLayout === 'function') restoreTwoPlayerLayout();
        console.log('[人机2v1] 队长退出，已清理2v2状态');
      }
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      if (typeof updateUI === 'function') {
        updateUI();
      }
      if (typeof updateGameStatus === 'function') {
        updateGameStatus('');
      }
      showMainMenu();

      // 保持当前风格样式
      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }

      // 重新开始后回到未开始状态：牌堆显示简化外观（无卡背、无数字）
      const resetPlayerDeck = document.getElementById('player-deck');
      const resetOpponentDeck = document.getElementById('opponent-deck');
      if (resetPlayerDeck) {
        if (selectedCardFaceStyle === 'glass') {
          resetPlayerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetPlayerDeck.style.border = '4px solid rgba(255,255,255,0.95)';
          resetPlayerDeck.style.borderRadius = '12px';
          resetPlayerDeck.style.boxShadow = '0 0 2px rgba(200,220,255,0.9), 0 0 6px rgba(180,200,240,0.6), 0 0 50px rgba(120,200,255,0.6), inset 0 4px 10px rgba(0,40,100,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(0,40,100,0.6), inset -3px 0 8px rgba(0,40,100,0.6)';
          resetPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (selectedCardFaceStyle === 'metal') {
          resetPlayerDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetPlayerDeck.style.border = '3px solid #888888';
          resetPlayerDeck.style.borderRadius = '8px';
          resetPlayerDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          resetPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
        } else {
          // ★ 2026-10-14：cartoon 空牌堆 = 城堡门楼关门态（悬停开门）；其他风格原样
          if (selectedCardFaceStyle === 'cartoon') {
            resetPlayerDeck.className = 'pb-gate-deck deck-container game-cursor-hover pb-gate-empty';
            resetPlayerDeck.innerHTML = buildCartoonGateDeckHTML('p', null);
          } else {
            resetPlayerDeck.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
            resetPlayerDeck.innerHTML = '<div id="player-deck-count" class="deck-count" style="display:none;">26</div>';
          }
          resetPlayerDeck.removeAttribute('style');
        }
        GameElements.player.deckCount = document.getElementById('player-deck-count');
      }
      if (resetOpponentDeck) {
        if (selectedCardFaceStyle === 'glass') {
          resetOpponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetOpponentDeck.style.border = '4px solid rgba(255,240,240,0.95)';
          resetOpponentDeck.style.borderRadius = '12px';
          resetOpponentDeck.style.boxShadow = '0 0 2px rgba(255,200,200,0.9), 0 0 6px rgba(255,160,160,0.6), 0 0 50px rgba(255,150,150,0.6), inset 0 4px 10px rgba(140,20,20,0.8), inset 0 -8px 18px rgba(255,255,255,0.5), inset 3px 0 8px rgba(140,20,20,0.6), inset -3px 0 8px rgba(140,20,20,0.6)';
          resetOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else if (selectedCardFaceStyle === 'metal') {
          resetOpponentDeck.style.background = 'linear-gradient(180deg, #1e293b, #0f172a, #1e293b)';
          resetOpponentDeck.style.border = '3px solid #888888';
          resetOpponentDeck.style.borderRadius = '8px';
          resetOpponentDeck.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
          resetOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
        } else {
          // ★ 2026-10-14：cartoon 空牌堆 = 城堡门楼关门态（悬停开门）；其他风格原样
          if (selectedCardFaceStyle === 'cartoon') {
            resetOpponentDeck.className = 'pb-gate-deck deck-container game-cursor-hover no-hover-anim pb-gate-empty';
            resetOpponentDeck.innerHTML = buildCartoonGateDeckHTML('o', null);
          } else {
            resetOpponentDeck.className = 'w-16 h-24 flex flex-col items-center justify-center classic-deck-init';
            resetOpponentDeck.innerHTML = '<div id="opponent-deck-count" class="deck-count" style="display:none;">26</div>';
          }
          resetOpponentDeck.removeAttribute('style');
        }
        GameElements.opponent.deckCount = document.getElementById('opponent-deck-count');
      }

      GameElements.ui.startBtn.disabled = false;
      GameElements.ui.startBtn.style.opacity = '1';
      GameElements.ui.startBtn.style.cursor = 'pointer';
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
    });

    // ----------------------------------------------------------------------------
    // 【回合记录面板关闭绑定】
    // ----------------------------------------------------------------------------
    // 关闭按钮：点击关闭面板
    const closeHistoryBtn = document.getElementById('close-turn-history-btn');
    if (closeHistoryBtn) {
      closeHistoryBtn.addEventListener('click', function() {
        const overlay = document.getElementById('turn-history-overlay');
        if (overlay) overlay.classList.add('hidden');
        playSound('uiCloseSound');
      });
    }

    // 点击 overlay 背景（非 panel 区域）时关闭面板
    const historyOverlay = document.getElementById('turn-history-overlay');
    if (historyOverlay) {
      historyOverlay.addEventListener('click', function(e) {
        // 只有当点击目标是 overlay 本身时才关闭（防止点击 panel 内部误触发）
        if (e.target === historyOverlay) {
          historyOverlay.classList.add('hidden');
          playSound('uiCloseSound');
        }
      });
    }

    // ----------------------------------------------------------------------------
    // 【事件监听设置】
    // ----------------------------------------------------------------------------
    // 悬停粒子效果配置（性能优化版 · 速度加快一倍）
    const HoverParticleConfig = {
      hand: {
        particleType: 'dust',
        particleCount: 10,
        particleSize: 8,
        particleColor: '#C7D2FE',
        particleFadeTime: 450,
        particleDrift: { x: 120, y: 0 },
        interval: 35
      },
      revealed: {
        particleType: 'fire',
        particleCount: 8,
        particleSize: { width: 16, height: 24 },
        particleColors: ['#FF6600', '#FF9900', '#FFCC00', '#FF3300'],
        particleFadeTime: 800,
        particleDrift: { x: 0, y: -100 },
        speedMultiplier: 2,
        interval: 70
      },
      dark: {
        particleType: 'meteor',
        particleCount: 6,
        particleSize: 7,
        particleColor: '#8B5CF6',
        particleFadeTime: 900,
        orbitRadius: 50,
        rotationSpeed: 1,
        interval: 130
      },
      deck: {
        particleType: 'smoke',
        particleCount: 6,
        particleSize: 12,
        particleColor: '#D1D5DB',
        particleFadeTime: 600,
        particleScaleEnd: 2,
        particleBlur: 'blur(2px)',
        particleDrift: { x: 40, y: -200 },
        interval: 90
      }
    };

    // Canvas粒子系统 - 使用GPU加速渲染（shadowBlur-free 优化版）
    const ParticleSystem = {
      canvas: null,
      ctx: null,
      particles: [],
      animationId: null,
      hoverEmitter: null,
      isRunning: false,
      lastActivityTime: 0,
      MAX_PARTICLES: 40,   // 同时存在的粒子上限
      IDLE_STOP_DELAY: 2000, // 无活动2秒后暂停循环

      init() {
        if (this.canvas) return;

        this.canvas = document.createElement('canvas');
        this.canvas.id = 'particle-canvas';
        this.canvas.style.cssText = 'position:absolute;top:0;left:0;width:1920px;height:1080px;pointer-events:none;z-index:30;';
        const gameContainer = document.querySelector('.game-container');
        if (gameContainer) {
          gameContainer.appendChild(this.canvas);
        } else {
          document.body.appendChild(this.canvas);
        }

        this.ctx = this.canvas.getContext('2d');
        this.resize();
        window.addEventListener('resize', () => this.resize());
        this.startLoop();
      },

      resize() {
        if (!this.canvas) return;
        this.canvas.width = 1920;
        this.canvas.height = 1080;
      },

      startLoop() {
        if (this.isRunning) return;
        this.isRunning = true;
        const loop = () => {
          const hadActivity = this.update();
          this.render();

          if (!hadActivity && performance.now() - this.lastActivityTime > this.IDLE_STOP_DELAY) {
            // 长时间无活动，暂停循环
            this.isRunning = false;
            this.animationId = null;
            return;
          }

          this.animationId = requestAnimationFrame(loop);
        };
        loop();
      },

      ensureLoopRunning() {
        if (!this.isRunning) {
          this.lastActivityTime = performance.now();
          this.startLoop();
        } else {
          this.lastActivityTime = performance.now();
        }
      },

      stop() {
        if (this.animationId) {
          cancelAnimationFrame(this.animationId);
          this.animationId = null;
        }
        this.isRunning = false;
        this.particles = [];
        this.hoverEmitter = null;
      },

      addParticle(p) {
        if (this.particles.length >= this.MAX_PARTICLES) {
          this.particles.shift(); // 超过上限，丢弃最老的粒子
        }
        this.particles.push(p);
        this.lastActivityTime = performance.now();
        this.ensureLoopRunning();
      },

      setHoverEmitter(element, config) {
        const rect = element.getBoundingClientRect();
        const gameContainer = document.querySelector('.game-container');
        const containerRect = gameContainer ? gameContainer.getBoundingClientRect() : { left: 0, top: 0 };
        // ★ 有效缩放 = 视觉宽/布局宽（兼容回放 wrapper scale(0.8) 叠加，否则悬停粒子错位）
        let scale = getGameScale() || 1;
        try {
          const _rawW = gameContainer ? (gameContainer.offsetWidth || 0) : 0;
          const _visW = gameContainer ? (gameContainer.getBoundingClientRect().width || 0) : 0;
          if (_rawW > 0 && _visW > 0 && isFinite(_visW / _rawW) && (_visW / _rawW) > 0) scale = _visW / _rawW;
        } catch (e) {}

        const relX = (rect.left - containerRect.left) / scale;
        const relY = (rect.top - containerRect.top) / scale;
        const relWidth = rect.width / scale;
        const relHeight = rect.height / scale;

        let cachedHandBounds = null;
        if (config.particleType === 'dust') {
          // ★ 四人模式：判断悬停的手牌属于哪个容器，使用对应容器的边界
          // 右侧容器只有1张手牌，如果仍用左侧容器(5张)的边界，粒子会超出右侧容器范围
          var handArea = null;
          var rightHand = document.getElementById('player-hand-right');
          if (rightHand && rightHand.contains(element)) {
            handArea = rightHand;
          } else {
            handArea = document.getElementById('player-hand');
          }
          if (handArea) {
            const handRect = handArea.getBoundingClientRect();
            const handLeft = (handRect.left - containerRect.left) / scale;
            const handRight = (handRect.right - containerRect.left) / scale;
            cachedHandBounds = { handLeft, handRight };
          }
        }

        this.hoverEmitter = {
          element,
          config,
          rect,
          centerX: relX + relWidth / 2,
          centerY: relY + relHeight / 2,
          lastSpawnTime: 0,
          spawned: 0,
          startTime: performance.now(),
          cachedHandBounds
        };
        this.ensureLoopRunning();
        this.lastActivityTime = performance.now();
      },

      clearHoverEmitter() {
        this.hoverEmitter = null;
      },

      update() {
        const now = performance.now();
        let hadActivity = false;

        if (this.hoverEmitter) {
          if (now - this.hoverEmitter.startTime > 2000) {
            // 自动重置，重新开始
            this.hoverEmitter.startTime = performance.now();
            this.hoverEmitter.spawned = 0;
          }

          const { element, config } = this.hoverEmitter;
          if (!element.isConnected) {
            this.hoverEmitter = null;
          } else {
            while (now - this.hoverEmitter.lastSpawnTime > config.interval &&
                   this.hoverEmitter.spawned < config.particleCount) {
              this.spawnParticle(
                this.hoverEmitter.centerX,
                this.hoverEmitter.centerY,
                this.hoverEmitter.rect,
                config,
                this.hoverEmitter.cachedHandBounds
              );
              this.hoverEmitter.lastSpawnTime = now;
              this.hoverEmitter.spawned++;
            }

            if (this.hoverEmitter.spawned >= config.particleCount) {
              this.hoverEmitter.spawned = 0;
            }
            hadActivity = true;
          }
        }

        for (let i = this.particles.length - 1; i >= 0; i--) {
          const p = this.particles[i];
          p.life -= 16;

          if (p.life <= 0) {
            this.particles.splice(i, 1);
            continue;
          }

          const progress = 1 - p.life / p.maxLife;

          if (p.type === 'meteor') {
            p.angle += p.speed;
            p.x = p.orbitCenterX + Math.cos(p.angle) * p.orbitRadius;
            p.y = p.orbitCenterY + Math.sin(p.angle) * p.orbitRadius;
          } else {
            p.x += p.vx;
            p.y += p.vy;
          }

          p.opacity = 1 - progress * (p.fadeRate || 0.8);
          p.scale = p.baseScale * (1 + progress * (p.scaleGrowth || 0));
          hadActivity = true;
        }

        return hadActivity;
      },

      spawnParticle(centerX, centerY, rect, config, cachedHandBounds) {
        const p = {
          x: centerX,
          y: centerY,
          vx: 0,
          vy: 0,
          life: config.particleFadeTime,
          maxLife: config.particleFadeTime,
          opacity: 1,
          scale: 1,
          baseScale: 1,
          type: config.particleType
        };

        if (config.particleType === 'dust') {
          p.x = centerX + (Math.random() - 0.5) * rect.width;
          p.y = centerY + (Math.random() - 0.5) * rect.height;
          p.size = config.particleSize;
          p.color = config.particleColor;

          if (cachedHandBounds) {
            const direction = Math.random() > 0.5 ? 1 : -1;
            const maxDistance = direction === 1
              ? cachedHandBounds.handRight - p.x
              : p.x - cachedHandBounds.handLeft;
            p.vx = direction * Math.min(maxDistance * 0.8, config.particleDrift?.x || 100) / (config.particleFadeTime / 16);
          } else {
            p.vx = (Math.random() - 0.5) * (config.particleDrift?.x || 100) * 2 / (config.particleFadeTime / 16);
          }
          p.vy = (Math.random() - 0.5) * 30 / (config.particleFadeTime / 16);

        } else if (config.particleType === 'fire') {
          p.x = centerX + (Math.random() - 0.5) * rect.width;
          p.y = centerY + (Math.random() - 0.5) * rect.height;
          p.size = config.particleSize;
          p.color = config.particleColors[Math.floor(Math.random() * config.particleColors.length)];
          p.vx = (Math.random() - 0.5) * 20 / (config.particleFadeTime / 16) * (config.speedMultiplier || 1);
          p.vy = -Math.abs(config.particleDrift?.y || 120) / (config.particleFadeTime / 16) * (config.speedMultiplier || 1);
          p.fadeRate = 0.7;
          p.scaleGrowth = -1;  // 上升过程中逐渐缩小至消失

        } else if (config.particleType === 'meteor') {
          const orbitRadius = config.orbitRadius || Math.max(rect.width, rect.height) / 2 + 5;
          p.orbitCenterX = centerX;
          p.orbitCenterY = centerY;
          p.orbitRadius = orbitRadius;
          p.angle = Math.random() * Math.PI * 2;
          p.speed = (Math.PI * 2) / (config.particleFadeTime / 16) * (config.rotationSpeed || 1);
          p.x = centerX + Math.cos(p.angle) * orbitRadius;
          p.y = centerY + Math.sin(p.angle) * orbitRadius;
          p.size = config.particleSize;
          p.color = config.particleColor;
          p.fadeRate = 0.6;

        } else if (config.particleType === 'smoke') {
          p.x = centerX + (Math.random() - 0.5) * rect.width;
          p.y = centerY + Math.random() * rect.height / 2;
          p.size = config.particleSize;
          p.color = config.particleColor;
          p.vx = (Math.random() - 0.5) * 40 / (config.particleFadeTime / 16);
          p.vy = -100 / (config.particleFadeTime / 16);
          p.scaleGrowth = config.particleScaleEnd - 1;
          p.fadeRate = 0.9;
        }

        this.addParticle(p);
      },

      render() {
        if (!this.ctx) return;

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        for (const p of this.particles) {
          this.ctx.save();
          this.ctx.globalAlpha = Math.max(0, p.opacity);
          this.ctx.translate(p.x, p.y);
          this.ctx.scale(p.scale, p.scale);

          if (p.type === 'fire') {
            this.ctx.rotate(Math.PI / 4);
            const w = (p.size && p.size.width) ? p.size.width : p.size;
            const h = (p.size && p.size.height) ? p.size.height : p.size;
            const rx = Math.max(w, h) / 2;
            const ry = Math.min(w, h) / 2;

            this.ctx.fillStyle = p.color;
            this.ctx.globalAlpha = Math.max(0, p.opacity) * 0.35;
            this.ctx.beginPath();
            this.ctx.ellipse(0, 0, rx * 2, ry * 2, 0, 0, Math.PI * 2);
            this.ctx.fill();

            this.ctx.globalAlpha = Math.max(0, p.opacity);
            this.ctx.beginPath();
            this.ctx.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
            this.ctx.fill();

          } else if (p.type === 'smoke') {
            this.ctx.fillStyle = p.color;
            this.ctx.globalAlpha = Math.max(0, p.opacity) * 0.3;
            this.ctx.beginPath();
            this.ctx.arc(0, 0, p.size, 0, Math.PI * 2);
            this.ctx.fill();

            this.ctx.globalAlpha = Math.max(0, p.opacity) * 0.6;
            this.ctx.beginPath();
            this.ctx.arc(0, 0, p.size * 0.6, 0, Math.PI * 2);
            this.ctx.fill();

          } else {
            const glowSize = (p.type === 'meteor' ? 2.2 : 1.8);
            this.ctx.fillStyle = p.color;
            this.ctx.globalAlpha = Math.max(0, p.opacity) * 0.35;
            this.ctx.beginPath();
            this.ctx.arc(0, 0, p.size / 2 * glowSize, 0, Math.PI * 2);
            this.ctx.fill();

            this.ctx.globalAlpha = Math.max(0, p.opacity);
            this.ctx.beginPath();
            this.ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
            this.ctx.fill();
          }

          this.ctx.restore();
        }
      }
    };

    function createHoverParticles(element, config) {
      ParticleSystem.init();
      ParticleSystem.setHoverEmitter(element, config);
      return null;
    }

    function clearHoverParticleTimers() {
      ParticleSystem.clearHoverEmitter();
    }

    // setupEventListeners: 设置玩家卡牌区域的点击事件和悬停粒子效果
    // 使用事件委托方式，确保即使子元素更新后事件仍能正确触发
    function setupEventListeners() {
      const playerHand = document.getElementById('player-hand');
      if (playerHand) {
        playerHand.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-hand-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-hand-slot'));
            handlePlayerHandClick(index, e);
          }
        });
        
        playerHand.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-hand-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'hand');
            // 联机模式：通知对方同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-hand-slot'));
              PBOnline.sendCardHover('hand', index, true);
            }
          }
        }, true);
        
        playerHand.addEventListener('mouseout', (e) => {
          if (!playerHand.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机模式：通知对方同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('hand', -1, false);
            }
          }
        }, true);
      }
      
      const playerRevealed = document.getElementById('player-revealed-cards');
      if (playerRevealed) {
        playerRevealed.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-revealed-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-revealed-slot'));
            handlePlayerRevealedClick(index);
          }
        });
        
        playerRevealed.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-revealed-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'revealed');
            // 联机模式：通知对方同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-revealed-slot'));
              PBOnline.sendCardHover('revealed', index, true);
            }
          }
        }, true);
        
        playerRevealed.addEventListener('mouseout', (e) => {
          if (!playerRevealed.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机模式：通知对方同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('revealed', -1, false);
            }
          }
        }, true);
      }
      
      const playerDark = document.getElementById('player-dark-cards');
      if (playerDark) {
        playerDark.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-dark-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-dark-slot'));
            handlePlayerDarkClick(index, slot);
          }
        });
        
        playerDark.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-dark-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'dark');
            // 联机模式：通知对方同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-dark-slot'));
              PBOnline.sendCardHover('dark', index, true);
            }
          }
        }, true);
        
        playerDark.addEventListener('mouseout', (e) => {
          if (!playerDark.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机模式：通知对方同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('dark', -1, false);
            }
          }
        }, true);
      }

      // ★ 四人模式：为右侧容器也绑定事件监听器
      const playerHandRight = document.getElementById('player-hand-right');
      if (playerHandRight) {
        playerHandRight.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-hand-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-hand-slot'));
            handlePlayerHandClick(index, e);
          }
        });
        playerHandRight.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-hand-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'hand');
            // 联机/人机2v1模式：通知队友同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-hand-slot'));
              PBOnline.sendCardHover('hand', index, true);
            }
          }
        }, true);
        playerHandRight.addEventListener('mouseout', (e) => {
          if (!playerHandRight.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机/人机2v1模式：通知队友同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('hand', -1, false);
            }
          }
        }, true);
      }

      const playerRevealedRight = document.getElementById('player-revealed-cards-right');
      if (playerRevealedRight) {
        playerRevealedRight.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-revealed-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-revealed-slot'));
            handlePlayerRevealedClick(index);
          }
        });
        playerRevealedRight.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-revealed-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'revealed');
            // 联机/人机2v1模式：通知队友同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-revealed-slot'));
              PBOnline.sendCardHover('revealed', index, true);
            }
          }
        }, true);
        playerRevealedRight.addEventListener('mouseout', (e) => {
          if (!playerRevealedRight.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机/人机2v1模式：通知队友同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('revealed', -1, false);
            }
          }
        }, true);
      }

      const playerDarkRight = document.getElementById('player-dark-cards-right');
      if (playerDarkRight) {
        playerDarkRight.addEventListener('click', (e) => {
          const slot = e.target.closest('.player-dark-slot');
          if (slot) {
            const index = parseInt(slot.getAttribute('data-dark-slot'));
            handlePlayerDarkClick(index, slot);
          }
        });
        playerDarkRight.addEventListener('mouseover', (e) => {
          const slot = e.target.closest('.player-dark-slot');
          if (slot && slot.innerHTML.trim()) {
            setupHoverEffect(slot, 'dark');
            // 联机/人机2v1模式：通知队友同步显示悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              const index = parseInt(slot.getAttribute('data-dark-slot'));
              PBOnline.sendCardHover('dark', index, true);
            }
          }
        }, true);
        playerDarkRight.addEventListener('mouseout', (e) => {
          if (!playerDarkRight.contains(e.relatedTarget)) {
            clearHoverEffect();
            // 联机/人机2v1模式：通知队友同步取消悬停效果
            if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
              PBOnline.sendCardHover('dark', -1, false);
            }
          }
        }, true);
      }

      const playerField = document.getElementById('player-road-area');
      if (playerField) {
        playerField.addEventListener('click', (e) => {
          const roadSlot = e.target.closest('.player-road-slot');
          if (roadSlot) {
            const index = parseInt(roadSlot.getAttribute('data-road-slot'));
            handlePlayerRoadClick({index});
          }
        });
      }
      
      if (GameElements.player.deck) {
        GameElements.player.deck.addEventListener('click', handlePlayerDeckClick);
        
        GameElements.player.deck.addEventListener('mouseenter', () => {
          setupHoverEffect(GameElements.player.deck, 'deck');
          // 联机模式：通知对方同步显示悬停效果
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendCardHover('deck', -1, true);
          }
        });
        
        GameElements.player.deck.addEventListener('mouseleave', () => {
          clearHoverEffect();
          // 联机模式：通知对方同步取消悬停效果
          if (typeof PBOnline !== 'undefined' && (PBOnline.isOnline || PBOnline.isPractice2v2Mode)) {
            PBOnline.sendCardHover('deck', -1, false);
          }
        });
      }

      // 联机模式：鼠标移动轨迹同步
      const gameContainer = document.querySelector('.game-container');
      if (gameContainer) {
        gameContainer.addEventListener('mousemove', (e) => {
          if (typeof PBOnline === 'undefined' || !PBOnline.isOnline) return;
          const rect = gameContainer.getBoundingClientRect();
          // 归一化坐标 (0~1)
          const x = (e.clientX - rect.left) / rect.width;
          const y = (e.clientY - rect.top) / rect.height;
          if (x >= 0 && x <= 1 && y >= 0 && y <= 1) {
            // 实时更新我方蓝色光标（每次 mousemove 都执行，无延迟）
            PBOnline.updateMyCursor(e.clientX, e.clientY);
            // 节流发送给对方（50ms 一次，减少网络流量）
            PBOnline.sendMouseMove(x, y);
          }
        });
      }
    }

    function setupHoverEffect(element, type) {
      // ★ 卡通风格：关闭悬停粒子特效（果冻跳动画自带反馈，粒子和草地场景不搭；不影响其他风格）
      if (selectedCardFaceStyle === 'cartoon') return;
      // ★ 人机2v1模式：非自己回合不显示悬停效果（和对方卡牌一样无互动）
      if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) return;
      // ★ 四人模式：线框之外的卡牌（非活跃侧）不显示粒子特效
      if (element && element.closest && element.closest('.fp-inactive-side')) return;
      // ★ 牌堆自身被标记为非活跃时不显示粒子特效
      if (element && element.classList && element.classList.contains('fp-inactive-side')) return;
      const config = HoverParticleConfig[type];
      if (config) {
        createHoverParticles(element, config);
      }
    }

    function clearHoverEffect() {
      ParticleSystem.clearHoverEmitter();
    }

    // ----------------------------------------------------------------------------
    // 【玩家明牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerRevealedClick: 玩家点击明牌区卡牌的处理逻辑
    // 规则: 明牌可选择放入空位或叠加到已有牌的路后
    // 流程:
    //   1. 检查游戏状态
    //   2. 计算可用放置位置(空位+叠牌区)
    //   3. 设置出牌状态，高亮显示可用位置
    //   4. 等待玩家选择放置位置
        // ----------------------------------------------------------------------------
    // 【玩家明牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerRevealedClick: 规则: 明牌点击即打出，放入第一个可用位置
    function handlePlayerRevealedClick(index) {
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      // ★ 2026-9-9: AI/对方出牌或匹配动画执行期间，回合尚未交还，禁止玩家出牌
      //   （此前 turn_sync 可能在 AI 匹配动画期间提前切回合，导致动画没播完玩家就能出牌）
      if (_isOpponentAnimLockingInput()) return;
      if (GameState.playerStoppedPlaying || GameState.cardPlayedThisTurn) return;
      if (GameState.isDealingCards) return;
      if (playState.isPlaying) return;
      // ★ 人机2v1模式：非自己回合不能点击明牌
      if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) return;

      // ★ 四人模式：检查点击的明牌是否属于当前子玩家
      if (GameState.fourPlayerActive) {
        var range = getCurrentSubPlayerRevealedRange();
        if (index < range.start || index >= range.end) return;
        // ★ 人机2v1模式：额外检查是否属于本地玩家的座位
        if (!isLocalPlayerCard2v2('revealedCards', index)) return;
      }

      const card = GameState.playerRevealedCards[index];
      if (!card) return;

      const availableSlots = calculateAvailableSlots('revealed');
      if (availableSlots.length === 0) {
        updateGameStatus(__t('st_no_place'), 'st_no_place');
        return;
      }

      playState.isPlaying = true;
      playState.cardType = 'revealed';
      playState.sourceIndex = index;
      playState.card = card;
      playState.availableSlots = availableSlots;

      if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) {
        fcTutAddRoadHighlight();
      }

      showPlacementHighlights(availableSlots);
      document.addEventListener('click', handleGlobalClickToCancelPlacement, true);
    }


    // ----------------------------------------------------------------------------
    // 【玩家暗牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerDarkClick: 玩家点击暗牌区卡牌的处理逻辑
    // 规则: 暗牌只能叠加到已有牌的路后(叠牌区)
    // 流程:
    //   1. 检查游戏状态
    //   2. 计算可用放置位置(仅叠牌区)
    //   3. 设置出牌状态，高亮显示可用位置
    //   4. 等待玩家选择放置位置
        // ----------------------------------------------------------------------------
    // 【玩家暗牌点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerDarkClick: 规则: 暗牌点击即打出，放入第一个可用位置
    function handlePlayerDarkClick(index, slot) {
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      // ★ 2026-9-9: AI/对方出牌或匹配动画执行期间，回合尚未交还，禁止玩家出牌
      //   （此前 turn_sync 可能在 AI 匹配动画期间提前切回合，导致动画没播完玩家就能出牌）
      if (_isOpponentAnimLockingInput()) return;
      if (GameState.playerStoppedPlaying || GameState.cardPlayedThisTurn) return;
      if (GameState.isDealingCards) return;
      if (playState.isPlaying) return;
      // ★ 人机2v1模式：非自己回合不能点击暗牌
      if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) return;

      // ★ 四人模式：检查点击的暗牌是否属于当前子玩家
      if (GameState.fourPlayerActive) {
        var range = getCurrentSubPlayerDarkRange();
        if (index < range.start || index >= range.end) return;
        // ★ 人机2v1模式：额外检查是否属于本地玩家的座位
        if (!isLocalPlayerCard2v2('darkCards', index)) return;
      }

      const card = GameState.playerDarkCards[index];
      if (!card) return;

      const availableSlots = calculateAvailableSlots('dark');
      if (availableSlots.length === 0) {
        updateGameStatus(__t('st_no_stack'), 'st_no_stack');
        // ★ 2026-10-1：暗牌无法打出时抖动提示（复用游戏现有 cardFailShake 关键帧）
        if (slot) {
          slot.classList.remove('tutorial-card-fail-shake');
          void slot.offsetWidth;
          slot.classList.add('tutorial-card-fail-shake');
          // 动画结束自动移除抖动类：类残留会让上面的 :hover :not() 排除永久生效，
          // 导致该暗牌悬停上浮效果失效；移除后悬停效果立即恢复
          slot.addEventListener('animationend', () => slot.classList.remove('tutorial-card-fail-shake'), { once: true });
        }
        return;
      }

      playState.isPlaying = true;
      playState.cardType = 'dark';
      playState.sourceIndex = index;
      playState.card = card;
      playState.availableSlots = availableSlots;

      if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) {
        fcTutAddRoadHighlight();
      }

      // 即使只有 1 个可用路，也显示光环提示，让玩家选择放置位置
      showPlacementHighlights(availableSlots);
      document.addEventListener('click', handleGlobalClickToCancelPlacement, true);
    }


    // ----------------------------------------------------------------------------
    // 【玩家牌堆点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerDeckClick: 玩家点击牌堆的处理逻辑
    // 规则: 牌堆只能放入路牌区最左边空位，点击即抽牌打出
        // ----------------------------------------------------------------------------
    // 【玩家牌堆点击处理】
    // ----------------------------------------------------------------------------
    // handlePlayerDeckClick: 规则: 牌堆只能放入路牌区最左边空位，点击即抽牌打出
    function handlePlayerDeckClick() {
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      // ★ 2026-9-9: AI/对方出牌或匹配动画执行期间，回合尚未交还，禁止玩家出牌
      //   （此前 turn_sync 可能在 AI 匹配动画期间提前切回合，导致动画没播完玩家就能出牌）
      if (_isOpponentAnimLockingInput()) return;
      if (GameState.playerStoppedPlaying || GameState.cardPlayedThisTurn) return;
      if (GameState.isDealingCards) return;
      if (playState.isPlaying) return;
      if (isTutorialMode && tutorialRoundLocked) return;
      // ★ 人机2v1模式：非自己回合不能点击牌堆
      if (typeof isLocalPlayerTurn === 'function' && !isLocalPlayerTurn()) return;

      if (GameState.playerDeck.length === 0) {
        updateGameStatus(__t('st_no_card'), 'st_no_card');
        return;
      }

      const availableSlots = calculateAvailableSlots('deck');
      if (availableSlots.length === 0) {
        updateGameStatus(__t('st_field_full'), 'st_field_full');
        return;
      }

      playState.isPlaying = true;
      playState.cardType = 'deck';
      playState.sourceIndex = -1;
      playState.card = GameState.playerDeck[GameState.playerDeck.length - 1];
      playState.availableSlots = availableSlots;

      if (isFunctionalCardTutorial && functionalCardTutorialStep === 1) {
        fcTutAddRoadHighlight();
      }

      if (availableSlots.length === 1) {
        placeCard(availableSlots[0].index);
      } else {
        showPlacementHighlights(availableSlots);
        document.addEventListener('click', handleGlobalClickToCancelPlacement, true);
      }
    }


    // ============================================================================
    // 【主菜单功能】
    // ============================================================================

    function hideMainMenu() {
      // ★ 进入游戏前重置主页状态：关闭资料弹窗/回放播放器、收起记录展开（2026-9-11）
      try {
        const pmodal = document.getElementById('player-profile-modal');
        if (pmodal && pmodal.style.display !== 'none' && pmodal.style.display !== '') closeProfileModal();
        if (typeof _replayModeActive !== 'undefined' && _replayModeActive) closeReplayPlayer();
        ppExpandedMode = '';
        // 有未收尾的录制（对局中途退出）→ 人机模式兜底保存；联机模式丢弃半局不传服务器
        if (typeof ReplayRecorder !== 'undefined' && ReplayRecorder && ReplayRecorder.active && !ReplayRecorder.ended) {
          if (ReplayRecorder.mode === 'ai_1v1' || ReplayRecorder.mode === 'ai_2v2') {
            try { ReplayRecorder.forceEnd('lose'); } catch (e) {}
          } else {
            try { ReplayRecorder.reset(); } catch (e) {}
          }
        }
      } catch (e) {}
      const menu = document.getElementById('main-menu');
      if (menu) {
        menu.style.opacity = '0';
        setTimeout(() => {
          menu.style.display = 'none';
        }, 300);
      }
      // ★ 显示游戏主容器（去除主页背景下的对决界面）
      const gameWrapper = document.querySelector('.game-container-wrapper');
      if (gameWrapper) {
        gameWrapper.style.opacity = '1';
        gameWrapper.style.visibility = 'visible';
        gameWrapper.style.pointerEvents = 'auto';
      }
      // ★ 进入游戏时停止主页 BGM
      bgmMenuActive = false;
      if (typeof stopBGM === 'function') stopBGM();
      // ★ 取消"延迟3秒播放主页BGM"的定时器（否则进游戏后到点会在游戏里响起主页BGM）
      if (typeof bgmDelayTimer !== 'undefined' && bgmDelayTimer) {
        clearTimeout(bgmDelayTimer);
        bgmDelayTimer = null;
      }
      // ★ 重置阶段 BGM 标记，使新对局从开局阶段重新开始
      if (typeof _lastBGMPhase !== 'undefined' && _lastBGMPhase !== '') {
        try { _lastBGMPhase = ''; } catch (e) {}
      }
      // ★ 2026-9-19：进入对局 → 显示对局专用悬浮 UI（回合显示按钮等，统一管理）
      // ★ 2026-10-03 FIX：进入对局界面时重置回合显示，防止按钮残留上局"回合 N - 我方"
      //   （4 个入口均为从主页进入，setup 阶段无进行中对局；点击开始游戏后 startGame
      //   内 resetGameState + updateTurnDisplay 会再次刷新，联机先手由其覆盖）
      try {
        GameState.turnNumber = 1;
        GameState.currentTurn = 'player';
        if (typeof updateTurnDisplay === 'function') updateTurnDisplay();
      } catch (e) {}
      if (typeof setBattleUiVisible === 'function') setBattleUiVisible(true);
    }

    // 主页 BGM 延迟定时器：每次回到主页延迟 3 秒后播放
    let bgmDelayTimer = null;
    // 调度主页 BGM：延迟 3 秒播放（带淡入过渡），避免重复触发时累积多个定时器
    function scheduleMenuBGM() {
      if (typeof playBGM !== 'function') return;
      if (bgmDelayTimer) {
        clearTimeout(bgmDelayTimer);
        bgmDelayTimer = null;
      }
      bgmDelayTimer = setTimeout(function() {
        bgmDelayTimer = null;
        // ★ 双保险：定时器到点时若已不在主页（进入游戏），不再播放主页 BGM
        if (!bgmMenuActive) return;
        playBGM('主界面.mp3', 1200);
      }, 3000);
    }

    function showMainMenu() {
      setMoralePanelVisible(true);  // ★ 2026-9-25 离开教程回主页，恢复士气值面板（非教程时重复设置无害）
      // ★ 统一联机清理入口（2026-9-14）
      //   所有"返回主页"路径必须经过此函数，在此统一收口联机残留清理。
      //
      //   检测条件（任一满足即执行清理）：
      //   ① PBOnline.isOnline === true（仍在联机对局中，正常退出）
      //   ② window._pbNeedsOnlineCleanup === true（游戏已结束但未清理——handleOnlineGameEnd /
      //      processGameOver 在结算弹窗出现前就把 isOnlineMode 清 false 了，
      //      用此标志让 showMainMenu 知道还有联机残留需要清理）
      //
      //   已由 exitOnlineGame / 自定义房间路径显式调 cleanupOnlineGameShared 的，
      //   会把 isOnlineMode 置 false + _pbNeedsOnlineCleanup 置 false → 这里检测不到 → 自然跳过，
      //   无需额外幂等标志。
      var _needOnlineCleanup = (typeof PBOnline !== 'undefined' && PBOnline &&
        (PBOnline.isOnline || window._pbNeedsOnlineCleanup));
      if (_needOnlineCleanup) {
        try {
          var _customRoom = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline._isCustomRoom);
          // 1. 核心清理
          if (typeof PBOnline.cleanupOnlineGameShared === 'function') {
            PBOnline.cleanupOnlineGameShared({
              keepRoomAlive: _customRoom,  // 自定义房间保留房间（可能重连），匹配模式退出
              keepWs: _customRoom          // 自定义房间保留 WS，匹配模式关闭
            });
          }
          // 2. 通知服务器离开游戏
          if (typeof PBOnline.send === 'function') {
            try { PBOnline.send({ type: 'leave_game', data: {} }); } catch (_e) {}
          }
          // 3. 恢复单机模式按钮（联机时被隐藏）
          ['settings-btn', 'game-rules-btn', 'start-game', 'restart-game', 'stop-playing'].forEach(function(_id) {
            var _el = document.getElementById(_id);
            if (_el) _el.style.display = '';
          });
          // 4. 计时器从联机控制面板归位到原始控制面板
          var _timerBack = document.getElementById('match-timer-display');
          var _ctrlPanel = document.getElementById('game-ctrl-panel');
          if (_timerBack && _ctrlPanel && _timerBack.parentNode !== _ctrlPanel) {
            _ctrlPanel.insertBefore(_timerBack, _ctrlPanel.firstChild);
            _timerBack.style.alignSelf = '';
            _timerBack.style.textAlign = '';
          }
          console.log('[showMainMenu] ✅ 联机清理完成（isOnline=' + PBOnline.isOnline1v1Mode + '/' + PBOnline.isOnline2v2Mode + ', customRoom=' + _customRoom + '）');
        } catch(_e) {
          console.warn('[showMainMenu] 联机清理异常:', _e);
        }
      }

      const menu = document.getElementById('main-menu');
      if (menu) {
        menu.style.display = 'flex';
        menu.style.opacity = '1';
        menu.style.transform = '';
      }
      // ★ 隐藏游戏主容器（返回主页时去除对决界面）
      const gameWrapper = document.querySelector('.game-container-wrapper');
      if (gameWrapper) {
        gameWrapper.style.opacity = '0';
        gameWrapper.style.visibility = 'hidden';
        gameWrapper.style.pointerEvents = 'none';
      }
      // ★ 返回主菜单时延迟 3 秒播放主页 BGM（主界面.mp3）
      bgmMenuActive = true;
      // ★ 返回主菜单时，游戏内 BGM 淡出过渡（800ms），避免立即停止显得突兀
      if (typeof fadeOutBGM === 'function') fadeOutBGM(800, function() {});
      if (typeof scheduleMenuBGM === 'function') scheduleMenuBGM();
      // ★ 返回主菜单时重置游戏阶段
      GameState.gamePhase = 'setup';
      GameState.isGameInterrupted = false;
      // ★ 返回主菜单时恢复双人模式布局
      if (typeof restoreTwoPlayerLayout === 'function') {
        restoreTwoPlayerLayout();
      }
      // ★ 返回主菜单时重置playerCountSetting，防止2v2残留状态污染单人匹配
      window.playerCountSetting = '2';
      localStorage.setItem('playerCountSetting', '2');
      // ★ 返回主菜单时隐藏座位区并重置
      if (typeof showPracticeSeats === 'function') showPracticeSeats(false);
      if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(false);
      if (typeof practiceSeatMode !== 'undefined') practiceSeatMode = false;
      // ★ 保存座位索引到localStorage（供重新加入时恢复）
      if (typeof _practiceMySeatIndex !== 'undefined' && _practiceMySeatIndex >= 0) {
        localStorage.setItem('_practiceSavedSeatIndex', _practiceMySeatIndex.toString());
      }
      if (typeof _practiceMySeatIndex !== 'undefined') _practiceMySeatIndex = -1;
      // ★ 清除人机2v1模式状态
      _practiceDeckData = null;
      if (typeof window !== 'undefined') window._practiceDeckReceived = false;
      if (typeof PBOnline !== 'undefined' && PBOnline) {
        PBOnline.isPractice2v2Mode = false;
        PBOnline.isPracticeLeader = false;
      }
      // ★ 返回主菜单时恢复按钮文字（走字典翻译）
      var reBtn = document.getElementById('restart-game');
      if (reBtn) reBtn.textContent = (typeof __t === 'function') ? __t('btn_exit_practice') : '退出练习';
      // ★ 刷新主页头像/组队按钮/好友面板等元素的位置和 zoom
      // 进入游戏后窗口可能被 resize 过，但 updateScale 在游戏态不一定正确刷新主页元素。
      // 返回主页时必须重新算一遍，否则头像和组队按钮间距错乱。
      if (gameScaleHandler) gameScaleHandler();
      else if (typeof updateScale === 'function') updateScale();
      // ★ 主页排行榜刷新（2026-9-14）：回主页时拉取最新数据（缓存 3 秒防抖由 lbLoading 控制）
      if (typeof lbRefresh === 'function') { try { lbRefresh(); } catch (e) {} }
      // ★ 2026-9-19：返回主页 → 隐藏对局专用悬浮 UI（回合显示按钮/回合记录面板，统一管理）
      if (typeof setBattleUiVisible === 'function') setBattleUiVisible(false);
    }

    // ★ 被动退出人机2v1（对方退出后，本方被通知强制退出）
    // isLeaderExit: true=队长退出（队员被强制退出），false=队员退出（队长收到通知）
    function forceExitPractice2v2(isLeaderExit) {
      console.log('[人机2v1] 被动退出, isLeaderExit:', isLeaderExit);
      // 中断游戏
      if (typeof interruptGame === 'function') interruptGame();
      if (typeof stopCrisisMusic === 'function') stopCrisisMusic();
      if (typeof stopEndGameMusic === 'function') stopEndGameMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      // 清理卡牌槽位
      if (typeof clearAllCardSlots === 'function') clearAllCardSlots();
      if (typeof resetGameState === 'function') resetGameState();
      if (typeof updateUI === 'function') updateUI();
      if (typeof updateGameStatus === 'function') updateGameStatus('');
      // 返回主菜单
      showMainMenu();
      // 保持当前风格样式
      if (typeof updateRoadAndCompareStyle === 'function') updateRoadAndCompareStyle();
      // 清理2v2状态
      _practiceDeckData = null;
      if (typeof window !== 'undefined') {
        window._practiceDeckReceived = false;
        window._forceNeutralBorder = false; // ★ 清除强制中立区线框标志
      }
      if (typeof PBOnline !== 'undefined' && PBOnline) {
        PBOnline.isPractice2v2Mode = false;
        PBOnline.isPracticeLeader = false;
      }
      // 恢复双人布局
      if (typeof restoreTwoPlayerLayout === 'function') restoreTwoPlayerLayout();
      if (typeof showPracticeSeats === 'function') showPracticeSeats(false);
      if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(false);
      if (typeof practiceSeatMode !== 'undefined') practiceSeatMode = false;
      if (typeof _practiceMySeatIndex !== 'undefined') _practiceMySeatIndex = -1;
      // ★ 重置座位数据（防止重新进入时残留旧头像）
      if (typeof practiceSeats !== 'undefined') practiceSeats = [null, null];
      // 恢复按钮文字（走字典翻译）
      var reBtn = document.getElementById('restart-game');
      if (reBtn) reBtn.textContent = (typeof __t === 'function') ? __t('btn_exit_practice') : '退出练习';
      // 恢复按钮状态
      var startBtn = document.getElementById('start-game');
      if (startBtn) { startBtn.disabled = false; startBtn.style.opacity = '1'; startBtn.style.cursor = 'pointer'; }
      var stopBtn = document.getElementById('stop-playing');
      if (stopBtn) { stopBtn.disabled = true; stopBtn.style.opacity = '0.5'; stopBtn.style.cursor = 'not-allowed'; }
    }

    function showFeatureComingSoon(featureName) {
      var _t = (typeof __t==='function')?__t:function(k){var d=__gameTranslations&&__gameTranslations[__gameCurrentLang];return d&&d[k]!=null?d[k]:k;}; updateGameStatus(featureName + ' ' + _t('st_in_development'), 'st_in_development');
    }

    // 娱乐模式预告弹窗（2026-9-16）：点击娱乐模式先展示玩法预告说明，不直接进入
    function showEntPreview() {
      var m = document.getElementById('ent-preview-modal');
      if (m) m.style.display = 'flex';
    }
    function closeEntPreview() {
      var m = document.getElementById('ent-preview-modal');
      if (m) m.style.display = 'none';
    }

    // ============================================================================
    // 【语言切换系统】
    // ============================================================================
    var __gameTranslations = {
      zh: {

        'game_name': '临阵伐谋',

        'game_name_en': 'Frontline Stratagem',

        'game_subtitle': '扑克牌列阵对决',

        'menu_entertainment': '娱乐模式',

        'menu_ent_badge': '暂无',

        'morale_kw': '士气值',

        'morale_text': '：每回合结束时按当前得分增长',

        'ent_preview_title': '娱乐模式 · 预告',

        'ent_preview_desc1': '本模式将提供武将+策略卡组合的方式对局。',

        'ent_preview_desc2': '解锁成就可以获取相关武将，提升等级可以解锁相关策略卡（使用策略卡需要消耗游戏积分）',

        'ent_preview_btn': '敬请期待',

        'ent_preview_enter': '进入体验服',

        'menu_online': '联机模式',

        'menu_online_solo': '单人匹配',

        'menu_online_2v2': '双人匹配',

        'menu_online_custom': '自定义房间',

        'menu_practice': '人机练习',

        'winmode_btn': '显示模式',

        'menu_practice_1v1': '单人 1v1',

        'menu_practice_2v1': '双人 2v1',

        'menu_tutorial': '教程',
        'menu_entertainment_sub': '娱乐模式',
        'menu_online_sub': '联机模式',
        'menu_practice_sub': '人机练习',
        'menu_tutorial_sub': '教程',

        'menu_tutorial_point': '拼点和牌型',

        'menu_tutorial_action': '功能牌',

        'menu_tutorial_match': '匹配操作',

        'lang_title': '关于 / 语言',

        'lang_about_title': '📖 这是关于《临阵伐谋》的小故事',

        'lang_about_p1': '小时候，我摆着爷爷给的许多硬币（不能花），着迷的过完一个下午。不是意淫怎么花，而是把它们想象成玩具士兵，在我的大脑内开启一场世界大战。',

        'lang_about_p2': '虽然别的小孩拥有许多玩具，但我的想象力也在帮助我一点一点实现自己的乐趣。',

        'lang_about_p3': '上学那会，最羡慕的是别家小孩拥有的桌游大富翁，我虽然没有，但我可以画画。于是画桌游，成了我日后自娱自乐的习惯。',

        'lang_about_p4': '上班之后，工作磨灭了我很多爱好和游戏，空缺带来的孤寂，使我回想起了曾今的习惯。',

        'lang_about_p5': '于是我重拾画笔（鼠标），制作了一款三国武将战争类桌游。',

        'lang_about_p6': '因为累积数年的不断推倒重做（和室友测试游玩），此游戏的对战部分愈加完善和复杂。于是我将对战部分脱离本体，单独改动制作成了新游戏。',

        'lang_about_p7': '而这游戏就是现在的《临阵伐谋》',

        'lang_about_p8': '好了，小故事说完，感谢你的关注。最后表达一下：我制作游戏的动力，就是看到自己的游戏变得更好，而大家的评论，就是我进步的源泉。',

        'lang_about_p9a': '感兴趣的朋友，欢迎关注我的B站账号：',

        'lang_select': '选择游戏语言',

        'lang_zh': '简体中文',

        'lang_en': '英文',

        'lang_zh_sub': 'Chinese',

        'lang_en_sub': 'English',

        'lang_btn': '语言',

        'lang_btn_sub': 'Language',

        'hk_btn': '快捷键',
        'menu_quit': '关闭游戏',
        'hk_title': '快捷键一览',
        'hk_g_tutorial': '教程模式',
        'hk_g_game': '对局模式（单机 / 联机）',
        'hk_g_general': '通用',
        'hk_k_right': '鼠标右键',
        'hk_k_wheelup': '滚轮向上',
        'hk_k_esc': 'Esc',
        'hk_k_nums': '数字键',
        'hk_k_backspace': 'Backspace',
        'hk_k_alt': 'Alt 键',
        'hk_k_volwheel': '滚轮（悬停音量图标）',
        'hk_k_seatright': '鼠标右键（人机2v1座位）',
        'hk_d_exit': '退出教程',
        'hk_d_prev': '返回上一步',
        'hk_d_settings': '打开 / 关闭设置面板',
        'hk_d_ccnum': '叫牌时输入叫牌点数',
        'hk_d_ccdel': '叫牌时删除已输入数字',
        'hk_d_cccancel': '叫牌时取消叫牌',
        'hk_d_self': '打开 / 关闭本面板',
        'hk_d_vol': '调节音乐音量（每次 ±5%）',
        'hk_d_seat': '离开座位',

        'set_title': '设置',
        'comm_situ': '情况',
        'comm_intent': '意图',
        'comm_feel': '感受',

        'set_fullscreen': '显示模式',

        'set_windowed': '窗口化',

        'set_full': '全屏',

        'set_resizable': '可调整大小',

        'set_sound': '音效音量',

        'set_music': '音乐音量',

        'set_bgm': 'BGM音量',

        'set_voice': '语音音量',

        'set_ai': 'AI 策略',

        'set_first': '先手选择',

        'set_back': '卡背选择',

        'set_style': '风格',

        'set_style_classic': '经典',

        'set_style_glass': '玻璃',

        'set_style_metal': '金属',
        'set_style_cartoon': '卡通',

        'set_style_off': '关闭',

        'set_element': '元素',

        'set_bg_starfield': '星空战场',

        'set_bg_magicforest': '魔幻森林',

        'set_bg_tech': '机械科技',

        'set_bg_anim': '动态',

        'set_ai_title': '【AI能力】',

        'set_ai_fair': '公平',

        'set_ai_omni': '全知',
        'set_ai_prob': '全面',

        'set_ai_lock': '游戏进行中无法修改AI能力',

        'set_on': '启用',

        'set_off': '关闭',

        'set_first_title': '【先手选择】',

        'set_first_random': '随机先手',

        'set_first_mine': '我方先手',

        'set_first_opponent': '对方先手',

        'set_callcard_title': '【叫牌】',

        'set_callcard_desc': '预测未知的牌点，成功后可以额外得分',

        'set_callcard_on': '启用',

        'set_callcard_off': '关闭',

        'set_cardback': '卡背选择',

        'set_mine': '我方',

        'set_opponent': '对方',

        'set_columns': '栏目管理',

        'set_statusbar': '状态栏',

        'set_opponent_type': '对方牌型',

        'set_scorebar': '积分栏',

        'set_my_type': '我方牌型',

        'set_pointbar': '拼点栏',

        'set_show': '显示',

        'set_hide': '隐藏',

        'term_drag': '拖牌',

        'term_smash': '撞牌',

        'term_reinforce': '援牌',

        'term_encircle': '围牌',

        'term_pointmatch': '拼点',

        'term_tactical_win': '战术胜利',

        'term_strategic_win': '战略胜利',

        'term_lanes': '路牌区',

        'term_neutral': '中立区',

        'term_field': '场牌',

        'term_stack': '叠牌',

        'term_action': '功能牌',

        'term_open': '明牌',

        'term_hidden': '暗牌',

        'term_deck': '牌堆',

        'st_ready': '游戏准备就绪，请点击开始游戏',

        'st_win_five': '恭喜！我方五路全胜！',

        'st_lose_five': '遗憾！对方五路全胜！',

        'st_win_hand': '恭喜！我方牌面获胜！',

        'st_lose_hand': '遗憾！对方牌面获胜！',

        'st_win_same_big': '恭喜！双方牌型相同，但我方牌面更大！',

        'st_lose_same_big': '遗憾！双方牌型相同，但对方牌面更大！',

        'hand_none': '无牌，-',

        'tut_step_word': '步骤',
        'tut_hello_title': '欢迎来到临阵伐谋',
        'tut_hello_content': '欢迎来到《临阵伐谋》新手教程\n\n这是一款融合了拼点，德州扑克，麻将玩法的回合制游戏\n\n让我们先来了解下拼点玩法吧',
        'tut_point_title': '拼点玩法',
        'tut_point_content': '拼点就是比较扑克牌的点数大小\n\n这里我们给对方第1路提供了一张10点\n\n请从手牌中（A，K）挑选一张可以拼点获胜的牌吧',
        'tut_point_win_title': '拼点获胜',
        'tut_point_win_content': '恭喜拼点获胜\n\n场上一共有5条路\n\n接下来用新手牌尝试全部拼点获胜吧',
        'tut_deck_title': '牌堆玩法',
        'tut_deck_content': '牌堆共有26张暗牌，双方均不可见\n\n点击牌堆即可抽牌并自动打出\n\n抽到的牌会按从左到右的空位顺序放置\n\n善用牌堆补充你的战力吧',
        'tut_win_title': '获胜方式',
        'tut_win_content': '游戏有两种获胜方式：\n\n1.五路全胜：五条路全部拼点获胜时，游戏获胜\n\n2.牌面获胜：双方无法出牌，且未达成五路全胜时，结算各自场上所有牌组合成的最大牌型，牌面更大的一方获胜',
        'tut_settle_title': '牌面结算',
        'tut_next_title': '下一步',
        'tut_next_content': '恭喜你完成新手教程！\n\n可以继续体验「匹配操作」教程，学习拖牌、撞牌、援牌、围牌等进阶技巧\n\n也可以直接开始对战，祝你游戏愉快',
        'tut_restart_btn': '重新体验',
        'tut_btn_restart': '重新开始',
        'tut_learn_btn': '学习新玩法',
        'tut_type_none': '无牌',
        'tutx_step': '步骤',
        'tutx_istep': '交互步骤',
        'tutx_exit': '结束教程',
        'tutx_learn_next': '学习新教程',
        'tutx_end_exp': '结束体验',
        'tutx_next': '下一步',
        'tutx_done_learn': '完成学习',
        'tutx_confirm': '确定',
        'tutx_cancel': '取消',
        'tutx_practice': '人机模式',
        'tutx_demo_hint': '点击执行{action}',
        'tutx_demo_hint_card': '点击{card}执行{action}',
        'tutx_demo_none': '当前牌局没有可演示的操作，可点击"重新体验"换一批牌',
        'tutx_demo_btn_drag': '▶ AI演示拖牌',
        'tutx_demo_btn_crash': '▶ AI演示撞牌',
        'tutx_demo_btn_support': '▶ AI演示援牌',
        'tutx_demo_btn_encircle': '▶ AI演示围牌',
        'tx_goback_title': '退回上一步',
        'tx_goback_text': '确定要退回上一步吗？',
        'tx_exit_title': '退出教程',
        'tx_exit_hint': '鼠标右键退出教程（安卓长按退出）',
        'tx_exit_text': '确定要退出教程吗？',
        'fc_intro_title': '认识功能牌',
        'fc_intro_desc': '本次教程，我们来了解一下四种功能牌',
        'fc_rule_title': '功能牌规则',
        'fc_rule_desc': '将鼠标移至各区域，了解四种功能牌的出牌规则',
        'fc_step2_title': '实战演练',
        'fc_step2_desc': '现在带着这些功能牌，我们实战演练一下吧',
        'fc_field_title': '场上规则',
        'fc_rule1': '1. 双方每条路无论放置多少张牌，始终用各自最大的牌点比拼大小',
        'fc_rule2': '2. 双方场上存在的最大牌型，是统计各自场上存在的所有牌点',
        'fc_rule3': '3. 玩家无法将牌打出到场上时，视为终止出牌，等待对方也终止后，对局结束',
        'fc_nav_1': '步骤 1/2 - 认识功能牌',
        'fc_nav_2': '步骤 2/2 - 实战演练',
        'mt_s1_title': '匹配操作',
        'mt_s1_desc': '本次介绍游戏的核心玩法：四种匹配操作<br><br>拖牌和撞牌，援牌和围牌',
        'mt_t_drag': '拖牌',
        'mt_s2_desc': '我们首先来了解一下：拖牌<br><br>拖牌的作用是拆除对方的关键牌点<br><br>接下来试试看吧',
        'mt_drag_status': '对局开始！请尝试打出与对路相邻牌点的卡牌来触发拖牌',
        'mt_s2i_desc': '当玩家回合打出的牌点，在对路有相邻牌点时，就可以触发拖牌操作',
        'mt_t_crash': '撞牌',
        'mt_s3_desc': '撞牌的作用是同归于尽，付出代价摧毁对方的牌点<br><br>接下来试试看吧',
        'mt_t_neutral': '中立区',
        'mt_s4_desc': '右侧是游戏的中立区，拖牌和撞牌都会移入这里，变成中立牌（此时它们不属于任何一方）<br><br>而接下来要介绍的援牌和围牌就可以把中立牌变成自己的牌啦',
        'mt_t_reinforce': '援牌',
        'mt_s5_desc': '我们先来了解援牌：<br><br>援牌的作用是支援我方中立牌，形成数量上的压制，从而逼迫对方中立牌投降，加入我方<br><br>现在去试试看看吧',
        'mt_rein_status': '对局开始！请尝试打出与己方中立区有相邻/相同点的牌来触发援牌',
        'mt_s5i_desc': '援牌：当玩家回合打出的牌点，在己方中立区有相邻/相同点时，根据<span style="color: #10b981; font-weight: bold;">"限定条件"</span>触发援牌操作',
        'mt_cond_adj_r': '相邻点限定（组成顺子）：援牌与我方中立牌点相邻，且不能与对方中立牌点相同',
        'mt_cond_same_r': '同点限定（组成条子）：援牌与双方中立牌点相同',
        'mt_attribution': '中立牌归属：我方中立牌多于对方的一路，此路中立牌全部算入我方牌面',
        'mt_t_surround': '围牌',
        'mt_s6_desc': '最后啦！我们来了解围牌：<br><br>围牌的作用是包围对方中立牌，从而俘虏对方中立牌，直接加入我方场上<br><br>快去试试看吧',
        'mt_sur_status': '对局开始！请尝试打出与中立区有相邻/相同点的牌来触发援牌和围牌',
        'mt_t_rein_sur': '援牌 & 围牌',
        'mt_s6i_rein': '援牌：当玩家回合打出的牌点，在<span style="color: #60a5fa; font-weight: bold;">己方中立区</span>有相邻/相同点时，根据<span style="color: #10b981; font-weight: bold;">"限定条件"</span>触发援牌操作',
        'mt_s6i_sur': '围牌：当玩家回合打出的牌点，在<span style="color: #f87171; font-weight: bold;">对方中立区</span>有相邻/相同点时，同样根据<span style="color: #10b981; font-weight: bold;">"限定条件"</span>触发围牌操作',
        'mt_cond_adj_s': '相邻点限定（组成顺子）：围牌与对方中立牌点相邻，且不能与我方中立牌点相同',
        'mt_cond_same_s': '同点限定（组成条子）：围牌与双方中立牌点相同',
        'mt_t_drag_crash': '拖牌 & 撞牌',
        'mt_s3i_drag': '拖牌：当玩家回合打出的牌点，在对路有<span style="color: #fbbf24; font-weight: bold;">相邻牌点</span>时，就可以触发拖牌操作',
        'mt_s3i_crash': '撞牌：当玩家回合打出的牌点，在对路有<span style="color: #fbbf24; font-weight: bold;">相同牌点</span>时，就可以触发撞牌操作（撞牌后，同一路其余牌全部消失）',
        'mt_crash_status': '对局开始！请尝试打出与对路相同牌点的卡牌来触发撞牌',
        'mt_final_title': '恭喜你掌握游戏所有玩法！快去人机模式体验一下吧~',
        't1_exp_title': '实战体验',
        't1_win_way': '获胜方式：',
        't1_win_roads': '五路全胜',
        't1_win_roads_desc': '：五条路全部拼点获胜',
        't1_win_hand': '牌面获胜',
        't1_win_hand_desc': '：双方无法出牌时，比较最大牌型',
        't1_free_play': '自由出牌，体验简化游戏流程！',
        't1_settle_title': '实战结算',
        't1_area_title': '游戏区域介绍',
        't1_area_battlefield': '状态栏：显示当前游戏状态和提示信息',
        't1_area_divider': '拼点栏：显示每路拼点结果，蓝色✓表示我方获胜，红色×表示对方获胜，灰色-表示双方平局',
        't1_area_road': '场上（路牌区）：每回合出牌的位置，一共存在五路，没有牌的位置称为空位',
        't1_area_hand': '手牌区：一共6张手牌，手牌只能按照从左到右的顺序，在场上的空位处打出',
        't1_area_points': '牌点大小：本游戏A点=1点 | 2=2点 | 3=3点 | 4=4点 ... | 10=10点 | J=11点 | Q=12点 | K=13点',
        't1_area_deck': '牌堆区：双方玩家平均分得26张，没有大小王；牌堆和手牌一样，只能按照从左到右的顺序，在场上空位处打出。',
        'fcz_hand': '手牌',
        'fcz_hand_desc': '6张，仅己方可见，点击即打出\n（只能按路牌区从左到右的空位顺序打出）',
        'fcz_deck': '牌堆',
        'fcz_deck_desc': '初始26张，双方不可见，点击即抽牌打出\n（抽取的牌只能按路牌区从左到右的空位顺序打出）',
        'fcz_revealed': '明牌',
        'fcz_revealed_desc': '3张，双方可见，点击选择一路空位打出或叠加打出\n（可空位顺序打出，也可在已有牌的路后叠加打出）',
        'fcz_dark': '暗牌',
        'fcz_dark_desc': '5张，双方不可见，点击选择一路叠加打出\n（只能在已有牌的路后叠加打出）',
        'tut_settle_player_5win': '我方达成五路全胜！',
        'tut_settle_opp_5win': '对方达成五路全胜！',
        'tut_settle_no5win': '双方未达成五路全胜，结算牌型大小',
        'tut_settle_my_type': '我方牌型：',
        'tut_settle_opp_type': '对方牌型：',
        'tut_settle_my_face_win': '我方牌面获胜！',
        'tut_settle_opp_face_win': '对方牌面获胜！',
        'tut_settle_my_higher': '我方牌面更大！',
        'tut_settle_opp_higher': '对方牌面更大！',
        'tut_settle_my_game_win': '我方游戏获胜！',
        'tut_settle_opp_game_win': '对方游戏获胜！',
        'tut_settle_draw': '平局！',
        'mtut_match_ops': '匹配操作',
        'mtut_drag': '拖牌',
        'mtut_crash': '撞牌',
        'mtut_neutral': '中立区',
        'mtut_reinforce': '援牌',
        'mtut_surround': '围牌',
        'mtut_done': '完成',

        'type_single': '单张',

        'type_3straight': '3连顺',

        'type_pair': '对子',

        'type_5straight': '5连顺',

        'type_three': '三条',

        'type_3pair': '3连对',

        'type_3double': '对3条',

        'type_four': '四条',

        'type_5pair': '5连对',

        'type_adjacent3': '邻三条',

        'type_straight3': '3条顺',

        'type_t3straight': '花牌3条顺',

        'score_bar_title': '积分栏',

        'hand_single_zh': '单张: {n}',

        'hand_count_zh': '张牌',

        'hand_none_detail': '无卡牌',

        'ph_nickname': '请输入昵称',

        'ph_password': '请输入密码',

        'ph_room_name': '留空则用默认名称',

        'ph_room_pwd': '留空则无密码',

        'ph_room_search': '查找房间ID',

        'alt_avatar': '头像',

        'alt_crop': '裁剪预览',

        'title_bgm': 'BGM音量',

        'title_game_settings': '游戏设定',

        'confirm_title': '确认操作',

        'pwd_title': '房间密码',

        'cr_title': '自定义房间',

        'cr_room_name': '房间名称',

        'cr_room_pwd': '房间密码',

        'cr_match': '对局',

        'cr_two': '双人',

        'cr_four': '四人',

        'cr_callcard': '叫牌',

        'cr_on': '开启',

        'cr_off': '关闭',

        'cr_deck': '牌库',

        'cr_first': '先手',

        'cr_random': '随机',

        'cr_blue': '蓝方',

        'cr_red': '红方',

        'cr_ambush': '伏牌',

        'cr_flag': '旗牌·统牌',

        'cr_cancel': '取消',

        'cr_create': '创建房间',

        'lobby_title': '玩家大厅',
        'lobby_refresh': '刷新',
        'rp_sweep': '全胜',

        'ri_title': '房间',

        'ri_blue': '蓝方',

        'ri_red': '红方',

        'ri_invite_title': '邀请好友进房',

        'lobby_loading': '正在加载房间列表...',

        'nick_title_edit': '编辑昵称',

        'nick_cancel': '取消',

        'nick_save': '保存',

        'nick_avatar': '选择头像',

        'nick_upload': '点击 + 上传自定义头像',

        'nick_done': '完成',

        'nick_crop': '裁剪头像',

        'nick_zoom_out': '缩小',

        'nick_zoom_in': '放大',

        'nick_apply': '应用',

        'nick_default': '玩家',

        'team_label': '组队',

        'team_leave': '退出队伍',

        'ss_title': '服务器状态',

        'ss_online': '在线玩家',

        'ss_rooms': '对局房间',

        'ss_queue': '匹配队列',

        'ss_mem': '内存占用',

        'ss_uptime': '运行时间',

        'ss_latency': '我的延迟',

        'term_t3straight': '花牌3条顺',

        'term_straight3': '3条顺',

        'term_adjacent3': '邻三条',

        'term_four': '四条',

        'term_pair5': '5连对',

        'term_double3': '对3条',

        'term_3consec_pair': '3连对',

        'term_3straight': '3连顺',

        'term_pair3': '3连对',

        'term_triple': '三条',

        'term_straight5': '5连顺',

        'term_straight3b': '3连顺',

        'term_pair': '对子',

        'term_highcard': '单张',

        'term_none': '无',

        'term_no_card': '无卡牌',

        'opp_hand_type': '对方牌型：',

        'my_hand_type': '我方牌型：',

        'turn_init': '回合 1 - 我方',

        'turn_record': '回合记录',

        'turn_no_record': '暂无回合记录',

        'turn_record_hint': '游戏开始后将自动记录',

        'deck_stat': '牌库统计',

        'deck_played': '已打出:',

        'deck_remain': '剩余:',

        'deck_done': '完成:',

        'deck_group': '组',

        'game_ready': '游戏准备就绪',

        'score_win': '获胜路数',

        'score_neutral': '中立牌路数',

        'score_hand': '有效牌型得分',

        'score_total': '总分',

        'opp_neutral': '对方中立区',

        'my_neutral': '我方中立区',

        'opp_deck': '对方牌堆',

        'my_deck': '我方牌堆',

        'game_title': '临阵伐谋 - 扑克牌列阵对决',

        'anim_drag': '拖牌动画',

        'anim_crash': '撞牌动画',

        'anim_support': '援牌动画',

        'anim_surround': '围牌动画',

        'anim_deal': '发牌动画',

        'set_enable': '启用',

        'set_disable': '禁用',

        'rule_title': '📜 游戏规则',
        'rule_settings_title': '🧠 游戏设定',

        'rule_win': '胜负判定',

        'rule_point': '拼点规则',

        'rule_card_value': '卡牌值系统',

        'rule_hand_rank': '牌型大小（战略胜利时比较）',

        'rule_zone': '区域规则',

        'rule_play': '出牌规则',

        'rule_match': '匹配操作规则',

        'rule_call_card': '叫牌',

        'rule_animation': '动画效果',

        'rule_buttons': '按钮',

        'rule_panels': '栏目',

        'rule_rank': '排名',

        'rule_hand_type': '牌型',

        'rule_example': '示例',

        'flow_has_match': '↙ 有匹配',

        'flow_no_match': '↘ 无匹配',

        'tutor_flow': '🎯 游戏流程',

        'tutor_match': '🎴 匹配类型',

        'tutor_win': '🏆 胜利条件',

        'tutor_anim': '🎨 动画系统',

        'btn_start': '开始游戏',

        'btn_exit_practice': '退出练习',

        'match_timer': '对局时间',

        'st_my_turn': '我方回合',

        'st_opp_turn': '对方回合',

        'st_wait_opp': '等待对方出牌...',

        'st_bid_mismatch': '叫牌 {b} 与实际点数 {v} 不匹配！',

        'st_bid_success_30': '叫牌成功！点数 {v}，牌型分 +30',
        'st_bid_success_bonus': '叫牌成功！点数 {v}，奖励 +{b} 点',

        'st_both_ready_leader_start': '双方都已准备，点击开始游戏！',

        'st_both_ready_wait': '等待对方准备...',

        'st_both_seated_required': '需要双方都就座才能开始',

        'st_both_seated_to_start': '双方就座后即可开始游戏',

        'st_click_drag_clash': '可拖牌/撞牌！点击对路目标牌',

        'st_click_match_or_cancel': '有匹配操作可选！点击目标或取消',

        'st_click_support_encircle': '可援牌/围牌！点击中立区牌',

        'st_deck_send_fail_single': '牌组同步失败，请重新开始',

        'st_game_start_play': '游戏开始，我方先出牌！',

        'st_input_correct_points': '叫牌点数正确！',

        'st_input_points': '请输入 {n} 位叫牌点数',

        'st_lane_n': '第 {n} 路',

        'st_neutral_full_block': '中立区已满，无法{a}！',

        'st_neutral_full_cancel': '对方{a}已取消（中立区已满）',

        'st_neutral_slot_full_encircle': '目标路牌数将超上限，无法围牌！',

        'st_neutral_slot_full_support': '该路中立牌已满（4张），无法援牌！',
        'st_neutral_slot_full_surround': '对方中立牌已满（4张），无法围牌！',

        'st_offline_retry': '网络异常，正在重试...',

        'st_opp_clash': '对方打出 {o} 撞我方 {m}，第 {n} 路清空！',

        'st_opp_drag': '对方打出 {o} 拖走我方 {m}，移入中立区',

        'st_select_seat': '请先选择座位',

        'st_teammate_offline': '队友已离线',

        'st_wait_leader_restart': '等待队长重新开始游戏...',

        'st_wait_leader_start': '等待队长开始游戏...',

        'st_win_surrender': '对方投降，我方获胜！',

        'st_lose_surrender': '我方投降，对方获胜！',

        'st_win_opp_left': '对手离开，我方获胜！',

        'st_opp_stopped': '对方无法出牌，已终止出牌！',

        'st_my_five_win': '🎉 恭喜！我方五路全胜！',

        'st_opp_five_win': '😢 遗憾！对方五路全胜！',

        'st_my_hand_win': '🎉 恭喜！我方牌面获胜！',

        'st_opp_hand_win': '😢 遗憾！对方牌面获胜！',

        'st_draw': '⚔️ 平局！双方牌面完全相同',

        'st_cant_place': '请先处理卡牌匹配操作，或点击其他区域取消！',

        'st_neutral_full': '中立区无空位，请取消操作',

        'st_call_wait': '等待叫牌决策中，无法切换设置',

        'st_call_limit': '叫牌数量超过限制',

        'st_call_input_n': '请输入 {n} 个牌点',

        'st_call_input_ok': '请输入正确牌点',

        'st_call_success': '叫牌成功! 翻开 {v}，+{p}分',

        'st_call_success30': '叫牌成功! 翻开 {v}，牌型得分+30',

        'st_call_fail': '叫牌 {b} 点，实际为 {v}，不匹配',

        'st_opp_play_road': '对方在第{n}路打出{c}',

        'st_opp_play_stack': '对方打出{c}叠加到第{n}路',

        'st_my_play_road': '打出{c}到场牌区第{n}路',

        'st_my_play_stack': '打出{c}叠加到第{n}路',

        'st_sub_stopped': '{n}无法出牌，已终止！',

        'st_sub_stopped_suffix': '无法出牌，已终止！',

        'ot_connecting': '正在连接服务器...',

        'ot_connected': '已连接服务器',

        'ot_disconnected': '与服务器的连接已断开',

        'ot_network_err': '网络连接断开！请检查网络',

        'ot_connect_err': '连接服务器出错',

        'ot_connect_fail': '连接失败: {msg}',

        'ot_team_exit_first': '你已有队友，请先退出当前队伍',

        'ot_not_online': '{n} 不在线',

        'ot_already_team': '你们已经是队友了',

        'ot_added_friend': '已添加好友: {n}',

        'ot_team_inviting': '正在发送组队邀请...',

        'ot_2v2_inviting': '正在邀请队员加入人机2v1...',

        'ot_practice_room_created': '练习房间已创建！你是{k}',

        'ot_practice_exit': '{n} 已退出练习',

        'ot_cannot_accept_team': '你已有队友，无法接受新的组队邀请',

        'ot_opponent_left': '对手已离开',

        'rule_tactical_win': '战术胜利：率先赢得5路的一方，游戏结束，获得胜利',

        'rule_strategic_win': '战略胜利：双方都无法出牌时，比较双方场上所有牌的最大牌型',

        'rule_all_cards': '  - 场上所有牌包括：场牌、叠牌、中立区归属卡牌',

        'rule_neutral_claim': '  - 中立区归属：某路中立区卡牌数量多的一方获得该路所有卡牌',

        'rule_same_hand_type': '  - 双方最大牌型相同时，比较最大牌型中的最大牌点',

        'rule_still_draw': '  - 还是相同时，双方平局',

        'rule_point_compare': '每路比较双方的最大牌点（场牌和叠牌中的最大值）',

        'rule_point_higher': '点数大的一方赢得该路',

        'rule_point_tie': '点数相等时，该路为平局',

        'rule_point_auto': '每次放置卡牌后自动进行拼点判定',

        'rule_card_values': '3=3点 | 4=4点 ... | 10=10点 | J=11点 | Q=12点 | K=13点 | A=1点 | 2=2点',

        'rule_ak_adjacent': 'A和K是相邻关系（A可拖K，K可拖A）',

        'rule_zone_road': '路牌区：游戏界面中央区域，从左到右分为5条路，在此区域放置的牌统称为：路牌',

        'rule_zone_order': '  - （我方路牌按照从上到下顺序排列，对方路牌则是从下到上顺序排列）',

        'rule_field_stack': '  - （每条路排序第一的路牌，另称为场牌，其他排序的路牌，另称为叠牌）',

        'rule_lane_max': '  - （每条路≥9张牌时，无法在此路再打出牌）',

        'rule_zone_neutral': '中立区：界面中央右侧区域，分为7条路，在此区域放置的牌统称为：中立牌',

        'rule_neutral_max': '  - （每条路双方各自最多放置4张中立牌）',

        'rule_neutral_claim_detail': '  - （每条路的中立牌数量多于对方时，那一条路的双方中立牌，全部算入己方牌面，参与牌型组合）',

        'rule_play_play': '出牌：双方每回合必须选择一种功能牌打出，完成放置后，自动转入对方回合。',

        'rule_play_match_note': '  - （打出的功能牌算作放置，但在触发匹配操作时，只有取消/执行匹配操作后，才算作放置）',

        'rule_play_recalc': '  - （打出的功能牌无论放置在哪，都在本回合其打出的那一路重新计算拼点）',

        'rule_hand': '手牌：6张，仅己方可见，点击即打出',

        'rule_hand_order': '  - （手牌只能按照路牌区从左到右的空位顺序打出）',

        'rule_deck': '牌堆：初始26张，双方不可见，点击即抽牌打出',

        'rule_deck_order': '  - （从牌堆抽取的牌只能按照路牌区从左到右的空位顺序打出）',

        'rule_revealed': '明牌：3张，双方可见，点击选择一路空位打出或叠加打出',

        'rule_revealed_stack': '  - （明牌可以选择路牌区从左到右的空位顺序打出，也可以选择在已有牌的路后叠加打出）',

        'rule_dark': '暗牌：5张，双方不可见，点击选择一路叠加打出',

        'rule_dark_stack': '  - （暗牌只能在已有牌的路后叠加打出）',

        'rule_stop_play': '终止出牌：在己方回合可选择终止出牌',

        'rule_stop_condition': '  - 条件：没有可打出的牌',

        'rule_stop_effect': '  - 效果：终止后轮到对方出牌，双方都终止时按战略胜利判定',

        'rule_drag': '拖牌：拖取对路的相邻牌点',

        'rule_drag_cond': '条件：刚打出的牌点与对路牌点相邻（差1），A与K相邻',

        'rule_drag_effect': '效果：双方匹配的那两张牌点都移入各自的中立区',

        'rule_drag_example': '示例：打出6拖7、打出J拖Q、打出A拖K、打出K拖A',

        'rule_crash': '撞牌：与对路的相同牌点对撞',

        'rule_crash_cond': '条件：刚打出的牌点与对路牌点相同',

        'rule_crash_effect': '效果：双方匹配的那两张牌点都移入各自的中立区，该路剩余所有卡牌消失',

        'rule_crash_example': '示例：打出8撞8、打出K撞K',

        'rule_support': '援牌：将打出的相邻/相同牌点移入中立区',

        'rule_support_cond1': '条件1：刚打出的牌点与我方中立牌点相邻（且那一路，对方没有其他同点的中立牌）',

        'rule_support_cond2': '条件2：刚打出的牌点与我方中立牌点相同（且那一路，对方没有其他不同点的中立牌）',

        'rule_support_effect': '效果：从路牌区去除刚打出的牌，移入我方中立区',

        'rule_support_ex1': '示例1：打出8，移入（6-7）那一路形成（6-7-8）',

        'rule_support_ex2': '示例2：打出Q，移入（Q-Q）那一路形成（Q-Q-Q）',

        'rule_surround': '围牌：用相邻/相同牌点转移中立牌',

        'rule_surround_cond1': '条件1：刚打出的牌点与对方中立牌点相邻（且那一路，我方没有其他同点的中立牌）',

        'rule_surround_cond2': '条件2：刚打出的牌点与对方中立牌点相同（且那一路，我方没有其他不同点的中立牌）',

        'rule_surround_effect': '效果：清空中立区该路双方卡牌，全部移入玩家刚打出的牌的同一路',

        'rule_surround_ex1': '示例1：打出5，转移（6-7）至5的那一路',

        'rule_surround_ex2': '示例2：打出A，转移（A-A）至A的那一路',

        'rule_btn_main': '主菜单按钮：',

        'rule_btn_entertainment': '  - 娱乐模式（btn-entertainment）：暂未开放',

        'rule_btn_online': '  - 联机模式（btn-online）：展开子菜单（单人匹配/双人匹配/自定义房间）',

        'rule_btn_practice': '  - 人机练习（btn-practice）：展开子菜单（单人1v1/人机2v1）',

        'rule_btn_tutorial': '  - 教程（btn-tutorial）：展开子菜单（拼点和牌型/功能牌/匹配操作）',

        'rule_btn_ui': 'UI按钮：',

        'rule_btn_settings': '  - 设置按钮（settings-btn）：左上角齿轮图标，弹出设置面板',

        'rule_btn_turn': '  - 回合显示按钮（turn-display-btn）：右上角回合信息，点击展开回合记录',

        'rule_btn_rules': '  - 游戏规则按钮（game-rules-btn）：左下角💡图标，弹出规则/设定面板',

        'rule_btn_friend': '  - 好友按钮（friend-btn）：头像下方，展开好友列表（联机模式）',

        'rule_btn_team': '  - 组队按钮（team-plus）：头像右侧，展开组队邀请面板（联机模式）',

        'rule_btn_server': '  - 服务器负载（server-stats-btn）：右上角，显示在线人数和服务器状态',

        'rule_btn_ctl': '游戏控制按钮：',

        'rule_btn_start_ctl': '  - 开始游戏（start-game）：启动游戏',

        'rule_btn_stop_ctl': '  - 终止出牌（stop-playing）：结束当前回合',

        'rule_btn_exit_ctl': '  - 退出练习（restart-game）：退出当前练习模式',

        'rule_btn_settings_panel': '设置面板按钮：',

        'rule_btn_close_settings': '  - 关闭设置（close-settings-btn）：关闭设置面板',

        'rule_btn_fullscreen': '  - 全屏切换（fullscreen-btn）：切换全屏/窗口模式',

        'rule_btn_cardface': '  - 卡面选择（cardface-normal/glass/metal-btn）：切换卡面风格（经典/玻璃/金属）',

        'rule_btn_bg_style': '  - 风格背景（style-bg-btn）：切换游戏背景主题（星空战场/魔法森林/机械科技）',

        'rule_btn_ai_tactical': '  - AI战术开关（ai-tactical-on/off-btn）：开启/关闭AI战术策略',

        'rule_btn_ai_strategic': '  - AI战略开关（ai-strategic-on/off-btn）：开启/关闭AI战略策略',

        'rule_btn_first': '  - 先手选择（first-random/player/opponent-btn）：随机/我方/对方先手',

        'rule_btn_callcard': '  - 叫牌开关（call-card-on/off-btn）：开启/关闭叫牌功能',

        'rule_btn_panel': '面板按钮：',

        'rule_btn_close_rules': '  - 关闭规则按钮（close-game-rules-btn）：规则面板关闭',

        'rule_btn_toggle': '  - 切换设定按钮（toggle-settings-btn）：规则界面显示🧠，设定界面显示📋',

        'rule_panel_status': '状态栏：',

        'rule_status_pos': '  - 位置：中央对战区域顶部（紫色面板）',

        'rule_status_func': '  - 功能：播报游戏操作信息，提示当前游戏状态',

        'rule_status_content': '  - 信息内容：',

        'rule_status_ready': '    • 准备阶段：游戏准备就绪，请点击开始游戏',

        'rule_status_deal': '    • 发牌阶段：正在发牌...',

        'rule_status_turn': '    • 回合开始：游戏开始！我方回合/对方回合',

        'rule_status_stop': '    • 终止出牌：我方终止出牌，轮到对方回合',

        'rule_panel_hand': '牌型栏：',

        'rule_hand_pos': '  - 位置：游戏界面左侧中央面板',

        'rule_hand_top': '  - 上方：对方牌型（红色标题）',

        'rule_hand_bot': '  - 下方：我方牌型（蓝色标题）',

        'rule_hand_show': '  - 显示：牌型名称和详情',

        'rule_panel_score': '积分栏：',

        'rule_score_pos': '  - 位置：左侧中央面板，对方牌型与我方牌型之间',

        'rule_score_content': '  - 内容：从上到下显示各种牌型及其对应分数',

        'rule_score_high': '  - 高分牌型（3条顺、5连对、四条、对三条）显示在上部',

        'rule_score_low': '  - 低分牌型（3连顺、对子、单张）显示在下部',

        'rule_score_my': '  - 左侧蓝色括号：标记我方当前牌型所在行',

        'rule_score_opp': '  - 右侧红色括号：标记对方当前牌型所在行',

        'rule_score_highlight': '  - 动态高亮：双方牌型一致时，整行显示蓝红渐变背景',

        'rule_panel_point': '拼点栏：',

        'rule_pointbar_pos': '  - 位置：中央对战区域分隔线处',

        'rule_pointbar_content': '  - 内容：五个金色方格，显示每路拼点结果',

        'rule_pointbar_my': '  - 蓝色✓：我方获胜',

        'rule_pointbar_opp': '  - 红色×：对方获胜',

        'rule_pointbar_pending': '  - 灰色-：双方有牌未分胜负',

        'rule_pointbar_empty': '  - 空格：该路无牌',

        'rule_anim_toggle': '动画开关（ColumnVisibilityConfig）：',

        'rule_anim_pos': '  - 位置：设置面板内，可通过localStorage持久化保存',

        'rule_anim_drag': '  - 拖牌动画（drag-animation）：开启/关闭拖牌匹配动画',

        'rule_anim_crash': '  - 撞牌动画（crash-animation）：开启/关闭撞牌匹配动画',

        'rule_anim_support': '  - 援牌动画（support-animation）：开启/关闭援牌匹配动画',

        'rule_anim_surround': '  - 围牌动画（surround-animation）：开启/关闭围牌匹配动画',

        'rule_anim_deal': '  - 发牌动画（deal-animation）：开启/关闭发牌动画',

        'rule_call_trigger': '触发条件：',

        'rule_call_trigger_detail': '  - 叫牌开关开启时，玩家打出暗牌或牌堆放路牌区后触发',

        'rule_call_prompt': '  - 卡牌保持背面，下方弹出&quot;叫牌&quot;提示',

        'rule_call_rule': '叫牌规则：',

        'rule_call_rule_detail': '  - 叫牌的点数与实际暗牌/牌堆翻开显示的点数一致时，为总分永久添加对应分数',

        'rule_call_limit': '  - 叫牌成功才增加叫牌输入数量，输入数量最多5个',

        'rule_call_reward': '成功奖励与功能变化：',

        'rule_call_r1': '  - 第1次成功：+150分，+1次叫牌数量（下次需输入2个牌点）',

        'rule_call_r2': '  - 第2次成功：+120分，+1次叫牌数量（下次需输入3个牌点）',

        'rule_call_r3': '  - 第3次成功：+100分，+1次叫牌数量（下次需输入4个牌点）',

        'rule_call_r4': '  - 第4次成功：+90分，+1次叫牌数量（下次需输入5个牌点）',

        'rule_call_r5': '  - 第5次成功：+80分，叫牌数量已达上限（保持5个）',

        'rule_call_r6plus': '  - 第6次及以后：不增加叫牌数量，每次有效牌型永久+30分',

        'rule_call_special': '特殊效果：',

        'rule_call_gold_total': '  - 叫牌成功后总分变为金色显示',

        'rule_call_gold_hand': '  - 牌型加分后牌型得分也变为金色显示',

        'rule_drag_label': '拖牌：',

        'rule_drag_text': '拖取对路的相邻牌点',

        'rule_crash_label': '撞牌：',

        'rule_crash_text': '与对路的相同牌点对撞',

        'rule_support_label': '援牌：',

        'rule_support_text': '将打出的相邻/相同牌点移入中立区',

        'rule_surround_label': '围牌：',

        'rule_surround_text': '用相邻/相同牌点转移中立牌',

        'rule_zone_road_label': '路牌区：',

        'rule_zone_neutral_label': '中立区：',

        'rule_play_play_label': '出牌：',

        'rule_hand_label': '手牌：',

        'rule_deck_label': '牌堆：',

        'rule_revealed_label': '明牌：',

        'rule_dark_label': '暗牌：',

        'rule_stop_play_label': '终止出牌：',

        'btn_dynamic': '动态',

        'btn_static': '静态',

        'btn_bg': '背景',

        'btn_close': '关闭',

        'turn_round_n': '回合 {n}',

        'turn_label': '回合 {n} - {side}',

        'me': '我方',

        'opp': '对方',

        'player_x': '玩家{n}',

        'ai_a': '人机A',

        'player_a': '玩家A',

        'ai_b': '人机B',

        'player_b': '玩家B',

        'unknown': '未知',

        'act_play': '出牌',

        'act_drag': '拖牌',

        'act_clash': '撞牌',

        'act_support': '援牌',

        'act_encircle': '围牌',

        'act_stop': '终止出牌',

        'act_win': '胜利',

        'no_detail_log': '暂无详细日志',

        'st_deal': '正在发牌...',

        'st_sync': '正在同步游戏数据，请稍候...',

        'st_opp_played_c': '对方执行{act}！对牌{opp_c}和我对{me_c}移入中立区',

        'st_opp_played_clear': '对方执行撞牌！对牌{opp_c}和我对{me_c}移入中立区，第{n}路清空',

        'st_opp_encircle': '对方执行围牌！中立区第{n}路{cnt}张牌移到对方第{road}路',

        'st_cancel_place': '放置已取消，您可以再次选择卡牌',

        'st_prompt_match': '发现路牌区匹配和中立区匹配！点击金色光环卡牌执行操作，或点击其他区域取消',

        'st_prompt_drag_clash': '点击金色光环卡牌执行拖牌/撞牌，或点击其他区域取消',

        'st_prompt_surround': '点击金色光环执行援牌/围牌，或点击其他区域取消',

        'st_lane_win': '第{n}路我方获胜！',

        'st_lane_lose': '第{n}路对方获胜！',

        'st_lane_draw': '第{n}路平局！',
        'st_drag_success': '拖牌成功！对方{opp}和我方{me}移入中立区',
        'st_clash_success': '撞牌成功！对方{opp}和我方{me}移入中立区，第{n}路清空',
        'st_support_success': '援牌！{card} 移入中立区第{n}路（共{cnt}张）',
        'st_encircle_success': '围牌！中立区第{n}路{cnt}张卡牌转移至第{road}路',
        'st_teammate_drag': '队友执行拖牌！队友{me}和对方{opp}移入中立区',
        'st_teammate_clash': '队友执行撞牌！队友{me}和对方{opp}移入中立区，第{n}路清空',
        'st_teammate_encircle': '队友执行围牌！中立区第{n}路{cnt}张牌转移到第{road}路',
        'st_teammate_support': '队友执行援牌！队友{card}移入中立区第{n}路',
        'st_in_development': '开发中，敬请期待！',

        'st_lane_result': '第{n}路：{detail}',

        'st_field_full': '场牌区已满!',

        'st_no_place': '没有可用的放置位置!',

        'st_no_stack': '没有可用的叠牌位置!',

        'st_no_card': '牌堆没有牌了!',

        'st_neutral_full_drag': '中立区无空位，无法执行拖牌',

        'st_neutral_full_clash': '中立区无空位，无法执行撞牌',

        'st_neutral_full_support': '中立区此路已满，无法执行援牌',

        'st_neutral_full_encircle': '中立区此路已满，无法执行围牌',

        'st_my_stopped': '我方无法出牌，已终止出牌！',

        'st_prompt_continue': '存在可打出的牌，请继续出牌！',

        'st_my_stop': '我方终止出牌！',

        'st_start_practice': '对局开始！请点击手牌或牌堆出牌',

        'st_start_practice_drag': '对局开始！请尝试打出与对路相邻牌点的卡牌来触发拖牌',

        'st_start_practice_support': '对局开始！请尝试打出与己方中立区有相邻/相同点的牌来触发援牌',

        'st_start_practice_surround': '对局开始！请尝试打出与中立区有相邻/相同点的牌来触发援牌和围牌',

        'st_start_practice_clash': '对局开始！请尝试打出与对路相同牌点的卡牌来触发撞牌',

        'st_tutorial_done': '功能牌教程结束',

        'st_match_tutorial_done': '匹配操作教程结束',

        'st_game_error': '游戏出错，请重新开始',

        'st_game_start_fail': '游戏启动失败，请重新开始',

        'st_game_start_turn': '游戏开始！{turn}',

        'st_wait_captain': '等待队长重新开始游戏...',

        'st_please_seat': '请双方都入座后才能开始游戏',

        'st_wait_captain_start': '等待队长开始游戏...',

        'st_picture_too_big': '图片大小不能超过2MB',

        'st_game_starting': '正在开始游戏...',

        'st_start_fail_single': '警告：无法发送牌组数据，单人模式开始',

        'st_delegate_play': '队长打出第{n}路牌,1.5秒匹配中...',

        'st_delegate_pending': '队长已打出第{n}路牌（待确认放置）',

        'st_invite_rejoin': '正在邀请 {n} 重新加入人机2v1...',

        'st_offline': '在线功能未连接，请刷新页面重试',

        'st_member_disconnect': '队员已掉线，等待重新加入...',

        'st_seat_taken': '该座位已被占用，请选择另一个座位',
        'ge_victory_title': '对局胜利！',
        'ge_defeat_title': '对局失败',
        'ge_continue_game': '留在对局',
        'ge_return_home': '返回主页',
        'ge_return_room': '返回房间',

        'ge_click_outside_hint': '点击弹窗外任意处，返回对局',
        'ge_stat_win_lanes': '胜路数',
        'ge_stat_lose_lanes': '败路数',
        'ge_stat_tie_lanes': '平局路数',
        'ge_stat_score': '总拼点',
        'ge_this_game': '本局统计',
        'ge_total_stats': '总战绩',
        'ge_total_games': '总场次',
        'ge_wins': '胜场',
        'ge_losses': '负场',
        'ge_win_rate': '胜率',
        'ge_mode_stats': '模式战绩',
        'lb_res_win': '胜',
        'lb_res_lose': '负',
        'lb_res_draw': '平',
        'lb_turns': '回合',
        'lb_wl_fmt': '(胜{w} {l}负)',

        'pp_title': '个人资料',
        'pp_stats_title': '模式战绩（胜率分开记录）',
        'pp_mode_ai_1v1': '人机 1v1',
        'pp_mode_ai_2v2': '人机 2v1',
        'pp_mode_online_1v1': '单人匹配',
        'pp_mode_online_2v2': '双人匹配',
        'pp_no_stats': '暂无战绩',
        'pp_no_replays': '暂无对局记录',
        'pp_guest_no_replay': '游客不保存对局回放',
        'pp_star_add': '星标置顶',
        'pp_star_remove': '取消星标',
        'pp_star_on': '已星标，该记录将置顶保存',
        'pp_star_off': '已取消星标',
        'pp_replay_play': '回放',
        'pp_replay_missing': '回放不存在或已被清理',
        'lb_title': '🏆 排行榜',
        'lb_entry': '排行榜',
        'lb_games': '场',
        'lb_no_data': '暂无排行数据',
        'lb_loading': '加载中…',
        'lb_fetching': '正在从服务器获取回放…',
        'pp_import_replay': '📂 导入回放文件…',
        'pp_import_short': '📂 导入回放',
        'dm_title': '开发者消息',
        'dm_empty': '暂无消息',
        'dm_pin': '置顶',
        'dm_unpin': '取消置顶',
        'dm_delete': '删除',
        'dm_del_confirm': '确认删除?',
        'dm_need_pwd': '请先点击面板底部 🔑 设置管理员密码',
        'dm_pwd_saved': '管理员密码已保存',
        'dm_pwd_wrong': '管理员密码错误',
        'dm_deleted': '已删除',
        'dm_pinned': '已置顶',
        'dm_unpinned': '已取消置顶',
        'dm_op_fail': '操作失败',
        'dm_admin_pwd': '管理员密码',
        'dm_pwd_save': '保存',
        'pp_import_invalid': '回放文件格式无效',
        'pp_import_read_fail': '读取文件失败',
        'pp_edit_nick': '修改昵称',
        'pp_close': '关闭',
        // ---- 账号系统（注册/登录） ----
        'ag_login_register': '登录 / 注册',
        'ag_logged_in': '已登录',
        'ag_account_title': '账号',
        'ag_tab_login': '登录',
        'ag_tab_register': '注册',
        'ag_account_ph': '手机号',
        'set_borderless': '无边框',
        'wm_borderless_web': '无边框窗口仅桌面版支持',
        'ag_pwd_weak': '弱',
        'ag_pwd_mid': '中',
        'ag_pwd_strong': '强',
        'ag_pwd_show': '显示密码',
        'ag_pwd_hide': '隐藏密码',
        'ag_password_ph': '密码',
        'ag_pwd_rule_ph': '密码（8-32位，含字母和数字）',
        'ag_pwd_confirm_ph': '确认密码',
        'ag_captcha_ph': '验证码',
        'ag_link_service': '《用户服务协议》',
        'ag_link_privacy': '《隐私政策》',
        'ag_remember_pwd': '记住密码',
        'ag_btn_login': '登 录',
        'ag_btn_register': '注 册',
        'ag_logout': '退出登录',
        'ag_logout_ok': '已退出登录',
        'ag_login_ok': '登录成功',
        'ag_register_ok': '注册成功',
        'ag_need_login': '请先登录账号',
        'ag_auth_changed': '检测到本浏览器其他窗口的登录状态已变更，请刷新页面',
        'ag_register_guide': '请点击左上角名称，注册个人账号',
        'ag_legal_close': '关闭',
        'ag_legal_agree': '我已阅读并同意',
        'ag_err_account': '请输入正确的11位手机号',
        'ag_err_pwd': '密码需 8-32 位且同时包含字母和数字',
        'ag_err_pwd_match': '两次输入的密码不一致',
        'ag_err_pwd_empty': '请输入密码',
        'ag_err_pwd_wrong': '密码错误',
        'ag_err_no_user': '该账号尚未注册',
        'ag_err_account_exists': '该账号已注册',
        'ag_err_captcha': '请输入图形验证码',
        'ag_err_captcha_wrong': '图形验证码错误或已过期',
        'ag_err_agree': '请先阅读并勾选《用户服务协议》和《隐私政策》',
        'ag_err_locked': '失败次数过多，请稍后再试',
        'ag_err_network': '网络异常，请重试',
        'ag_auth_expired': '登录状态已过期，请重新登录',
        'ag_auth_kicked': '账号已在其他位置登录',
        'guest_name': '游客',

        // ---- 回放播放器（2026-9-12 补充翻译）----
        'rp_title': '▶ 回放',
        'rp_exit': '退出回放',
        'rp_restart': '↻ 重播',
        'rp_back_one': '⏪ 上一步',
        'rp_play': '▶ 播放',
        'rp_pause': '⏸ 暂停',
        'rp_fwd_one': '下一步 ⏩',
        'rp_to_end': '跳到末尾',
        'rp_download': '⬇ 下载',
        'rp_err_empty': '回放数据为空',
        'rp_res_win': '胜利',
        'rp_res_lose': '失败',
        'rp_res_draw': '平局',
        'rp_score': '比分',
        'rp_points': '积分',
        'rp_review_total': '累计',
        'rp_review_pos': '局面',
        'rp_review_score': '累计评分',
        'rp_adv_blue': '蓝优',
        'rp_adv_red': '红优',
        'rp_adv_even': '均势',
        'rp_gr_win': '绝杀',
        'rp_gr_best': '正手',
        'rp_gr_good': '进攻',
        'rp_gr_avg': '普通',
        'rp_gr_mistake': '失误',
        'rp_gr_blunder': '差手',
        'rp_gr_lose': '送胜',
        'rp_desc_start': '开局（空盘）',
        'rp_desc_dealt': '发牌完成 · 手牌/明牌/暗牌已就位',
        'rp_turn_no': '第{n}回合',
        'rp_side_me': '我方',
        'rp_side_opp': '对方',
        'rp_played': '打出',
        'rp_road_n': '第{n}路',
        'rp_road_neutral': '中立区第{n}路',
        'rp_src_hand': '手牌',
        'rp_src_deck': '牌堆',
        'rp_src_revealed': '明牌',
        'rp_src_dark': '暗牌',
        'rp_mv_drag': '拖牌',
        'rp_mv_crash': '撞牌',
        'rp_mv_support': '援牌',
        'rp_mv_surround': '围牌',
        'rp_end_final': '终局',


        'st_both_seated': '双方已就座，队长可以开始游戏',

        'st_both_seated_wait': '双方已就座，等待队长开始游戏...',

        'st_please_both_seat': '请双方都选择座位后才能开始游戏',

        'st_draw_hand_identical': '平局！双方牌面相同！',

        'st_win_hand_big': '🎉 恭喜！双方牌型相同，但我方牌面更大！',

        'st_lose_hand_big': '😢 遗憾！双方牌型相同，但对方牌面更大！',

        'st_draw_all': '🤝 平局！双方牌面相同！',

        'rule_ai_t_r_3_1_place': '放置可以让此路获胜的明牌',

        'rule_ai_drag_key': '• 对对方的"关键牌点"执行拖牌',

        'rule_ai_t_h_1_4_cond': '（ai方优势路=4时，且明牌数>0时，',

        'rule_ai_s_hand': '1.0 【手牌策略】',

        'rule_ai_s_hand_1_1_desc': 'ai方放置可以组成更高牌型的手牌',

        'rule_play_play_rest': '双方每回合必须选择一种功能牌打出，完成放置后，自动转入对方回合。',

        'rule_ai_t_defend_cond': '（ai方劣势路≥3时，且路牌区空位数量≤2时，',

        'rule_ai_t_h_1_2_cond': 'ai方即将出牌的位置，其对路有牌时，',

        'rule_ai_t_bide_trans': '转入明牌3.1策略',

        'rule_ai_s_revealed': '4.0 【明牌策略】',

        'rule_ai_t_p1a': '1. ai方的路牌区存在空位时，每次出牌始终从',

        'rule_ai_effective_def': '"有效功能牌"定义：',

        'rule_zone_neutral_rest': '界面中央右侧区域，分为7条路，在此区域放置的牌统称为：中立牌',

        'rule_ai_t_r_3_1_a': 'ai方在',

        'rule_ai_sp2': '2. ai方转入战略策略后，不再需要执行战术策略',

        'rule_ai_t_r_3_1_opp_max': '对方牌点最大',

        'rule_ai_t_p5_same_stage': '同类策略X.0',

        'rule_ai_t_attack_cond': '（ai方优势路≥3时，',

        'rule_ai_tactical_title': 'AI战术',

        'rule_hand_rest': '6张，仅己方可见，点击即打出',

        'rule_ai_eff_cond3': '• 撞牌',

        'rule_ai_t_r_3_2_a': 'ai方在未获胜路，',

        'rule_ai_t_h_1_1_action': '随机放置≥8点的手牌',

        'rule_ai_s_rev_4_5_desc': 'ai方选择任意一路，放置明牌',

        'rule_ai_t_p3_next_stage': '自动转入下一阶策略',

        'rule_ai_t_bide_cond': '（ai方优势路=3时，且路牌区空位=1时，且手牌保留"花牌"时，',

        'rule_ai_t_note': '备注：',

        'rule_ai_sup_no_surround': '• 援牌，且执行援牌后，无法被对方明牌执行围牌',

        'rule_ai_s_rev_4_4_desc': 'ai方选择可以触发以下任意条件的一路，打出明牌并执行其中一项匹配操作：',

        'rule_ai_t_p2_level': '1.1、1.2、1.3...是级',

        'rule_ai_t_d_4_5_trans': '转入明牌3.8策略',

        'rule_stop_play_rest': '在己方回合可选择终止出牌',

        'rule_revealed_rest': '3张，双方可见，点击选择一路空位打出或叠加打出',

        'rule_ai_s_rev_4_3_desc': 'ai方选择自己关键牌点数量最少的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：',

        'rule_ai_t_bide': '隐忍：',

        'rule_ai_t_p4_from': '从X.1策略开始执行',

        'rule_ai_s_rev_4_2_desc': 'ai方选择对方存在最高级"关键牌点"（相同点数最少的关键牌点）的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：',

        'rule_ai_t_defend_trans': '转入明牌3.5策略',

        'rule_ai_t_p6a': '6. ai方任意一种功能牌=0时，',

        'rule_ai_t_d_2_3_cond': '（ai方劣势路=4时，',

        'rule_ai_eff_def1': '1. 在未获胜路中，选择对方最大牌点中最小的一路，放置可以让此路优势的明牌',

        'rule_ai_t_d_4_3_trans': '转入手牌1.1策略',

        'rule_ai_t_p4a': '4. ai方自动转入下一阶策略时，',

        'rule_zone_road_rest': '游戏界面中央区域，从左到右分为5条路，在此区域放置的牌统称为：路牌',

        'rule_ai_t_r_3_5_place': '放置可以让此路平势/优势的明牌',

        'rule_ai_t_d_2_4_cond': '（ai方劣势路=3时，',

        'rule_ai_eff_cond2': '• 拖走对方此路的最大牌点',

        'rule_ai_t_p5a': '5. ai方每次出牌根据',

        'rule_ai_t_principles': '【总原则】',

        'rule_ai_t_revealed': '3.0 【明牌策略】',

        'rule_ai_t_d_2_1_cond': 'ai方的路牌区有空位时，',

        'rule_ai_t_p2_stage': '1.0、2.0、3.0、4.0是阶',

        'rule_ai_eff_def4': '4. 路牌区空位数量',

        'rule_ai_s_hand_1_2_desc': 'ai方打出可以执行匹配操作的手牌，此手牌需要具备以下条件之一，否则跳过此策略：',

        'rule_ai_s_hand_1_1': '1.1：',
        'rule_ai_s_hand_1_2': '1.2：',
        'rule_ai_s_deck_2_1': '2.1：',
        'rule_ai_s_dark_3_1': '3.1：',
        'rule_ai_s_rev_4_1': '4.1：',
        'rule_ai_s_rev_4_2': '4.2：',
        'rule_ai_s_rev_4_3': '4.3：',
        'rule_ai_s_rev_4_4': '4.4：',
        'rule_ai_s_rev_4_5': '4.5：',
        'rule_ai_t_h_1_3': '1.3：',
        'rule_ai_t_h_1_4': '1.4：',
        'rule_ai_t_d_2_3': '2.3：',
        'rule_ai_t_d_2_4': '2.4：',
        'rule_ai_t_r_3_2': '3.2：',
        'rule_ai_t_r_3_3': '3.3：',
        'rule_ai_t_r_3_4': '3.4：',
        'rule_ai_t_r_3_5': '3.5：',
        'rule_ai_t_r_3_6': '3.6：',
        'rule_ai_t_r_3_7': '3.7：',
        'rule_ai_t_r_3_8': '3.8：',

        'rule_ai_eff_def3': '3. 暗牌数量',

        'rule_ai_t_r_3_3_trans': '转入暗牌4.1策略',

        'rule_ai_t_h_1_2_place': '"放置"可以让此路获胜的手牌',

        'rule_ai_t_d_4_4_opp_low': '对方最大牌点≤6',

        'rule_ai_strategic_check': '判定条件（需经过2处检测）：',

        'rule_dark_rest': '5张，双方不可见，点击选择一路叠加打出',

        'rule_ai_t_h_1_1_cond': 'ai方即将出牌的位置，其对路无牌时，',

        'rule_ai_t_h_1_3_play': '打出可以触发匹配操作的"手牌"',

        'rule_ai_t_attack': '进攻：',

        'rule_ai_strategic_principles': '【战略总原则】',

        'rule_ai_t_d_4_3_slots': '路牌区空位≥1',

        'rule_ai_crash_key': '• 对对方的"关键牌点"执行撞牌',

        'rule_ai_eff_cond1': '• 围牌增加我方此路最大牌点并获得优势',

        'rule_ai_t_d_2_4_trans': '转入暗牌4.3策略',

        'rule_ai_t_p1a_strategy': '手牌策略1.0',

        'rule_ai_strategic_trigger': '【战略触发条件】',

        'rule_ai_t_r_3_3_has_dark': '有暗牌',

        'rule_deck_rest': '初始26张，双方不可见，点击即抽牌打出',

        'rule_ai_t_p6_no_affect': '不影响转入策略',

        'rule_ai_t_p2a': '2. ai根据优先级顺序执行策略，',

        'rule_ai_t_dark': '4.0 【暗牌策略】',

        'rule_ai_t_p3a': '3. ai方当前优先级条件不满足时，',

        'rule_ai_t_d_4_4_variety': '不同牌点数量≥5',

        'rule_ai_s_dark_3_1_desc': 'ai方优先选择对方"关键牌点"数量最多/次选对方存在最高级"关键牌点"/末选自己关键牌点数量最少的一路，打出暗牌；此暗牌可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行：',

        'rule_ai_strategic_cond': '"双方都无法达成五路全胜"时，转为战略策略',

        'rule_ai_t_r_3_1_unwon': '• 第一处：ai方"有效功能牌"数量 &lt; 未获胜路数量',

        'rule_ai_t_d_4_1_play': '- 叫牌开关开启时，玩家打出暗牌或牌堆放路牌区后触发',

        'rule_ai_t_defend': '防守：',

        'rule_ai_sp1': '1. 战略策略总原则包含战术策略所有总原则',

        'rule_ai_eff_def2': '2. 在未获胜路中，打出可以执行匹配操作的明牌；此明牌需要具备以下条件之一，否则不算有效功能牌：',

        'rule_ai_s_dark': '3.0 【暗牌策略】',

        'rule_ai_s_deck_2_1_desc': 'ai方抽取牌堆打出；此牌堆可以触发匹配操作时，具备以下条件之一则执行匹配操作，没有则不执行：',

        'rule_ai_t_p3_next_level': '自动转入下一级策略',

        'rule_ai_t_p5_prev_type': '上回合打出/放置的功能牌类型',

        'rule_ai_s_deck': '2.0 【牌堆策略】',

        'rule_ai_crash_when_lower': '• 牌面小于对方时，执行撞牌',

        'rule_ai_s_rev_4_1_desc': 'ai方选择对方"关键牌点"数量最多的一路，打出明牌；此明牌需要具备以下条件之一，否则跳过此策略：'
      },
            en: {

        'game_name': 'Frontline Stratagem',

        'game_name_en': 'Frontline Stratagem',

        'game_subtitle': 'Poker Card Array Showdown',

        'menu_entertainment': 'Party Mode',

        'menu_ent_badge': 'TBD',

        'morale_kw': 'Morale',

        'morale_text': ': grows with current score at the end of each turn',

        'ent_preview_title': 'Party Mode · Preview',

        'ent_preview_desc1': 'This mode will offer battles combining Generals and Strategy Cards.',

        'ent_preview_desc2': 'Unlock achievements to obtain Generals; level up to unlock more Strategy Cards (using Strategy Cards costs game points).',

        'ent_preview_btn': 'Coming Soon',

        'ent_preview_enter': 'Try the Beta',

        'winmode_btn': 'Display Mode',

        'menu_online': 'Online',

        'menu_online_solo': 'Solo Match',

        'menu_online_2v2': '2v2 Match',

        'menu_online_custom': 'Custom Room',

        'menu_practice': 'Practice vs AI',

        'menu_practice_1v1': 'Solo 1v1',

        'menu_practice_2v1': '2v1 Practice',

        'menu_tutorial': 'Tutorial',
        'menu_entertainment_sub': 'Party Mode',
        'menu_online_sub': 'Online Mode',
        'menu_practice_sub': 'Practice vs AI',
        'menu_tutorial_sub': 'Tutorial',

        'menu_tutorial_point': 'Card Rank and Hand Types',

        'menu_tutorial_action': 'Ability Cards',

        'menu_tutorial_match': 'Response Operations',

        'lang_title': 'About / Language',

        'lang_about_title': '📖 A Little Story About "Frontline Stratagem"',

        'lang_about_p1': 'When I was a kid, I would spend whole afternoons fascinated by a pile of coins my grandpa gave me (they were not for spending). I never daydreamed about how to spend them — instead, I pictured them as toy soldiers, staging great wars in my mind.',

        'lang_about_p2': 'Other kids had plenty of toys, but my imagination was helping me build fun of my own, little by little.',

        'lang_about_p3': 'Back in school, I envied kids who owned board games like Monopoly. I had none, but I could draw. So drawing my own board games became my habit of self-entertainment.',

        'lang_about_p4': 'After starting work, the job wore away many of my hobbies and games. The emptiness and loneliness brought that old habit back to mind.',

        'lang_about_p5': 'So I picked up my brush again (the mouse) and created a Three Kingdoms warlord board game.',

        'lang_about_p6': 'After years of constant redesigns (and playtesting with my roommate), the battle part grew more polished and complex. So I split it from the original game and developed it into a brand-new one.',

        'lang_about_p7': 'And that game is Frontline Stratagem.',

        'lang_about_p8': 'Well, that is the little story — thank you for your attention. Let me close by saying: what drives me to make games is seeing my game become better, and your comments are the source of my progress.',

        'lang_about_p9a': 'If you are interested, feel free to follow me on Bilibili: ',

        'lang_select': 'Select game language',

        'lang_zh': 'Simplified Chinese',

        'lang_en': 'English',

        'lang_zh_sub': '简体中文',

        'lang_en_sub': '英文',

        'lang_btn': 'Language',

        'lang_btn_sub': '语言',

        'hk_btn': 'Hotkeys',
        'menu_quit': 'Quit Game',
        'hk_title': 'Shortcut Reference',
        'hk_g_tutorial': 'Tutorial',
        'hk_g_game': 'Match (Solo / Online)',
        'hk_g_general': 'General',
        'hk_k_right': 'Right-click',
        'hk_k_wheelup': 'Wheel up',
        'hk_k_esc': 'Esc',
        'hk_k_nums': 'Number keys',
        'hk_k_backspace': 'Backspace',
        'hk_k_alt': 'Alt key',
        'hk_k_volwheel': 'Wheel (hover volume icon)',
        'hk_k_seatright': 'Right-click (AI 2v1 seat)',
        'hk_d_exit': 'Exit tutorial',
        'hk_d_prev': 'Previous step',
        'hk_d_settings': 'Open / close settings panel',
        'hk_d_ccnum': 'Enter call value during call card',
        'hk_d_ccdel': 'Delete last digit during call card',
        'hk_d_cccancel': 'Cancel call card',
        'hk_d_self': 'Toggle this panel',
        'hk_d_vol': 'Adjust BGM volume (±5% each)',
        'hk_d_seat': 'Leave seat',

        'set_title': 'Settings',
        'comm_situ': 'Play',
        'comm_intent': 'Intent',
        'comm_feel': 'Take',

        'set_fullscreen': 'Display Mode',

        'set_windowed': 'Windowed',

        'set_full': 'Fullscreen',

        'set_resizable': 'Resizable',

        'set_sound': 'Sound FX Volume',

        'set_music': 'Music Volume',

        'set_bgm': 'BGM Volume',

        'set_voice': 'Voice Volume',

        'set_ai': 'AI Strategy',

        'set_first': 'First Move',

        'set_back': 'Card Back',

        'set_style': 'Style',

        'set_style_classic': 'Classic',

        'set_style_glass': 'Glass',

        'set_style_metal': 'Metal',
        'set_style_cartoon': 'Cartoon',

        'set_style_off': 'Off',

        'set_element': 'Element',

        'set_bg_starfield': 'Starfield',

        'set_bg_magicforest': 'Magic Forest',

        'set_bg_tech': 'Tech',

        'set_bg_anim': 'Animated',

        'set_ai_title': '[AI Capability]',

        'set_ai_fair': 'Fair',

        'set_ai_omni': 'Omniscient',
        'set_ai_prob': 'Comprehensive',

        'set_ai_lock': "Can't change AI capability during the game",

        'set_on': 'On',

        'set_off': 'Off',

        'set_first_title': '[First Move]',

        'set_first_random': 'Random',

        'set_first_mine': 'My First',

        'set_first_opponent': 'Opponent First',

        'set_callcard_title': '[Call Card]',

        'set_callcard_desc': 'Predict unknown card rank. Bonus points for success',

        'set_callcard_on': 'On',

        'set_callcard_off': 'Off',

        'set_cardback': 'Card Back',

        'set_mine': 'Mine',

        'set_opponent': 'Opponent',

        'set_columns': 'Column Management',

        'set_statusbar': 'Status Bar',

        'set_opponent_type': 'Opponent Hand',

        'set_scorebar': 'Score Bar',

        'set_my_type': 'My Hand',

        'set_pointbar': 'Point Bar',

        'set_show': 'Show',

        'set_hide': 'Hide',

        'term_drag': 'Drag',

        'term_smash': 'Smash',

        'term_reinforce': 'Reinforcements',

        'term_encircle': 'Encircle',

        'term_pointmatch': 'Point Match',

        'term_tactical_win': 'Tactical Win',

        'term_strategic_win': 'Strategic Win',

        'term_lanes': 'Lanes',

        'term_neutral': 'Neutral Zone',

        'term_field': 'Field Card',

        'term_stack': 'Stack Card',

        'term_action': 'Action Card',

        'term_open': 'Face-up',

        'term_hidden': 'Face-down',

        'term_deck': 'Deck',

        'st_ready': 'Game Ready, click Start',

        'st_win_five': 'Congrats! You won all 5 lanes!',

        'st_lose_five': 'Opponent won all 5 lanes',

        'st_win_hand': 'Congrats! Your hand won!',

        'st_lose_hand': 'Opponent hand won',

        'st_win_same_big': 'Congrats! Same hand, yours bigger!',

        'st_lose_same_big': 'Same hand, opponent bigger',

        'hand_none': 'No hand, -',

        'tut_step_word': 'Step',
        'tut_hello_title': 'Welcome to Frontline Stratagem',
        'tut_hello_content': 'Welcome to the Frontline Stratagem tutorial\n\nThis is a turn-based game blending rank battles, Texas Hold\'em and Mahjong gameplay\n\nLet\'s start with the rank battle rules',
        'tut_point_title': 'Rank Battle',
        'tut_point_content': 'A rank battle compares card points\n\nHere we give the opponent a 10-point card on Road 1\n\nPick a card from your hand (A or K) that can win the battle',
        'tut_point_win_title': 'Rank Battle Won',
        'tut_point_win_content': 'Congratulations on winning the rank battle\n\nThere are 5 roads in total\n\nNow try to win all five roads with your hand',
        'tut_deck_title': 'Deck',
        'tut_deck_content': 'The deck holds 26 hidden cards, invisible to both players\n\nClick the deck to draw a card and play it instantly\n\nDrawn cards are placed into empty roads from left to right\n\nUse the deck wisely to boost your strength',
        'tut_win_title': 'How to Win',
        'tut_win_content': 'There are two ways to win:\n\n1. Five-road sweep: win the rank battle on all five roads\n\n2. Hand victory: when both sides cannot play, the best hand type formed by all cards on the field is compared; the bigger hand wins',
        'tut_settle_title': 'Settlement',
        'tut_next_title': 'Next',
        'tut_next_content': 'You have finished the tutorial!\n\nTry the Response Operations tutorial to learn Drag, Clash, Reinforce and Surround skills\n\nOr jump straight into a battle. Enjoy the game',
        'tut_restart_btn': 'Play Again',
        'tut_btn_restart': 'Restart',
        'tut_learn_btn': 'Learn New Modes',
        'tut_type_none': 'No hand',
        'tutx_step': 'Step',
        'tutx_istep': 'Interactive Step',
        'tutx_exit': 'Exit Tutorial',
        'tutx_learn_next': 'Learn Next Tutorial',
        'tutx_end_exp': 'End Demo',
        'tutx_next': 'Next',
        'tutx_done_learn': 'Finish Learning',
        'tutx_confirm': 'OK',
        'tutx_cancel': 'Cancel',
        'tutx_practice': 'VS AI Mode',
        'tutx_demo_hint': 'Click to {action}',
        'tutx_demo_hint_card': 'Click {card} to {action}',
        'tutx_demo_none': 'No matching demo in this deal. Use "Play Again" to reshuffle.',
        'tutx_demo_btn_drag': '▶ AI Demo: Drag',
        'tutx_demo_btn_crash': '▶ AI Demo: Crash',
        'tutx_demo_btn_support': '▶ AI Demo: Support',
        'tutx_demo_btn_encircle': '▶ AI Demo: Surround',
        'tx_goback_title': 'Go Back One Step',
        'tx_goback_text': 'Go back to the previous step?',
        'tx_exit_title': 'Exit Tutorial',
        'tx_exit_hint': 'Right-click to exit (long-press on Android)',
        'tx_exit_text': 'Exit the tutorial?',
        'fc_intro_title': 'Meet the Ability Cards',
        'fc_intro_desc': 'In this tutorial, we will learn about the four Ability Cards',
        'fc_rule_title': 'Ability Card Rules',
        'fc_rule_desc': 'Hover over each zone to learn how each Ability Card is played',
        'fc_step2_title': 'Practice',
        'fc_step2_desc': 'Now practice with these Ability Cards',
        'fc_field_title': 'Field Rules',
        'fc_rule1': '1. On each road, both sides always compare their highest card value, no matter how many cards are placed',
        'fc_rule2': '2. The best hand type counts every card value each side has on the field',
        'fc_rule3': '3. When you cannot play a card onto the field, it counts as stopping play; the game ends after both sides stop',
        'fc_nav_1': 'Step 1/2 - Meet the Ability Cards',
        'fc_nav_2': 'Step 2/2 - Practice',
        'mt_s1_title': 'Response Operations',
        'mt_s1_desc': 'This covers the core gameplay: the four Response Operations<br><br>Drag and Clash, Reinforce and Surround',
        'mt_t_drag': 'Drag',
        'mt_s2_desc': 'First, Drag<br><br>Drag removes the key card values of the opponent<br><br>Give it a try',
        'mt_drag_status': 'Game on! Play a card whose value is adjacent to the opposite road to trigger Drag',
        'mt_s2i_desc': 'When the card you play has an adjacent value on the opposite road, you can trigger Drag',
        'mt_t_crash': 'Clash',
        'mt_s3_desc': 'Clash destroys both cards at once, paying a price to destroy the card value of the opponent<br><br>Give it a try',
        'mt_t_neutral': 'Neutral Zone',
        'mt_s4_desc': 'On the right is the Neutral Zone. Cards from Drag and Clash move here as neutral cards, belonging to neither side<br><br>The upcoming Reinforce and Surround can turn these neutral cards into your own cards',
        'mt_t_reinforce': 'Reinforce',
        'mt_s5_desc': 'First, Reinforce<br><br>Reinforce supports your neutral cards to gain a numerical edge, forcing the neutral cards of the opponent to surrender and join you<br><br>Now give it a try',
        'mt_rein_status': 'Game on! Play a card adjacent or equal in value to your Neutral Zone to trigger Reinforce',
        'mt_s5i_desc': 'Reinforce: when the card you play is adjacent or equal in value to your Neutral Zone, it triggers based on the <span style="color: #10b981; font-weight: bold;">"limits"</span> below',
        'mt_cond_adj_r': 'Adjacent limit (form a run): the Reinforce card is adjacent to your neutral card value and must not equal the neutral card value of the opponent',
        'mt_cond_same_r': 'Same-value limit (form a set): the Reinforce card equals the neutral card values of both sides',
        'mt_attribution': 'Neutral ownership: on any road where your neutral cards outnumber theirs, all neutral cards on that road count toward your hand',
        'mt_t_surround': 'Surround',
        'mt_s6_desc': 'Last one! Surround<br><br>Surround encircles the neutral cards of the opponent, capturing them directly onto your field<br><br>Go give it a try',
        'mt_sur_status': 'Game on! Play a card adjacent or equal in value to the Neutral Zone to trigger Reinforce and Surround',
        'mt_t_rein_sur': 'Reinforce & Surround',
        'mt_s6i_rein': 'Reinforce: when the card you play is adjacent or equal in value to the <span style="color: #60a5fa; font-weight: bold;">own Neutral Zone</span>, it triggers based on the <span style="color: #10b981; font-weight: bold;">"limits"</span> below',
        'mt_s6i_sur': 'Surround: when the card you play is adjacent or equal in value to the <span style="color: #f87171; font-weight: bold;">Neutral Zone of the opponent</span>, it also triggers based on the <span style="color: #10b981; font-weight: bold;">"limits"</span> below',
        'mt_cond_adj_s': 'Adjacent limit (form a run): the Surround card is adjacent to the neutral card value of the opponent and must not equal your own neutral card value',
        'mt_cond_same_s': 'Same-value limit (form a set): the Surround card equals the neutral card values of both sides',
        'mt_t_drag_crash': 'Drag & Clash',
        'mt_s3i_drag': 'Drag: when the card you play has an <span style="color: #fbbf24; font-weight: bold;">adjacent value</span> on the opposite road, you can trigger Drag',
        'mt_s3i_crash': 'Clash: when the card you play has the <span style="color: #fbbf24; font-weight: bold;">same value</span> on the opposite road, you can trigger Clash. After a Clash, all other cards on that road vanish',
        'mt_crash_status': 'Game on! Play a card of the same value on the opposite road to trigger Clash',
        'mt_final_title': 'You have mastered every mechanic! Go try the VS AI Mode~',
        't1_exp_title': 'Live Practice',
        't1_win_way': 'How to win:',
        't1_win_roads': 'Sweep all five roads',
        't1_win_roads_desc': ': win the battle on all five roads',
        't1_win_hand': 'Best hand wins',
        't1_win_hand_desc': ': when neither side can play, the bigger hand type wins',
        't1_free_play': 'Play freely and enjoy the simplified game flow!',
        't1_settle_title': 'Practice Settlement',
        't1_area_title': 'Game Areas',
        't1_area_battlefield': 'Status bar: shows the current game status and tips',
        't1_area_divider': 'Battle bar: shows each road result; blue = you win, red = the opponent wins, gray = draw',
        't1_area_road': 'Field (road area): where cards are played each turn; there are five roads and empty spots are called slots',
        't1_area_hand': 'Hand: 6 cards in total; play them left to right into empty slots on the field',
        't1_area_points': 'Card values: A=1 | 2=2 | 3=3 | 4=4 ... | 10=10 | J=11 | Q=12 | K=13',
        't1_area_deck': 'Deck: 26 cards split evenly, no jokers; like the hand, deck cards are played left to right into empty slots',
        'fcz_hand': 'Hand',
        'fcz_hand_desc': '6 cards, visible only to you; click to play\n(must be played left to right into empty road slots)',
        'fcz_deck': 'Deck',
        'fcz_deck_desc': '26 cards at the start, hidden from both sides; click to draw and play\n(drawn cards must be played left to right into empty road slots)',
        'fcz_revealed': 'Revealed',
        'fcz_revealed_desc': '3 cards, visible to both sides; click to play into an empty road slot or stack\n(play in slot order, or stack onto a road that already has cards)',
        'fcz_dark': 'Dark',
        'fcz_dark_desc': '5 cards, hidden from both sides; click to stack onto a road\n(can only be stacked onto roads that already have cards)',
        'tut_settle_player_5win': 'We achieved a five-road sweep!',
        'tut_settle_opp_5win': 'Opponent achieved a five-road sweep!',
        'tut_settle_no5win': 'No five-road sweep - comparing hand types',
        'tut_settle_my_type': 'Our hand: ',
        'tut_settle_opp_type': 'Opponent hand: ',
        'tut_settle_my_face_win': 'Our hand wins!',
        'tut_settle_opp_face_win': 'Opponent hand wins!',
        'tut_settle_my_higher': 'Our hand is bigger!',
        'tut_settle_opp_higher': 'Opponent hand is bigger!',
        'tut_settle_my_game_win': 'We win the game!',
        'tut_settle_opp_game_win': 'Opponent wins the game!',
        'tut_settle_draw': 'Draw!',
        'mtut_match_ops': 'Response Operations',
        'mtut_drag': 'Drag',
        'mtut_crash': 'Clash',
        'mtut_neutral': 'Neutral Zone',
        'mtut_reinforce': 'Reinforce',
        'mtut_surround': 'Surround',
        'mtut_done': 'Done',

        'type_single': 'High Card',

        'type_3straight': 'Three Straight',

        'type_pair': 'Pair',

        'type_5straight': 'Five Straight',

        'type_three': 'Three of a Kind',

        'type_3pair': 'Three Consecutive Pairs',

        'type_3double': 'Double Triple',

        'type_four': 'Four of a Kind',

        'type_5pair': 'Five Consecutive Pairs',

        'type_adjacent3': 'Adjacent Triple',

        'type_straight3': 'Straight Triple',

        'type_t3straight': 'Royal Straight Triple',

        'score_bar_title': 'Score Board',

        'btn_dynamic': 'Animated',

        'btn_static': 'Static',

        'btn_bg': 'Background',

        'btn_close': 'Off',

        'hand_single_zh': 'High Card: {n}',

        'hand_count_zh': ' cards',

        'hand_none_detail': 'No Cards',

        'ph_nickname': 'Enter nickname',

        'ph_password': 'Enter password',

        'ph_room_name': 'Leave blank for default name',

        'ph_room_pwd': 'Leave blank for no password',

        'ph_room_search': 'Search room ID',

        'alt_avatar': 'Avatar',

        'alt_crop': 'Crop preview',

        'title_bgm': 'BGM Volume',

        'title_game_settings': 'Game Settings',

        'confirm_title': 'Confirm Action',

        'pwd_title': 'Room Password',

        'cr_title': 'Custom Room',

        'cr_room_name': 'Room Name',

        'cr_room_pwd': 'Room Password',

        'cr_match': 'Match',

        'cr_two': '2 Players',

        'cr_four': '4 Players',

        'cr_callcard': 'Call Card',

        'cr_on': 'On',

        'cr_off': 'Off',

        'cr_deck': 'Deck',

        'cr_first': 'First Move',

        'cr_random': 'Random',

        'cr_blue': 'Blue',

        'cr_red': 'Red',

        'cr_ambush': 'Ambush',

        'cr_flag': 'Flag Card',

        'cr_cancel': 'Cancel',

        'cr_create': 'Create Room',

        'lobby_title': 'Player Lobby',
        'lobby_refresh': 'Refresh',
        'rp_sweep': 'Sweep',

        'ri_title': 'Room',

        'ri_blue': 'Blue Team',

        'ri_red': 'Red Team',

        'ri_invite_title': 'Invite Friends',

        'lobby_loading': 'Loading rooms...',

        'nick_title_edit': 'Edit Nickname',

        'nick_cancel': 'Cancel',

        'nick_save': 'Save',

        'nick_avatar': 'Select Avatar',

        'nick_upload': 'Click + to upload custom avatar',

        'nick_done': 'Done',

        'nick_crop': 'Crop Avatar',

        'nick_zoom_out': 'Zoom Out',

        'nick_zoom_in': 'Zoom In',

        'nick_apply': 'Apply',

        'nick_default': 'Player',

        'team_label': 'Team',

        'team_leave': 'Leave Team',

        'ss_title': 'Server Status',

        'ss_online': 'Online Players',

        'ss_rooms': 'Active Rooms',

        'ss_queue': 'Match Queue',

        'ss_mem': 'Memory',

        'ss_uptime': 'Uptime',

        'ss_latency': 'My Latency',

        'term_t3straight': 'Royal Straight Triple',

        'term_straight3': 'Straight Triple',

        'term_adjacent3': 'Adjacent Triple',

        'term_four': 'Four of a Kind',

        'term_pair5': 'Five Consecutive Pairs',

        'term_double3': 'Double Triple',

        'term_3consec_pair': 'Three Consecutive Pairs',

        'term_3straight': 'Three Straight',

        'term_pair3': 'Three Consecutive Pairs',

        'term_triple': 'Three of a Kind',

        'term_straight5': 'Five Straight',

        'term_straight3b': 'Three Straight',

        'term_pair': 'Pair',

        'term_highcard': 'High Card',

        'term_none': 'None',

        'term_no_card': 'No Cards',

        'opp_hand_type': 'Opponent Hand Type:',

        'my_hand_type': 'My Hand Type:',

        'turn_init': 'Turn 1 - My Turn',

        'turn_record': 'Turn Record',

        'turn_no_record': 'No turn records yet',

        'turn_record_hint': 'Records will appear after game starts',

        'deck_stat': 'Deck Stats',

        'deck_played': 'Played:',

        'deck_remain': 'Remaining:',

        'deck_done': 'Complete:',

        'deck_group': 'set(s)',

        'game_ready': 'Game Ready',

        'score_win': 'Won Columns',

        'score_neutral': 'Neutral Columns',

        'score_hand': 'Hand Score',

        'score_total': 'Total Score',

        'opp_neutral': 'Opponent Neutral Zone',

        'my_neutral': 'My Neutral Zone',

        'opp_deck': 'Opponent Deck',

        'my_deck': 'My Deck',

        'game_title': 'Frontline Stratagem - Poker Card Array Showdown',

        'anim_drag': 'Drag Animation',

        'anim_crash': 'Clash Animation',

        'anim_support': 'Reinforce Animation',

        'anim_surround': 'Encircle Animation',

        'anim_deal': 'Deal Animation',

        'set_enable': 'ON',

        'set_disable': 'OFF',

        'rule_title': '📜 Game Rules',
        'rule_settings_title': '🧠 Settings',

        'rule_win': 'Victory Conditions',

        'rule_point': 'Point Match Rules',

        'rule_card_value': 'Card Value System',

        'rule_hand_rank': 'Hand Rankings (Strategic Win)',

        'rule_zone': 'Zone Rules',

        'rule_play': 'Play Rules',

        'rule_match': 'Response Operations',

        'rule_call_card': 'Call Card',

        'rule_animation': 'Animation Effects',

        'rule_buttons': 'Buttons',

        'rule_panels': 'Panels',

        'rule_rank': 'Rank',

        'rule_hand_type': 'Hand Type',

        'rule_example': 'Example',

        'flow_has_match': '↙ Match Available',

        'flow_no_match': '↘ No Match',

        'tutor_flow': '🎯 Game Flow',

        'tutor_match': '🎴 Match Types',

        'tutor_win': '🏆 Win Conditions',

        'tutor_anim': '🎨 Animation System',

        'btn_start': 'Start Game',

        'btn_exit_practice': 'Exit Practice',

        'match_timer': 'Match Time',

        'st_my_turn': 'My Turn',

        'st_opp_turn': 'Opponent Turn',

        'st_wait_opp': 'Waiting for opponent...',

        'st_bid_mismatch': 'Bid {b} does not match actual value {v}!',

        'st_bid_success_30': 'Bid success! Value {v}, hand score +30',
        'st_bid_success_bonus': 'Bid success! Value {v}, bonus +{b} pts',

        'st_both_ready_leader_start': 'Both ready. Click Start Game!',

        'st_both_ready_wait': 'Waiting for opponent to ready...',

        'st_both_seated_required': 'Both players must be seated to start',

        'st_both_seated_to_start': 'Game starts when both are seated',

        'st_click_drag_clash': 'Drag/Clash available! Click a target card',

        'st_click_match_or_cancel': 'Match available! Click target or cancel',

        'st_click_support_encircle': 'Support/Encircle available! Click a neutral card',

        'st_deck_send_fail_single': 'Deck sync failed, please restart',

        'st_game_start_play': 'Game start, your turn first!',

        'st_input_correct_points': 'Bid points correct!',

        'st_input_points': 'Enter {n} digit(s) to bid',

        'st_lane_n': 'Road {n}',

        'st_neutral_full_block': 'Neutral zone full, cannot {a}!',

        'st_neutral_full_cancel': "Opponent's {a} canceled (neutral zone full)",

        'st_neutral_slot_full_encircle': 'Target road would exceed limit, cannot encircle!',

        'st_neutral_slot_full_support': 'Neutral slot full (4), cannot support!',
        'st_neutral_slot_full_surround': 'Opponent neutral slot full (4), cannot surround!',

        'st_offline_retry': 'Network error, retrying...',

        'st_opp_clash': 'Opponent played {o} clashing {m}, road {n} cleared!',

        'st_opp_drag': 'Opponent played {o} dragging {m} to neutral zone',

        'st_select_seat': 'Please select a seat first',

        'st_teammate_offline': 'Teammate offline',

        'st_wait_leader_restart': 'Waiting for leader to restart...',

        'st_wait_leader_start': 'Waiting for leader to start...',

        'st_win_surrender': 'Opponent surrendered, you win!',

        'st_lose_surrender': 'You surrendered, opponent wins!',

        'st_win_opp_left': 'Opponent left, you win!',

        'st_opp_stopped': 'Opponent cannot play, stopped!',

        'st_my_five_win': '🎉 Congratulations! I won all 5 lanes!',

        'st_opp_five_win': '😢 Sorry! Opponent won all 5 lanes!',

        'st_my_hand_win': '🎉 Congratulations! I won by hand type!',

        'st_opp_hand_win': '😢 Sorry! Opponent won by hand type!',

        'st_draw': '⚔️ Draw! Both hands are identical',

        'st_cant_place': 'Please resolve card matching first, or click elsewhere to cancel!',

        'st_neutral_full': 'Neutral zone is full, please cancel',

        'st_call_wait': 'Waiting for call card decision, cannot switch settings',

        'st_call_limit': 'Call card count exceeded limit',

        'st_call_input_n': 'Please enter {n} card rank(s)',

        'st_call_input_ok': 'Please enter correct card rank',

        'st_call_success': 'Call card success! Revealed {v}, +{p} pts',

        'st_call_success30': 'Call card success! Revealed {v}, hand score +30',

        'st_call_fail': 'Called {b}, actual {v}, no match',

        'st_opp_play_road': 'Opponent plays {c} on lane {n}',

        'st_opp_play_stack': 'Opponent stacks {c} on lane {n}',

        'st_my_play_road': 'Play {c} on lane {n}',

        'st_my_play_stack': 'Stack {c} on lane {n}',

        'st_sub_stopped': '{n} cannot play, stopped!',

        'st_sub_stopped_suffix': ' cannot play, stopped!',

        'ot_connecting': 'Connecting to server...',

        'ot_connected': 'Connected to server',

        'ot_disconnected': 'Disconnected from server',

        'ot_network_err': 'Network disconnected! Please check your connection',

        'ot_connect_err': 'Connection error',

        'ot_connect_fail': 'Connection failed: {msg}',

        'ot_team_exit_first': 'You already have a team mate, please leave first',

        'ot_not_online': '{n} is offline',

        'ot_already_team': 'You are already team mates',

        'ot_added_friend': 'Friend added: {n}',

        'ot_team_inviting': 'Sending team invite...',

        'ot_2v2_inviting': 'Inviting player to AI 2v1...',

        'ot_practice_room_created': 'Practice room created! You are {k}',

        'ot_practice_exit': '{n} left practice',

        'ot_cannot_accept_team': 'You already have a team, cannot accept',

        'ot_opponent_left': 'Opponent left',

        'rule_tactical_win': 'Tactical Victory: First to win 5 lanes wins',

        'rule_strategic_win': 'Strategic Victory: Compare best hand when neither can play',

        'rule_all_cards': '  - All cards: field, stack, claimed neutral',

        'rule_neutral_claim': '  - More neutral cards = claim all that lane',

        'rule_same_hand_type': '  - Equal hands: compare highest card point',

        'rule_still_draw': '  - Still equal = draw',

        'rule_point_compare': 'Each lane: compare max point (field + stack)',

        'rule_point_higher': 'Higher point wins',

        'rule_point_tie': 'Equal = draw',

        'rule_point_auto': 'Auto judge after each placement',

        'rule_card_values': '3=3pt|4=4pt|...|10=10pt|J=11pt|Q=12pt|K=13pt|A=1pt|2=2pt',

        'rule_ak_adjacent': 'A-K adjacent: A drags K, K drags A',

        'rule_zone_road': 'Road Zone: 5 lanes L-to-R. Cards = Road Cards',

        'rule_zone_order': '  - Our: top-down. Opp: bottom-up',

        'rule_field_stack': '  - Top = Field Card; Others = Stack Cards',

        'rule_lane_max': '  - Max 9 cards per lane',

        'rule_zone_neutral': 'Neutral Zone: 7 lanes. Cards = Neutral Cards',

        'rule_neutral_max': '  - Max 4 neutral cards per side per lane',

        'rule_neutral_claim_detail': '  - More neutrals = claim all for your hand',

        'rule_play_play': 'Play: Must play each turn. Auto switch',

        'rule_play_match_note': '  - Play = placement; resolve/cancel match ops first',

        'rule_play_recalc': '  - Point scoring recalculates on played lane',

        'rule_hand': 'Hand: 6 cards, mine only. Click to play',

        'rule_hand_order': '  - Empty lanes L-to-R only',

        'rule_deck': 'Deck: 26 hidden cards. Click to draw & play',

        'rule_deck_order': '  - Drawn: empty lanes L-to-R only',

        'rule_revealed': 'Revealed: 3 visible. Empty lane or stack',

        'rule_revealed_stack': '  - Empty L-to-R or stack on existing',

        'rule_dark': 'Dark: 5 hidden. Stack on a lane',

        'rule_dark_stack': '  - Only stack on existing cards',

        'rule_stop_play': 'Stop Play: Can stop during turn',

        'rule_stop_condition': '  - Condition: No playable cards',

        'rule_stop_effect': '  - Effect: Switch turn. Both stop = strategic win',

        'rule_drag': 'Drag: Pull adjacent rank from opp lane',

        'rule_drag_cond': 'Cond: Adjacent (diff=1). A-K adjacent',

        'rule_drag_effect': 'Effect: Both move to respective neutral',

        'rule_drag_example': 'Ex: 6 drags 7, J drags Q, A drags K, K drags A',

        'rule_crash': 'Crash: Same rank in opp lane',

        'rule_crash_cond': 'Cond: Same rank',

        'rule_crash_effect': 'Effect: Both to neutral, rest vanish',

        'rule_crash_example': 'Ex: 8 crashes 8, K crashes K',

        'rule_support': 'Support: Move to neutral zone',

        'rule_support_cond1': 'Cond1: Adjacent to our neutral (opp no same-rank there)',

        'rule_support_cond2': 'Cond2: Same as our neutral (opp no diff-rank there)',

        'rule_support_effect': 'Effect: Remove from road, move to our neutral',

        'rule_support_ex1': 'Ex1: 8 into (6-7) → (6-7-8)',

        'rule_support_ex2': 'Ex2: Q into (Q-Q) → (Q-Q-Q)',

        'rule_surround': 'Surround: Transfer neutral cards',

        'rule_surround_cond1': 'Cond1: Adjacent to opp neutral (we no same-rank there)',

        'rule_surround_cond2': 'Cond2: Same as opp neutral (we no diff-rank there)',

        'rule_surround_effect': 'Effect: Clear neutral lane, move to played lane',

        'rule_surround_ex1': 'Ex1: 5 transfers (6-7) to 5\'s lane',

        'rule_surround_ex2': 'Ex2: A transfers (A-A) to A\'s lane',

        'rule_btn_main': 'Main Menu Buttons:',

        'rule_btn_entertainment': '  - Entertainment: TBD',

        'rule_btn_online': '  - Online: Solo/Duo/Custom Room',

        'rule_btn_practice': '  - AI Practice: 1v1/AI 2v1',

        'rule_btn_tutorial': '  - Tutorial: Points/Cards/Match Ops',

        'rule_btn_ui': 'UI Buttons:',

        'rule_btn_settings': '  - Settings: Gear top-left',

        'rule_btn_turn': '  - Turn: Top-right, click for history',

        'rule_btn_rules': '  - Rules: 💡 bottom-left',

        'rule_btn_friend': '  - Friends: Below avatar',

        'rule_btn_team': '  - Team: Right of avatar',

        'rule_btn_server': '  - Server Stats: Top-right',

        'rule_btn_ctl': 'Game Control Buttons:',

        'rule_btn_start_ctl': '  - Start Game',

        'rule_btn_stop_ctl': '  - Stop Playing',

        'rule_btn_exit_ctl': '  - Exit Practice',

        'rule_drag_label': 'Drag:',

        'rule_drag_text': 'Pull adjacent rank from opposite lane',

        'rule_crash_label': 'Crash:',

        'rule_crash_text': 'Collide same rank in opposite lane',

        'rule_support_label': 'Support:',

        'rule_support_text': 'Move adjacent/same rank to neutral zone',

        'rule_surround_label': 'Surround:',

        'rule_surround_text': 'Transfer neutral cards via adjacent/same rank',

        'rule_zone_road_label': 'Road Zone:',

        'rule_zone_neutral_label': 'Neutral Zone:',

        'rule_play_play_label': 'Play:',

        'rule_hand_label': 'Hand:',

        'rule_deck_label': 'Deck:',

        'rule_revealed_label': 'Revealed:',

        'rule_dark_label': 'Dark:',

        'rule_stop_play_label': 'Stop Play:',

        'rule_btn_settings_panel': 'Settings Panel Buttons:',

        'rule_btn_close_settings': '  - Close Settings',

        'rule_btn_fullscreen': '  - Fullscreen Toggle',

        'rule_btn_cardface': '  - Card Face: Classic/Glass/Metal',

        'rule_btn_bg_style': '  - Background: Starry/Magic/Mech',

        'rule_btn_ai_tactical': '  - AI Tactical Toggle',

        'rule_btn_ai_strategic': '  - AI Strategic Toggle',

        'rule_btn_first': '  - First: Random/Self/Opp',

        'rule_btn_callcard': '  - Call Card Toggle',

        'rule_btn_panel': 'Panel Buttons:',

        'rule_btn_close_rules': '  - Close Rules',

        'rule_btn_toggle': '  - Toggle: Rules 🧠 / Settings 📋',

        'rule_panel_status': 'Status Bar:',

        'rule_status_pos': '  - Top of battle (purple)',

        'rule_status_func': '  - Broadcast game status',

        'rule_status_content': '  - Content:',

        'rule_status_ready': '    • Ready: Click Start',

        'rule_status_deal': '    • Dealing...',

        'rule_status_turn': '    • Turn: Mine / Opp',

        'rule_status_stop': '    • Stop: Opp turn',

        'rule_panel_hand': 'Hand Type Panel:',

        'rule_hand_pos': '  - Left center panel',

        'rule_hand_top': '  - Top: Opp (red)',

        'rule_hand_bot': '  - Bottom: Mine (blue)',

        'rule_hand_show': '  - Shows: Name & details',

        'rule_panel_score': 'Score Panel:',

        'rule_score_pos': '  - Between opp & mine',

        'rule_score_content': '  - All types & scores',

        'rule_score_high': '  - High scores top',

        'rule_score_low': '  - Low scores bottom',

        'rule_score_my': '  - Blue bracket: my row',

        'rule_score_opp': '  - Red bracket: opp row',

        'rule_score_highlight': '  - Gradient when same hand',

        'rule_panel_point': 'Point Panel:',

        'rule_pointbar_pos': '  - Divider line',

        'rule_pointbar_content': '  - 5 gold squares',

        'rule_pointbar_my': '  - Blue ✓: I won',

        'rule_pointbar_opp': '  - Red ×: Opp won',

        'rule_pointbar_pending': '  - Gray -: Pending',

        'rule_pointbar_empty': '  - Empty: No cards',

        'rule_anim_toggle': 'Animation Toggles:',

        'rule_anim_pos': '  - In settings, localStorage',

        'rule_anim_drag': '  - Drag Animation',

        'rule_anim_crash': '  - Crash Animation',

        'rule_anim_support': '  - Support Animation',

        'rule_anim_surround': '  - Surround Animation',

        'rule_anim_deal': '  - Deal Animation',

        'rule_call_trigger': 'Trigger:',

        'rule_call_trigger_detail': '  - Call switch on + dark/deck played',

        'rule_call_prompt': '  - Face-down, &quot;Call Card&quot; prompt',

        'rule_call_rule': 'Rules:',

        'rule_call_rule_detail': '  - Match → permanent points',

        'rule_call_limit': '  - Only success increases count. Max 5.',

        'rule_call_reward': 'Rewards:',

        'rule_call_r1': '  - 1st: +150, next=2 ranks',

        'rule_call_r2': '  - 2nd: +120, next=3 ranks',

        'rule_call_r3': '  - 3rd: +100, next=4 ranks',

        'rule_call_r4': '  - 4th: +90, next=5 ranks',

        'rule_call_r5': '  - 5th: +80, max reached',

        'rule_call_r6plus': '  - 6th+: No count increase, +30/hand',

        'rule_call_special': 'Special:',

        'rule_call_gold_total': '  - Total turns gold',

        'rule_call_gold_hand': '  - Hand score turns gold',

        'turn_round_n': 'Round {n}',

        'turn_label': 'Turn {n} - {side}',

        'me': 'Me',

        'opp': 'Opponent',

        'player_x': 'Player {n}',

        'ai_a': 'AI A',

        'player_a': 'Player A',

        'ai_b': 'AI B',

        'player_b': 'Player B',

        'unknown': 'Unknown',

        'act_play': 'Play',

        'act_drag': 'Drag',

        'act_clash': 'Clash',

        'act_support': 'Support',

        'act_encircle': 'Encircle',

        'act_stop': 'Stop Play',

        'act_win': 'Win',

        'no_detail_log': 'No detail log',

        'st_deal': 'Dealing cards...',

        'st_sync': 'Syncing game data, please wait...',

        'st_opp_played_c': 'Opponent {act}! Opponent {opp_c} and mine {me_c} moved to neutral zone',

        'st_opp_played_clear': 'Opponent Clash! Opponent {opp_c} and mine {me_c} moved to neutral, lane {n} cleared',

        'st_opp_encircle': 'Opponent Encircle! Neutral lane {n} ({cnt} cards) moved to opponent lane {road}',

        'st_cancel_place': 'Placement cancelled, you can select a card again',

        'st_prompt_match': 'Lane match and neutral match detected! Click glowing card to execute, or click elsewhere to cancel',

        'st_prompt_drag_clash': 'Click glowing card to Drag/Clash, or click elsewhere to cancel',

        'st_prompt_surround': 'Click glowing to Support/Encircle, or click elsewhere to cancel',

        'st_lane_win': 'Lane {n}: You win!',

        'st_lane_lose': 'Lane {n}: Opponent wins!',

        'st_lane_draw': 'Lane {n}: Draw!',
        'st_drag_success': 'Drag success! Opponent {opp} and mine {me} moved to neutral zone',
        'st_clash_success': 'Clash success! Opponent {opp} and mine {me} moved to neutral, lane {n} cleared',
        'st_support_success': 'Support! {card} moved to neutral lane {n} (total {cnt})',
        'st_encircle_success': 'Encircle! Neutral lane {n} ({cnt} cards) transferred to lane {road}',
        'st_teammate_drag': 'Teammate Drag! Teammate {me} and opponent {opp} moved to neutral',
        'st_teammate_clash': 'Teammate Clash! Teammate {me} and opponent {opp} moved to neutral, lane {n} cleared',
        'st_teammate_encircle': 'Teammate Encircle! Neutral lane {n} ({cnt} cards) transferred to lane {road}',
        'st_teammate_support': 'Teammate Support! Teammate {card} moved to neutral lane {n}',
        'st_in_development': 'Under development, please stay tuned!',

        'st_lane_result': 'Lane {n}: {detail}',

        'st_field_full': 'Field is full!',

        'st_no_place': 'No valid placement!',

        'st_no_stack': 'No valid stack!',

        'st_no_card': 'No cards left in deck!',

        'st_neutral_full_drag': 'Neutral zone full, cannot Drag',

        'st_neutral_full_clash': 'Neutral zone full, cannot Clash',

        'st_neutral_full_support': 'Neutral zone full here, cannot Support',

        'st_neutral_full_encircle': 'Neutral zone full here, cannot Encircle',

        'st_my_stopped': 'I cannot play, stopped!',

        'st_prompt_continue': 'You have playable cards, continue!',

        'st_my_stop': 'I stopped playing!',

        'st_start_practice': 'Game started! Click hand card or deck to play',

        'st_start_practice_drag': 'Game started! Try playing adjacent card to trigger Drag',

        'st_start_practice_support': 'Game started! Try playing adjacent/same card to trigger Support',

        'st_start_practice_surround': 'Game started! Try playing adjacent/same card to trigger Support/Encircle',

        'st_start_practice_clash': 'Game started! Try playing same card to trigger Clash',

        'st_tutorial_done': 'Card tutorial ended',

        'st_match_tutorial_done': 'Match tutorial ended',

        'st_game_error': 'Game error, please restart',

        'st_game_start_fail': 'Game start failed, please restart',

        'st_game_start_turn': 'Game Started! {turn}',

        'st_wait_captain': 'Waiting for captain to restart...',

        'st_please_seat': 'Both must be seated to start',

        'st_wait_captain_start': 'Waiting for captain to start...',

        'st_picture_too_big': 'Image must be under 2MB',

        'st_game_starting': 'Starting game...',

        'st_start_fail_single': 'Warning: cannot send deck, starting solo mode',

        'st_delegate_play': 'Captain plays lane {n}, matching in 1.5s...',

        'st_delegate_pending': 'Captain played lane {n} (pending placement)',

        'st_invite_rejoin': 'Inviting {n} to rejoin AI 2v1...',

        'st_offline': 'Online not connected, please refresh',

        'st_member_disconnect': 'Teammate disconnected, waiting for rejoin...',

        'st_seat_taken': 'Seat taken, choose another',

        'ge_victory_title': 'Victory!',
        'ge_defeat_title': 'Defeat',
        'ge_continue_game': 'Stay in Game',
        'ge_return_home': 'Back to Home',
        'ge_return_room': 'Back to Room',

        'ge_click_outside_hint': 'Click anywhere outside to return to the game',
        'ge_stat_win_lanes': 'Lanes Won',
        'ge_stat_lose_lanes': 'Lanes Lost',
        'ge_stat_tie_lanes': 'Lanes Tied',
        'ge_stat_score': 'Total Points',
        'ge_this_game': 'This Game',
        'ge_total_stats': 'Career Stats',
        'ge_total_games': 'Total Games',
        'ge_wins': 'Wins',
        'ge_losses': 'Losses',
        'ge_win_rate': 'Win Rate',
        'ge_mode_stats': 'Mode Stats',
        'lb_res_win': 'W',
        'lb_res_lose': 'L',
        'lb_res_draw': 'D',
        'lb_turns': 'turns',
        'lb_wl_fmt': '({w}W {l}L)',

        'pp_title': 'Profile',
        'pp_stats_title': 'Mode Stats (tracked separately)',
        'pp_mode_ai_1v1': 'AI 1v1',
        'pp_mode_ai_2v2': 'AI 2v1',
        'pp_mode_online_1v1': 'Solo Match',
        'pp_mode_online_2v2': '2v2 Match',
        'pp_no_stats': 'No stats yet',
        'pp_no_replays': 'No match records yet',
        'pp_guest_no_replay': 'Guests have no replay records',
        'pp_star_add': 'Pin to top',
        'pp_star_remove': 'Unpin',
        'pp_star_on': 'Pinned: this replay is kept and shown on top',
        'pp_star_off': 'Unpinned',
        'pp_replay_play': 'Play',
        'pp_replay_missing': 'Replay missing or cleaned up',
        'lb_title': '🏆 Leaderboard',
        'lb_entry': 'Leaderboard',
        'lb_games': 'games',
        'lb_no_data': 'No ranking data yet',
        'lb_loading': 'Loading…',
        'lb_fetching': 'Fetching replay from server…',
        'pp_import_replay': '📂 Import replay file…',
        'pp_import_short': '📂 Import',
        'dm_title': 'Developer Messages',
        'dm_empty': 'No messages',
        'dm_pin': 'Pin',
        'dm_unpin': 'Unpin',
        'dm_delete': 'Delete',
        'dm_del_confirm': 'Confirm?',
        'dm_need_pwd': 'Click 🔑 at panel bottom to set admin password first',
        'dm_pwd_saved': 'Admin password saved',
        'dm_pwd_wrong': 'Admin password incorrect',
        'dm_deleted': 'Deleted',
        'dm_pinned': 'Pinned',
        'dm_unpinned': 'Unpinned',
        'dm_op_fail': 'Operation failed',
        'dm_admin_pwd': 'Admin password',
        'dm_pwd_save': 'Save',
        'pp_import_invalid': 'Invalid replay file format',
        'pp_import_read_fail': 'Failed to read file',
        'pp_edit_nick': 'Edit Nickname',
        'pp_close': 'Close',
        // ---- Account system (register/login) ----
        'ag_login_register': 'Login / Register',
        'ag_logged_in': 'Logged in',
        'ag_account_title': 'Account',
        'ag_tab_login': 'Login',
        'ag_tab_register': 'Register',
        'ag_account_ph': 'Phone',
        'set_borderless': 'Borderless',
        'wm_borderless_web': 'Borderless window is desktop-only',
        'ag_pwd_weak': 'Weak',
        'ag_pwd_mid': 'Fair',
        'ag_pwd_strong': 'Strong',
        'ag_pwd_show': 'Show password',
        'ag_pwd_hide': 'Hide password',
        'ag_password_ph': 'Password',
        'ag_pwd_rule_ph': 'Password (8-32 chars, letters & digits)',
        'ag_pwd_confirm_ph': 'Confirm password',
        'ag_captcha_ph': 'CAPTCHA',
        'ag_link_service': 'Terms of Service',
        'ag_link_privacy': 'Privacy Policy',
        'ag_remember_pwd': 'Remember password',
        'ag_btn_login': 'Log In',
        'ag_btn_register': 'Register',
        'ag_logout': 'Log Out',
        'ag_logout_ok': 'Logged out',
        'ag_login_ok': 'Login successful',
        'ag_register_ok': 'Registration successful',
        'ag_need_login': 'Please log in first',
        'ag_auth_changed': 'Login state changed in another window of this browser, please refresh',
        'ag_register_guide': 'Click your name at the top-left to register an account',
        'ag_legal_close': 'Close',
        'ag_legal_agree': 'I have read and agree',
        'ag_err_account': 'Please enter a valid 11-digit phone number',
        'ag_err_pwd': 'Password must be 8-32 chars with both letters and digits',
        'ag_err_pwd_match': 'Passwords do not match',
        'ag_err_pwd_empty': 'Please enter your password',
        'ag_err_pwd_wrong': 'Incorrect password',
        'ag_err_no_user': 'This account is not registered',
        'ag_err_account_exists': 'This account is already registered',
        'ag_err_captcha': 'Please enter the CAPTCHA',
        'ag_err_captcha_wrong': 'Incorrect or expired CAPTCHA',
        'ag_err_agree': 'Please read and check both the Terms of Service and the Privacy Policy',
        'ag_err_locked': 'Too many failed attempts, please try again later',
        'ag_err_network': 'Network error, please retry',
        'ag_auth_expired': 'Session expired, please log in again',
        'ag_auth_kicked': 'Account signed in elsewhere',
        'guest_name': 'Guest',

        // ---- Replay player (added 2026-9-12) ----
        'rp_title': '▶ Replay',
        'rp_exit': 'Exit Replay',
        'rp_restart': '↻ Restart',
        'rp_back_one': '⏪ Prev',
        'rp_play': '▶ Play',
        'rp_pause': '⏸ Pause',
        'rp_fwd_one': 'Next ⏩',
        'rp_to_end': 'Jump to end',
        'rp_download': '⬇ Download',
        'rp_err_empty': 'Replay data is empty',
        'rp_res_win': 'Win',
        'rp_res_lose': 'Loss',
        'rp_res_draw': 'Draw',
        'rp_score': 'Score',
        'rp_points': 'Points',
        'rp_review_total': 'Total',
        'rp_review_pos': 'Position',
        'rp_review_score': 'Cum. Score',
        'rp_adv_blue': 'Blue +',
        'rp_adv_red': 'Red +',
        'rp_adv_even': 'Balanced',
        'rp_gr_win': 'Killer Move',
        'rp_gr_best': 'Best Move',
        'rp_gr_good': 'Good Move',
        'rp_gr_avg': 'Neutral',
        'rp_gr_mistake': 'Mistake',
        'rp_gr_blunder': 'Blunder',
        'rp_gr_lose': 'Throws Win',
        'rp_desc_start': 'Game start (empty board)',
        'rp_desc_dealt': 'Deal complete · hand/revealed/dark in place',
        'rp_turn_no': 'Turn {n}',
        'rp_side_me': 'You',
        'rp_side_opp': 'Opponent',
        'rp_played': 'played',
        'rp_road_n': 'Road {n}',
        'rp_road_neutral': 'Neutral lane {n}',
        'rp_src_hand': 'hand',
        'rp_src_deck': 'deck',
        'rp_src_revealed': 'revealed',
        'rp_src_dark': 'dark',
        'rp_mv_drag': 'Drag',
        'rp_mv_crash': 'Crash',
        'rp_mv_support': 'Support',
        'rp_mv_surround': 'Surround',
        'rp_end_final': 'Final',

        'st_both_seated': 'Both seated, captain can start',

        'st_both_seated_wait': 'Both seated, waiting for captain...',

        'st_please_both_seat': 'Both must choose seat to start',

        'st_draw_hand_identical': 'Draw! Both hands are identical!',

        'st_win_hand_big': '🎉 Same hand type, yours is bigger!',

        'st_lose_hand_big': '😢 Same hand type, opponent\'s is bigger!',

        'st_draw_all': '🤝 Draw! Both hands are identical!',

        'rule_ai_t_r_3_1_place': 'Play revealed card to win lane',

        'rule_ai_drag_key': 'Drag opponent key points',

        'rule_ai_t_h_1_4_cond': 'When AI advantage lane=4 and revealed>0:',

        'rule_ai_s_hand': '1.0 [Hand Card Strategy]',

        'rule_ai_s_hand_1_1_desc': 'Place hand card for higher type',

        'rule_play_play_rest': 'Both players must play a functional card each turn; after placement, turn switches automatically',

        'rule_ai_t_defend_cond': 'Disadvantage>=3, empty<=2,',

        'rule_ai_t_h_1_2_cond': 'When opposite has card:',

        'rule_ai_t_bide_trans': 'Switch to Revealed 3.1',

        'rule_ai_s_revealed': '4.0 [Revealed Strategy]',

        'rule_ai_t_p1a': '1. When empty road slot, always start with',

        'rule_ai_effective_def': 'Effective Card definition:',

        'rule_zone_neutral_rest': 'Right of center, 7 lanes; cards placed here are called: Neutral Cards',

        'rule_ai_t_r_3_1_a': 'AI at',

        'rule_ai_sp2': '2. No longer use tactical after strategic',

        'rule_ai_t_r_3_1_opp_max': 'Opponent max point',

        'rule_ai_t_p5_same_stage': 'same-stage strategy X.0',

        'rule_ai_t_attack_cond': 'Advantage>=3,',

        'rule_ai_tactical_title': 'AI Tactical Strategy',

        'rule_hand_rest': '6 cards, only you can see; click to play',

        'rule_ai_eff_cond3': 'Clash',

        'rule_ai_t_r_3_2_a': 'On unwon lanes,',

        'rule_ai_t_h_1_1_action': 'Randomly play hand card >= 8',

        'rule_ai_s_rev_4_5_desc': 'Play revealed on any lane',

        'rule_ai_t_p3_next_stage': 'auto switch to next stage',

        'rule_ai_t_bide_cond': 'Advantage=3, 1 empty slot, has face card',

        'rule_ai_t_note': 'Note:',

        'rule_ai_sup_no_surround': 'Support that cannot be Encircled',

        'rule_ai_s_rev_4_4_desc': 'Play on lane triggering any match:',

        'rule_ai_t_p2_level': '1.1/1.2/1.3 are sub-levels',

        'rule_ai_t_d_4_5_trans': 'Switch to Revealed 3.8',

        'rule_stop_play_rest': 'Choose to stop playing on your turn',

        'rule_revealed_rest': '3 cards, both can see; click to play to an empty lane or stack',

        'rule_ai_s_rev_4_3_desc': 'Play on lane with fewest own key points',

        'rule_ai_t_bide': 'Bide:',

        'rule_ai_t_p4_from': 'start from Strategy X.1',

        'rule_ai_s_rev_4_2_desc': 'Play on lane with highest-level opponent key points',

        'rule_ai_t_defend_trans': 'Switch to Revealed 3.5',

        'rule_ai_t_p6a': '6. When functional card = 0,',

        'rule_ai_t_d_2_3_cond': 'When disadvantage=4:',

        'rule_ai_eff_def1': '1. Place revealed card for unwon lane advantage',

        'rule_ai_t_d_4_3_trans': 'Switch to Hand 1.1',

        'rule_ai_t_p4a': '4. When auto-switching level,',

        'rule_zone_road_rest': 'Central area of game board, 5 lanes L-to-R; cards placed here are called: Road Cards',

        'rule_ai_t_r_3_5_place': 'Place revealed card to draw/gain lane',

        'rule_ai_t_d_2_4_cond': 'When disadvantage=3:',

        'rule_ai_eff_cond2': 'Drag away opponent max point',

        'rule_ai_t_p5a': '5. AI plays based on',

        'rule_ai_t_principles': '[General Principles]',

        'rule_ai_t_revealed': '3.0 [Revealed Strategy]',

        'rule_ai_t_d_2_1_cond': 'When empty slot available:',

        'rule_ai_t_p2_stage': '1.0/2.0/3.0/4.0 are major stages',

        'rule_ai_eff_def4': '4. Road empty slots',

        'rule_ai_s_hand_1_2_desc': 'Play hand card triggering match',

        'rule_ai_s_hand_1_1': '1.1:',
        'rule_ai_s_hand_1_2': '1.2:',
        'rule_ai_s_deck_2_1': '2.1:',
        'rule_ai_s_dark_3_1': '3.1:',
        'rule_ai_s_rev_4_1': '4.1:',
        'rule_ai_s_rev_4_2': '4.2:',
        'rule_ai_s_rev_4_3': '4.3:',
        'rule_ai_s_rev_4_4': '4.4:',
        'rule_ai_s_rev_4_5': '4.5:',
        'rule_ai_t_h_1_3': '1.3:',
        'rule_ai_t_h_1_4': '1.4:',
        'rule_ai_t_d_2_3': '2.3:',
        'rule_ai_t_d_2_4': '2.4:',
        'rule_ai_t_r_3_2': '3.2:',
        'rule_ai_t_r_3_3': '3.3:',
        'rule_ai_t_r_3_4': '3.4:',
        'rule_ai_t_r_3_5': '3.5:',
        'rule_ai_t_r_3_6': '3.6:',
        'rule_ai_t_r_3_7': '3.7:',
        'rule_ai_t_r_3_8': '3.8:',

        'rule_ai_eff_def3': '3. Dark card count',

        'rule_ai_t_r_3_3_trans': 'Switch to Dark 4.1',

        'rule_ai_t_h_1_2_place': 'Place hand card to win lane',

        'rule_ai_t_d_4_4_opp_low': 'Opponent max point <= 6',

        'rule_ai_strategic_check': 'Check Conditions (2 checks required):',

        'rule_dark_rest': '5 cards, hidden from both; click to stack on an existing lane',

        'rule_ai_t_h_1_1_cond': 'When no opposite card:',

        'rule_ai_t_h_1_3_play': 'Play hand card triggering match',

        'rule_ai_t_attack': 'Attack:',

        'rule_ai_strategic_principles': '[Strategic Principles]',

        'rule_ai_t_d_4_3_slots': 'Road empty slots >= 1',

        'rule_ai_crash_key': 'Clash opponent key points',

        'rule_ai_eff_cond1': 'Encircle increases my lane advantage',

        'rule_ai_t_d_2_4_trans': 'Switch to Dark 4.3',

        'rule_ai_t_p1a_strategy': 'Hand Strategy 1.0',

        'rule_ai_strategic_trigger': '[Strategic Trigger]',

        'rule_ai_t_r_3_3_has_dark': 'Has dark card',

        'rule_deck_rest': '26 cards initially, hidden from both; click to draw and play',

        'rule_ai_t_p6_no_affect': 'does not affect switching',

        'rule_ai_t_p2a': '2. Execute strategies in priority:',

        'rule_ai_t_dark': '4.0 [Dark Card Strategy]',

        'rule_ai_t_p3a': '3. When priority not met,',

        'rule_ai_t_d_4_4_variety': 'Different card types >= 5',

        'rule_ai_s_dark_3_1_desc': 'Prioritize lane with most opponent key points; match if possible',

        'rule_ai_strategic_cond': 'When neither side wins 5 lanes, switch to strategic',

        'rule_ai_t_r_3_1_unwon': 'Check1: effective cards < unwon lanes',

        'rule_ai_t_d_4_1_play': '- Triggered by dark/deck card play',

        'rule_ai_t_defend': 'Defend:',

        'rule_ai_sp1': '1. Strategic includes all tactical principles',

        'rule_ai_eff_def2': '2. Play revealed card with match below',

        'rule_ai_s_dark': '3.0 [Dark Card Strategy]',

        'rule_ai_s_deck_2_1_desc': 'Draw from deck; match if triggered',

        'rule_ai_t_p3_next_level': 'auto switch to next level',

        'rule_ai_t_p5_prev_type': 'previous turn card type',

        'rule_ai_s_deck': '2.0 [Deck Strategy]',

        'rule_ai_crash_when_lower': 'Clash when card value is lower',

        'rule_ai_s_rev_4_1_desc': 'Play revealed on lane with most opponent key points'
      }
    };

    var __gameCurrentLang = localStorage.getItem('pbz_lang') || 'zh';

    var __confirmDialogResult = null;
    var __confirmDialogCallback = null;
    var __pwdDialogCallback = null;

    window.showPasswordDialog = function(opts) {
      opts = opts || {};
      __pwdDialogCallback = opts.onConfirm || null;
      var overlay = document.getElementById('pwd-overlay');
      var panel = document.getElementById('pwd-panel');
      var input = document.getElementById('pwd-input');
      if (!overlay) return;
      overlay.style.display = 'block';
      // 默认居中（overlay 1920×1080，panel 280×160）
      panel.style.left = (960 - 140) + 'px';
      panel.style.top = (540 - 80) + 'px';
      input.value = '';
      requestAnimationFrame(function () {
        overlay.style.opacity = '1';
        panel.style.transform = 'scale(1)';
        try { input.focus(); } catch(e) {}
      });
    };
    window._closePasswordDialog = function() {
      var overlay = document.getElementById('pwd-overlay');
      if (!overlay) return;
      overlay.style.opacity = '0';
      var panel = document.getElementById('pwd-panel');
      if (panel) panel.style.transform = 'scale(0.92)';
      var cb = __pwdDialogCallback;
      __pwdDialogCallback = null;
      setTimeout(function () { overlay.style.display = 'none'; }, 200);
      if (cb) cb(null);
    };
    window._submitPasswordDialog = function() {
      var input = document.getElementById('pwd-input');
      var pwd = input ? input.value : '';
      var cb = __pwdDialogCallback;
      __pwdDialogCallback = null;
      _closePasswordDialog();
      if (cb && pwd) cb(pwd);  // ← 只有有值才触发
    };

    window.showConfirmDialog = function(opts) {
      opts = opts || {};
      var overlay = document.getElementById('confirm-overlay');
      if (!overlay) return;

      document.getElementById('confirm-icon').textContent = opts.icon || '⚠️';
      document.getElementById('confirm-title').textContent = opts.title || '确认操作';
      document.getElementById('confirm-message').textContent = opts.message || '确认执行此操作？';
      document.getElementById('confirm-ok-btn').textContent = opts.confirmText || '确定';
      document.getElementById('confirm-cancel-btn').textContent = opts.cancelText || '取消';

      var okBtn = document.getElementById('confirm-ok-btn');
      if (opts.danger) {
        okBtn.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)';
        okBtn.style.border = '1px solid rgba(248,113,113,0.6)';
        okBtn.style.boxShadow = '0 4px 14px rgba(220,38,38,0.4)';
      } else {
        okBtn.style.background = 'linear-gradient(135deg, #8b5cf6, #6d28d9)';
        okBtn.style.border = '1px solid rgba(168,85,247,0.6)';
        okBtn.style.boxShadow = '0 4px 14px rgba(124,58,237,0.4)';
      }

      __confirmDialogCallback = opts.onConfirm || null;

      // 鼠标位置 → overlay 逻辑坐标（反 translate/scale）
      var panel = document.getElementById('confirm-panel');
      var targetX = opts.x != null ? opts.x : 960;
      var targetY = opts.y != null ? opts.y : 540;
      // 以鼠标为锚点，往上偏移一点 + 边界保护
      var pw = 240;
      var ph = 150; // 估算高度
      var left = targetX - pw / 2;
      var top = targetY + 10; // 鼠标下方 10px
      if (left + pw > 1880) left = 1880 - pw;
      if (left < 20) left = 20;
      if (top + ph > 1060) top = targetY - ph - 10; // 翻到鼠标上方
      if (top < 20) top = 20;
      panel.style.left = left + 'px';
      panel.style.top = top + 'px';

      overlay.style.display = 'block';
      requestAnimationFrame(function () {
        overlay.style.opacity = '1';
        panel.style.transform = 'scale(1)';
      });
    };

    window._closeConfirmDialog = function(confirmed) {
      var overlay = document.getElementById('confirm-overlay');
      if (!overlay) return;
      overlay.style.opacity = '0';
      var panel = document.getElementById('confirm-panel');
      if (panel) panel.style.transform = 'scale(0.95)';
      var cb = __confirmDialogCallback;
      __confirmDialogCallback = null;
      setTimeout(function () {
        overlay.style.display = 'none';
      }, 200);
      if (confirmed && typeof cb === 'function') cb();
    };

        // ★ 2026-9-17：快捷键一览浮层（右下角贴按钮展开，无遮罩；点击图标或按 Alt 呼出）
    window.toggleHotkeyPanel = function () {
      var panel = document.getElementById('hotkey-panel');
      if (!panel) return;
      var show = !panel.classList.contains('open');
      if (show) panel.classList.add('open'); else panel.classList.remove('open');
      try { if (typeof playSound === 'function') playSound('uiClickSound'); } catch (e) {}
    };

    // ★ 2026-9-20 手机适配：关闭游戏按钮（APK 退出应用；Electron 关窗口；浏览器尝试关标签页）
    window.pbQuitGame = function () {
      try {
        if (window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform()
            && window.Capacitor.Plugins && window.Capacitor.Plugins.App) {
          window.Capacitor.Plugins.App.exitApp();
          return;
        }
      } catch (e) {}
      try { window.close(); } catch (e) {}
    };

    // ★ 2026-9-20 安卓返回键适配（Capacitor APK）：有弹窗→关闭最上层；对局中→确认返回主页；主页→退出应用
    (function () {
      function _capNative() {
        return typeof window !== 'undefined' && !!(window.Capacitor
          && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform());
      }
      function _shown(id) {
        var el = document.getElementById(id);
        return !!(el && getComputedStyle(el).display !== 'none');
      }
      function _hasClass(id, cls) {
        var el = document.getElementById(id);
        return !!(el && el.classList.contains(cls));
      }
      function _closeIfShown(id, fn) {
        if (_shown(id)) { try { fn(); } catch (e) {} return true; }
        return false;
      }
      function pbHandleBackButton() {
        try {
          // 1) 通用确认框 / 密码输入框
          if (_closeIfShown('confirm-overlay', function () { window._closeConfirmDialog(false); })) return;
          if (_closeIfShown('pwd-overlay', function () {
            if (typeof _closePasswordDialog === 'function') _closePasswordDialog();
            else if (typeof window._closePasswordDialog === 'function') window._closePasswordDialog();
          })) return;
          // 2) 账号/资料系弹窗（profile-modal 系）
          if (_closeIfShown('avatar-crop-modal', function () { closeAvatarCropModal(); })) return;
          if (_closeIfShown('avatar-picker-modal', function () { closeAvatarPicker(); })) return;
          if (_closeIfShown('auth-modal', function () { closeAuthModal(); })) return;
          if (_closeIfShown('nickname-editor-modal', function () { closeNicknameEditor(); })) return;
          if (_closeIfShown('player-profile-modal', function () { closeProfileModal(); })) return;
          if (_closeIfShown('legal-modal', function () { closeLegalModal(); })) return;
          if (_closeIfShown('ent-preview-modal', function () { closeEntPreview(); })) return;
          // 3) 规则/设置面板
          if (typeof GameElements !== 'undefined' && GameElements.ui && GameElements.ui.rulesOverlay
              && !GameElements.ui.rulesOverlay.classList.contains('hidden')) {
            GameElements.ui.rulesOverlay.classList.add('hidden');
            if (typeof toggleUiButtons === 'function') toggleUiButtons(false);
            return;
          }
          // 4) 快捷键浮层
          if (_hasClass('hotkey-panel', 'open')) {
            document.getElementById('hotkey-panel').classList.remove('open');
            return;
          }
          // 5) 排行榜面板
          if (_hasClass('lb-panel', 'open')) {
            document.getElementById('lb-panel').classList.remove('open');
            if (typeof lbHideFloatTip === 'function') lbHideFloatTip();
            return;
          }
          // 6) 对局中：确认返回主页
          var inGame = (typeof GameState !== 'undefined' && GameState && GameState.gamePhase === 'playing');
          if (inGame) {
            if (typeof window.showConfirmDialog === 'function') {
              window.showConfirmDialog({
                icon: '🚪', title: '退出游戏', message: '对局进行中，确定要退出吗？',
                confirmText: '退出', danger: true,
                onConfirm: function () { if (typeof showMainMenu === 'function') showMainMenu(); }
              });
            }
            return;
          }
          // 7) 主页（无弹窗）：退出应用
          if (_capNative() && window.Capacitor.Plugins && window.Capacitor.Plugins.App) {
            window.Capacitor.Plugins.App.exitApp();
          }
        } catch (e) {}
      }
      window.pbHandleBackButton = pbHandleBackButton;
      if (_capNative()) {
        try {
          window.Capacitor.Plugins.App.addListener('backButton', function () { pbHandleBackButton(); });
        } catch (e) {}
      }
    })();
    window.closeHotkeyPanel = function () {
      var panel = document.getElementById('hotkey-panel');
      if (panel) panel.classList.remove('open');
    };
    // 点击面板/按钮以外区域关闭（无遮罩，靠 document 点击委托）
    document.addEventListener('click', function (e) {
      var panel = document.getElementById('hotkey-panel');
      if (!panel || !panel.classList.contains('open')) return;
      if (panel.contains(e.target)) return;
      var btn = document.getElementById('hotkey-btn');
      if (btn && btn.contains(e.target)) return;
      window.closeHotkeyPanel();
    });
    // Alt 键呼出：任何模式均可（主页/对局/教程），仅焦点在输入框时不响应
    document.addEventListener('keydown', function (e) {
      if (e.key !== 'Alt') return;
      var active = document.activeElement;
      if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.tagName === 'SELECT')) return;
      e.preventDefault();
      window.toggleHotkeyPanel();
    });

    window.openLanguagePanel = function () {
      var overlay = document.getElementById('language-overlay');
      if (!overlay) return;
      overlay.style.display = 'flex';
      requestAnimationFrame(function () {
        overlay.style.opacity = '1';
        var panel = document.getElementById('language-panel');
        if (panel) panel.style.transform = 'scale(1)';
      });
      // 高亮当前语言国旗
      __highlightLangFlag(__gameCurrentLang);
    };

    window.closeLanguagePanel = function () {
      var overlay = document.getElementById('language-overlay');
      if (!overlay) return;
      overlay.style.opacity = '0';
      var panel = document.getElementById('language-panel');
      if (panel) panel.style.transform = 'scale(0.95)';
      setTimeout(function () {
        overlay.style.display = 'none';
      }, 200);
    };

    // 点击 overlay 空白区关闭
    document.addEventListener('click', function (e) {
      var overlay = document.getElementById('language-overlay');
      if (!overlay || overlay.style.display === 'none') return;
      if (e.target === overlay) {
        closeLanguagePanel();
      }
    });

    function __highlightLangFlag(lang) {
      document.querySelectorAll('.lang-flag-btn').forEach(function (btn) {
        var isActive = btn.getAttribute('data-lang') === lang;
        if (isActive) {
          btn.style.border = '2px solid #c4b5fd';
          btn.style.background = 'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(168,85,247,0.42) 40%, rgba(124,58,237,0.52) 100%)';
          btn.style.boxShadow = '0 8px 24px rgba(88,28,135,0.55), 0 0 0 1px rgba(196,181,253,0.6), 0 0 24px rgba(168,85,247,0.45), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.2)';
          btn.style.transform = 'translateY(-3px) scale(1.02)';
        } else {
          btn.style.border = '2px solid rgba(196,181,253,0.35)';
          btn.style.background = 'linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(168,85,247,0.18) 50%, rgba(124,58,237,0.22) 100%)';
          btn.style.boxShadow = '0 4px 14px rgba(88,28,135,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2)';
          btn.style.transform = '';
        }
      });
    }

    // JS 中翻译文本的辅助函数
    window.__t = function(key, fallback) {
      var dict = __gameTranslations[__gameCurrentLang] || {};
      return (dict[key] != null) ? dict[key] : (fallback || key);
    };

    // 根据当前语言 + 背景主题状态，自动调整 rank-panel 的 scale
    function updateRankPanelScale() {
      var rankPanel = document.querySelector('.rank-panel');
      if (!rankPanel) return;
      var gameContainer = document.querySelector('.game-container');
      var isThemeBgOn = gameContainer && gameContainer.classList.contains('style-bg-on');
      var shouldScale = (__gameCurrentLang === 'en') || isThemeBgOn;
      rankPanel.style.transform = 'translateY(-50%)' + (shouldScale ? ' scale(0.95)' : '');
    }

    window.applyGameLang = function (lang) {
      if (!__gameTranslations[lang]) return;
      __gameCurrentLang = lang;
      localStorage.setItem('pbz_lang', lang);
      if (document.documentElement) document.documentElement.lang = lang;
      __highlightLangFlag(lang);

      var dict = __gameTranslations[lang];

      // 1. 刷新带 data-i18n 的 textContent
      document.querySelectorAll('[data-i18n]').forEach(function (el) {
        var key = el.getAttribute('data-i18n');
        if (dict[key] != null) {
          el.textContent = dict[key];
        }
      });

      // 2. 刷新带 data-i18n-placeholder 的 placeholder
      document.querySelectorAll('[data-i18n-placeholder]').forEach(function (el) {
        var key = el.getAttribute('data-i18n-placeholder');
        if (dict[key] != null) {
          el.placeholder = dict[key];
        }
      });

      // 3. 刷新带 data-i18n-alt 的 alt
      document.querySelectorAll('[data-i18n-alt]').forEach(function (el) {
        var key = el.getAttribute('data-i18n-alt');
        if (dict[key] != null) {
          el.setAttribute('alt', dict[key]);
        }
      });

      // 4. 刷新带 data-i18n-title 的 title
      document.querySelectorAll('[data-i18n-title]').forEach(function (el) {
        var key = el.getAttribute('data-i18n-title');
        if (dict[key] != null) {
          el.setAttribute('title', dict[key]);
        }
      });

      // 0. 刷新游戏状态栏（__t 翻译过的状态消息）
      if (typeof __lastStatusKey !== 'undefined' && __lastStatusKey && typeof __t === 'function') {
        if (typeof updateGameStatus === 'function') {
          updateGameStatus(__t(__lastStatusKey), __lastStatusKey);
        }
      }
      // 5. 刷新 online-client.js 创建的动态元素（好友按钮 / 在线人数）
      if (typeof window._pbT === 'function') {
        var fb = document.getElementById('friend-btn');
        if (fb) {
          var fbText = fb.querySelector('.friend-btn-text');
          if (fbText) fbText.textContent = window._pbT('好友');
          fb.title = window._pbT('好友列表');
        }
        var st = document.getElementById('server-stats-text');
        if (st && st.dataset.onlineCount) {
          st.textContent = st.dataset.onlineCount + ' ' + window._pbT('在线');
        }
      }

      // 6. 刷新背景/动画按钮文字
      if (typeof refreshBgAnimButtons === 'function') refreshBgAnimButtons();
      if (typeof refreshCardFaceBgBtn === 'function') refreshCardFaceBgBtn();

      // 7. 英文模式下 rank-panel 缩小 0.95 倍（英文牌型名更长）
      if (typeof updateRankPanelScale === 'function') updateRankPanelScale();

      // 8. 回放播放器动态文案（顶栏信息/动作描述/播放按钮；静态按钮已由 data-i18n 刷新）
      if (typeof rpRefreshI18n === 'function') { try { rpRefreshI18n(); } catch (e) {} }
      // 9. 账号按钮动态文案（已登录显示昵称，未登录显示"登录 / 注册"）
      if (typeof updateAuthButton === 'function') { try { updateAuthButton(); } catch (e) {} }

      // 10. ★ 游客昵称随语言切换刷新（2026-9-14）：未登录时左上角「游客」同步翻译。
      //     仅在 pbIsLoggedIn 已定义且确认未登录时执行——页面解析期首次 applyGameLang
      //     先于 online-client.js 执行，此时不能动昵称（避免误覆盖登录账号昵称存档），
      //     首次加载的翻译由 DOMContentLoaded 的 initPlayerProfile 负责。
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        var guestNick = __t('guest_name', '游客');
        localStorage.setItem('pbp_nickname', guestNick);
        var guestNickEl = document.getElementById('profile-nickname');
        if (guestNickEl) guestNickEl.textContent = guestNick;
      }
    };

    // 页面加载时应用保存的语言（不管什么语言都要调一次，确保所有 data-i18n 元素被翻译字典覆盖）
    (function __applySavedLangOnLoad() {
      applyGameLang(__gameCurrentLang);
    })();

    // ============================================================================
    // 【联机模式子菜单】
    // ============================================================================
    window.toggleOnlineSubmenu = function(e) {
      e.stopPropagation();
      if (typeof blockIfTeammateMode === 'function' && blockIfTeammateMode()) return;
      window._forceNeutralBorder = false; // ★ 清除强制中立区线框标志
      const submenu = document.getElementById('online-submenu');
      const otherSubmenu = document.getElementById('tutorial-submenu');
      const pracSubmenu = document.getElementById('practice-submenu');
      if (otherSubmenu) otherSubmenu.classList.remove('open');
      if (pracSubmenu) pracSubmenu.classList.remove('open');
      if (submenu) {
        submenu.classList.toggle('open');
      }
    };

    // ============================================================================
    // 【自定义房间系统】
    // ============================================================================
    // ---- 1. 房间列表面板 ----
    window.openRoomList = function() {
      if (typeof blockIfTeammateMode === 'function' && blockIfTeammateMode()) return;
      // ★ 账号系统：联机需登录
      if (window.PBOnline && typeof PBOnline.requireLogin === 'function' && !PBOnline.requireLogin()) return;
      var submenu = document.getElementById('online-submenu');
      if (submenu) submenu.classList.remove('open');
      var overlay = document.getElementById('room-list-overlay');
      if (overlay) overlay.classList.add('active');
      refreshRoomList();
    };
    window.closeRoomList = function() {
      var overlay = document.getElementById('room-list-overlay');
      if (overlay) overlay.classList.remove('active');
    };
    function refreshRoomList() {
      if (typeof PBOnline !== 'undefined' && PBOnline.queryRooms) {
        PBOnline.queryRooms();
      } else {
        document.getElementById('room-list-content').innerHTML = '<div class="room-list-empty">正在连接服务器...</div>';
      }
    }
    window.refreshRoomList = refreshRoomList;
    // ★ 玩家大厅刷新按钮（2026-9-18）：重新拉取房间列表，图标转一圈反馈
    window.onRefreshRoomList = function(btn) {
      if (btn) {
        btn.classList.remove('refreshing');
        void btn.offsetWidth; // 强制重排以重启动画
        btn.classList.add('refreshing');
      }
      refreshRoomList();
    };
    window.renderRoomList = function(data) {
      var list = data.rooms || [];
      var container = document.getElementById('room-list-content');
      if (!container) return;
      if (list.length === 0) {
        container.innerHTML = '<div class="room-list-empty">暂无房间，点击右上角"创建房间"新建一个</div>';
        return;
      }
      var myInfo = crGetMyInfo();
      // 检查玩家是否已在任何房间中
      var inAnyRoom = list.some(function(room) {
        return room.bluePlayers.some(function(p) { return p.nickname === myInfo.nickname; }) ||
               room.redPlayers.some(function(p) { return p.nickname === myInfo.nickname; });
      });
      var html = '';
      list.forEach(function(room) {
        var isFull = room.blueCount + room.redCount >= room.maxPerSide * 2;
        var isInRoom = room.bluePlayers.some(function(p) { return p.nickname === myInfo.nickname; }) ||
                       room.redPlayers.some(function(p) { return p.nickname === myInfo.nickname; });
        var lockIcon = room.hasPassword ? '<span style="font-size:14px;margin-left:6px;">🔒</span>' : '';
        html += '<div class="room-item">' +
          '<div class="room-item-info">' +
          '<div class="room-item-id">' + (room.roomName ? escapeHtmlCr(room.roomName) : room.roomId) + lockIcon + '</div>' +
          '<div class="room-item-host">房主：' + escapeHtmlCr(room.hostName) + (room.roomName ? ' · ID: ' + room.roomId : '') + '</div>' +
          '</div>' +
          '<div class="room-item-players">' +
          '<div class="room-item-count">蓝方 <span>' + room.blueCount + '/' + room.maxPerSide + '</span> · 红方 <span>' + room.redCount + '/' + room.maxPerSide + '</span></div>';
        if (isInRoom) {
          html += '<button class="room-list-btn create-room" onclick="enterRoomFromList()" style="padding:6px 14px;font-size:0.8rem;">进入</button>';
        } else if (inAnyRoom) {
          html += '<div class="room-item-full" style="color:#94a3b8;">已在房间</div>';
        } else if (isFull) {
          html += '<div class="room-item-full">已满</div>';
        } else {
          html += '<button class="room-item-join" onclick="joinRoomById(\'' + room.roomId + '\', ' + (room.hasPassword ? 'true' : 'false') + ')">加入</button>';
        }
        html += '</div></div>';
      });
      container.innerHTML = html;
    };
    window.searchRoomById = function() {
      // 检查是否已在房间中
      if (typeof PBOnline !== 'undefined' && PBOnline.getRoomId && PBOnline.getRoomId()) {
        if (PBOnline.showOnlineToast) PBOnline.showOnlineToast('你已在房间中，请先解散/退出当前房间', 'warning');
        return;
      }
      var input = document.getElementById('room-list-search');
      var id = input ? input.value.trim().toUpperCase() : '';
      if (!id) { refreshRoomList(); return; }
      if (typeof PBOnline !== 'undefined' && PBOnline.joinRoom) {
        PBOnline.joinRoom(id);
      }
    };
    window.joinRoomById = function(roomId, hasPassword) {
      // 检查是否已在房间中
      if (typeof PBOnline !== 'undefined' && PBOnline.getRoomId && PBOnline.getRoomId()) {
        if (PBOnline.showOnlineToast) PBOnline.showOnlineToast('你已在房间中，请先解散/退出当前房间', 'warning');
        return;
      }
      // 密码房 → 弹密码输入
      if (hasPassword) {
        showPasswordDialog({
          onConfirm: function(pwd) {
            if (!pwd) return; // ← 取消时不发请求
            if (typeof PBOnline !== 'undefined' && PBOnline.joinRoom) {
              PBOnline.joinRoom(roomId, pwd);
            }
          }
        });
        return;
      }
      if (typeof PBOnline !== 'undefined' && PBOnline.joinRoom) {
        PBOnline.joinRoom(roomId);
      }
    };
    window.enterRoomFromList = function() {
      closeRoomList();
      // 向服务器请求当前房间状态，重新进入房间
      if (typeof PBOnline !== 'undefined' && PBOnline.rejoinRoom) {
        PBOnline.rejoinRoom();
      } else if (typeof openRoomInterior === 'function') {
        openRoomInterior();
      }
    };

    // ---- 2. 创建房间面板（设置+选边） ----
    // 当前选中的房间设置
    let customRoomSettings = {
      players: '2', callcard: 'on', deckmode: 'split', firstturn: 'random', dlc: []
    };
    let crBlueSlots = [];
    let crRedSlots = [];

    function crGetMyInfo() {
      var nickname = localStorage.getItem('pbp_nickname') || '玩家';
      var avatar = localStorage.getItem('pbp_avatar') || '🗡️';
      var exp = parseInt(localStorage.getItem('pbp_exp') || '0', 10);
      var level = 0;
      if (typeof calcExpLevel === 'function') level = calcExpLevel(exp).level;
      return { nickname: nickname, avatar: avatar, level: level };
    }
    function crAvatarHtml(avatar) {
      if (avatar && avatar.startsWith('data:')) return '<img src="' + avatar + '" alt="头像" />';
      return avatar || '🗡️';
    }
    function escapeHtmlCr(text) {
      var div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }

    function renderCrSlots() {
      var playerCount = parseInt(customRoomSettings.players, 10) || 2;
      var slotsPerSide = playerCount === 4 ? 2 : 1;
      var myInfo = crGetMyInfo();

      function renderSide(elId, slots, sideClass) {
        var el = document.getElementById(elId);
        if (!el) return;
        var html = '';

        for (var i = 0; i < slotsPerSide; i++) {
          if (slots[i]) {
            var p = slots[i];
            var isMe = p.nickname === myInfo.nickname;
            html += '<div class="cr-player-card ' + sideClass + (isMe ? ' host' : '') + '">' +
              '<div class="cr-player-avatar">' + crAvatarHtml(p.avatar) + '</div>' +
              '<div class="cr-player-name">' + escapeHtmlCr(p.nickname) + '<span style="color:#fbbf24;font-size:0.65rem;margin-left:3px;">' + p.level + '级</span></div>' +
              (isMe ? '<div class="cr-host-badge">房主</div>' : '') +
              '</div>';
          } else {
            // 空位：使用与玩家卡片相同的布局，加号在头像位置，确保双方同步对齐
            html += '<div class="cr-player-card ' + sideClass + ' empty" onclick="joinCrSlot(\'' + sideClass + '\',' + i + ')" title="加入">' +
              '<div class="cr-player-avatar cr-join-avatar">+</div>' +
              '<div class="cr-player-name" style="opacity:0.5;">加入</div>' +
              '</div>';
          }
        }

        html += '<div class="cr-side-label ' + sideClass + '">' + (sideClass === 'blue' ? '蓝方' : '红方') + '</div>';
        el.innerHTML = html;
      }
      renderSide('cr-side-blue', crBlueSlots, 'blue');
      renderSide('cr-side-red', crRedSlots, 'red');
    }

    window.openCreateRoomPanel = function() {
      // 检查是否已在房间中
      if (typeof PBOnline !== 'undefined' && PBOnline.getRoomId && PBOnline.getRoomId()) {
        if (PBOnline.showOnlineToast) PBOnline.showOnlineToast('你已在房间中，请先解散/退出当前房间', 'warning');
        return;
      }
      closeRoomList();
      var overlay = document.getElementById('custom-room-overlay');
      if (overlay) overlay.classList.add('active');
      if (!overlay._crBound) {
        overlay._crBound = true;
        overlay.querySelectorAll('.cr-option-btns').forEach(function(group) {
          var groupName = group.dataset.group;
          group.querySelectorAll('.cr-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
              handleCrOptionClick(groupName, btn);
            });
          });
        });
      }
    };
    window.closeCustomRoom = function() {
      var overlay = document.getElementById('custom-room-overlay');
      if (overlay) overlay.classList.remove('active');
    };

    function handleCrOptionClick(groupName, btn) {
      var val = btn.dataset.val;
      if (groupName === 'dlc') {
        if (btn.classList.contains('active')) {
          btn.classList.remove('active');
          var idx = customRoomSettings.dlc.indexOf(val);
          if (idx >= 0) customRoomSettings.dlc.splice(idx, 1);
        } else {
          btn.classList.add('active');
          if (customRoomSettings.dlc.indexOf(val) < 0) customRoomSettings.dlc.push(val);
        }
        // ★ DLC选项变更后更新创建按钮状态：选中任意DLC时禁用（DLC目前未实现）
        var createBtn = document.getElementById('cr-create-btn');
        if (createBtn) {
          createBtn.disabled = customRoomSettings.dlc.length > 0;
        }
      } else {
        var group = btn.parentElement;
        group.querySelectorAll('.cr-btn').forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        customRoomSettings[groupName] = val;
        if (groupName === 'players') {
          var sps = val === '4' ? 2 : 1;
          if (crBlueSlots.length > sps) crBlueSlots = crBlueSlots.slice(0, sps);
          if (crRedSlots.length > sps) crRedSlots = crRedSlots.slice(0, sps);
          renderCrSlots();
        }
      }
    }

    // 点击加号切换座位
    window.joinCrSlot = function(side, slotIdx) {
      var myInfo = crGetMyInfo();
      // 先从原来的位置移除
      for (var i = 0; i < crBlueSlots.length; i++) {
        if (crBlueSlots[i] && crBlueSlots[i].nickname === myInfo.nickname) crBlueSlots[i] = null;
      }
      for (var j = 0; j < crRedSlots.length; j++) {
        if (crRedSlots[j] && crRedSlots[j].nickname === myInfo.nickname) crRedSlots[j] = null;
      }
      // 加入新位置
      if (side === 'blue') crBlueSlots[slotIdx] = myInfo;
      else crRedSlots[slotIdx] = myInfo;
      renderCrSlots();
    };

    window.createCustomRoomNow = function() {
      var side = 'blue';
      closeCustomRoom();
      window.playerCountSetting = customRoomSettings.players;
      if (typeof PBOnline !== 'undefined' && PBOnline.createRoom) {
        var _roomNameEl = document.getElementById('cr-room-name');
        var _roomPwdEl = document.getElementById('cr-room-pwd');
        PBOnline.createRoom({
          players: customRoomSettings.players,
          callcard: customRoomSettings.callcard,
          deckmode: customRoomSettings.deckmode,
          firstturn: customRoomSettings.firstturn,
          dlc: customRoomSettings.dlc.slice(),
          side: side,
          roomName: _roomNameEl ? _roomNameEl.value.trim() : '',
          password: _roomPwdEl ? _roomPwdEl.value.trim() : ''
        });
      }
    };

    // ---- 3. 房间内部界面 ----
    var _riIsHost = false;
    var _riRoomId = '';
    var _riReadyState = false;
    var _riRoomData = null;

    window.openRoomInterior = function(data) {
      _riRoomData = data || _riRoomData;
      var overlay = document.getElementById('room-interior-overlay');
      if (overlay) overlay.classList.add('active');
      var idEl = document.getElementById('ri-room-id');
      if (idEl) idEl.textContent = 'ID: ' + (_riRoomId || PBOnline.roomId || '');
      renderRoomInterior();
    };
    window.closeRoomInterior = function() {
      var overlay = document.getElementById('room-interior-overlay');
      if (overlay) overlay.classList.remove('active');
      var invitePanel = document.getElementById('room-invite-panel');
      if (invitePanel) invitePanel.classList.remove('active');
    };
    function renderRoomInterior() {
      var myInfo = crGetMyInfo();
      var blueEl = document.getElementById('ri-blue-players');
      var redEl = document.getElementById('ri-red-players');
      var footer = document.getElementById('ri-footer');

      var data = _riRoomData || {};
      var bluePlayers = data.bluePlayers || [];
      var redPlayers = data.redPlayers || [];
      var hostName = data.hostName || '';
      var playerCount = parseInt((data.settings || {}).players || '2', 10);
      var slotsPerSide = playerCount === 4 ? 2 : 1;

      // ★ 计算房间总座位数和已填充数
      var totalSlots = slotsPerSide * 2;
      var filled = bluePlayers.filter(function(p) { return !!p; }).length + redPlayers.filter(function(p) { return !!p; }).length;

      // ★ 计算所有人是否都已准备（房主自己默认 ready，因为开始按钮是房主触发的）
      var allReady = (filled === totalSlots);
      if (_riIsHost) {
        // 房主自己不用点准备，检查其他玩家
        var nonHostReady = true;
        bluePlayers.concat(redPlayers).forEach(function(p) {
          if (p && p.nickname !== hostName && !p.ready) nonHostReady = false;
        });
        allReady = allReady && nonHostReady;
      } else {
        allReady = allReady && _riReadyState;
      }

      function renderPlayerCard(p, isHost, seatIdx) {
        var isAI = !!p.isAI;
        // 房主可点击非自己的玩家卡片弹出踢人选项
        var kickable = _riIsHost && !isHost && !isAI;
        var onclick = kickable ? ' onclick="kickRoomPlayer(' + seatIdx + ', event)"' : '';
        var title = kickable ? '点击踢出 ' + escapeHtmlCr(p.nickname) : '';
        return '<div class="ri-player-card ' + (isHost ? 'host ' : '') + (p.ready ? 'ready ' : '') + (p.side || 'blue') + '"' + onclick + (title ? ' title="' + title + '"' : '') + '>' +
          '<div class="ri-player-avatar">' + crAvatarHtml(p.avatar) + '</div>' +
          '<div class="ri-player-name">' + escapeHtmlCr(p.nickname) + '<span class="ri-level">' + (p.level || 0) + '级</span></div>' +
          (isAI ? '<div class="ri-ai-badge" style="font-size:0.6rem;color:#a78bfa;background:rgba(167,139,250,0.15);padding:2px 6px;border-radius:4px;margin-top:2px;">AI</div>' : '') +
          (p.ready && !isAI ? '<div class="ri-ready-badge">已准备</div>' : (!isAI && !isHost ? '<div class="ri-not-ready-badge" style="font-size:0.6rem;color:#f87171;margin-top:2px;">未准备</div>' : '')) +
          '</div>';
      }
      function renderEmptySlot(sideClass, sideIdx, slotIdx) {
        var seatIndex = sideIdx === 'blue' ? slotIdx * 2 : slotIdx * 2 + 1;
        return '<div class="ri-player-card ' + sideClass + ' empty-seat" onclick="joinRoomSeat(' + seatIndex + ')" title="加入/切换到此座位" style="cursor:pointer;opacity:0.4;transition:all 0.2s;"><div class="ri-player-avatar">?</div><div class="ri-player-name">等待中</div></div>';
      }

      if (blueEl) {
        var html = '';
        for (var i = 0; i < slotsPerSide; i++) {
          if (bluePlayers[i]) html += renderPlayerCard(bluePlayers[i], bluePlayers[i].nickname === hostName, i * 2);
          else html += renderEmptySlot('blue', 'blue', i);
        }
        blueEl.innerHTML = html;
      }
      if (redEl) {
        var html2 = '';
        for (var j = 0; j < slotsPerSide; j++) {
          if (redPlayers[j]) html2 += renderPlayerCard(redPlayers[j], redPlayers[j].nickname === hostName, j * 2 + 1);
          else html2 += renderEmptySlot('red', 'red', j);
        }
        redEl.innerHTML = html2;
      }

      if (footer) {
        if (_riIsHost) {
          // ★ 根据 allReady 动态切换开始按钮样式
          var startBtnStyle = allReady ? '' : ' opacity:0.35; filter:grayscale(0.8); cursor:not-allowed; pointer-events:none;';
          var startBtnTitle = allReady ? '开始游戏' : (filled < totalSlots ? '等待其他玩家加入' : '等待所有玩家准备');
          footer.innerHTML =
            '<button class="ri-footer-btn start" onclick="startRoomGame()" title="' + startBtnTitle + '" style="' + startBtnStyle + '">开始游戏</button>' +
            '<button class="ri-footer-btn invite" onclick="inviteRoomFriend()">邀请好友</button>' +
            '<button class="ri-footer-btn cancel" onclick="disbandRoom()">解散房间</button>';
        } else {
          var readyClass = _riReadyState ? 'ready active' : 'ready';
          var readyText = _riReadyState ? '取消准备' : '准备';
          footer.innerHTML = '<button class="ri-footer-btn ' + readyClass + '" id="ri-ready-btn" onclick="toggleRoomReady()">' + readyText + '</button><button class="ri-footer-btn invite" onclick="inviteRoomFriend()">邀请好友</button><button class="ri-footer-btn cancel" onclick="leaveRoomInterior()">退出房间</button>';
        }
      }
    }
    // ★ 房主踢人
    window.kickRoomPlayer = function(seatIndex, evt) {
      // 屏幕坐标 → overlay 逻辑坐标
      var logicalX = 960, logicalY = 540;
      if (evt && evt.clientX != null) {
        var cs = window.__pbGameScale || 1;
        var csLeft = (window.innerWidth - 1920 * cs) / 2;
        var csTop = (window.innerHeight - 1080 * cs) / 2;
        logicalX = (evt.clientX - csLeft) / cs;
        logicalY = (evt.clientY - csTop) / cs;
      }
      showConfirmDialog({
        icon: '⚠️',
        title: '踢出玩家',
        message: '确认踢出该玩家？',
        confirmText: '确定',
        cancelText: '取消',
        danger: true,
        x: logicalX,
        y: logicalY,
        onConfirm: function() {
          if (typeof PBOnline !== 'undefined' && PBOnline.kickPlayer) {
            PBOnline.kickPlayer(seatIndex);
          }
        }
      });
    };
    window.startRoomGame = function() {
      if (typeof PBOnline !== 'undefined' && PBOnline.startGame) PBOnline.startGame();
    };
    // 解散房间（房主专用）：关闭界面并离开房间，房间消失
    window.disbandRoom = function() {
      // ★ 直接关界面 + 通知服务器，不阻塞
      closeRoomInterior();
      // 清本地状态
      if (typeof PBOnline !== 'undefined') {
        try {
          PBOnline.leaveRoom();
        } catch(e) { console.warn('[disband] leaveRoom 异常:', e); }
        // ★ 无论如何清掉自定义房间标志
        PBOnline._isCustomRoom = false;
      }
      // ★ 如果 leaveRoom 没成功（ws 断了），直接清房间ID避免卡死
      setTimeout(function() {
        if (typeof PBOnline !== 'undefined' && PBOnline.currentRoomId) {
          // 500ms 后如果还没被服务器确认，也清掉
        }
      }, 500);
    };
    // 兼容旧调用
    window.cancelRoom = window.disbandRoom;
    window.toggleRoomReady = function() {
      _riReadyState = !_riReadyState;
      if (typeof PBOnline !== 'undefined' && PBOnline.roomReady) PBOnline.roomReady(_riReadyState);
      var btn = document.getElementById('ri-ready-btn');
      if (btn) {
        btn.textContent = _riReadyState ? '取消准备' : '准备';
        btn.className = 'ri-footer-btn ready' + (_riReadyState ? ' active' : '');
      }
    };
    window.leaveRoomInterior = function() {
      closeRoomInterior();
      if (typeof PBOnline !== 'undefined' && PBOnline.leaveRoom) PBOnline.leaveRoom();
    };
    // 点击空位加入/切换座位
    window.joinRoomSeat = function(seatIndex) {
      if (typeof PBOnline !== 'undefined' && PBOnline.switchSeat) {
        PBOnline.switchSeat(seatIndex);
      }
    };
    // 邀请好友进入房间
    window.inviteRoomFriend = function() {
      if (typeof PBOnline !== 'undefined' && PBOnline.toggleRoomInvitePanel) {
        PBOnline.toggleRoomInvitePanel();
      }
    };
    window.updateRoomInterior = function(data) {
      _riRoomData = data;
      if (document.getElementById('room-interior-overlay').classList.contains('active')) {
        renderRoomInterior();
      }
    };

    // ============================================================================
    // 【右上角人物信息系统】
    // ============================================================================

    // 默认头像列表（emoji风格）
    const DEFAULT_AVATARS = [
      '🗡️', '🛡️', '👑', '⚔️', '🏰',
      '🃏', '🎴', '💎', '🔥', '⚡',
      '🌟', '🎯', '🏆', '💀', '🦅',
      '🐉', '🐺', '🦁', '🦊', '🐯'
    ];

    // 当前选中的头像索引
    let selectedAvatarIndex = 0;

    // 初始化人物信息
    // ===== 经验等级系统 =====
    // 每级所需累计经验：0→1级=1800，1→2级=3600，2→3级=5400 ...
    const EXP_PER_LEVEL = 1800;

    // 根据累计经验计算等级和当前级内进度
    function calcExpLevel(totalExp) {
      if (totalExp <= 0) return { level: 0, current: 0, needed: 0, percent: 0 };
      // level满足: level*(level+1)/2 * 1800 < totalExp <= (level+1)*(level+2)/2 * 1800
      // 即: level^2 + level < 2*totalExp/1800 <= (level+1)^2 + (level+1)
      const n = (2 * totalExp) / EXP_PER_LEVEL;
      const level = Math.floor((Math.sqrt(1 + 4 * n) - 1) / 2);
      // 升到下一级所需的累计经验
      const nextTotal = (level + 1) * (level + 2) / 2 * EXP_PER_LEVEL;
      // 当前等级所需的累计经验
      const curTotal = level * (level + 1) / 2 * EXP_PER_LEVEL;
      const current = totalExp - curTotal;
      const needed = nextTotal - curTotal;
      const percent = Math.min(100, (current / needed) * 100);
      return { level, current, needed, percent };
    }

    // 更新经验条显示
    function updateExpBar() {
      const levelEl = document.getElementById('profile-level');
      const fillEl = document.getElementById('profile-exp-fill');
      const barEl = levelEl ? levelEl.parentElement : null; // .profile-exp-bar 容器
      // ★ 游客（未登录）没有等级和经验：隐藏等级+经验条
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        if (barEl) barEl.style.display = 'none';
        return;
      }
      if (barEl) barEl.style.display = '';
      const totalExp = parseInt(localStorage.getItem('pbp_exp') || '0', 10);
      const info = calcExpLevel(totalExp);
      if (levelEl) levelEl.textContent = info.level + '级';
      if (fillEl) fillEl.style.width = info.percent + '%';
    }

    // 增加经验（游戏胜利后调用）
    function addExp(score) {
      if (!score || score <= 0) return;
      // ★ 游客（未登录）不累计经验
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) return;
      const total = parseInt(localStorage.getItem('pbp_exp') || '0', 10) + score;
      localStorage.setItem('pbp_exp', total.toString());
      updateExpBar();
    }

    // 生成玩家唯一ID: #字母+8个数字
    function generatePlayerId() {
      const letter = String.fromCharCode(97 + Math.floor(Math.random() * 26)); // a-z
      const num = Math.floor(Math.random() * 100000000).toString().padStart(8, '0');
      return '#' + letter + num;
    }

    // 获取或生成玩家ID
    // ★ 账号系统：已登录（token+user_id 存在）时返回账号唯一ID；
    //   URL ?pid= 参数仅在游客态生效（防止账号身份被 URL 参数冒替）
    function getPlayerId() {
      if (localStorage.getItem('pbp_auth_token') && localStorage.getItem('pbp_auth_user_id')) {
        return localStorage.getItem('pbp_auth_user_id');
      }
      let id = localStorage.getItem('pbp_player_id');
      if (!id) {
        id = generatePlayerId();
        localStorage.setItem('pbp_player_id', id);
      }
      return id;
    }

    function initPlayerProfile() {
      // 读取昵称
      let savedNickname = localStorage.getItem('pbp_nickname');
      const nicknameEl = document.getElementById('profile-nickname');
      // ★ 清洗历史昵称中的《》【】括号（旧存档可能已含，统一在此纠正并回写）
      if (savedNickname && /[《》【】]/.test(savedNickname)) {
        savedNickname = savedNickname.replace(/[《》【】]/g, '').trim() || '';
        localStorage.setItem('pbp_nickname', savedNickname);
      }
      // ★ 昵称格式（2026-9-13 修改）：游客统一显示「游客」（不再拼接随机数字，历史编号存档一并清除）；
      //   登录账号昵称 = 注册账号名（pbSaveAuth 写入）
      if (typeof pbIsLoggedIn !== 'function' || !pbIsLoggedIn()) {
        savedNickname = (typeof __t === 'function') ? __t('guest_name', '游客') : '游客';
        localStorage.setItem('pbp_nickname', savedNickname);
      }
      if (savedNickname && nicknameEl) {
        nicknameEl.textContent = savedNickname;
      }

      // 读取头像
      const savedAvatar = localStorage.getItem('pbp_avatar');
      const avatarImg = document.getElementById('profile-avatar-img');
      if (savedAvatar && avatarImg) {
        if (savedAvatar.startsWith('data:')) {
          avatarImg.src = savedAvatar;
        } else {
          // ★ 裸 emoji 头像（服务器账号默认 🗡️ 等）：经 canvas 转 dataURL 正常渲染，破图修复
          setAvatarEmoji(savedAvatar, true);
        }
        const idx = DEFAULT_AVATARS.indexOf(savedAvatar.replace(/^data:image\/[^;]+;base64,/, ''));
        selectedAvatarIndex = idx >= 0 ? idx : 0;
      } else if (avatarImg) {
        setAvatarEmoji(DEFAULT_AVATARS[0], true); // 初始化默认头像，不覆盖服务器账号头像
        selectedAvatarIndex = 0;
      }

      // 生成/读取玩家ID
      getPlayerId();

      // 更新经验条
      updateExpBar();

      // 游客锁定状态刷新（联机全部子项 + 人机2v1 灰色）
      pbRefreshGuestLock();
    }

    // ==================== 开发者消息 ✉️（2026-9-13） ====================
    // 右上角信箱：显示开发者发给玩家的消息（更新内容/活动等）。
    // 登录玩家：WS 推送（dev_message）+ 连接后拉取（get_dev_messages，见 online-client.js）；
    // 游客：单机状态（2026-9-14）——隐藏 ✉️、不发起任何网络请求。
    // 已读标记：localStorage pb_dev_mail_read（已读到的最大消息时间戳）。
    var DevMail = {
      items: [],
      fetched: false,
      readTime: 0,
      // ★ 游客（未登录）= 单机状态：不显示 ✉️、不保留线上消息（2026-9-14）
      refreshVisibility: function () {
        var c = document.getElementById('dev-mail-container');
        var loggedIn = (typeof window.pbIsLoggedIn === 'function') && window.pbIsLoggedIn();
        if (c) c.style.display = loggedIn ? '' : 'none';
        if (!loggedIn) {
          this.items = [];
          this.fetched = false;
          this.refreshBadge();
        }
      },
      init: function () {
        try { this.readTime = parseInt(localStorage.getItem('pb_dev_mail_read') || '0', 10) || 0; } catch (e) { this.readTime = 0; }
        this.refreshVisibility();
        // ★ 仅登录用户联网拉取开发者消息；游客不发起任何请求（单机）
        if ((typeof window.pbIsLoggedIn === 'function') && window.pbIsLoggedIn()) this.fetchHttp();
      },
      onList: function (d) {
        this.items = (d && d.messages) || [];
        this.fetched = true;
        this.render();
        this.refreshBadge();
      },
      onPush: function (item) {
        if (!item || !item.id) return;
        for (var i = 0; i < this.items.length; i++) { if (this.items[i].id === item.id) return; }
        this.items.unshift(item);
        if (this.items.length > 50) this.items.length = 50;
        this.render();
        this.refreshBadge();
        try { showOnlineToast('📢 ' + (item.title || '收到新消息'), 'info'); } catch (e) {}
      },
      fetchHttp: function () {  // 登录用户兜底：HTTP 拉取（同源 API）
        var self = this;
        // ★ 游客（未登录）= 单机状态：禁止联网（2026-9-14）
        if (!((typeof window.pbIsLoggedIn === 'function') && window.pbIsLoggedIn())) return;
        try {
          fetch(location.origin + '/api/dev-messages', { cache: 'no-store' })
            .then(function (r) { return r.json(); })
            .then(function (j) { if (j && j.ok) self.onList(j); })
            .catch(function () {});
        } catch (e) { /* file:// 等场景静默 */ }
      },
      togglePanel: function () {
        var p = document.getElementById('dev-mail-panel');
        if (!p) return;
        // ★ 游客（未登录）= 单机状态：不打开、不联网（2026-9-14）
        if (!((typeof window.pbIsLoggedIn === 'function') && window.pbIsLoggedIn())) { this.refreshVisibility(); return; }
        var opening = !p.classList.contains('active');
        p.classList.toggle('active', opening);
        if (opening) {
          // 与服务器状态面板互斥
          try { var sp = document.getElementById('server-stats-panel'); if (sp) sp.classList.remove('active'); } catch (e) {}
          if (!this.fetched) this.fetchHttp();
          this.markRead();
        }
      },
      markRead: function () {
        var maxT = this.readTime;
        for (var i = 0; i < this.items.length; i++) { if (this.items[i].time > maxT) maxT = this.items[i].time; }
        this.readTime = maxT;
        try { localStorage.setItem('pb_dev_mail_read', String(maxT)); } catch (e) {}
        this.refreshBadge();
      },
      refreshBadge: function () {
        var b = document.getElementById('dev-mail-badge');
        if (!b) return;
        var n = 0;
        var hasNewToday = false;
        var todayStart = new Date(); todayStart.setHours(0, 0, 0, 0); // 今天 0 点
        for (var i = 0; i < this.items.length; i++) {
          if (this.items[i].time > this.readTime) {
            n++;
            // ★ 金色状态：未读且为当天发布（次日自动恢复白色）
            if (this.items[i].time >= todayStart.getTime()) hasNewToday = true;
          }
        }
        b.style.display = n > 0 ? 'flex' : 'none';
        b.textContent = n > 9 ? '9+' : String(n);
        var icon = document.getElementById('dev-mail-icon');
        if (icon) {
          if (hasNewToday) icon.classList.add('dev-mail-new');
          else icon.classList.remove('dev-mail-new');
        }
      },
      render: function () {
        var box = document.getElementById('dev-mail-list');
        if (!box) return;
        var T = typeof __t === 'function';
        var _t = function (k, fb) { return T ? __t(k, fb) : fb; };
        if (!this.items.length) {
          box.innerHTML = '<div class="dev-mail-empty">' + _t('dm_empty', '暂无消息') + '</div>';
          return;
        }
        var self = this;
        var pad = function (x) { return x < 10 ? '0' + x : '' + x; };
        var esc = function (s) {
          return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        };
        // ★ 置顶优先显示（2026-9-14）
        var sorted = this.items.slice().sort(function (a, b) {
          return ((b.pinned ? 1 : 0) - (a.pinned ? 1 : 0)) || ((b.time || 0) - (a.time || 0));
        });
        var html = '';
        for (var i = 0; i < sorted.length; i++) {
          var m = sorted[i];
          var d = new Date(m.time || 0);
          var ts = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
          html += '<div class="dev-mail-item' + (m.pinned ? ' pinned' : '') + (m.time > self.readTime ? ' unread' : '') + '">'
            + '<div class="dev-mail-item-head"><span class="dev-mail-item-title">' + (m.pinned ? '📌 ' : '') + esc(m.title) + '</span>'
            + '<span class="dev-mail-item-time">' + ts + '</span></div>'
            + '<div class="dev-mail-item-content">' + esc(m.content) + '</div>'
            + '<div class="dev-mail-item-ops">'
            + '<button class="dm-op-btn pin' + (m.pinned ? ' on' : '') + '" title="' + (m.pinned ? _t('dm_unpin', '取消置顶') : _t('dm_pin', '置顶')) + '" onclick="DevMail.pinMsg(\'' + m.id + '\')">📌</button>'
            + '<button class="dm-op-btn del' + (self._delConfirm === m.id ? ' confirm' : '') + '" title="' + _t('dm_delete', '删除') + '" onclick="DevMail.delMsg(\'' + m.id + '\')">' + (self._delConfirm === m.id ? _t('dm_del_confirm', '确认删除?') : '🗑') + '</button>'
            + '</div>'
            + '</div>';
        }
        box.innerHTML = html;
      },
      // ★ 管理操作（2026-9-14）：删除/置顶为全局操作，需管理员密码（同 developer.html 鉴权）
      _delConfirm: null,
      _delConfirmTimer: null,
      _adminPwd: null,
      getAdminPwd: function () {
        if (this._adminPwd != null) return this._adminPwd;
        try { this._adminPwd = localStorage.getItem('pb_dev_admin_pwd') || ''; } catch (e) { this._adminPwd = ''; }
        return this._adminPwd;
      },
      adminRowToggle: function () {
        var r = document.getElementById('dm-admin-row');
        if (r) r.style.display = (r.style.display === 'none' || !r.style.display) ? 'flex' : 'none';
      },
      saveAdminPwd: function () {
        var inp = document.getElementById('dm-admin-pwd-input');
        if (!inp) return;
        this._adminPwd = inp.value;
        try { localStorage.setItem('pb_dev_admin_pwd', this._adminPwd); } catch (e) {}
        this.adminRowToggle();
        var T = typeof __t === 'function';
        ppShowTip(T ? __t('dm_pwd_saved', '管理员密码已保存') : '管理员密码已保存', 'success');
      },
      _op: function (path, body, onOk) {
        var T = typeof __t === 'function';
        var pwd = this.getAdminPwd();
        if (!pwd) {
          ppShowTip(T ? __t('dm_need_pwd', '请先点击面板底部 🔑 设置管理员密码') : '请先点击面板底部 🔑 设置管理员密码', 'warning');
          this.adminRowToggle();
          return;
        }
        body.password = pwd;
        fetch(location.origin + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
          .then(function (r) { return r.json(); })
          .then(function (j) {
            if (j && j.ok) { if (onOk) onOk(j); }
            else { ppShowTip((j && j.message) || (T ? __t('dm_pwd_wrong', '管理员密码错误') : '管理员密码错误'), 'error'); }
          })
          .catch(function () { ppShowTip(T ? __t('dm_op_fail', '操作失败') : '操作失败', 'error'); });
      },
      pinMsg: function (id) {
        var item = null;
        for (var i = 0; i < this.items.length; i++) { if (this.items[i].id === id) { item = this.items[i]; break; } }
        if (!item) return;
        var next = !item.pinned;
        var T = typeof __t === 'function';
        this._op('/api/dev-pin-message', { id: id, pinned: next }, function () {
          ppShowTip(next ? (T ? __t('dm_pinned', '已置顶') : '已置顶') : (T ? __t('dm_unpinned', '已取消置顶') : '已取消置顶'), 'success');
        });
      },
      delMsg: function (id) {
        var self = this;
        var T = typeof __t === 'function';
        // ★ 两步确认：第一次点变红提示，3 秒内再点才删除（全局删除防误触）
        if (this._delConfirm !== id) {
          this._delConfirm = id;
          this.render();
          if (this._delConfirmTimer) clearTimeout(this._delConfirmTimer);
          this._delConfirmTimer = setTimeout(function () { self._delConfirm = null; self.render(); }, 3000);
          return;
        }
        this._delConfirm = null;
        this._op('/api/dev-delete-message', { id: id }, function () {
          ppShowTip(T ? __t('dm_deleted', '已删除') : '已删除', 'success');
        });
      }
    };
    window.DevMail = DevMail;
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function () { DevMail.init(); });
    } else {
      DevMail.init();
    }

    // ★ 游客锁定（2026-9-12）：未登录时联机全部子项 + 人机练习「双人 2v1」灰色不可互动；
    //   登录后解除。点击仍会走到各入口的 requireLogin/提示拦截（toast 引导注册）。
    function pbRefreshGuestLock() {
      var locked = typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn();
      document.querySelectorAll('#online-submenu .online-submenu-item').forEach(function (el) {
        el.classList.toggle('guest-locked', locked);
      });
      document.querySelectorAll('#practice-submenu .practice-submenu-item').forEach(function (el) {
        var oc = el.getAttribute('onclick') || '';
        var is2v1 = oc.indexOf('startPracticeGame2v2') !== -1;
        el.classList.toggle('guest-locked', locked && is2v1);
      });
      // ★ 游客（未登录）不显示好友和组队：好友按钮/面板、组队邀请面板、组队图标全部隐藏
      ['friend-btn', 'friend-panel', 'team-invite-panel', 'team-icon-container'].forEach(function (id) {
        var el = document.getElementById(id);
        if (el) el.style.display = locked ? 'none' : '';
      });
    }
    window.pbRefreshGuestLock = pbRefreshGuestLock;

    // ★ 账号系统：已登录时把头像同步到服务器账号（users.json）
    function pbSyncAvatarToAccount(dataUrl) {
      try {
        if (typeof pbIsLoggedIn === 'function' && pbIsLoggedIn() && typeof PBOnline !== 'undefined' && PBOnline.updateProfile) {
          PBOnline.updateProfile(undefined, dataUrl);
        }
      } catch (e) { /* 同步失败不影响本地 */ }
    }

    // 将emoji转换为图片data URL用于显示
    function setAvatarEmoji(emoji, skipSync) {
      const avatarImg = document.getElementById('profile-avatar-img');
      if (!avatarImg) return;
      const canvas = document.createElement('canvas');
      canvas.width = 80;
      canvas.height = 80;
      const ctx = canvas.getContext('2d');
      ctx.font = '56px serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(emoji, 40, 42);
      const dataUrl = canvas.toDataURL('image/png');
      avatarImg.src = dataUrl;
      localStorage.setItem('pbp_avatar', dataUrl);
      // skipSync=true：页面初始化默认头像，不覆盖服务器账号头像
      if (!skipSync) pbSyncAvatarToAccount(dataUrl);
    }

    // ==================== 玩家个人资料弹窗 ====================
    // 读取各模式战绩：人机模式和双人匹配用 pbp_mode_stats（分模式）；
    // 仅"单人匹配"以游戏结束弹窗的总战绩 pbp_online_stats 为准
    function ppReadModeStats(mode) {
      if (mode === 'online_1v1') {
        if (typeof window.PBGetOnlineMatchStats === 'function') return window.PBGetOnlineMatchStats(mode);
        // online-client.js 未加载时直接读 localStorage 兜底
        try {
          const s = JSON.parse(localStorage.getItem('pbp_online_stats') || '{}');
          const total = s.totalGames || 0;
          const wins = s.wins || 0;
          return { games: total, wins: wins, draws: 0, winRate: total > 0 ? Math.round(wins / total * 100) : 0 };
        } catch (e) { return { games: 0, wins: 0, draws: 0, winRate: 0 }; }
      }
      if (typeof window.PBGetModeStats === 'function') return window.PBGetModeStats(mode);
      try {
        const all = JSON.parse(localStorage.getItem('pbp_mode_stats') || '{}');
        return all[mode] || { games: 0, wins: 0, draws: 0 };
      } catch (e) { return { games: 0, wins: 0, draws: 0 }; }
    }
    // ==================== 对局记录/回放（2026-9-11） ====================
    var ppExpandedMode = '';          // 当前展开记录的模式 key（同时只展开一个）
    var ppOnlineReplayCache = null;   // 服务器回放列表缓存（online_1v1 + online_2v2 合并元信息）
    var ppOnlineListLoading = false;
    var ppOnlineFullCache = {};       // id -> 完整回放对象（本会话已拉取的联机回放）
    var ppPendingFetch = null;        // {id, action: 'play'|'download'} 等待服务器回传

    // （2026-9-12 云端化：原本地回放存储 ppReadLocalReplays/pbp_replays_<mode> 已移除，全模式走服务器）
    function ppGetOnlineList(mode) {
      if (!ppOnlineReplayCache) return null;
      return ppOnlineReplayCache.filter(function (r) { return r.mode === mode; });
    }
    function ppFmtTime(ts) {
      var d = new Date(ts || Date.now());
      var p = function (n) { return n < 10 ? '0' + n : '' + n; };
      return (d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes());
    }
    function ppModeName(key) {
      var T = typeof __t === 'function';
      if (key === 'ai_1v1') return T ? __t('pp_mode_ai_1v1', '人机 1v1') : '人机 1v1';
      if (key === 'ai_2v2') return T ? __t('pp_mode_ai_2v2', '人机 2v1') : '人机 2v1';
      if (key === 'online_1v1') return T ? __t('pp_mode_online_1v1', '单人匹配') : '单人匹配';
      if (key === 'online_2v2') return T ? __t('pp_mode_online_2v2', '双人匹配') : '双人匹配';
      return key;
    }
    // 展开某模式的对局记录（★ 云端化：登录用户统一向服务器拉取全模式列表；游客不记录回放）
    function ppToggleMode(mode) {
      if (ppExpandedMode === mode) { ppExpandedMode = ''; }
      else {
        ppExpandedMode = mode;
        if (!ppOnlineReplayCache && !ppOnlineListLoading) {
          if (typeof pbIsLoggedIn === 'function' && pbIsLoggedIn()) {
            ppOnlineListLoading = true;
            authSend({ type: 'replay_list_request', data: { token: localStorage.getItem('pbp_auth_token') || '' }, _replyType: 'replay_list' }, function (d) {
              ppOnlineListLoading = false;
              ppOnlineReplayCache = d && Array.isArray(d.list) ? d.list : [];
              ppRenderProfileKeep();
            });
            // 服务器 3 秒未响应则停止 loading 态
            setTimeout(function () { ppOnlineListLoading = false; ppRenderProfileKeep(); }, 3000);
          }
        }
      }
      ppRenderProfileKeep();
    }
    function ppRenderProfileKeep() {
      if (document.getElementById('player-profile-modal') &&
          document.getElementById('player-profile-modal').style.display !== 'none') {
        renderProfileStats();
      }
    }
    // 服务器回放列表到达（online-client.js 消息桥）
    window.PBOnReplayList = function (list) {
      ppOnlineListLoading = false;
      ppOnlineReplayCache = Array.isArray(list) ? list : [];
      ppRenderProfileKeep();
    };
    // 服务器完整回放到达
    window.PBOnReplayData = function (data) {
      if (!data) return;
      var id = data.id;
      if (data.missing || !data.replay) {
        ppShowTip('回放不存在或已被清理');
        if (ppPendingFetch && ppPendingFetch.id === id) ppPendingFetch = null;
        return;
      }
      ppOnlineFullCache[id] = data.replay;
      if (ppPendingFetch && ppPendingFetch.id === id) {
        var act = ppPendingFetch.action;
        var rep = data.replay;
        ppPendingFetch = null;
        if (act === 'play') openReplayPlayer(rep);
        else downloadReplayJSON(rep);
      }
    };
    function ppShowTip(msg) {
      try {
        if (typeof PBOnline !== 'undefined' && PBOnline && typeof PBOnline.showOnlineToast === 'function') {
          PBOnline.showOnlineToast(msg, 'warning');
        }
      } catch (e) {}
    }
    // 拿到完整回放对象（★ 云端化：登录后所有模式统一从服务器拉取；游客不保存回放）
    function ppObtainReplay(mode, id, action) {
      if (ppOnlineFullCache[id]) return ppOnlineFullCache[id];
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        ppShowTip(__t('pp_guest_no_replay', '游客不保存对局回放'));
        return null;
      }
      ppPendingFetch = { id: id, action: action };
      try { if (typeof ppShowTip === 'function') ppShowTip('正在从服务器获取回放…'); } catch (e) {}
      authSend({ type: 'replay_get', data: { token: localStorage.getItem('pbp_auth_token') || '', id: id }, _replyType: 'replay_data' }, function (d) {
        window.PBOnReplayData(d);
      });
      return null;
    }
    function ppPlayReplay(mode, id) {
      var rep = ppObtainReplay(mode, id, 'play');
      if (rep) {
        try { closeProfileModal(); } catch (e) {}  // 关闭资料弹窗，露出真实棋盘
        openReplayPlayer(rep);
      }
    }
    function ppDownloadReplay(mode, id) {
      var rep = ppObtainReplay(mode, id, 'download');
      if (rep) downloadReplayJSON(rep);
    }
    function downloadReplayJSON(replay) {
      try {
        var d = new Date(replay.time || Date.now());
        var p = function (n) { return n < 10 ? '0' + n : '' + n; };
        var name = '回放_' + (replay.mode || 'unknown') + '_' +
          d.getFullYear() + p(d.getMonth() + 1) + p(d.getDate()) + '_' + p(d.getHours()) + p(d.getMinutes()) +
          '_' + (replay.id || '') + '.json';
        var blob = new Blob([JSON.stringify(replay, null, 2)], { type: 'application/json' });
        var a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = name;
        document.body.appendChild(a);
        a.click();
        setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 200);
      } catch (e) {}
    }

    // ==================== 导入本地回放文件（2026-9-13） ====================
    // 下载/分享的 .json 回放 → 校验 → 游戏内播放器播放
    function ppImportReplayFile() {
      var inp = document.getElementById('pp-replay-import-input');
      if (!inp) return;
      inp.value = '';  // 允许重复选择同一文件
      inp.click();
    }
    function ppHandleReplayImportFile(file) {
      if (!file) return;
      var T = typeof __t === 'function';
      var reader = new FileReader();
      reader.onload = function () {
        var rep = null;
        try { rep = JSON.parse(reader.result); } catch (e) { rep = null; }
        // 校验：必须是含非空 actions 数组与 mode 字符串的回放对象
        if (!rep || typeof rep !== 'object' || !Array.isArray(rep.actions) ||
            rep.actions.length === 0 || typeof rep.mode !== 'string') {
          ppShowTip(T ? __t('pp_import_invalid', '回放文件格式无效') : '回放文件格式无效');
          return;
        }
        try { closeProfileModal(); } catch (e) {}  // 关闭资料弹窗，露出真实棋盘
        openReplayPlayer(rep);
      };
      reader.onerror = function () {
        ppShowTip(T ? __t('pp_import_read_fail', '读取文件失败') : '读取文件失败');
      };
      reader.readAsText(file);
    }
    window.ppImportReplayFile = ppImportReplayFile;
    window.ppHandleReplayImportFile = ppHandleReplayImportFile;

    function renderProfileStats() {
      window.renderProfileStats = renderProfileStats;  // ★ 2026-9-17：供 online-client 战绩同步后刷新资料弹窗
      const box = document.getElementById('pp-stats');
      if (!box) return;
      var T = typeof __t === 'function';
      var isEn = document.documentElement && document.documentElement.lang === 'en';
      var modes = [
        { key: 'ai_1v1', name: T ? __t('pp_mode_ai_1v1', '人机 1v1') : '人机 1v1' },
        { key: 'ai_2v2', name: T ? __t('pp_mode_ai_2v2', '人机 2v1') : '人机 2v1' },
        { key: 'online_1v1', name: T ? __t('pp_mode_online_1v1', '单人匹配') : '单人匹配' },
        { key: 'online_2v2', name: T ? __t('pp_mode_online_2v2', '双人匹配') : '双人匹配' }
      ];
      // ★ 游客（未登录）只显示「人机 1v1」记录，其余模式游客不可用
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        modes = modes.filter(function (m) { return m.key === 'ai_1v1'; });
      }
      var html = '';
      modes.forEach(function (m) {
        const s = ppReadModeStats(m.key);
        const rate = s.games > 0 ? Math.round((s.wins || 0) / s.games * 100) : 0;
        var detail;
        if (s.games > 0) {
          detail = isEn
            ? (s.wins || 0) + 'W / ' + s.games + 'G' + ((s.draws || 0) > 0 ? ' (' + s.draws + 'D)' : '')
            : (s.wins || 0) + '胜 / ' + s.games + '场' + ((s.draws || 0) > 0 ? '（平 ' + s.draws + '）' : '');
        } else {
          detail = T ? __t('pp_no_stats', '暂无战绩') : '暂无战绩';
        }
        // ★ 2026-10-11 还原（用户指令）：恢复人机模式回放（2026-9-30"仅联机展示"规则作废）——
        //   全部模式行均提供"对局记录"展开（人机 ai_1v1/ai_2v2 列表同样走云端缓存渲染）
        var _hasReplay = true;
        var expanded = _hasReplay && ppExpandedMode === m.key;
        html += '<div class="pp-stat-row' + (_hasReplay ? ' pp-has-replays' : '') + (expanded ? ' pp-expanded' : '') + '"'
          + (_hasReplay ? ' onclick="ppToggleMode(\'' + m.key + '\')"' : '')
          + '>'
          + '<span class="pp-stat-mode">' + m.name + '</span>'
          + '<span class="pp-stat-detail">' + detail + '</span>'
          + '<span class="pp-stat-rate">' + rate + '%</span>'
          + (_hasReplay ? '<span class="pp-caret">▶</span>' : '')
          + '</div>';
        if (expanded) html += ppRenderReplayList(m.key);
      });
      box.innerHTML = html;
    }
    // 某模式的对局记录列表（★ 云端化：全模式统一读服务器列表缓存；游客不记录回放）
    function ppRenderReplayList(mode) {
      var T = typeof __t === 'function';
      var html = '<div class="pp-replay-list"><div class="pp-replay-title">对局记录</div>';
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        return html + '<div class="pp-replay-empty">' + (T ? __t('pp_guest_no_replay', '游客不保存对局回放') : '游客不保存对局回放') + '</div></div>';
      }
      if (ppOnlineListLoading && !ppOnlineReplayCache) {
        return html + '<div class="pp-replay-loading">正在从服务器获取…</div></div>';
      }
      var list = ppGetOnlineList(mode);
      if (!list || list.length === 0) {
        return html + '<div class="pp-replay-empty">' + (T ? __t('pp_no_replays', '暂无对局记录') : '暂无对局记录') + '</div></div>';
      }
      // ★ 2026-9-18 FIX（取消星标恢复原有排序）：渲染前按"星标优先→时间倒序"重排。
      //   此前服务器排好序后客户端按缓存数组原样渲染，取消星标后该行停留在置顶位置不回落
      list = list.slice().sort(function (a, b) {
        return ((b.starred ? 1 : 0) - (a.starred ? 1 : 0)) || ((b.time || 0) - (a.time || 0));
      });
      list.forEach(function (r) {
        html += ppReplayItemHTML(r, mode);
      });
      return html + '</div>';
    }
    function ppReplayItemHTML(r, mode) {
      var T1 = typeof __t === 'function';
      var res = r.result === 'win' ? (T1 ? __t('lb_res_win', '胜') : '胜') : r.result === 'lose' ? (T1 ? __t('lb_res_lose', '负') : '负') : (T1 ? __t('lb_res_draw', '平') : '平');
      var cls = r.result === 'win' ? 'win' : r.result === 'lose' ? 'lose' : 'draw';
      // ★ 2026-9-17：记录行改为显示对局积分（去除获胜路数对比，用户要求）
      // ★ 2026-9-18：五路全胜（pw=5）积分加醒目标识；行首显示双方玩家名称
      var T0 = typeof __t === 'function';
      var _sweep = (r.pw === 5) ? ' <span class="rp-sweep">👑' + (T0 ? __t('rp_sweep', '全胜') : '全胜') + '</span>' : '';
      var _pl = String(r.players || '').replace(/[&<>"']/g, function (c) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
      });
      var meta = (_pl ? '<span class="pp-replay-line1"><span class="pp-meta-scroll">' + _pl + '</span></span>' : '')
        + '<span class="pp-replay-line2"><span class="pp-meta-scroll">' + (T0 ? __t('rp_points', '积分') : '积分') + ' ' + (r.score || 0) + _sweep
        + ' · ' + (r.turns || 0) + (T0 ? __t('lb_turns', '回合') : '回合') + ' · ' + ppFmtTime(r.time) + '</span></span>';
      var eid = String(r.id || '').replace(/[^a-zA-Z0-9]/g, '');
      var T = typeof __t === 'function';
      var starTitle = r.starred ? (T ? __t('pp_star_remove', '取消星标') : '取消星标') : (T ? __t('pp_star_add', '星标置顶') : '星标置顶');
      return '<div class="pp-replay-item' + (r.starred ? ' pp-starred' : '') + '">'
        + '<span class="pp-replay-res ' + cls + '">' + res + '</span>'
        + '<span class="pp-replay-meta"><span class="pp-replay-texts">' + meta + '</span></span>'
        + '<button class="pp-replay-btn star' + (r.starred ? ' on' : '') + '" title="' + starTitle + '" onclick="event.stopPropagation();ppToggleReplayStar(\'' + eid + '\')">' + (r.starred ? '★' : '☆') + '</button>'
        + '<button class="pp-replay-btn" onclick="event.stopPropagation();ppPlayReplay(\'' + mode + '\',\'' + eid + '\')">▶ ' + (T ? __t('pp_replay_play', '回放') : '回放') + '</button>'
        + '<button class="pp-replay-btn dl" onclick="event.stopPropagation();ppDownloadReplay(\'' + mode + '\',\'' + eid + '\')">⬇</button>'
        + '</div>';
    }
    // ★ 星标/取消星标（2026-9-14）：星标记录置顶保存、不参与末位删除（走登录短连接，带 token）
    function ppToggleReplayStar(eid) {
      var id = String(eid || '');
      var item = null;
      if (ppOnlineReplayCache) {
        for (var i = 0; i < ppOnlineReplayCache.length; i++) {
          if (String(ppOnlineReplayCache[i].id) === id) { item = ppOnlineReplayCache[i]; break; }
        }
      }
      if (!item) return;
      var next = !item.starred;
      var T = typeof __t === 'function';
      authSend({ type: 'replay_star', data: { token: localStorage.getItem('pbp_auth_token') || '', id: id, starred: next }, _replyType: 'replay_star_done' }, function (d) {
        if (!d || d.missing) { ppShowTip(T ? __t('pp_replay_missing', '回放不存在或已被清理') : '回放不存在或已被清理'); return; }
        item.starred = !!d.starred;
        ppRenderProfileKeep();
        ppShowTip(d.starred ? (T ? __t('pp_star_on', '已星标，该记录将置顶保存') : '已星标，该记录将置顶保存')
                            : (T ? __t('pp_star_off', '已取消星标') : '已取消星标'));
      });
    }
    window.ppToggleReplayStar = ppToggleReplayStar;

    // ==================== 主页排行榜（2026-9-14） ====================
    // 单人/双人匹配胜率前十；前三差异化样式；点击玩家展开最近10场记录（含回放）
    var lbMode = 'online_1v1';
    var lbCache = { online_1v1: null, online_2v2: null };
    var lbLoading = false;
    var lbExpandedUid = '';
    var lbDetailCache = {};   // uid+'_'+mode -> list（undefined=未拉取）
    var lbDetailLoading = '';
    var lbFullCache = {};     // uid+'_'+id -> 完整回放对象
    function lbEsc(s) {
      return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
    function lbAvatarHtml(ava) {
      if (ava && String(ava).indexOf('data:') === 0) return '<img src="' + ava + '" />';
      return lbEsc(ava || '🗡️');
    }
    // 刷新排行榜（主页显示时调用；同模式有缓存则直接渲染）
    function lbRefresh(force) {
      if (lbCache[lbMode] && !force) { lbRender(); return; }
      if (lbLoading) return;
      lbLoading = true;
      lbRenderLoading();
      authSend({ type: 'leaderboard_request', data: {}, _replyType: 'leaderboard_data' }, function (d) {
        lbLoading = false;
        if (d && Array.isArray(d.solo)) {
          lbCache.online_1v1 = d.solo;
          lbCache.online_2v2 = Array.isArray(d.double) ? d.double : [];
        }
        lbRender();
      });
      setTimeout(function () { lbLoading = false; }, 3000);
    }
    function lbRenderLoading() {
      var el = document.getElementById('lb-list');
      if (el) el.innerHTML = '<div class="lb-empty">' + (typeof __t === 'function' ? __t('lb_loading', '加载中…') : '加载中…') + '</div>';
    }
    function lbRender() {
      var el = document.getElementById('lb-list');
      if (!el) return;
      var T = typeof __t === 'function';
      var list = lbCache[lbMode];
      if (!list) { lbRenderLoading(); return; }
      if (list.length === 0) {
        el.innerHTML = '<div class="lb-empty">' + (T ? __t('lb_no_data', '暂无排行数据') : '暂无排行数据') + '</div>';
        return;
      }
      var html = '';
      list.forEach(function (p, i) {
        var rank = i + 1;
        var rankCls = rank <= 3 ? ' r' + rank : '';
        var rankTxt = rank === 1 ? '👑' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : String(rank);
        var expanded = lbExpandedUid === p.userId;
        html += '<div class="lb-row' + rankCls + (expanded ? ' lb-open' : '') + '" onclick="lbToggleDetail(\'' + p.userId + '\')">'
          + '<span class="lb-rank">' + rankTxt + '</span>'
          + '<span class="lb-ava">' + lbAvatarHtml(p.avatar) + '</span>'
          + '<span class="lb-name"><span class="lb-name-ell">' + lbEsc(p.nickname) + '</span><span class="lb-name-txt">' + lbEsc(p.nickname) + '</span></span>'
          + '<span class="lb-games">' + p.games + (T ? __t('lb_games', '场') : '场')
          + ' <span style="font-size:0.72em;opacity:0.85;">' + (T ? __t('lb_wl_fmt', '(胜{w} {l}负)').replace('{w}', (p.wins || 0)).replace('{l}', Math.max(0, (p.games || 0) - (p.wins || 0) - (p.draws || 0))) : '') + '</span></span>'
          + '<span class="lb-rate">' + p.winRate + '%</span>'
          + '</div>';
        if (expanded) {
          var key = p.userId + '_' + lbMode;
          var det = lbDetailCache[key];
          html += '<div class="lb-detail">';
          if (det === undefined) {
            html += '<div class="lb-empty">' + (T ? __t('lb_loading', '加载中…') : '加载中…') + '</div>';
            if (lbDetailLoading !== key) {
              lbDetailLoading = key;
              (function (_uid, _mode, _key) {
                authSend({ type: 'leaderboard_detail_request', data: { userId: _uid, mode: _mode }, _replyType: 'leaderboard_detail' }, function (d) {
                  lbDetailCache[_key] = (d && Array.isArray(d.list)) ? d.list : [];
                  if (lbExpandedUid === _uid && lbMode === _mode) lbRender();
                });
              })(p.userId, lbMode, key);
            }
          } else if (det.length === 0) {
            html += '<div class="lb-empty">' + (T ? __t('pp_no_replays', '暂无对局记录') : '暂无对局记录') + '</div>';
          } else {
            det.forEach(function (r) { html += lbDetailItemHTML(r); });
          }
          html += '</div>';
        }
      });
      el.innerHTML = html;
      lbPrepareNameScroll(el);   // ★ 悬停跑马灯：绑定每行的悬停滚动动画（2026-9-30）
    }
    // ★ 2026-9-30 悬停跑马灯（流内替换 + WAAPI）：渲染时（省略号层可见）实测溢出量缓存到行，
    //   悬停时省略号层隐藏、滚动层在【原位置流内】显示（位置物理不丢），并播放精确像素的滚动循环；
    //   未溢出（shift≤2px）不播动画。mouseleave 停止。
    function lbPrepareNameScroll(listEl) {
      if (!listEl) return;
      var rows = listEl.querySelectorAll('.lb-row');
      for (var i = 0; i < rows.length; i++) {
        (function (row) {
          if (row._lbScrollBound) return;
          row._lbScrollBound = true;
          var nameEl = row.querySelector('.lb-name');
          var ell = nameEl ? nameEl.querySelector('.lb-name-ell') : null;
          var txt = nameEl ? nameEl.querySelector('.lb-name-txt') : null;
          if (!ell || !txt) return;
          // 渲染时测量（ell 可见）：全名渲染宽 - 可视宽 = 需要滚动的位移
          row._lbShift = Math.max(0, ell.getBoundingClientRect().width - nameEl.clientWidth);
          row.addEventListener('mouseenter', function () {
            var shift = row._lbShift || 0;
            if (shift <= 2) return;   // 未溢出：不滚动
            txt.getAnimations().forEach(function (a) { a.cancel(); });
            txt.animate([
              { transform: 'translateX(0)' },
              { transform: 'translateX(0)', offset: 0.2 },
              { transform: 'translateX(' + (-shift) + 'px)', offset: 0.55 },
              { transform: 'translateX(' + (-shift) + 'px)', offset: 0.8 },
              { transform: 'translateX(0)' }
            ], { duration: 5000, iterations: Infinity, easing: 'ease-in-out' });
          });
          row.addEventListener('mouseleave', function () {
            txt.getAnimations().forEach(function (a) { a.cancel(); });
          });
        })(rows[i]);
      }
    }
    function lbDetailItemHTML(r) {
      var T1 = typeof __t === 'function';
      var res = r.result === 'win' ? (T1 ? __t('lb_res_win', '胜') : '胜') : r.result === 'lose' ? (T1 ? __t('lb_res_lose', '负') : '负') : (T1 ? __t('lb_res_draw', '平') : '平');
      var cls = r.result === 'win' ? 'win' : r.result === 'lose' ? 'lose' : 'draw';
      // ★ 2026-9-17：记录行改为显示对局积分（去除获胜路数对比）
      // ★ 2026-9-18：行首显示双方玩家名称；移除星标显示（星标是个人收藏，不进排行榜明细）
      var T0 = typeof __t === 'function';
      var _pl = String(r.players || '').replace(/[&<>"']/g, function (c) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
      });
      // ★ 2026-9-18：积分与回合分开显示；回放按钮移入悬停浮动条（默认行不再显示）
      var meta = (_pl ? '<span class="pp-replay-line1"><span class="pp-meta-scroll">' + _pl + '</span></span>' : '')
        + '<span class="pp-replay-line2">'
        + '<span class="lb-seg">' + (T0 ? __t('rp_points', '积分') : '积分') + ' ' + (r.score || 0) + '</span>'
        + '<span class="lb-mid-deco"></span>'
        + '<span class="lb-seg">' + (r.turns || 0) + (T0 ? __t('lb_turns', '回合') : '回合') + '<span class="lb-time-cell"> · ' + ppFmtTime(r.time) + '</span></span>'
        + '</span>';
      // ★ 2026-9-20：悬停浮动条不再显示双方玩家名称（面板行内保留）——只显示积分/回合/时间
      var fullText = (T0 ? __t('rp_points', '积分') : '积分') + ' ' + (r.score || 0)
        + ' · ' + (r.turns || 0) + (T0 ? __t('lb_turns', '回合') : '回合') + ' · ' + ppFmtTime(r.time);
      var eid = String(r.id || '').replace(/[^a-zA-Z0-9]/g, '');
      var T = typeof __t === 'function';
      return '<div class="pp-replay-item">'
        + '<span class="pp-replay-res ' + cls + '">' + res + '</span>'
        + '<span class="pp-replay-meta" data-full="' + fullText.replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
          }) + '" data-eid="' + eid + '"><span class="pp-replay-texts">' + meta + '</span></span>'
        + '</div>';
    }
    function lbToggleDetail(uid) {
      lbExpandedUid = (lbExpandedUid === uid) ? '' : uid;
      lbRender();
    }
    // ★ 2026-9-18：悬停电子横幅——对局记录行文字溢出时，悬停自动左右滚动展示全文。
    //   事件委托一次绑定；只在 scrollWidth 真的大于 clientWidth 时启动，短行不滚。
    //   滚动位移 = 溢出量（--ppShift），速度按溢出量自适应（约 40px/秒，2~12 秒封顶）
    (function () {
      if (window.__ppMarqueeDelegated) return;
      window.__ppMarqueeDelegated = true;
      // ★ 排行榜明细行：悬停"整行任意位置"（含按钮/边缘）→ 显示横向浮动条（fixed，可超出面板）
      function lbShowFloatTip(row) {
        var m = row.querySelector('.pp-replay-meta[data-full]');
        if (!m) return;
        var full = m.getAttribute('data-full');
        if (!full) return;
        var tip = document.getElementById('lb-float-tip');
        if (!tip) {
          tip = document.createElement('div');
          tip.id = 'lb-float-tip';
          document.body.appendChild(tip);
        }
        tip.textContent = full;
        // ★ 2026-9-18：与行完全对齐（同一垂直水平线）：同 top、同高，盖在行线上展示
        tip.style.display = 'flex';
        var r = row.getBoundingClientRect();
        tip.style.top = r.top + 'px';
        tip.style.height = r.height + 'px';
        var mr = m.getBoundingClientRect();
        // ★ 锚定"积分"文字起点（胜/负徽章右侧，与最初版本一致），向右扩展
        tip.style.left = mr.left + 'px';
      }
      function lbHideFloatTip() {
        var tip = document.getElementById('lb-float-tip');
        if (tip) tip.style.display = 'none';
      }
      // ★ 浮动条内回放按钮点击
      window._lbFloatReplayClick = function () {
        var uid = window._lbFloatUid, eid = window._lbFloatEid;
        lbHideFloatTip();
        if (uid && eid) lbPlayReplay(uid, eid);
      };
      // ★ 2026-9-18 FIX（展开框闪烁）：行/框之间移动不再立即隐藏——同行不重建、
      //   指针在框上保持显示、移出两者 180ms 后才隐藏
      var _lbTipRow = null;
      var _lbTipHideTimer = null;
      function lbCancelTipHide() { if (_lbTipHideTimer) { clearTimeout(_lbTipHideTimer); _lbTipHideTimer = null; } }
      function lbScheduleTipHide() {
        if (_lbTipHideTimer) clearTimeout(_lbTipHideTimer);
        _lbTipHideTimer = setTimeout(function () { _lbTipHideTimer = null; _lbTipRow = null; lbHideFloatTip(); }, 180);
      }
      function lbShowFloatTip(row) {
        lbCancelTipHide();
        if (_lbTipRow === row) return;  // 同一行：不重建（避免闪烁/按钮悬停被打断）
        _lbTipRow = row;
        var mm = row.querySelector('.pp-replay-meta[data-full]');
        if (!mm) return;
        var fullF = mm.getAttribute('data-full');
        var eidF = mm.getAttribute('data-eid') || '';
        var panel = document.getElementById('lb-panel');
        if (!panel) return;
        var tipF = document.getElementById('lb-float-tip');
        if (!tipF) {
          tipF = document.createElement('div');
          tipF.id = 'lb-float-tip';
          panel.appendChild(tipF);  // ★ 挂进缩放面板内：跟随 zoom 缩放，任何缩放下都对齐
          tipF.addEventListener('mouseenter', lbCancelTipHide);
          tipF.addEventListener('mouseleave', lbScheduleTipHide);
        }
        tipF.innerHTML = '<span class="lb-float-text">' + fullF.replace(/[&<>"']/g, function (c) {
          return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        }) + '</span><button class="lb-float-play" onclick="event.stopPropagation();window._lbFloatReplayClick()">▶ ' +
          (typeof __t === 'function' ? __t('pp_replay_play', '回放') : '回放') + '</button>';
        window._lbFloatUid = lbExpandedUid;
        window._lbFloatEid = eidF;
        tipF.style.display = 'flex';
        // ★ 2026-9-22 FIX（滚动后浮动条跑偏）：明细列表有滚动条时，行的视觉位置 = 布局位置 - 滚动量，
        //   原 offsetTop 链不含滚动量 → 滚得越多浮动条偏得越远。
        //   改用 gBCR 差值 ÷ 面板 zoom：自动包含滚动修正，任何缩放/滚动状态下都与行对齐。
        var _lbZoom = parseFloat(panel.style.zoom) || 1;
        var _panelRect = panel.getBoundingClientRect();
        var _rowRect = row.getBoundingClientRect();
        var _metaRect = mm.getBoundingClientRect();
        var x = (_metaRect.left - _panelRect.left) / _lbZoom;
        // 垂直 y：锚"行"顶（top=行 top、height=行高，与行完全对齐）
        var y = (_rowRect.top - _panelRect.top) / _lbZoom;
        tipF.style.left = x + 'px';
        tipF.style.top = y + 'px';
        tipF.style.height = (row.offsetHeight) + 'px';
        // 面板内右缘保护（局部坐标）：靠右对齐贴右缘，但左端不越过胜负徽章（meta 起点 x）——不遮挡胜负文字
        var tw = tipF.offsetWidth;
        var pw = panel.offsetWidth;
        if (x + tw > pw - 2) tipF.style.left = Math.max(x, pw - 2 - tw) + 'px';
      }
      document.addEventListener('mouseover', function (e) {
        // ★ 排行榜明细行：悬停显示横向浮动条（fixed 定位，可超出面板边界），不用横幅滚动（2026-9-18 设计）
        // ★ 2026-9-22 FIX（用户反馈）：个人资料弹窗的对局记录列表复用 .lb-detail 样式，
        //   此前被本拦截一并禁用了滚动（且浮动条只存在于排行榜面板）→ 个人资料悬停无任何展开。
        //   现区分：排行榜面板内=浮动条；个人资料弹窗内=恢复横幅滚动
        var row = e.target && e.target.closest ? e.target.closest('.lb-detail .pp-replay-item') : null;
        if (row && !row.closest('#player-profile-modal')) { lbShowFloatTip(row); return; }
        var m = e.target && e.target.closest ? e.target.closest('.pp-replay-meta') : null;
        if (!m) return;
        var inner = m.querySelector('.pp-meta-scroll');
        var l1 = m.querySelector('.pp-replay-line1');
        var box = l1 || m;   // ★ 两行结构：只对第一行（玩家名称）做溢出滚动
        if (!inner) return;
        var overflow = box.scrollWidth - box.clientWidth;
        if (overflow > 4) {
          box.style.setProperty('--ppShift', '-' + overflow + 'px');
          var dur = Math.min(12, Math.max(2, overflow / 40));
          box.style.setProperty('--ppDur', dur + 's');
          inner.classList.add('pp-marquee-on');
        } else {
          inner.classList.remove('pp-marquee-on');
        }
        // ★ 2026-9-22 FIX（用户反馈：滚动了但永远遮挡）：line2 自身是 overflow:hidden 窗口，
        //   此前动画直接加在窗口上——窗口随内容一起平移，相对位置不变，永远截断。
        //   现与 line1 同构：内容包内层 .pp-meta-scroll，动画作用于内层，窗口不动。
        //   偏移量 = 溢出量 + 40px 保险，行尾完整进入视野
        var l2 = m.querySelector('.pp-replay-line2');
        if (l2) {
          var l2i = l2.querySelector('.pp-meta-scroll');
          if (l2i) {
            var ov2 = l2i.scrollWidth - l2.clientWidth;
            if (ov2 > 4) {
              l2i.style.setProperty('--ppShift', '-' + (ov2 + 40) + 'px');
              l2i.style.setProperty('--ppDur', Math.min(12, Math.max(2, (ov2 + 40) / 60)) + 's');
              l2i.classList.add('pp-marquee-on');
            } else {
              l2i.classList.remove('pp-marquee-on');
            }
          }
        }
      });
      // ★ 移出排行榜明细行/浮动条 → 延迟隐藏（移入彼此则保持）
      document.addEventListener('mouseout', function (e) {
        var rel = e.relatedTarget;
        var row = e.target && e.target.closest ? e.target.closest('.lb-detail .pp-replay-item') : null;
        if (row) {
          if (rel && rel.closest && ((row.contains(rel)) || rel.closest('#lb-float-tip'))) return; // 行内互移/移入框：保持
          lbScheduleTipHide();
          return;
        }
        var tTip = e.target && e.target.closest ? e.target.closest('#lb-float-tip') : null;
        if (tTip) {
          if (rel && rel.closest && (rel.closest('#lb-float-tip') || rel.closest('.lb-detail'))) return; // 移入行：保持
          lbScheduleTipHide();
        }
      });
    })();
    function lbSwitchMode(mode) {
      if (lbMode === mode) return;
      lbMode = mode;
      lbExpandedUid = '';
      var t = document.getElementById('lb-toggle');
      if (t) {
        var opts = t.querySelectorAll('.lb-opt');
        for (var i = 0; i < opts.length; i++) {
          opts[i].classList.toggle('on', opts[i].dataset.mode === mode);
        }
      }
      var th = document.getElementById('lb-thumb');
      if (th) th.classList.toggle('right', mode === 'online_2v2');
      lbRefresh(false);
    }
    function lbPlayReplay(uid, eid) {
      var id = String(eid || '');
      var key = uid + '_' + id;
      var T = typeof __t === 'function';
      if (lbFullCache[key]) {
        try { closeProfileModal(); } catch (e) {}
        openReplayPlayer(lbFullCache[key]);
        return;
      }
      ppShowTip(T ? __t('lb_fetching', '正在从服务器获取回放…') : '正在从服务器获取回放…');
      authSend({ type: 'leaderboard_replay_get', data: { userId: uid, id: id }, _replyType: 'leaderboard_replay_data' }, function (d) {
        if (!d || d.missing || !d.replay) {
          ppShowTip(T ? __t('pp_replay_missing', '回放不存在或已被清理') : '回放不存在或已被清理');
          return;
        }
        lbFullCache[key] = d.replay;
        try { closeProfileModal(); } catch (e) {}
        openReplayPlayer(d.replay);
      });
    }
    window.lbSwitchMode = lbSwitchMode;
    window.lbToggleDetail = lbToggleDetail;
    window.lbPlayReplay = lbPlayReplay;
    window.lbRefresh = lbRefresh;
    // ★ 入口点击：展开/收起排行榜面板（展开时强制拉最新数据）
    function lbTogglePanel() {
      var p = document.getElementById('lb-panel');
      if (!p) return;
      var opening = !p.classList.contains('open');
      p.classList.toggle('open', opening);
      if (opening) { try { lbRefresh(true); } catch (e) {} }
    }
    window.lbTogglePanel = lbTogglePanel;
    // ★ 刷新排行榜入口可见性（2026-9-14）：排行榜属在线内容，游客不显示
    function lbRefreshVisibility() {
      var e = document.getElementById('lb-entry');
      if (!e) return;
      var guest = (typeof pbIsLoggedIn === 'function') && !pbIsLoggedIn();
      var changed = e.classList.contains('guest-hidden') !== guest; // 显隐状态即将变化（当前态≠目标态）
      e.classList.toggle('guest-hidden', guest);
      if (guest) {
        var p = document.getElementById('lb-panel');
        if (p) p.classList.remove('open');
      }
      // ★ 显隐切换后重算右上角定位（排行榜隐藏后消息 ✉️ 需左移补位；resize 触发 updateScale 全量重算）
      if (changed) { try { window.dispatchEvent(new Event('resize')); } catch (e2) {} }
    }
    window.lbRefreshVisibility = lbRefreshVisibility;
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function () { try { lbRefreshVisibility(); lbRefresh(); } catch (e) {} });
    } else {
      try { lbRefreshVisibility(); lbRefresh(); } catch (e) {}
    }

    // ==================== 回放播放器（直接复用真实对局界面渲染，2026-9-11） ====================
    // 原理：把快照数据写入 GameState，再调用 updateUI()，由真实棋盘渲染管线出图；
    // 打开前保存当前棋盘状态，关闭时还原，不影响进行中的对局或主页。
    var rpActions = [];   // 当前回放的动作快照序列
    var rpIdx = 0;
    var rpTimer = null;         // 播放循环令牌（truthy=播放中）
    var rpStepping = false;     // 动画步进执行中（防重入）
    var rpEpoch = 0;            // ★ 回放代次：跳转/重播/暂停/关闭时 +1，作废旧播放循环与进行中的发牌动画（防止发牌动画重复叠飞）
    var rpDealProgress = null;  // ★ 发牌进度记忆：暂停后续播从暂停处继续（{phase,card}=已完成张数；'done'=发牌已完整展示；null=从头开始）
    var rpStepCtx = null;       // ★ 2026-10-02 匹配手断点：{ idx, mt, clearAura }——暂停/单步中断在"出牌已落场、
                                //   匹配动画未完成"时记录，续播从场上直接完成匹配动画（不重放出牌）；跳转/重播/回退时清除
    var rpDealAbort = false;    // ★ 2026-9-26：发牌超时中止标记（超时后发牌协程在下一张检查点自毁，防止并发写槽）
    var rpAutoPlayTimer = null; // 打开回放后的自动起播定时器（关闭/重开时清除）
    var rpClickBlocker = null;  // capture 点击拦截器（保 hover、禁 JS 点击）
    var rpSavedAudio = null;    // 回放前用户音频设置（静音/音效音量，关闭时恢复）
    var rpSavedGamePhase = null;  // 回放前的 gamePhase（关闭时恢复）
    var _rp2v2LayoutApplied = false;  // ★ 2026-9-18：2v2 回放是否套用了四人布局（关闭时还原两翼）
    var rpSavedTimerDisplay = null; // 回放前对局时间计时器的内联 display 值（关闭时恢复，防止误显示）
    var _rpPrevWins = null;       // 上一帧快照的拼点结果（用于回放胜/负音效）
    var rpReplay = null;
    var rpSavedState = null;          // 打开回放前的棋盘状态 + 容器可见性
    var _replayModeActive = false;    // updateResults 危机音乐抑制开关
    window._replayModeActive = false;

    var RP_VALUE = { 'A': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'J': 11, 'Q': 12, 'K': 13 };
    var _rpCardSeq = 0;
    function rpMkCard(d) {
      if (!d) return null;
      _rpCardSeq++;
      // ★ 旧版回放回填的占位卡：必须保留占位标记，否则 updateSingleSlot 判定无效卡 → 槽位空白
      if (typeof d === 'object') {
        if (d.unknown === true) {
          // 正面未知牌（我方手牌/明牌：按规则应正面显示，但旧版数据牌点已丢失 → "？"占位面）
          return { id: 'rp_unk_' + _rpCardSeq, unknown: true, rank: '?', display: '?', value: 0, suit: '♠' };
        }
        if (d.back === true) {
          // 纯卡背（对方手牌/暗牌：按规则不可见）
          return { id: 'rp_back_' + _rpCardSeq, back: true, rank: null, display: null, value: 0, suit: '' };
        }
      }
      return { id: 'rp_' + d + '_' + _rpCardSeq, rank: d, display: d, value: RP_VALUE[d] || 0, suit: '♠' };
    }

    function rpSaveLiveState() {
      var G = GameState;
      var wrapper = document.querySelector('.game-container-wrapper');
      var menu = document.getElementById('main-menu');
      // 深拷贝棋盘数据，防止回放渲染期间的引用污染
      var cp = function (v) { try { return JSON.parse(JSON.stringify(v)); } catch (e) { return v; } };
      rpSavedState = {
        pf: cp(G.playerField), of: cp(G.opponentField),
        ps: cp(G.playerStack), os: cp(G.opponentStack),
        pn: cp(G.playerNeutralCards), on: cp(G.opponentNeutralCards),
        pw: cp(G.playerWins), ow: cp(G.opponentWins),
        hand: cp(G.playerHand), ohand: cp(G.opponentHand),
        pdeck: cp(G.playerDeck), odeck: cp(G.opponentDeck),
        prev: cp(G.playerRevealedCards), pdark: cp(G.playerDarkCards),
        orev: cp(G.opponentRevealedCards), odark: cp(G.opponentDarkCards),
        lastPlayed: cp(G.lastPlayedCard), pendingCall: cp(G.pendingCallCard),
        glow: cp(G.activeRoadMatchGlow), naura: cp(G.activeNeutralAura),
        callBonus: G.callCardBonusScore, callTypeBonus: G.callCardCardTypeBonus,
        callHasSuccess: G.callCardHasSuccess,
        menuDisplay: menu ? menu.style.display : '',
        menuOpacity: menu ? menu.style.opacity : '',
        wrapOpacity: wrapper ? wrapper.style.opacity : '',
        wrapVis: wrapper ? wrapper.style.visibility : '',
        wrapPE: wrapper ? wrapper.style.pointerEvents : '',
        wrapTransform: wrapper ? wrapper.style.transform : '',
        wrapOrigin: wrapper ? wrapper.style.transformOrigin : '',
        wrapZ: wrapper ? wrapper.style.zIndex : '',
        statusText: (GameElements.ui && GameElements.ui.gameStatus) ? GameElements.ui.gameStatus.textContent : ''
      };
    }

    function rpRestoreLiveState() {
      if (!rpSavedState) return;
      var G = GameState, s = rpSavedState;
      G.playerField = s.pf; G.opponentField = s.of;
      G.playerStack = s.ps; G.opponentStack = s.os;
      G.playerNeutralCards = s.pn; G.opponentNeutralCards = s.on;
      G.playerWins = s.pw; G.opponentWins = s.ow;
      G.playerHand = s.hand; G.opponentHand = s.ohand;
      G.playerDeck = s.pdeck; G.opponentDeck = s.odeck;
      G.playerRevealedCards = s.prev; G.playerDarkCards = s.pdark;
      G.opponentRevealedCards = s.orev; G.opponentDarkCards = s.odark;
      G.lastPlayedCard = s.lastPlayed; G.pendingCallCard = s.pendingCall;
      G.activeRoadMatchGlow = s.glow; G.activeNeutralAura = s.naura;
      G.callCardBonusScore = s.callBonus; G.callCardCardTypeBonus = s.callTypeBonus;
      G.callCardHasSuccess = s.callHasSuccess;
      var wrapper = document.querySelector('.game-container-wrapper');
      var menu = document.getElementById('main-menu');
      if (wrapper) {
        wrapper.style.opacity = s.wrapOpacity;
        wrapper.style.visibility = s.wrapVis;
        wrapper.style.pointerEvents = s.wrapPE;
        wrapper.style.transform = s.wrapTransform;
        wrapper.style.transformOrigin = s.wrapOrigin;
        wrapper.style.zIndex = s.wrapZ;
      }
      if (menu) { menu.style.display = s.menuDisplay; menu.style.opacity = s.menuOpacity; }
      // ★ 恢复回放前的顶部状态栏文字（回放期间被 rpRender 改写为动作描述）
      if (GameElements.ui && GameElements.ui.gameStatus && typeof s.statusText === 'string') {
        GameElements.ui.gameStatus.textContent = s.statusText;
      }
      try { updateUI(); } catch (e) {}
      rpSavedState = null;
    }

    // ★ 2026-9-18：回放头像牌——按 rplayers 的 sub 定位四角（2v2）/上下（1v1）；
    //   rplayers[0] 恒为回放所有者（其所在队伍=底部）。旧回放无 rplayers 则不显示
    function rpBuildAvatarPlaques(players) {
      rpRemoveAvatarPlaques();
      if (!Array.isArray(players) || players.length === 0) return;
      var wrap = document.createElement('div');
      wrap.id = 'rp-avatar-plaques';
      var mode = window._rpReplay2v2Kind || '';
      var mySub = (players[0] && typeof players[0].sub === 'number') ? players[0].sub : null;
      var _rpOpiEls = [];  // ★ 1v1 游戏内样式头像牌（fixed 锚定，resize 重算用）
      function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
      // 头像渲染：data:/http(s) → 图片；否则按 emoji/字符渲染
      function avaInner(p, fontSize) {
        var a = String(p.avatar || '');
        if (a.indexOf('data:') === 0 || a.indexOf('http') === 0) {
          return '<img src="' + esc(a) + '" style="width:100%;height:100%;object-fit:cover;border-radius:50%;" />';
        }
        return '<span style="font-size:' + (fontSize || '0.95rem') + ';">' + esc(a) + '</span>';
      }

      if (mode === 'online_2v2' && mySub !== null) {
        // ===== 双人匹配：复刻游戏内 opi 紧凑胶囊（createOnlineGameUI2v2 的样式与四角坐标） =====
        var _isOwnerLeft = (mySub === 0 || mySub === 1);
        var POS_BL = 'position:absolute;bottom:1rem;left:calc(50% - 840px);transform:translateX(-50%);';
        var POS_BR = 'position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);';
        var POS_TL = 'position:absolute;top:1rem;left:calc(50% - 848px);transform:translateX(-50%);';
        var POS_TR = 'position:absolute;top:1rem;left:50%;transform:translateX(-50%);';
        var COMPACT = 'display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:30px;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);z-index:50;';
        var _tmSub = [2, 3, 0, 1][mySub];
        players.forEach(function (p) {
          if (typeof p.sub !== 'number') return;
          var isOwner = (p.sub === mySub);
          var isTm = (p.sub === _tmSub);
          var isOpp = (!isOwner && !isTm);
          var pos;
          if (isOwner) pos = _isOwnerLeft ? POS_BL : POS_BR;
          else if (isTm) pos = _isOwnerLeft ? POS_BR : POS_BL;
          else pos = (p.sub === 0 || p.sub === 1) ? POS_TL : POS_TR;  // 对手按物理位置：左队TL、右队TR
          var nameColor = isOpp ? '#f87171' : '#60a5fa';
          var borderColor = isOpp ? 'rgba(248,113,113,0.4)' : '#60a5fa';
          var d = document.createElement('div');
          d.style.cssText = pos + COMPACT;
          d.innerHTML =
            '<div style="width:28px;height:28px;border-radius:50%;flex-shrink:0;border:2px solid ' + borderColor + ';background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;overflow:hidden;">' + avaInner(p) + '</div>' +
            '<div style="display:flex;flex-direction:column;gap:2px;">' +
              '<div style="color:' + nameColor + ';font-size:0.78rem;font-weight:600;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;">' + esc(p.nickname) + '</div>' +
            '</div>' +
            (isOwner ? '<div style="flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff;min-width:26px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,0.35);border:1.5px solid rgba(255,255,255,0.85);box-shadow:0 0 6px rgba(255,255,255,0.25);white-space:nowrap;">我</div>' : '');
          wrap.appendChild(d);
        });
      } else if (mode === 'ai_2v2') {
        // ===== 人机2v1：头像牌锚定各自牌区外端（玩家A=左侧牌区左端外 / 玩家B=右侧牌区右端外） =====
        // ★ 2026-9-22 FIX（位置和大小不对）：原挂在 .game-container-wrapper 内——回放时 wrapper 被
        //   scale(0.8)（origin 中心），头像被缩小到 44.8px 且向中心偏移。现改为 fixed 视觉坐标定位
        //   （挂 body，不受棋盘缩放影响），64px 固定大小，位置锚定各自牌区 gBCR 外端。
        var _mountToBody = true;
        players.forEach(function (p) {
          if (typeof p.sub !== 'number') return;
          if (p.sub !== 1 && p.sub !== 3) return;
          var isLeft = (p.sub === 1);
          var d = document.createElement('div');
          d.style.cssText = 'position:fixed;z-index:10600;width:64px;height:64px;border-radius:50%;border:2px solid rgba(100,180,255,0.8);background:rgba(30,58,95,0.92);box-shadow:0 0 12px rgba(100,180,255,0.35);display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:none;';
          d.innerHTML = avaInner(p, '1.5rem') +
            '<div style="position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,0.9);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,0.8);pointer-events:none;">' + esc(p.nickname) + '</div>';
          wrap.appendChild(d);
          // 定位：等 wrapper scale(0.8) 生效后，按牌区最终视觉位置锚定外端
          setTimeout(function () {
            try {
              var _anchor = document.querySelector(isLeft ? '#player-dark-cards' : '#player-revealed-cards-right');
              if (!_anchor) return;
              var ar = _anchor.getBoundingClientRect();
              if (isLeft) {
                d.style.left = Math.max(6, ar.left - 78) + 'px';
              } else {
                d.style.left = (ar.right + 14) + 'px';
              }
              d.style.top = (ar.top + ar.height / 2 - 32) + 'px';
            } catch (e) {}
          }, 80);
        });
      } else {
        // ===== 1v1 / 其他 =====
        var _mountToBody1v1 = false;
        players.forEach(function (p, idx) {
          var hasSub = (typeof p.sub === 'number');
          if (!hasSub) {
            // ★ 2026-9-26（用户要求还原游戏内样式）：1v1（sub=null）头像牌照抄 createOnlineGameUI
            //   的 .online-player-info(我=左下)/.online-opp-info(对方=左上)：黑底50%+毛玻璃+
            //   白15%边框胶囊、40px 头像（我=白30%边框/对方=红40%边框）、名字0.9rem #e2e8f0。
            //   ★ 必须挂 body（fixed）——wrapper 被 scale(0.8)，transform 祖先内的 fixed 坐标会被
            //   矩阵扭曲（同 ai_2v2 分支 2026-9-22 FIX；初版漏设 _mountToBody 导致位置/大小仍错）
            _mountToBody1v1 = true;
            var isOpp1 = (idx !== 0);  // rplayers[0] 恒为回放所有者（下），对方（上）
            var d1 = document.createElement('div');
            d1.style.cssText = 'position:fixed;z-index:10600;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:36px;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);pointer-events:none;';
            d1.innerHTML =
              '<div style="width:40px;height:40px;border-radius:50%;flex-shrink:0;border:2px solid ' + (isOpp1 ? 'rgba(248,113,113,0.4)' : 'rgba(255,255,255,0.3)') + ';background:linear-gradient(135deg,#1e293b,#334155);display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden;">' + avaInner(p, '1.3rem') + '</div>' +
              '<div style="display:flex;flex-direction:column;gap:2px;"><div style="color:#e2e8f0;font-size:0.9rem;font-weight:600;white-space:nowrap;">' + esc(p.nickname) + '</div></div>';
            wrap.appendChild(d1);
            _rpOpiEls.push({ el: d1, opp: isOpp1 });
            return;
          }
          // sub 有值（practice 2v2 等）：保持原四角小牌
          var col, row;
          col = (p.sub === 0 || p.sub === 1) ? 'left' : 'right';
          row = (mySub !== null && (p.sub % 2) === (mySub % 2)) ? 'bottom' : 'top';
          if (mySub === null) row = (p.sub === 0 || p.sub === 1) ? 'bottom' : 'top';
          var d = document.createElement('div');
          d.className = 'rp-plaque rp-plaque-' + col + '-' + row;
          d.innerHTML = '<span class="rp-plaque-ava">' + avaInner(p, '1.05rem') + '</span><span class="rp-plaque-name">' + esc(p.nickname) + '</span>';
          wrap.appendChild(d);
        });
        // ★ 1v1 头像牌定位：等 wrapper scale(0.8) 生效后，按 game-container 最终视觉矩形锚定
        //   左下/左上边缘；尺寸/字体按棋盘视觉缩放比 s=gr.width/1920 等比还原游戏内视觉；
        //   resize 时重算（函数引用存 wrap 上，rpRemoveAvatarPlaques 统一清理）
        if (_mountToBody1v1 && _rpOpiEls.length) {
          var _rpOpiLayout = function () {
            try {
              var gc = document.querySelector('.game-container');
              if (!gc) return;
              var gr = gc.getBoundingClientRect();
              if (!gr || gr.width <= 0) return;
              var s = gr.width / 1920;  // 棋盘视觉缩放比（含 wrapper 0.8 与内部 updateScale）
              _rpOpiEls.forEach(function (it) {
                var el = it.el;
                // 尺寸按 s 等比还原（设计值：padding 6/14/6/6、圆角36、头像40、gap10、名字0.9rem/100px）
                el.style.padding = Math.round(6 * s) + 'px ' + Math.round(14 * s) + 'px ' + Math.round(6 * s) + 'px ' + Math.round(6 * s) + 'px';
                el.style.gap = Math.round(10 * s) + 'px';
                el.style.borderRadius = Math.round(36 * s) + 'px';
                var av = el.firstChild;
                av.style.width = av.style.height = Math.round(40 * s) + 'px';
                av.style.fontSize = (1.3 * s) + 'rem';
                var nm = el.lastChild.firstChild;
                nm.style.fontSize = (0.9 * s) + 'rem';
                // 位置：距棋盘视觉边缘 16px×s
                el.style.left = (gr.left + 16 * s) + 'px';
                if (it.opp) el.style.top = (gr.top + 16 * s) + 'px';
                else el.style.top = (gr.bottom - 16 * s - el.offsetHeight) + 'px';
              });
            } catch (e) {}
          };
          wrap._rpOpiLayout = _rpOpiLayout;
          setTimeout(_rpOpiLayout, 80);
          window.addEventListener('resize', _rpOpiLayout);
        }
      }
      var host = document.querySelector('.game-container-wrapper') || document.body;
      if (_mountToBody || _mountToBody1v1) {
        // ★ 人机2v1 / 1v1 头像牌：fixed 视觉定位，挂 body（不随回放棋盘 scale(0.8) 缩放/扭曲）
        wrap.style.cssText = 'position:fixed;left:0;top:0;right:0;bottom:0;z-index:10600;pointer-events:none;';
        document.body.appendChild(wrap);
      } else {
        host.appendChild(wrap);
      }
    }
    function rpRemoveAvatarPlaques() {
      var w = document.getElementById('rp-avatar-plaques');
      if (w) {
        // ★ 清理 1v1 头像牌的 resize 重算监听（防泄漏）
        if (typeof w._rpOpiLayout === 'function') {
          try { window.removeEventListener('resize', w._rpOpiLayout); } catch (e) {}
        }
        w.remove();
      }
    }

    // 将一手快照写入 GameState 并用真实渲染管线刷新棋盘
    function rpApplySnapshot(s) {
      var G = GameState;
      G.playerField = (s.pf || []).map(rpMkCard);
      G.opponentField = (s.of || []).map(rpMkCard);
      G.playerStack = (s.ps || []).map(function (a) { return (a || []).map(rpMkCard); });
      G.opponentStack = (s.os || []).map(function (a) { return (a || []).map(rpMkCard); });
      G.playerNeutralCards = (s.pn || []).map(function (a) { return (a || []).map(rpMkCard); });
      G.opponentNeutralCards = (s.on || []).map(function (a) { return (a || []).map(rpMkCard); });
      G.playerWins = (s.pw || [0, 0, 0, 0, 0]).map(function (v) { return v === 1; });
      G.opponentWins = (s.ow || [0, 0, 0, 0, 0]).map(function (v) { return v === 1; });
      // ★ 拼点结果变化音效（与真实对局一致：某路首次被一方赢下时提示）
      if (window._replayModeActive && _rpPrevWins) {
        for (var wi = 0; wi < 5; wi++) {
          if (G.playerWins[wi] === true && _rpPrevWins[0][wi] !== true && typeof playSound === 'function') playSound('winSound');
          else if (G.opponentWins[wi] === true && _rpPrevWins[1][wi] !== true && typeof playSound === 'function') playSound('loseSound');
        }
      }
      _rpPrevWins = [G.playerWins, G.opponentWins];
      // ★ 完整对局状态还原（手牌/明牌/暗牌/牌堆数量；旧版回放无字段则保持空）
      if (s.ph) G.playerHand = s.ph.map(function (d) { return d ? rpMkCard(d) : null; });
      else G.playerHand = [null, null, null, null, null, null];
      if (s.oh) G.opponentHand = s.oh.map(function (d) { return d ? rpMkCard(d) : null; });
      else G.opponentHand = [];
      G.playerRevealedCards = (s.pr || []).map(rpMkCard);
      G.opponentRevealedCards = (s.or || []).map(rpMkCard);
      G.playerDarkCards = (s.pk || []).map(rpMkCard);
      G.opponentDarkCards = (s.ok || []).map(rpMkCard);
      G.playerDeck = []; for (var di = 0; di < (s.pd || 0); di++) G.playerDeck.push(null);
      G.opponentDeck = []; for (var dj = 0; dj < (s.od || 0); dj++) G.opponentDeck.push(null);
      G.lastPlayedCard = null; G.pendingCallCard = null;
      G.activeRoadMatchGlow = null; G.activeNeutralAura = null;
      G.callCardBonusScore = 0; G.callCardCardTypeBonus = 0; G.callCardHasSuccess = false;
      G.turnNumber = s.t || 0;
      updateUI();
      try { if (typeof renderDeckCardBacks === 'function') renderDeckCardBacks(); } catch (e) {}
      try { if (typeof updateTurnDisplay === 'function') updateTurnDisplay(); } catch (e) {}
      // ★ 2026-9-18：2v2 回放回合线框——新回放带 sub（出牌子玩家），显示该子玩家的回合线框；
      //   旧回放无 sub 字段 → 不显示（用户确认的降级方案）
      if (window._rpReplay2v2Kind && typeof s.sub === 'number' && typeof fourPlayerHighlightActiveArea === 'function') {
        try {
          G.fourPlayerSubTurn = s.sub;
          fourPlayerHighlightActiveArea();
        } catch (e) {}
      }
    }

    function rpSrcName(src) {
      return src === 'hand' ? __t('rp_src_hand', '手牌') : src === 'deck' ? __t('rp_src_deck', '牌堆')
           : src === 'revealed' ? __t('rp_src_revealed', '明牌') : src === 'dark' ? __t('rp_src_dark', '暗牌') : '';
    }
    // ============================================================================
    // 【回放复盘 · 象棋式评分 + 波动图】（2026-10-02）
    //   上帝视角逐手评估局面优势：路权 300/路 + 赛点 150 + 牌型池 L×120+maxV×15
    //   + 中立占优格 80/格 + 行动数 8/张；adv = 我方 − 对方 优势差。
    //   每手得分按 mover 视角优势增量分档（对应象棋复盘 brilliant…blunder；罚比奖重）：
    //     绝杀+300（本手完成5路战术胜）/ 正手+200（Δ≥500，多路 swings/撞拆大集团）
    //     / 进攻+100（Δ≥250，常规翻一路）/ 普通0 / 失误−100（Δ≤−250，丢一路）
    //     / 差手−300（Δ≤−500，多路连丢/自毁撞）/ 送胜−300（本手送对方5路）。
    //   数据源 = 回放快照序列（pf/of/ps/os/pn/on/pw/ow/ph/oh/pr/or/pk/ok/pd/od），
    //   纯离线计算，不碰 GameState、不重放引擎（零分歧风险）。评分徽标 + 底部波动图。
    // ============================================================================
    var rpReview = null;   // { adv:[], per:[{grade,pts,gain,side}|null], totals:[me,opp] }
    var RP_REV_VAL = { A: 1, J: 11, Q: 12, K: 13 };
    function rpRevVal(d) {
      if (d === null || d === undefined) return 0;
      if (typeof d === 'object') return (typeof d.value === 'number') ? d.value : 0;
      var n = parseInt(d, 10);
      if (isNaN(n)) n = RP_REV_VAL[d] || 0;
      return n || 0;
    }
    function rpRevMax(fCard, stkRow) {
      var m = rpRevVal(fCard), i;
      if (Array.isArray(stkRow)) for (i = 0; i < stkRow.length; i++) { var v = rpRevVal(stkRow[i]); if (v > m) m = v; }
      return m;
    }
    function rpRevAdvantage(a) {
      var i;
      var P = { fld: a.pf || [], stk: a.ps || [], neu: a.pn || [], hand: a.ph || [], rev: a.pr || [], dark: a.pk || [], deck: a.pd || 0 };
      var O = { fld: a.of || [], stk: a.os || [], neu: a.on || [], hand: a.oh || [], rev: a.or || [], dark: a.ok || [], deck: a.od || 0 };
      var sc = { p: 0, o: 0 }, pw = 0, ow = 0;
      // 路权 + 赛点（快照 pw/ow 为权威拼点结果；旧版缺字段时按 max 比较现算）
      //   ★ pw/ow 元素实测为 0/1 数字（rmu8albk5yjk 实锤），真值判断须兼容 true 与 1
      function rpRevWin(v) { return v === true || v === 1; }
      if (Array.isArray(a.pw) && Array.isArray(a.ow)) {
        for (i = 0; i < 5; i++) { if (rpRevWin(a.pw[i])) pw++; if (rpRevWin(a.ow[i])) ow++; }
      } else {
        for (i = 0; i < 5; i++) {
          var pm = rpRevMax(P.fld[i], P.stk[i]), om = rpRevMax(O.fld[i], O.stk[i]);
          if (pm > om) pw++; else if (om > pm) ow++;
        }
      }
      sc.p += pw * 300; sc.o += ow * 300;
      if (pw >= 4) sc.p += 150;
      if (ow >= 4) sc.o += 150;
      // 牌型池（含中立区归属：格内数量多于对方 → 该格双方牌全算己方，规则「数量多者得」）
      var poolP = [], poolO = [];
      function collect(arr, bag) {
        if (Array.isArray(arr)) for (var k = 0; k < arr.length; k++) {
          var x = rpRevVal(arr[k]);
          if (x > 0) bag.push({ value: x });
        }
      }
      collect(P.fld, poolP); for (i = 0; i < P.stk.length; i++) collect(P.stk[i], poolP);
      collect(O.fld, poolO); for (i = 0; i < O.stk.length; i++) collect(O.stk[i], poolO);
      var np = 0, no = 0;
      for (i = 0; i < 7; i++) {
        var cntP = Array.isArray(P.neu[i]) ? P.neu[i].length : 0;
        var cntO = Array.isArray(O.neu[i]) ? O.neu[i].length : 0;
        if (cntP > cntO) { collect(P.neu[i], poolP); np++; }
        else if (cntO > cntP) { collect(O.neu[i], poolO); no++; }
      }
      sc.p += np * 80; sc.o += no * 80;
      var tp = identifyCardType(poolP), to = identifyCardType(poolO);
      if (tp && tp.level > 0) sc.p += tp.level * 120 + (tp.maxValue || 0) * 15;
      if (to && to.level > 0) sc.o += to.level * 120 + (to.maxValue || 0) * 15;
      // 行动数（手+明+暗+牌堆）
      sc.p += (P.hand.length + P.rev.length + P.dark.length + P.deck) * 8;
      sc.o += (O.hand.length + O.rev.length + O.dark.length + O.deck) * 8;
      // ★ 2026-10-02：返回双方各自原始分（波动图改双线：我方/对方各一条）
      return { adv: sc.p - sc.o, pw: pw, ow: ow, pp: sc.p, oo: sc.o };
    }
    function rpReviewCompute() {
      rpReview = null;
      if (!rpActions || rpActions.length < 2) return;
      var adv = [], pv = [], ov = [], per = [], cumMe = [], cumOpp = [], totals = [0, 0], i;
      for (i = 0; i < rpActions.length; i++) {
        var r0 = null;
        try { r0 = rpRevAdvantage(rpActions[i]); } catch (e) { r0 = null; }
        adv.push(r0 ? r0.adv : 0);
        pv.push(r0 ? r0.pp : 0);   // ★ 我方局面分（双线图）
        ov.push(r0 ? r0.oo : 0);   // ★ 对方局面分
      }
      var lastRealAdv = adv[0] || 0;
      for (i = 1; i < rpActions.length; i++) {
        var a = rpActions[i];
        if (a.s === null || a.s === undefined) { per.push(null); cumMe.push(totals[0]); cumOpp.push(totals[1]); continue; }   // 开局/发牌快照不计分
        var me = (a.s === 0 || a.s === 2);   // 1v1：0=我方；2v2：0/2=我方队
        var gain = me ? (adv[i] - lastRealAdv) : (lastRealAdv - adv[i]);
        lastRealAdv = adv[i];
        var winsMeAfter = 0, winsOpAfter = 0, k;
        var pwArr = me ? a.pw : a.ow, owArr = me ? a.ow : a.pw;
        if (Array.isArray(pwArr) && Array.isArray(owArr)) {
          for (k = 0; k < 5; k++) { if (pwArr[k] === true || pwArr[k] === 1) winsMeAfter++; if (owArr[k] === true || owArr[k] === 1) winsOpAfter++; }
        } else {
          var r = null; try { r = rpRevAdvantage(a); } catch (e) { r = null; }
          if (r) { winsMeAfter = me ? r.pw : r.ow; winsOpAfter = me ? r.ow : r.pw; }
        }
        var grade, pts;
        if (winsMeAfter >= 5) { grade = 'win'; pts = 300; }
        else if (winsOpAfter >= 5) { grade = 'lose'; pts = -300; }
        else if (gain >= 500) { grade = 'best'; pts = 200; }
        else if (gain >= 250) { grade = 'good'; pts = 100; }
        else if (gain > -250) { grade = 'avg'; pts = 0; }
        else if (gain > -500) { grade = 'mistake'; pts = -100; }
        else { grade = 'blunder'; pts = -300; }
        totals[me ? 0 : 1] += pts;
        per.push({ grade: grade, pts: pts, gain: Math.round(gain), side: a.s });
        cumMe.push(totals[0]); cumOpp.push(totals[1]);   // ★ 累计评分序列（双线图）
      }
      rpReview = { adv: adv, pv: pv, ov: ov, per: per, cumMe: cumMe, cumOpp: cumOpp, totals: totals };
    }
    function rpReviewDraw(curIdx) {
      var cv = document.getElementById('rp-review-canvas');
      if (!cv || !rpReview) return;
      var dpr = window.devicePixelRatio || 1;
      var cssW = cv.clientWidth || 600, cssH = 140;
      cv.width = Math.round(cssW * dpr); cv.height = Math.round(cssH * dpr);
      var ctx = cv.getContext('2d');
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, cssW, cssH);
      var N = rpReview.adv.length;
      if (N < 2) return;
      var padL = 6, padR = 6, padT = 6, padB = 8;
      var iw = cssW - padL - padR, ih = cssH - padT - padB;
      var maxAbs = 100, i;
      for (i = 0; i < N; i++) { var m = Math.abs(rpReview.adv[i]); if (m > maxAbs) maxAbs = m; }
      maxAbs *= 1.12;
      var zeroY = padT + ih / 2;
      var X = function (k) { return padL + (iw * k) / (N - 1); };
      var Y = function (v) { return zeroY - (ih / 2) * (v / maxAbs); };
      // 零轴（兼作进度轨道基线，提亮）
      ctx.strokeStyle = 'rgba(226,232,240,0.5)'; ctx.lineWidth = 1.5;
      ctx.beginPath(); ctx.moveTo(padL, zeroY); ctx.lineTo(cssW - padR, zeroY); ctx.stroke();
      // 面积（零轴之上=我方优势蓝 / 之下=对方优势红，与波浪线按优势归属着色一致）
      function fillHalf(clipTop) {
        ctx.save();
        ctx.beginPath();
        if (clipTop) ctx.rect(padL, padT, iw, Math.max(0, zeroY - padT));
        else ctx.rect(padL, zeroY, iw, Math.max(0, padT + ih - zeroY));
        ctx.clip();
        ctx.beginPath();
        ctx.moveTo(X(0), Y(rpReview.adv[0]));
        for (i = 1; i < N; i++) ctx.lineTo(X(i), Y(rpReview.adv[i]));
        ctx.lineTo(X(N - 1), zeroY); ctx.lineTo(X(0), zeroY); ctx.closePath();
        ctx.fillStyle = clipTop ? 'rgba(96,165,250,0.20)' : 'rgba(248,68,68,0.20)';
        ctx.fill();
        ctx.restore();
      }
      fillHalf(true); fillHalf(false);
      // 分段着色波浪线（2026-10-03 用户澄清：按优势归属着色，而非几何位置）——
      //   零轴之上=我方优势=我方蓝 / 零轴之下=对方优势=对方红，跨轴处插值分割
      for (i = 0; i < N - 1; i++) {
        var x1 = X(i), y1 = Y(rpReview.adv[i]), x2 = X(i + 1), y2 = Y(rpReview.adv[i + 1]);
        var segs = [[x1, y1, x2, y2]];
        if ((y1 <= zeroY) !== (y2 <= zeroY)) {
          var t = (zeroY - y1) / (y2 - y1);
          var xm = x1 + (x2 - x1) * t;
          segs = [[x1, y1, xm, zeroY], [xm, zeroY, x2, y2]];
        }
        for (var si = 0; si < segs.length; si++) {
          var sg = segs[si];
          var midY = (sg[1] + sg[3]) / 2;
          ctx.beginPath(); ctx.moveTo(sg[0], sg[1]); ctx.lineTo(sg[2], sg[3]);
          ctx.strokeStyle = midY <= zeroY ? '#60a5fa' : '#f87171';   // 轴上=我方优势蓝 / 轴下=对方优势红
          ctx.lineWidth = 2;
          ctx.stroke();
        }
      }
      // 每手评分刻度（底边色条：绿=绝杀/正手 蓝=进攻 橙=失误 红=差手/送胜）
      for (i = 1; i < N; i++) {
        var p = rpReview.per[i]; if (!p) continue;
        ctx.fillStyle = p.pts >= 200 ? '#4ade80' : p.pts > 0 ? '#60a5fa'
          : p.pts < 0 ? (p.pts <= -200 ? '#f87171' : '#fb923c') : 'rgba(148,163,184,0.45)';
        ctx.fillRect(X(i) - 1.5, cssH - 5, 3, 4);
      }
      // 当前手光标
      if (typeof curIdx === 'number' && curIdx >= 0 && curIdx < N) {
        var cx = X(curIdx);
        ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.moveTo(cx, padT); ctx.lineTo(cx, cssH - 5); ctx.stroke();
        ctx.beginPath(); ctx.arc(cx, Y(rpReview.adv[curIdx]), 3, 0, Math.PI * 2);
        ctx.fillStyle = '#ffffff'; ctx.fill();
      }
      // ★ 2026-10-03 用户需求（类象棋局势图）：左上角优势牌 + 竖线处回合/优势浮标
      function rpAdvLabel(v) {
        var n = Math.round(Math.abs(v));
        if (n < 25) return { txt: __t('rp_adv_even', '均势'), kind: 'even' };
        return (v > 0) ? { txt: __t('rp_adv_blue', '蓝优') + ' ' + n, kind: 'blue' }
                       : { txt: __t('rp_adv_red', '红优') + ' ' + n, kind: 'red' };
      }
      if (typeof curIdx === 'number' && curIdx >= 0 && curIdx < N) {
        var curAdv = rpReview.adv[curIdx];
        var lb2 = rpAdvLabel(curAdv);
        // ★ 2026-10-03 用户反馈：红优/蓝优段改回徽标配色（实底色块+白字），而非字体着色
        var turnTxt = __t('rp_turn_no', '第{n}回合').replace('{n}', (rpActions[curIdx] || {}).t || curIdx) + ' · ';
        ctx.font = 'bold 11px sans-serif';
        var turnW = ctx.measureText(turnTxt).width;
        var advW = ctx.measureText(lb2.txt).width;
        var padX = 6, gapX = 4, badgePad = 6;
        var totalW = turnW + gapX + advW + badgePad * 2 + padX * 2 - 2;
        var bx = cx - totalW / 2;
        if (bx < padL) bx = padL;
        if (bx + totalW > cssW - padR) bx = cssW - padR - totalW;
        ctx.fillStyle = 'rgba(2,6,23,0.85)';
        ctx.fillRect(bx, padT, totalW, 18);
        ctx.strokeStyle = 'rgba(148,163,184,0.4)'; ctx.lineWidth = 1;
        ctx.strokeRect(bx, padT, totalW, 18);
        // 回合段（灰白字）
        ctx.fillStyle = '#e2e8f0';
        ctx.fillText(turnTxt, bx + padX, padT + 13);
        // 优势徽段：实底色块（配色同原左上角优势牌）+ 白字
        var badgeX = bx + padX + turnW + gapX;
        ctx.fillStyle = lb2.kind === 'blue' ? 'rgba(37,99,235,0.92)' : lb2.kind === 'red' ? 'rgba(185,28,28,0.92)' : 'rgba(71,85,105,0.92)';
        ctx.fillRect(badgeX, padT + 3, advW + badgePad * 2, 12);
        ctx.fillStyle = '#ffffff';
        ctx.fillText(lb2.txt, badgeX + badgePad, padT + 13);
      }
      // ★ 2026-10-03 用户反馈：右下角"累计+分"图例删除（累计线本身已在下泳道可见）
    }
    // ★ 2026-10-02 用户需求：波动图即进度条——点击横线任意位置跳转到对应进度（取代原滑块）
    (function () {
      var _rpCv = document.getElementById('rp-review-canvas');
      if (!_rpCv) return;
      _rpCv.addEventListener('click', function (e) {
        if (!window._replayModeActive || !rpReview || !rpActions || rpActions.length < 2) return;
        var r = _rpCv.getBoundingClientRect();
        var iw = r.width - 12;   // 与 rpReviewDraw 的 padL/padR=6 对应
        if (iw <= 0) return;
        var x = e.clientX - r.left - 6;
        var idx = Math.round((x / iw) * (rpActions.length - 1));
        if (idx < 0) idx = 0;
        if (idx > rpActions.length - 1) idx = rpActions.length - 1;
        rpGoto(idx);
      });
    })();
    function rpReviewUpdateBadge(i) {
      var badge = document.getElementById('rp-score-badge');
      if (!badge || !rpReview) return;
      var p = rpReview.per[i];
      if (!p) { badge.style.display = 'none'; rpReviewDraw(i); return; }
      var names = {
        win: __t('rp_gr_win', '绝杀'), best: __t('rp_gr_best', '正手'), good: __t('rp_gr_good', '进攻'),
        avg: __t('rp_gr_avg', '普通'), mistake: __t('rp_gr_mistake', '失误'),
        blunder: __t('rp_gr_blunder', '差手'), lose: __t('rp_gr_lose', '送胜')
      };
      badge.textContent = names[p.grade] + ' ' + (p.pts > 0 ? '+' : '') + p.pts;
      badge.className = 'rp-score-badge rp-gr-' + p.grade;
      badge.style.display = '';
      rpReviewDraw(i);
    }
    // 窗口尺寸变化：重排棋盘布局 + 重绘波动图（回放中）
    window.addEventListener('resize', function () {
      if (!window._replayModeActive) return;
      try { rpLayoutBoard(); } catch (e) {}
      if (rpReview) { try { rpReviewDraw(rpIdx); } catch (e) {} }
    });
    // ★ 2026-10-02 用户反馈：回放界面屏蔽 Alt 键——防止 Alt 单击触发浏览器菜单栏
    //   （Windows 浏览器在 Alt keyup 时激活菜单）或游戏内 Alt 快捷键。捕获阶段拦截
    //   keydown + keyup，仅回放模式生效，不影响正常对局。
    function rpBlockAlt(e) {
      if (!window._replayModeActive) return;
      if (e.key === 'Alt' || e.code === 'AltLeft' || e.code === 'AltRight') {
        e.preventDefault();
        e.stopPropagation();
      }
    }
    window.addEventListener('keydown', rpBlockAlt, true);
    window.addEventListener('keyup', rpBlockAlt, true);
    // ★ 2026-10-02 用户需求：回放键盘控制——空格=播放/暂停，←=快退一手，→=快进一手。
    //   捕获阶段 + preventDefault：防空格触发聚焦按钮/页面滚动、方向键移动进度滑块造成双触发。
    window.addEventListener('keydown', function (e) {
      if (!window._replayModeActive || e.repeat) return;
      if (e.key === ' ' || e.code === 'Space') {
        e.preventDefault(); e.stopPropagation(); rpTogglePlay();
      } else if (e.key === 'ArrowLeft') {
        e.preventDefault(); e.stopPropagation(); rpStepBack();
      } else if (e.key === 'ArrowRight') {
        e.preventDefault(); e.stopPropagation(); rpStepFwd();
      }
    }, true);
    // ★ 2026-10-02 用户反馈②：窗口缩小后波动图又被棋盘挡住、头像牌不跟随——固定位移不可用，
    //   改动态布局：实测「顶栏底～底栏顶」可用区，棋盘必要时自动缩小并垂直居中于该区；
    //   1v1 头像牌锚定 .game-container 矩形（wrap._rpOpiLayout），布局后重跑即自动跟随。
    function rpLayoutBoard() {
      var wrapper = document.querySelector('.game-container-wrapper');
      if (!wrapper) return;
      var topbar = document.querySelector('.rp-topbar');
      var bb = document.querySelector('.rp-bottombar');
      var topLimit = (topbar ? topbar.offsetHeight : 0) + 8;
      var bottomLimit = bb ? bb.getBoundingClientRect().top - 8 : window.innerHeight - 8;
      var availH = bottomLimit - topLimit;
      if (availH < 200) availH = 200;   // 极小窗口保护
      var rect = wrapper.getBoundingClientRect();
      if (!rect || rect.height <= 0) return;
      // 从当前 transform 解析 scale / translateY（无记录时按 0.8 / 0 处理）
      var curScale = 0.8, curTy = 0;
      var mS = /scale\(([\d.]+)\)/.exec(wrapper.style.transform || '');
      if (mS) curScale = parseFloat(mS[1]) || 0.8;
      var mT = /translateY\((-?[\d.]+)px\)/.exec(wrapper.style.transform || '');
      if (mT) curTy = parseFloat(mT[1]);
      var naturalH = rect.height / curScale;               // 未缩放自然高度
      var scale = Math.min(0.8, availH / naturalH);        // 可用区不够高才缩小
      if (scale < 0.3) scale = 0.3;                        // 缩放下限保护
      var layoutCenterY = (rect.top + rect.height / 2) - curTy * curScale;  // 纯 scale 基准的视觉中心
      var targetCenterY = topLimit + availH / 2;
      var dy = (targetCenterY - layoutCenterY) / scale;
      wrapper.style.transform = 'scale(' + scale.toFixed(4) + ') translateY(' + dy.toFixed(1) + 'px)';
      // 头像牌跟随：重跑 1v1 锚定布局（存在才执行）
      var plq = document.getElementById('rp-avatar-plaques');
      if (plq && typeof plq._rpOpiLayout === 'function') { try { plq._rpOpiLayout(); } catch (e) {} }
    }
    // ★ 旧版回放兼容：为缺 ph/oh/pr/or/pk/ok/pd/od 字段的旧快照回填功能牌数据（2026-9-12）
    //   旧版录制只存路牌/中立区，真实牌点无法恢复 —— 按出牌记录（s.src）推算各区域"剩余数量"。
    //   朝向严格按可见性规则：我方手牌/双方明牌 → 正面"？"占位（本应可见但牌点已丢失）
    //                        对方手牌/双方暗牌 → 卡背（本就不可见）
    function rpBackfillLegacyActions() {
      if (!rpActions || rpActions.length < 2) return;
      if (rpActions[1] && rpActions[1].ph !== undefined) return;  // 新版回放：数据完整，无需回填
      // 发牌基线：手牌6 明牌3 暗牌5 牌堆26-14=12
      var st = [{ hand: 6, rev: 3, dark: 5, deck: 12 }, { hand: 6, rev: 3, dark: 5, deck: 12 }];
      function backs(n) { var a = []; for (var k = 0; k < n; k++) a.push({ back: true }); return a; }
      function unknowns(n) { var a = []; for (var k = 0; k < n; k++) a.push({ unknown: true }); return a; }
      function fill(a, i) {
        if (i === 0) {  // 开局空盘：发牌前
          a.ph = []; a.oh = []; a.pr = []; a.or = []; a.pk = []; a.ok = []; a.pd = 26; a.od = 26;
          return;
        }
        a.ph = unknowns(st[0].hand); a.oh = backs(st[1].hand);   // 我方手牌"？"正面 / 对方手牌卡背
        a.pr = unknowns(st[0].rev); a.or = unknowns(st[1].rev);  // 明牌双方"？"正面（双方可见）
        a.pk = backs(st[0].dark); a.ok = backs(st[1].dark);      // 暗牌双方卡背（双方不可见）
        a.pd = st[0].deck; a.od = st[1].deck;
      }
      for (var i = 0; i < rpActions.length; i++) {
        var a = rpActions[i];
        if (a.s === null || a.s === undefined) { fill(a, i); continue; }  // 开局/发牌完成快照
        var sd = a.s === 1 ? 1 : 0;
        if (a.src === 'hand') st[sd].hand--;
        else if (a.src === 'revealed') st[sd].rev--;
        else if (a.src === 'dark') st[sd].dark--;
        else if (a.src === 'deck') st[sd].deck--;
        if (st[sd].hand < 0) st[sd].hand = 0;  // 防御：异常数据不为负
        if (st[sd].rev < 0) st[sd].rev = 0;
        if (st[sd].dark < 0) st[sd].dark = 0;
        if (st[sd].deck < 0) st[sd].deck = 0;
        fill(a, i);
      }
      console.log('[回放] 旧版回放已回填功能牌占位数据（手牌/明牌/暗牌/牌堆数量）');
    }
    // 回放顶栏信息（模式 · 结果 · 积分 · 时间），语言切换时由 rpRefreshI18n 重建
    function rpBuildInfo(replay) {
      var res = replay.result === 'win' ? __t('rp_res_win', '胜利') : replay.result === 'lose' ? __t('rp_res_lose', '失败') : __t('rp_res_draw', '平局');
      // ★ 2026-9-17：去除获胜路数对比，只显示对局积分
      // ★ 2026-9-18：附带双方名单（2v2 回放为"自己界面视角"，标注名单避免误读模式）
      var _pl = replay.players ? ' · ' + replay.players : '';
      return ppModeName(replay.mode) + ' · ' + res
        + ' · ' + __t('rp_points', '积分') + ' ' + (replay.score || 0)
        + _pl
        + ' · ' + ppFmtTime(replay.time);
    }
    // ★ 语言切换时刷新回放动态文案（静态按钮由 data-i18n 统一刷新）
    function rpRefreshI18n() {
      if (!_replayModeActive || !rpReplay) return;
      document.getElementById('rp-info').textContent = rpBuildInfo(rpReplay);
      rpUpdatePlayBtn(!!rpTimer);
      rpRender(rpIdx);
    }
    function openReplayPlayer(replay) {
      if (!replay || !Array.isArray(replay.actions) || replay.actions.length === 0) {
        ppShowTip(__t('rp_err_empty', '回放数据为空'));
        return;
      }
      if (_replayModeActive) return;
      rpReplay = replay;
      rpActions = replay.actions;
      try { rpBackfillLegacyActions(); } catch (e) {}  // ★ 旧版回放：回填手牌/明牌/暗牌/牌堆占位数据
      // ★ 2026-10-03 用户反馈：开局快照录制时牌堆尚未填充（pd/od=0）→ 发牌阶段牌堆显示 0。
      //   开局的牌堆必为满 26 张，缺失或为 0 时强制修正
      try {
        if (rpActions[0]) {
          if (!rpActions[0].pd) rpActions[0].pd = 26;
          if (!rpActions[0].od) rpActions[0].od = 26;
        }
      } catch (e) {}
      // ★ 复盘评分：离线计算逐手评分与优势曲线（纯快照分析，零分歧风险）
      try {
        rpReviewCompute();
        var _rpRev = document.getElementById('rp-review');
        if (_rpRev) _rpRev.style.display = rpReview ? '' : 'none';
      } catch (e) { rpReview = null; }
      rpIdx = 0;
      // ★ 2026-9-18 FIX（回放开局残留线框）：上一局/上一回放的回合线框若不清除，
      //   回放开局（空盘/发牌帧，无 sub）仍会显示——正常应发完牌、回合开始才出现
      ['fp-active-box', 'fp-active-box-deck'].forEach(function (_id) {
        var _b = document.getElementById(_id);
        if (_b) _b.remove();
      });
      // ★ 2026-9-18：2v2 回放按"双人匹配界面"（四人布局）渲染——套用四人槽位映射后，
      //   游戏原生 updateUI 会把手牌6槽拆成 左5(我)+右1(队友)、暗牌 左1+右4、明牌 左1+右2
      _rp2v2LayoutApplied = false;
      window._rpReplay2v2Kind = '';
      if (replay.mode === 'online_2v2' || replay.mode === 'ai_2v2') {
        try {
          GameState.fourPlayerActive = true;
          window._rpReplay2v2Kind = replay.mode;  // 回放模式种类：背景/布局按对应 2v2 界面还原
          if (typeof applyFourPlayerLayout === 'function') {
            applyFourPlayerLayout();
            _rp2v2LayoutApplied = true;  // ★ 仅在布局函数真正执行后置位
            console.log('[回放] 2v2 四人布局已应用 (', replay.mode, ')');
          } else {
            console.warn('[回放] applyFourPlayerLayout 不可见（作用域问题），回退两翼渲染');
            GameState.fourPlayerActive = false;
            window._rpReplay2v2Kind = '';
          }
        } catch (e) {
          _rp2v2LayoutApplied = false;
          GameState.fourPlayerActive = false;
          window._rpReplay2v2Kind = '';
          console.warn('[回放] 四人布局应用异常，回退两翼渲染:', e && e.message);
        }
        // ★ 套用对应 2v2 模式的专属背景（双人匹配=经典-双人背景 / 练习=经典2背景）
        try { if (typeof applyCardFaceBg === 'function') applyCardFaceBg(); } catch (e) {}
      }
      // ★ 头像牌（有 rplayers 数据的新回放才显示；1v1 上下两枚，2v2 四角）
      try { rpBuildAvatarPlaques(replay.rplayers || []); } catch (e) {}
      rpDealProgress = null;  // ★ 新开回放：发牌从头开始
      document.getElementById('rp-info').textContent = rpBuildInfo(replay);
      rpSaveLiveState();
      // ★ 原界面直接弹出：主菜单/资料弹窗不动，暗幕压底 + 棋盘浮起（0.8 比例）
      var wrapper = document.querySelector('.game-container-wrapper');
      var bd = document.getElementById('rp-backdrop');
      if (bd) bd.classList.add('active');
      if (wrapper) {
        wrapper.style.zIndex = '10200';            // 主菜单(10000) < backdrop(10100) < 棋盘(10200) < 覆层(10500)
        wrapper.style.opacity = '1';
        wrapper.style.visibility = 'visible';
        wrapper.style.pointerEvents = 'auto';      // 保持 auto：卡牌 hover 动画生效
        // ★ 2026-10-02 用户反馈：波动图加高后棋盘底部与其重叠、窗口缩放后又错位——
        //   改为动态布局（见 rpLayoutBoard）：此处先立纯 scale 基准，overlay 渲染完后
        //   由 rpLayoutBoard 实测可用区做缩放+平移；关闭回放时 rpRestoreLiveState 按快照恢复
        wrapper.style.transform = 'scale(0.8)';    // 与 game-container 内部缩放互不冲突
        wrapper.style.transformOrigin = 'center center';
        // JS 点击在捕获阶段拦截（不影响 CSS hover），防止误触发游戏交互
        rpClickBlocker = function (e) { e.stopPropagation(); };
        wrapper.addEventListener('click', rpClickBlocker, true);
        wrapper.addEventListener('contextmenu', rpClickBlocker, true);
      }
      _replayModeActive = true;
      window._replayModeActive = true;
      _rpPrevWins = null;                       // 拼点音效对比基线复位
      document.body.classList.add('rp-ui-mode'); // ★ 隐藏对局内所有功能按钮（开始/退出练习/回合记录/玩法说明）
      // ★ 2026-10-02：滑块已移除——波动图即进度条（点击跳转），无 slider 初始化
      document.getElementById('replay-player-overlay').classList.add('active');
      // ★ 对局时间：回放中隐藏（不显示也不计时）；记住原内联 display 值，关闭时精确恢复
      var mt = document.getElementById('match-timer-display');
      if (mt) { rpSavedTimerDisplay = mt.style.display; mt.style.display = 'none'; }
      // ★ 回放不播 BGM：仅停掉主页 BGM，保留出牌/匹配等音效
      // ★ 音效保底：即使用户此前静音/音效音量为0，回放音效也必须可听（关闭回放时恢复原设置）
      try {
        rpSavedAudio = { muted: SoundConfig.isMuted, sfx: SoundConfig.sfxVolume, bgm: SoundConfig.bgmVolume };
        SoundConfig.isMuted = false;
        if (!(SoundConfig.sfxVolume > 0)) SoundConfig.sfxVolume = 0.5;
        if (typeof initAudioContext === 'function') initAudioContext();  // 用户点击回放即手势，激活 AudioContext
      } catch (e) {}
      try {
        if (typeof stopBGM === 'function') stopBGM();
        // ★ 取消主页 BGM 延迟定时器（否则打开回放后到点会在回放中响起主界面.mp3）
        if (typeof bgmDelayTimer !== 'undefined' && bgmDelayTimer) {
          try { clearTimeout(bgmDelayTimer); } catch (e2) {}
          bgmDelayTimer = null;
        }
        // ★ 回放期间彻底静音 BGM 通道：即使有漏网路径调用 playBGM，音量为0也只会记录曲目名不出声
        SoundConfig.bgmVolume = 0;
        SoundConfig.dealSoundMuted = false;  // 回放发牌动画需要 dealSound，跳过开局音效的发牌屏蔽窗口
        rpSavedGamePhase = GameState.gamePhase;
        GameState.gamePhase = 'playing';
      } catch (e) {}
      rpStopTimer();
      rpUpdatePlayBtn(false);
      rpRender(0);
      // ★ 动态布局：按可用区缩放/平移棋盘（头像牌随之锚定）——必须在 bottombar 渲染后执行
      try { rpLayoutBoard(); } catch (e) {}
      // ★ 打开即自动播放（0.6s 后起播，先看到空盘+发牌特效）；记录定时器，关闭/重开时清除
      if (rpAutoPlayTimer) { clearTimeout(rpAutoPlayTimer); rpAutoPlayTimer = null; }
      rpAutoPlayTimer = setTimeout(function () {
        rpAutoPlayTimer = null;
        if (_replayModeActive && rpIdx === 0 && !rpTimer) rpStartLoop();
      }, 600);
    }
    function closeReplayPlayer() {
      rpStopTimer();
      rpEpoch++;               // ★ 作废进行中的播放循环与发牌/匹配动画
      if (rpAutoPlayTimer) { clearTimeout(rpAutoPlayTimer); rpAutoPlayTimer = null; }  // 清除未触发的自动起播
      document.getElementById('replay-player-overlay').classList.remove('active');
      var bd = document.getElementById('rp-backdrop');
      if (bd) bd.classList.remove('active');
      _rpPrevWins = null;
      document.body.classList.remove('rp-ui-mode');  // ★ 恢复对局功能按钮显示
      // ★ 对局时间：恢复回放前的显示状态（联机中显示 → 恢复显示；主页/单机原本隐藏 → 保持隐藏）
      var mt = document.getElementById('match-timer-display');
      if (mt) mt.style.display = (rpSavedTimerDisplay !== null && rpSavedTimerDisplay !== undefined) ? rpSavedTimerDisplay : '';
      rpSavedTimerDisplay = null;
      // ★ 恢复用户原音频设置（静音/音效音量/BGM音量）
      // ★ 仅恢复音量数值，不调用 setBGMVolume/playBGM 触发播放：
      //   回放关闭时 gamePhase 可能仍被强制为 'playing'，setBGMVolume 会走 checkPhaseBGM
      //   意外响起阶段 BGM；主页 BGM 由下方 scheduleMenuBGM 统一恢复。
      if (rpSavedAudio) {
        try {
          SoundConfig.isMuted = rpSavedAudio.muted;
          SoundConfig.sfxVolume = rpSavedAudio.sfx;
          SoundConfig.bgmVolume = rpSavedAudio.bgm;
        } catch (e) {}
        rpSavedAudio = null;
      }
      try { if (typeof stopBGM === 'function') stopBGM(); } catch (e) {}
      if (rpSavedGamePhase !== null) { GameState.gamePhase = rpSavedGamePhase; rpSavedGamePhase = null; }
      rpCleanupAnimCards();  // 清掉可能还在飞行的动画卡
      // ★ 2026-9-18：2v2 回放结束 → 还原两翼布局与标志（在 rpRestoreLiveState 的 updateUI 之前），
      //   并重涂背景（还原回放前的模式背景）；同时移除头像牌
      rpRemoveAvatarPlaques();
      // ★ 2026-9-18 FIX：清理回放期间显示的回合线框（尺寸按回放坐标系算，残留到实况界面会错位）
      ['fp-active-box', 'fp-active-box-deck'].forEach(function (_id) {
        var _b = document.getElementById(_id);
        if (_b) _b.remove();
      });
      if (_rp2v2LayoutApplied) {
        _rp2v2LayoutApplied = false;
        window._rpReplay2v2Kind = '';
        try {
          GameState.fourPlayerActive = false;
          if (typeof restoreTwoPlayerLayout === 'function') restoreTwoPlayerLayout();
          if (typeof applyCardFaceBg === 'function') applyCardFaceBg();
        } catch (e) {}
      }
      // ★ 恢复主菜单 BGM（延迟调度，与主页行为一致）
      try { if (typeof scheduleMenuBGM === 'function') scheduleMenuBGM(); } catch (e) {}
      var wrapper = document.querySelector('.game-container-wrapper');
      if (wrapper && rpClickBlocker) {
        wrapper.removeEventListener('click', rpClickBlocker, true);
        wrapper.removeEventListener('contextmenu', rpClickBlocker, true);
        rpClickBlocker = null;
      }
      rpRestoreLiveState();
      // ★ 最后才关回放标志：rpRestoreLiveState 内的 updateUI 在标志仍为 true 时跳过危机音乐，
      //   防止关闭回放瞬间（棋盘仍是终局 4+ 胜利路状态）误触发危机音乐
      _replayModeActive = false;
      window._replayModeActive = false;
      rpActions = []; rpReplay = null; rpIdx = 0; rpStepping = false; rpDealProgress = null;
    }
    function rpRender(i) {
      if (!rpActions.length) return;
      if (i < 0) i = 0;
      if (i > rpActions.length - 1) i = rpActions.length - 1;
      rpIdx = i;
      var s = rpActions[i];
      rpApplySnapshot(s);
      var desc;
      if (i === 0) {
        desc = __t('rp_desc_start', '开局（空盘）');
      } else if (s.s === null || s.s === undefined) {
        desc = __t('rp_desc_dealt', '发牌完成 · 手牌/明牌/暗牌已就位');  // 补录的发牌完成快照（无出牌动作）
      } else {
        var side = s.s === 1 ? __t('rp_side_opp', '对方') : __t('rp_side_me', '我方');
        var road = s.r >= 0 && s.r < 5 ? __t('rp_road_n', '第{n}路').replace('{n}', s.r + 1)
                 : s.r >= 5 ? __t('rp_road_neutral', '中立区第{n}路').replace('{n}', s.r - 4) : '';
        var src = rpSrcName(s.src);
        var mvName = '';
        if (s.mv && s.mv.mt) {
          mvName = s.mv.mt === 'drag' ? ' · ' + __t('rp_mv_drag', '拖牌') : s.mv.mt === 'crash' ? ' · ' + __t('rp_mv_crash', '撞牌')
                 : s.mv.mt === 'support' ? ' · ' + __t('rp_mv_support', '援牌') : s.mv.mt === 'surround' ? ' · ' + __t('rp_mv_surround', '围牌') : '';
        }
        desc = __t('rp_turn_no', '第{n}回合').replace('{n}', s.t || i) + ' · ' + side + ' ' + __t('rp_played', '打出') + ' ' + (s.c || '？') + (src ? '（' + src + '）' : '') + (road ? ' → ' + road : '') + mvName;
      }
      // ★ 2026-9-17 FIX（Bug2）：播放到最后一手时，状态栏/描述栏显示终局结果（哪方获胜）
      //   result 由 ReplayRecorder.end 写入：'win'（我方胜）/'lose'（对方胜）/'draw'；
      //   rpGoto 拖进度条、rpStepOnce 最终快照等所有到达末尾的路径都经 rpRender，统一覆盖
      if (i >= rpActions.length - 1 && rpReplay && rpReplay.result) {
        var _rpResTxt = rpReplay.result === 'win' ? __t('rp_res_win', '胜利')
                      : rpReplay.result === 'lose' ? __t('rp_res_lose', '失败')
                      : rpReplay.result === 'draw' ? __t('rp_res_draw', '平局') : '';
        if (_rpResTxt) {
          // ★ 2026-9-17：终局改为显示对局积分（去除获胜路数对比，用户要求）
          var _rpScoreTxt = (typeof rpReplay.score === 'number')
            ? ' · ' + __t('rp_points', '积分') + ' ' + rpReplay.score : '';
          desc += '  ·  ' + __t('rp_end_final', '终局') + '：' + _rpResTxt + _rpScoreTxt;
        }
      }
      document.getElementById('rp-desc').textContent = desc;
      // ★ 状态栏同步：回放时顶部状态栏实时显示当前动作描述（关闭回放时由 rpRestoreLiveState 恢复原文字）
      try { if (typeof updateGameStatus === 'function') updateGameStatus(desc); } catch (e) {}
      document.getElementById('rp-step').textContent = i + '/' + (rpActions.length - 1);
      // ★ 2026-10-02：滑块已移除——波动图即进度条（点击跳转），进度由图上光标呈现
      // ★ 复盘评分：更新当前手评分徽标 + 波动图光标（纯重绘，无引擎参与）
      try { rpReviewUpdateBadge(i); } catch (e) {}
    }
    function rpGoto(i) {
      rpEpoch++;               // ★ 作废旧循环与进行中动画
      rpStopTimer();
      rpCleanupAnimCards();    // ★ 立即清掉已起飞的旧动画卡（防止拖动进度条时新旧发牌叠飞）
      rpDealProgress = null;   // ★ 跳转后发牌进度作废（若跳回0重放，发牌从头开始）
      rpStepCtx = null;        // ★ 跳转后匹配手断点作废（画面已按快照重渲染）
      rpUpdatePlayBtn(false);
      rpRender(i);
    }
    // —— 快进/快退/重播 ——
    function rpStepFwd() {
      rpEpoch++;
      rpStopTimer();
      rpUpdatePlayBtn(false);
      // ★ 2026-10-02 用户需求：发牌阶段按快进 = 直接发完全部卡牌（瞬间跳到发牌完成态），
      //   不再继续慢速发牌；后续从第 2 步（第一手）正常播放
      if (rpIdx === 0 && rpDealProgress !== 'done') {
        rpDealProgress = 'done';
        rpStepCtx = null;
        rpCleanupAnimCards();
        rpRender(1);
        return;
      }
      rpStepOnce();
    }
    function rpStepBack() {
      rpEpoch++;
      rpStopTimer();
      rpUpdatePlayBtn(false);
      rpDealProgress = null;   // ★ 回退后若再前进越过的0→1步需要重发牌（快速回退到位直接拖进度更直观）
      rpStepCtx = null;        // ★ 回退后匹配手断点作废
      rpRender(rpIdx - 1);
    }
    function rpRestart() {
      rpEpoch++;               // ★ 作废旧循环：旧发牌任务在下一个卡片定时器检查点自毁，避免与新发牌叠飞
      rpStopTimer();
      rpCleanupAnimCards();    // ★ 立即清掉已起飞的旧动画卡（防止重播时新旧发牌叠飞）
      rpDealProgress = null;   // ★ 重播：发牌从头开始
      rpStepCtx = null;        // ★ 重播：匹配手断点作废
      rpRender(0);
      rpStartLoop();
    }
    function rpTogglePlay() {
      if (rpTimer) { rpEpoch++; rpStopTimer(); rpCleanupAnimCards(); rpUpdatePlayBtn(false); return; }
      if (rpIdx >= rpActions.length - 1) { rpEpoch++; rpDealProgress = null; rpCleanupAnimCards(); rpRender(0); }
      rpStartLoop();
    }
    // ★ 幂等起播：已在播放则不再启动新循环（防止双循环导致发牌动画重复）
    function rpStartLoop() {
      if (rpTimer) return;
      if (rpIdx >= rpActions.length - 1) rpRender(0);
      rpTimer = true;
      rpUpdatePlayBtn(true);
      rpLoop();
    }
    function rpStopTimer() { rpTimer = null; }
    function rpRestartTimer() { /* 倍速变更即时生效（rpLoop 每轮读取），无需重启 */ }
    function rpPlaying() {
      return document.getElementById('rp-play-btn').textContent.indexOf('⏸') === 0;
    }
    function rpUpdatePlayBtn(playing) {
      document.getElementById('rp-play-btn').textContent = playing ? __t('rp_pause', '⏸ 暂停') : __t('rp_play', '▶ 播放');
    }
    function rpInterval() {
      return parseInt(document.getElementById('rp-speed').value, 10) || 1000;
    }
    function rpSkipAnim() {
      return rpInterval() <= 250;  // 5x 时跳过动画直接渲染，避免堆积
    }

    // ==================== 动画回放核心（复用游戏原生 animateCardMove 管线） ====================
    function rpRoadKey(s, i) {
      return [(s.pf && s.pf[i]) || null, (s.ps && s.ps[i]) || [], (s.of && s.of[i]) || null, (s.os && s.os[i]) || []];
    }
    function rpNeuKey(s, j) {
      return [(s.pn && s.pn[j]) || [], (s.on && s.on[j]) || []];
    }
    function rpRoadCount(s, side) {
      var f = side === 0 ? s.pf : s.of;
      var st = side === 0 ? s.ps : s.os;
      var n = 0;
      for (var i = 0; i < 5; i++) { if (f && f[i]) n++; if (st && st[i]) n += (st[i] || []).length; }
      return n;
    }
    function rpNeuCount(s, side) {
      var a = side === 0 ? s.pn : s.on;
      var n = 0;
      if (a) for (var i = 0; i < a.length; i++) n += (a[i] || []).length;
      return n;
    }
    // 依据前后快照推断本手动画类型（hand/fromDeck/revealed/dark/drag/crash/support/surround）
    function rpInferMove(prev, s) {
      var myRoad = rpRoadCount(s, 0) - rpRoadCount(prev, 0);
      var oppRoad = rpRoadCount(s, 1) - rpRoadCount(prev, 1);
      var myNeu = rpNeuCount(s, 0) - rpNeuCount(prev, 0);
      var oppNeu = rpNeuCount(s, 1) - rpNeuCount(prev, 1);
      var i, j, k;
      // 撞牌：某路被清空（prev 有牌 next 全空）且双方路牌都减少
      // ★ 2026-9-17 FIX（对方拖牌显示成撞牌动画）：撞牌必然双方路牌都减少（该路双方整段清空）；
      //   而拖牌只有被拖走一侧 -1（打出方 +1-1 相抵）。原用 || —— 拖牌恰好清空一路时
      //   （被拖走的那张是该路唯一一张）被误判为撞牌动画
      var cleared = -1;
      for (i = 0; i < 5; i++) {
        var pk = rpRoadKey(prev, i), nk = rpRoadKey(s, i);
        var pHas = pk[0] || pk[1].length || pk[2] || pk[3].length;
        var nHas = nk[0] || nk[1].length || nk[2] || nk[3].length;
        if (pHas && !nHas) { cleared = i; break; }
      }
      if (cleared >= 0 && (myRoad < 0 && oppRoad < 0)) return { mt: 'crash', neutral: -1 };
      // 围牌：中立区某路减少、另一路增加（跨路转移到打出那一路）
      // ★ 2026-9-13 FIX：neutral 语义=转移源路（牌数减少的路）；此前误记为增加路（目标路），
      //   导致回放去空槽找源卡牌元素失败 → 0 个动画任务 → 围牌瞬移无动画
      if (myNeu < 0 || oppNeu < 0) {
        var jSrc = -1;
        for (j = 0; j < 7; j++) {
          var pn = prev.pn && prev.pn[j] ? prev.pn[j].length : 0;
          var nn = s.pn && s.pn[j] ? s.pn[j].length : 0;
          var po = prev.on && prev.on[j] ? prev.on[j].length : 0;
          var no = s.on && s.on[j] ? s.on[j].length : 0;
          if (nn < pn || no < po) { jSrc = j; break; }
        }
        return { mt: 'surround', neutral: jSrc, road: s.r };
      }
      // 拖牌：路牌减少 + 中立区增加（匹配牌移入中立区）
      if ((myRoad < 0 || oppRoad < 0) && (myNeu > 0 || oppNeu > 0)) {
        var jd = -1;
        for (j = 0; j < 7; j++) {
          var pn2 = prev.pn && prev.pn[j] ? prev.pn[j].length : 0;
          var nn2 = s.pn && s.pn[j] ? s.pn[j].length : 0;
          var po2 = prev.on && prev.on[j] ? prev.on[j].length : 0;
          var no2 = s.on && s.on[j] ? s.on[j].length : 0;
          if (nn2 > pn2 || no2 > po2) { jd = j; break; }
        }
        return { mt: 'drag', neutral: jd };
      }
      // 援牌：路牌不变、打出方中立区增加
      if (s.s === 0 && myRoad === 0 && myNeu > 0) return { mt: 'support', neutral: rpFindNeuAdd(prev, s, 0) };
      if (s.s === 1 && oppRoad === 0 && oppNeu > 0) return { mt: 'support', neutral: rpFindNeuAdd(prev, s, 1) };
      // 普通放置：按牌来源映射动画类型
      var srcMap = { hand: 'hand', deck: 'fromDeck', revealed: 'revealed', dark: 'dark' };
      return { mt: srcMap[s.src] || 'hand', neutral: -1 };
    }
    function rpFindNeuAdd(prev, s, side) {
      var pa = side === 0 ? prev.pn : prev.on;
      var na = side === 0 ? s.pn : s.on;
      for (var j = 0; j < 7; j++) {
        var p0 = pa && pa[j] ? pa[j].length : 0;
        var n0 = na && na[j] ? na[j].length : 0;
        if (n0 > p0) return j;
      }
      return -1;
    }
    function rpNeutralSlot(pt, j) {
      return document.querySelector('.' + pt + '-neutral-slot[data-slot="' + j + '"]');
    }
    function rpRoadSlotEl(pt, r) {
      var slots = document.querySelectorAll('.' + pt + '-road-slot');
      return slots[r] || null;
    }
    function rpSourceAreaEl(s) {
      var pt = s.s === 1 ? 'opponent' : 'player';
      var area = null;
      if (s.src === 'deck') area = document.getElementById(pt + '-deck');
      else if (s.src === 'revealed') area = document.querySelector('.' + pt + '-revealed-slot');
      else if (s.src === 'dark') area = document.querySelector('.' + pt + '-dark-slot');
      else area = document.querySelector('.' + pt + '-hand-slot');
      return area || document.getElementById(pt + '-deck');
    }
    // 伪造来源卡牌（来源区回放时为空，需要一张真卡样式的 ghost 供动画 clone）
    function rpMakeGhostCard(s, areaEl) {
      var pt = s.s === 1 ? 'opponent' : 'player';
      var el = document.createElement('div');
      el.className = 'card';
      // ★ 2026-10-03 用户反馈：暗牌/牌堆打出的牌在飞行途中必须牌背朝上（点数只在落地快照揭示）
      //   ——此前 ghost 直接按真实牌面渲染，移动过程提前泄露点数（与真实对局"飞行背面"不一致）
      var isBlind = (s.src === 'dark' || s.src === 'deck');
      try { el.innerHTML = getCardFaceHTML(pt, isBlind ? { back: true, rank: null, display: null, value: 0, suit: '' } : rpMkCard(s.c), false); } catch (e) { el.textContent = isBlind ? '' : s.c; }
      var r = areaEl ? areaEl.getBoundingClientRect() : { left: 0, top: 0, width: 64, height: 96 };
      var w = r.width || 64, h = r.height || 96;
      el.style.position = 'fixed';
      el.style.left = (r.left + r.width / 2 - w / 2) + 'px';
      el.style.top = (r.top + r.height / 2 - h / 2) + 'px';
      el.style.width = w + 'px';
      el.style.height = h + 'px';
      el.style.zIndex = '10300';
      el.style.pointerEvents = 'none';
      document.body.appendChild(el);
      return el;
    }
    function rpNeuCardEl(side, j) {
      var slot = rpNeutralSlot(side === 1 ? 'opponent' : 'player', j);
      if (!slot) return null;
      var cards = slot.querySelectorAll('.card');
      return cards.length ? cards[cards.length - 1] : null;
    }
    // A 与 K 相邻（环绕序列）：返回相邻牌点候选（拖牌用）
    function rpAdjPts(played) {
      var seq = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
      var i = seq.indexOf(played);
      if (i < 0) return [played];
      return [seq[(i + 1) % 13], seq[(i + 12) % 13]];
    }
    // 某方某路的全副路牌（场牌+叠牌，快照数组）
    function rpRoadArr(snap, side, r) {
      var f = side === 1 ? snap.of : snap.pf;
      var st = side === 1 ? snap.os : snap.ps;
      var a = [];
      if (f && f[r]) a.push(f[r]);
      if (st && st[r]) a = a.concat(st[r]);
      return a;
    }
    // 拖/撞动画：定位非触发方被匹配的路牌元素
    // 牌点优先取前后快照差集（拖牌恰好移除一张被匹配牌；撞牌=同点），再按牌面文本在路槽内定位，兜底场牌
    function rpMatchedRoadEl(prev, s, side, mt) {
      var slot = rpRoadSlotEl(side === 1 ? 'opponent' : 'player', s.r);
      if (!slot) return null;
      var cards = slot.querySelectorAll('.card, .card-small');
      if (!cards.length) return null;
      var pt = null;
      if (mt === 'crash') {
        pt = s.c;  // 撞牌：与打出的牌同点对撞
      } else {
        var pa = rpRoadArr(prev, side, s.r), b = rpRoadArr(s, side, s.r).slice();
        for (var i = 0; i < pa.length; i++) {
          var k = b.indexOf(pa[i]);
          if (k >= 0) b.splice(k, 1);
          else { pt = pa[i]; break; }
        }
        if (!pt && b.length) pt = b[0];
      }
      var cands = pt ? [pt] : (mt === 'crash' ? [s.c] : rpAdjPts(s.c));
      for (var a = 0; a < cands.length; a++) {
        for (var j = 0; j < cards.length; j++) {
          var tx = (cards[j].textContent || '').trim();
          if (tx === cands[a] || tx.indexOf(cands[a]) >= 0) return { el: cards[j], pt: cands[a] };
        }
      }
      return { el: cards[0], pt: cands[0] };
    }
    // 从前一帧快照取牌面（回放动画的卡面数据）
    function rpCardAt(prev, side, kind, idx) {
      var arr;
      if (kind === 'field') arr = side === 1 ? prev.of : prev.pf;
      else if (kind === 'stack') arr = (side === 1 ? prev.os : prev.ps);
      else if (kind === 'neutral') arr = (side === 1 ? prev.on : prev.pn);
      else arr = null;
      if (!arr || !arr[idx]) return null;
      var a = arr[idx];
      if (Array.isArray(a)) return a.length ? a[a.length - 1] : null;
      return typeof a === 'string' ? a : null;
    }
    // ★ 拖/撞中间快照：prev 棋盘 + 刚打出的牌已落上路（匹配尚未发生）（2026-9-11）
    //   用途：匹配动画前渲染此快照，让"打出的牌/被匹配牌"成为真实路牌 DOM，
    //   供拖牌 animateCardMove / 撞牌 animateCrashSequence 直接取材（与真实对局流程一致）
    function rpBuildIntermediate(prev, s) {
      var m;
      try { m = JSON.parse(JSON.stringify(prev)); } catch (e) { m = {}; }
      ['pf','of','ps','os','pn','on'].forEach(function (k) { if (!m[k]) m[k] = []; });
      if (!m.pw) m.pw = [0,0,0,0,0];
      if (!m.ow) m.ow = [0,0,0,0,0];
      // 手牌/明牌/暗牌/牌堆以最终快照 s 为准（打出的牌已消耗）
      ['ph','oh','pr','or','pk','ok','pd','od'].forEach(function (k) {
        if (s[k] !== undefined && s[k] !== null) { try { m[k] = JSON.parse(JSON.stringify(s[k])); } catch (e2) {} }
      });
      // 刚打出的牌落上路：该路场牌为空 → 场牌位；否则追加到叠牌末尾
      var fKey = s.s === 1 ? 'of' : 'pf', stKey = s.s === 1 ? 'os' : 'ps';
      if (!m[fKey][s.r]) {
        m[fKey][s.r] = s.c;
      } else {
        if (!m[stKey][s.r]) m[stKey][s.r] = [];
        m[stKey][s.r].push(s.c);
      }
      return m;
    }
    // ★ 2026-9-26：已移除回放"变化槽位脉冲"（rpPulseEl/rpPulseDiffs + .rp-pulse 金色线框）——
    //   正式对局无此展示；落位反馈改为与正式对局一致的 card-road-pop 弹动（见 rpBounceRoadSlot）
    // 带超时兜底的等待：animateCardMove 的 timer 注册在共享的 GameState.timers，
    // 联机断线等触发 interruptGame/clearAllTimers 时会被清除导致 Promise 永不 resolve，
    // 回放侧必须加超时防卡死（超时后清理残留动画卡）
    // ★ 2026-9-25 FIX：p 为 null/undefined 时退化为纯延时——原实现 Promise.resolve(null) 立即 resolve，
    //   ms 超时从未生效，所有 rpAwait(null, ms) 停顿实际为 0ms（回放节奏偏快、匹配停留缺失的根因）
    function rpAwait(p, ms) {
      if (p === null || p === undefined) {
        return new Promise(function (res) {
          setTimeout(function () { res('timeout'); }, ms);
        });
      }
      return new Promise(function (res) {
        var done = false;
        var t = setTimeout(function () {
          if (!done) { done = true; res('timeout'); }
        }, ms);
        Promise.resolve(p).then(function (v) {
          if (!done) { done = true; clearTimeout(t); res(v); }
        }, function () {
          if (!done) { done = true; clearTimeout(t); res(); }
        });
      });
    }
    function rpCleanupAnimCards() {
      document.querySelectorAll('.animation-card').forEach(function (c) { c.remove(); });
      document.querySelectorAll('body > div.card[style*="fixed"]').forEach(function (g) {
        if (g.style.zIndex === '10300') g.remove();
      });
    }
    // 开局发牌特效：★ 完全照抄真实 dealInitialCards 的节奏与牌面（2026-9-11 重写）
    //   暗牌5张（双方背面 darkDeal，每张间隔60ms）→ 停500ms → 手牌6张（我方正面/对方背面 hand，间隔120ms）
    //   → 停500ms → 明牌3张（双方正面 revealed，间隔150ms）→ 停500ms
    //   每张：双方并行起飞 → await 双方落地 → playSound('dealSound') → 间隔
    async function rpDealAnimation() {
      var epD = rpEpoch;  // ★ 记录代次：重播/跳转/关闭后，发牌任务在检查点自毁
      rpDealAbort = false;  // ★ 重置超时中止标记（每次发牌重新开始）
      var snap = rpActions[1] || null;  // 发牌完成快照：提供手牌/明牌牌面
      var deckP = document.getElementById('player-deck');
      var deckO = document.getElementById('opponent-deck');
      var phases = [
        { count: 5, cls: 'dark',     attr: 'data-dark-slot',     gap: 60,  move: 'darkDeal' },
        { count: 6, cls: 'hand',     attr: 'data-hand-slot',     gap: 120, move: 'hand' },
        { count: 3, cls: 'revealed', attr: 'data-revealed-slot', gap: 150, move: 'revealed' }
      ];
      function slotEl(pt, cls, attr, i) {
        return document.querySelector('.' + pt + '-' + cls + '-slot[' + attr + '="' + i + '"]');
      }
      // ★ 断点续发：按槽内已落地牌数探测续发点（落地即事实源，自愈——
      //   暂停清理只移除飞行中的卡，已落地的不动；"已落地但动画Promise未决"的窗口也能正确续发）
      var startPh = 0, startCard = 0;
      if (rpDealProgress === 'done') return;  // 发牌已完整展示（暂停发生在发牌刚结束的窄窗口）：跳过重发
      (function rpProbeDealProgress() {
        for (var p = 0; p < phases.length; p++) {
          var landed = 0;
          for (var c = 0; c < phases[p].count; c++) {
            var npS = slotEl('player', phases[p].cls, phases[p].attr, c);
            var opS = slotEl('opponent', phases[p].cls, phases[p].attr, c);
            var npN = npS ? npS.querySelectorAll('.card, .card-small').length : 0;
            var opN = opS ? opS.querySelectorAll('.card, .card-small').length : 0;
            if (npN > 0 && opN > 0) { landed = c + 1; continue; }  // 双方都已落地才算完成这一张
            break;
          }
          if (landed === phases[p].count) { startPh = p + 1; startCard = 0; continue; }  // 该阶段完整，探测下一阶段
          startPh = p; startCard = landed;
          break;
        }
      })();
      for (var pi = startPh; pi < phases.length; pi++) {
        var ph = phases[pi];
        for (var i = (pi === startPh ? startCard : 0); i < ph.count; i++) {
          if (rpDealAbort || rpEpoch !== epD) return;  // ★ 代次变化/发牌超时中止（重播/跳转/关闭）：立即中止（续播按槽内落地数探测）
          // 牌面与真实 dealInitialCards 一致：暗牌双方背面；手牌我方正面/对方背面；明牌双方正面
          // ★ 旧版回放回填占位：{unknown:true} → 起飞"？"正面（我方手牌/明牌，按规则应正面）；
          //   {back:true}（对方手牌/暗牌）与无数据 → 起飞背面
          var okCard = function (x) { return typeof x === 'string' || (x && typeof x === 'object' && x.unknown === true); };
          var myCard = null, oppCard = null;
          if (snap) {
            if (ph.cls === 'hand') {
              if (snap.ph && okCard(snap.ph[i])) myCard = rpMkCard(snap.ph[i]);
              if (snap.oh && snap.oh[i]) oppCard = null;  // 对方手牌始终背面（真实对局如此）
            } else if (ph.cls === 'revealed') {
              if (snap.pr && okCard(snap.pr[i])) myCard = rpMkCard(snap.pr[i]);
              if (snap.or && okCard(snap.or[i])) oppCard = rpMkCard(snap.or[i]);
            }
          }
          var jobs = [];
          var ps = slotEl('player', ph.cls, ph.attr, i);
          var os2 = slotEl('opponent', ph.cls, ph.attr, i);
          if (ps && deckP) jobs.push(animateCardMove(deckP, ps, 'player', myCard, ph.move));
          if (os2 && deckO) jobs.push(animateCardMove(deckO, os2, 'opponent', oppCard, ph.move));
          await rpAwait(Promise.all(jobs), 2500);
          if (rpDealAbort || rpEpoch !== epD) { rpCleanupAnimCards(); return; }  // ★ 中止并清理
          if (typeof playSound === 'function') playSound('dealSound');  // 与真实一致：每张落地后播一次
          // ★ 2026-10-03 用户反馈：发牌阶段牌堆计数随发牌递减（26 → 12，与真实发牌一致）
          try {
            if (GameState.playerDeck.length > 0) GameState.playerDeck.pop();
            if (GameState.opponentDeck.length > 0) GameState.opponentDeck.pop();
            if (typeof updateDeckCount === 'function') { updateDeckCount('player'); updateDeckCount('opponent'); }
          } catch (e) {}
          await rpAwait(null, ph.gap);
        }
        await rpAwait(null, 500);  // 阶段间停顿（与真实 500ms 一致）
      }
      rpDealProgress = 'done';  // 发牌动画完整走完
    }
    // 单步（带动画）：prev 快照 → 动画 → 渲染 next 快照
    // ★ 2026-9-25 回放匹配光环：中间快照后显示对应光环 1.5s——
    //   拖/撞 = 双方被匹配的【路牌卡】贴身 .match-glow（与真实对局一致，非整槽）；
    //   援 = 打出方中立槽 .neutral-aura + 打出牌贴卡 .match-glow；围 = 被围方中立槽 .neutral-aura + 打出牌 .match-glow
    //   ★ 复刻真实对局 _startGlowKeep 光环保持器（L31683）：每 100ms 重新定位并补加——
    //     回放流程会重建 DOM，一次性加的光环类会被清除导致"光环消失"
    //   返回清理函数（匹配动画开始前调用：停保持器 + 全局清光环）
    function rpShowMatchAura(inf, pt, s, prev) {
      function _apply() {
        var opp = pt === 'player' ? 'opponent' : 'player';
        var auraCls = (inf.mt === 'drag' || inf.mt === 'crash') ? 'match-glow' : 'neutral-aura';
        var els = [];       // 中立槽/路牌元素（加 auraCls）
        var glowEls = [];   // 援/围时打出的牌（加贴卡 .match-glow，与真实一致）
        try {
          if (inf.mt === 'drag' || inf.mt === 'crash') {
            // 与真实对局一致（双方 sourceCard 都发光）：触发方=刚落上路的打出牌（路内最后一张），
            // 非触发方=被匹配的路牌（差集/牌点定位），均加在【卡牌】上而非槽
            var mySlot = rpRoadSlotEl(pt, s.r);
            var myCards = mySlot ? mySlot.querySelectorAll('.card, .card-small') : [];
            if (myCards.length) els.push(myCards[myCards.length - 1]);
            var oppSd = (opp === 'player') ? 0 : 1;
            var m = rpMatchedRoadEl(prev, s, oppSd, inf.mt);
            if (m && m.el) els.push(m.el);
            else {
              var oSlot = rpRoadSlotEl(opp, s.r);
              var oCards = oSlot ? oSlot.querySelectorAll('.card, .card-small') : [];
              if (oCards.length) els.push(oCards[oCards.length - 1]);
            }
          } else if (inf.mt === 'support') {
            var aj = (inf.neutral >= 0) ? inf.neutral : 0;
            var n1 = rpNeutralSlot(pt, aj);
            if (n1) els.push(n1);
            // ★ 2026-9-25：打出的牌同步加贴卡光晕（真实对局 AI 匹配 L31962 源卡 match-glow、
            //   联机旁观 _applyRemoteNeutralGlow 打出牌 match-glow，均为"槽光框+贴卡光晕"双重光环）
            var s1Slot = rpRoadSlotEl(pt, s.r);
            var s1Cards = s1Slot ? s1Slot.querySelectorAll('.card, .card-small') : [];
            if (s1Cards.length) glowEls.push(s1Cards[s1Cards.length - 1]);
          } else if (inf.mt === 'surround') {
            var sj = (inf.neutral >= 0) ? inf.neutral : 0;
            var n2 = rpNeutralSlot(opp, sj);
            if (n2) els.push(n2);
            var s2Slot = rpRoadSlotEl(pt, s.r);
            var s2Cards = s2Slot ? s2Slot.querySelectorAll('.card, .card-small') : [];
            if (s2Cards.length) glowEls.push(s2Cards[s2Cards.length - 1]);
          }
          els.forEach(function (el) {
            el.classList.add(auraCls);
            // ★ 2026-10-02（用户反馈：回放援/围光环无光晕，图1对局有/图2回放无）：中立槽光晕
            //   改内联样式强制生效——实测 neutralGlow 动画的 box-shadow 分量在回放环境 computed
            //   恒为 none（CSS 类静态阴影同样不显），内联样式绕开级联与动画管线，
            //   光晕强度对齐对局Interactive光环（图1 实锤）
            try { el.style.boxShadow = '0 0 0 2px rgba(251,191,36,0.9), 0 0 24px 8px rgba(251,191,36,0.75), 0 0 48px 18px rgba(251,191,36,0.4), inset 0 0 20px rgba(251,191,36,0.4)'; } catch (e) {}
          });
          glowEls.forEach(function (el) { el.classList.add('match-glow'); });
        } catch (e) {}
      }
      var _epAura = rpEpoch;   // ★ 代次：暂停/跳转/重播后保持器自毁（防内联光晕印到跳转后的新画面）
      _apply();
      var _keep = setInterval(function () {
        if (rpEpoch !== _epAura) { clearInterval(_keep); return; }   // ★ 代次已变：自毁
        _apply();
      }, 100);  // ★ 光环保持器：DOM 重建后自动补加（复刻真实 _startGlowKeep）
      return function () {
        clearInterval(_keep);
        try { document.querySelectorAll('.match-glow, .neutral-aura').forEach(function (el) { el.classList.remove('match-glow', 'neutral-aura'); el.style.boxShadow = ''; }); } catch (e) {}
      };
    }
    // ★ 2026-9-26：落位弹动（与正式对局一致：卡牌打出落位时槽位 card-road-pop 缩小放大弹动）
    function rpBounceRoadSlot(pt, roadIndex) {
      var el = rpRoadSlotEl(pt, roadIndex);
      if (!el) return;
      el.classList.remove('card-road-pop');
      void el.offsetWidth;
      el.classList.add('card-road-pop');
      setTimeout(function () { el.classList.remove('card-road-pop'); }, 600);
    }
    async function rpStepOnce() {
      if (rpStepping) return;
      if (rpIdx >= rpActions.length - 1) { rpStopTimer(); rpUpdatePlayBtn(false); return; }
      rpStepping = true;
      var ep0 = rpEpoch;  // ★ 步进开始时的代次：期间发生重播/跳转/暂停则本步作废
      try {
        var next = rpIdx + 1;
        var prev = rpActions[rpIdx];
        var s = rpActions[next];
        if (next === 1 && rpIdx === 0 && !rpSkipAnim()) {
          // ★ 2026-9-26 FIX（明牌区提前填满+提前出牌）：发牌实际约9s（暗5×460+手6×520+明3×550+阶段停顿×3），
          //   原6500ms超时必在明牌阶段触发 → rpStepOnce提前继续出牌，且发牌协程残留并发写槽（明牌区瞬间填满）。
          //   超时仅作卡死兜底：放宽到15000ms；超时触发时置 rpDealAbort 让发牌协程在下一张检查点自毁。
          rpDealAbort = false;
          var dr = await rpAwait(rpDealAnimation(), 15000);  // 首手前先播发牌特效（带超时兜底）
          if (dr === 'timeout') rpDealAbort = true;
          if (dr === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
          if (rpEpoch !== ep0) return;  // ★ 代次已变（重播/跳转）：作废本次发牌，由新循环重新发牌
          if (!rpTimer && !_replayModeActive) return;
        }
        if (rpSkipAnim()) {
          rpRender(next);
        } else {
          // ★ 优先使用录制时记录的匹配事件（精确还原），旧版回放无 mv 时退回推断
          var inf;
          if (s.mv && s.mv.mt) {
            inf = { mt: s.mv.mt, road: s.mv.road, neutral: s.mv.neutral };
          } else {
            inf = rpInferMove(prev, s);
          }
          var pt = s.s === 1 ? 'opponent' : 'player';
          var tasks = [];
          if (inf.mt === 'drag' || inf.mt === 'crash') {
            // ★ 完全照抄真实对局流程（2026-9-11）：① 打出的牌先落上路 → ② 中间快照（匹配未发生）
            //   → ③ 匹配动画（拖=双方 animateCardMove / 撞=animateCrashSequence 七阶段）→ ④ 渲染最终快照
            // ★ 2026-10-02 用户需求：暂停/单步中断在"牌已落场、匹配未完"时——续播不重放出牌，
            //   直接从场上完成匹配动画（rpStepCtx 断点续播；跳转/回退/重播会清除断点）
            var rpResuming = (rpStepCtx && rpStepCtx.idx === next && rpStepCtx.mt === inf.mt);
            if (!rpResuming) {
              var landSlot = rpRoadSlotEl(pt, s.r);
              if (landSlot) {
                var srcMap2 = { hand: 'hand', deck: 'fromDeck', revealed: 'revealed', dark: 'dark' };
                var gLand = rpMakeGhostCard(s, rpSourceAreaEl(s));
                var lout = await rpAwait(animateCardMove(gLand, landSlot, pt, rpMkCard(s.c), srcMap2[s.src] || 'hand', { skipTargetWrite: true }), 2500);
                if (!_replayModeActive) { rpCleanupAnimCards(); return; }
                if (lout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
                if (rpEpoch !== ep0) return;  // ★ 代次已变：作废本步（重播/跳转已接管画面）
              }
              // ② 中间快照：牌已上路、匹配未发生 → 匹配牌成为真实路牌 DOM（供匹配动画取材）
              rpApplySnapshot(rpBuildIntermediate(prev, s));
              rpBounceRoadSlot(pt, s.r);  // ★ 落位弹动（与正式对局一致）
              // ★ 2026-9-25：显示拖/撞光环 + 停留 1.5s（原 150ms 太短，看不清打出落位）
              var _auraClear1 = rpShowMatchAura(inf, pt, s, prev);
              rpStepCtx = { idx: next, mt: inf.mt, clearAura: _auraClear1 };  // ★ 断点记录：牌已落场
              await rpAwait(null, 1500);
              _auraClear1();
              if (!_replayModeActive) { rpCleanupAnimCards(); return; }
              if (rpEpoch !== ep0) { rpCleanupAnimCards(); return; }   // ★ 暂停在此：断点已记录，续播从③开始
            } else {
              // 续播：停掉中断前残留的光环保持器 + 清光环（clear 函数存在断点里）
              try { if (rpStepCtx.clearAura) rpStepCtx.clearAura(); } catch (e) {}
              rpStepCtx = null;
            }
            // ③ 匹配动画（照抄 performRoadMatch：撞牌走完整 animateCrashSequence，拖牌双飞）
            var jP = rpFindNeuAdd(prev, s, 0), jO = rpFindNeuAdd(prev, s, 1);
            if (jP < 0 && s.s === 0 && inf.neutral >= 0) jP = inf.neutral;   // 旧版回放兜底：录制的中立路
            if (jO < 0 && s.s === 1 && inf.neutral >= 0) jO = inf.neutral;
            var sideInfo = [];
            for (var sd2 = 0; sd2 < 2; sd2++) {
              var p4 = sd2 === 1 ? 'opponent' : 'player';
              var slot4 = rpRoadSlotEl(p4, s.r);
              var cards4 = slot4 ? slot4.querySelectorAll('.card, .card-small') : [];
              var el4, rank4;
              if (sd2 === s.s) {
                el4 = cards4.length ? cards4[cards4.length - 1] : null;  // 触发方：刚落上路的打出牌（路内最后一张）
                rank4 = s.c;
              } else {
                var m4 = rpMatchedRoadEl(prev, s, sd2, inf.mt);  // 非触发方：差集/牌点定位被匹配的路牌
                el4 = m4 && m4.el ? m4.el : (cards4.length ? cards4[cards4.length - 1] : null);
                rank4 = m4 && m4.pt ? m4.pt : s.c;
              }
              var jj = sd2 === 0 ? jP : jO;
              sideInfo.push({ el: el4, rank: rank4, neu: rpNeutralSlot(p4, jj >= 0 ? jj : 0), p: p4 });
            }
            var mout;
            if (sideInfo[0].el && sideInfo[1].el && sideInfo[0].neu && sideInfo[1].neu) {
              if (inf.mt === 'crash') {
                // 撞牌：蓄力→冲撞→粒子→白光→飞入中立区（crashSound 由动画在碰撞瞬间播放）
                mout = await rpAwait(animateCrashSequence(rpMkCard(sideInfo[1].rank), rpMkCard(sideInfo[0].rank), s.r, sideInfo[1].el, sideInfo[0].el, sideInfo[0].neu, sideInfo[1].neu), 4500);
              } else {
                // 拖牌：双方匹配牌同时飞入各自中立槽（dragSound 由 animateCardMove 开头播放）
                tasks.push(Promise.resolve(animateCardMove(sideInfo[1].el, sideInfo[1].neu, 'opponent', rpMkCard(sideInfo[1].rank), 'drag', { skipTargetWrite: true })));
                tasks.push(Promise.resolve(animateCardMove(sideInfo[0].el, sideInfo[0].neu, 'player', rpMkCard(sideInfo[0].rank), 'drag', { skipTargetWrite: true })));
                mout = await rpAwait(Promise.all(tasks), 2500);
              }
            } else {
              mout = 'skip';
            }
            if (!_replayModeActive) { rpCleanupAnimCards(); return; }
            if (mout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
            if (rpEpoch !== ep0) return;  // ★ 代次已变：不渲染旧快照
            // ④ 渲染最终快照（匹配结果落定）
            rpRender(next);
            rpStepCtx = null;  // ★ 本手完成，清除断点
            await rpAwait(null, 320);
            return;  // 匹配分支已完整走完，跳过下方通用收尾（finally 负责复位 rpStepping）
          } else if (inf.mt === 'support') {
            // ★ 2026-9-16 FIX（Bug4）：照抄真实援牌两段式流程——
            //   ① 打出的牌先落上路（此前缺失"打出到场"过程）→ ② 中间快照（牌成真实 DOM）
            //   → ③ 该牌从路上飞入打出方中立槽（tasks 走通用收尾）
            // ★ 2026-10-02：同拖/撞——暂停后断点续播，从场上直接完成援牌飞行
            var rpResuming2 = (rpStepCtx && rpStepCtx.idx === next && rpStepCtx.mt === 'support');
            if (!rpResuming2) {
              var supLand = rpRoadSlotEl(pt, s.r);
              if (supLand) {
                var supSrcMap = { hand: 'hand', deck: 'fromDeck', revealed: 'revealed', dark: 'dark' };
                var supGhost = rpMakeGhostCard(s, rpSourceAreaEl(s));
                var supLout = await rpAwait(animateCardMove(supGhost, supLand, pt, rpMkCard(s.c), supSrcMap[s.src] || 'hand', { skipTargetWrite: true }), 2500);
                if (!_replayModeActive) { rpCleanupAnimCards(); return; }
                if (supLout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
                if (rpEpoch !== ep0) return;  // ★ 代次已变：作废本步
              }
              rpApplySnapshot(rpBuildIntermediate(prev, s));
              rpBounceRoadSlot(pt, s.r);  // ★ 落位弹动（与正式对局一致）
              // ★ 2026-9-25：显示援牌光环 + 停留 1.5s（原 150ms 太短）
              var _auraClear2 = rpShowMatchAura(inf, pt, s, prev);
              rpStepCtx = { idx: next, mt: 'support', clearAura: _auraClear2 };  // ★ 断点记录
              await rpAwait(null, 1500);
              _auraClear2();
              if (!_replayModeActive) { rpCleanupAnimCards(); return; }
              if (rpEpoch !== ep0) { rpCleanupAnimCards(); return; }   // ★ 暂停在此：断点已记录
            } else {
              try { if (rpStepCtx.clearAura) rpStepCtx.clearAura(); } catch (e) {}
              rpStepCtx = null;
            }
            var supJ = inf.neutral >= 0 ? inf.neutral : 0;
            var supToN = rpNeutralSlot(pt, supJ) || rpRoadSlotEl(pt, s.r);
            var supSrcEl = null;
            var supRoadEl = rpRoadSlotEl(pt, s.r);
            if (supRoadEl) {
              var supCards = supRoadEl.querySelectorAll('.card, .card-small');
              supSrcEl = supCards.length ? supCards[supCards.length - 1] : null;  // 刚落上路的打出牌（路内最后一张）
            }
            if (supSrcEl && supToN) {
              tasks.push(Promise.resolve(animateCardMove(supSrcEl, supToN, pt, rpMkCard(s.c), 'support', { skipTargetWrite: true })));
            }
          } else if (inf.mt === 'surround') {
            // ★ 2026-9-16 FIX（Bug3+Bug4）：照抄真实 performNeutralAction 围牌流程——
            //   ① 打出的牌先落上路（此前缺失）→ ② 中间快照（牌成真实 DOM，中立牌未动）
            //   → ③ 中立区该路双方【全部】中立牌飞往打出方该路叠牌位（此前只飞双方顶牌
            //   且错误地飞向各自中立槽）→ ④ 渲染最终快照
            // ★ 2026-10-02：同拖/撞——暂停后断点续播，从场上直接完成围牌转移
            var rpResuming3 = (rpStepCtx && rpStepCtx.idx === next && rpStepCtx.mt === 'surround');
            if (!rpResuming3) {
              var surSrcJ = inf.neutral >= 0 ? inf.neutral : -1;
              var surLand = rpRoadSlotEl(pt, s.r);
              if (surLand) {
                var surSrcMap = { hand: 'hand', deck: 'fromDeck', revealed: 'revealed', dark: 'dark' };
                var surGhost = rpMakeGhostCard(s, rpSourceAreaEl(s));
                var surLout = await rpAwait(animateCardMove(surGhost, surLand, pt, rpMkCard(s.c), surSrcMap[s.src] || 'hand', { skipTargetWrite: true }), 2500);
                if (!_replayModeActive) { rpCleanupAnimCards(); return; }
                if (surLout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
                if (rpEpoch !== ep0) return;
              }
              rpApplySnapshot(rpBuildIntermediate(prev, s));
              rpBounceRoadSlot(pt, s.r);  // ★ 落位弹动（与正式对局一致）
              // ★ 2026-9-25：显示围牌光环 + 停留 1.5s（原 150ms 太短）
              var _auraClear3 = rpShowMatchAura(inf, pt, s, prev);
              rpStepCtx = { idx: next, mt: 'surround', clearAura: _auraClear3 };  // ★ 断点记录
              await rpAwait(null, 1500);
              _auraClear3();
              if (!_replayModeActive) { rpCleanupAnimCards(); return; }
              if (rpEpoch !== ep0) { rpCleanupAnimCards(); return; }   // ★ 暂停在此：断点已记录
            } else {
              try { if (rpStepCtx.clearAura) rpStepCtx.clearAura(); } catch (e) {}
              rpStepCtx = null;
              var surSrcJ = inf.neutral >= 0 ? inf.neutral : -1;  // 续播仍需围牌源格号
            }
            if (surSrcJ >= 0) {
              var surTargetRoad = rpRoadSlotEl(pt, s.r);
              // 与真实一致：先对方中立牌，后我方中立牌，全部转移（快照数组与槽内 DOM 顺序一致）
              var surItems = [];
              [1, 0].forEach(function (surSd) {
                var surP = surSd === 1 ? 'opponent' : 'player';
                var surArr = surSd === 1 ? (prev.on || []) : (prev.pn || []);
                var surFaces = (surArr[surSrcJ] || []);
                var surSlot = rpNeutralSlot(surP, surSrcJ);
                var surEls = surSlot ? Array.prototype.slice.call(surSlot.querySelectorAll('.card')) : [];
                for (var surK = 0; surK < surFaces.length; surK++) {
                  surItems.push({ el: surEls[surK] || null, p: surP });
                }
              });
              if (surTargetRoad && surItems.length && surItems.some(function (it) { return it.el; })) {
                // ★ 2026-9-30 重构（对齐援牌 animateCardMove 结构）：克隆挂 game-container 内 + 容器设计坐标
                //   有效缩放 = 容器视觉宽/布局宽（已含回放 wrapper scale(0.8) 的双重系数）
                var _rpGc = document.querySelector('.game-container');
                var _rpCr = _rpGc ? _rpGc.getBoundingClientRect() : { left: 0, top: 0 };
                var _rpSc = 1;
                try {
                  var _rw = _rpGc ? (_rpGc.offsetWidth || 0) : 0;
                  var _vw = _rpGc ? (_rpGc.getBoundingClientRect().width || 0) : 0;
                  if (_rw > 0 && _vw > 0 && isFinite(_vw / _rw) && (_vw / _rw) > 0) _rpSc = _vw / _rw;
                } catch (e) {}
                var _rpToDesign = function (r) {
                  return { left: (r.left - _rpCr.left) / _rpSc, top: (r.top - _rpCr.top) / _rpSc, width: r.width / _rpSc, height: r.height / _rpSc };
                };
                var surEndRect = _rpToDesign(surTargetRoad.getBoundingClientRect());
                var surGap = 2;
                // ★ 2026-9-17 FIX（回放对方围牌方向错误）：对方路牌槽是 column-reverse 布局
                //   （DOM 后 = 视觉上方，牌堆从底部向上生长）——飞行目标必须与真实围牌动画
                //   （opponentPerformSurroundMatch）一致：朝【对方卡牌尾部】（视觉上方）逐张向上堆；
                //   我方路牌槽为普通纵向布局，保持向下堆。
                var surIsOpp = (pt === 'opponent');
                var surExist = surTargetRoad.querySelectorAll('.card');
                var surRects = surItems.map(function (it) { return it.el ? _rpToDesign(it.el.getBoundingClientRect()) : null; });
                // 游标：下一张飞行牌的堆叠基准（我方向下生长 / 对方向上生长）
                var surCursor;
                if (surExist.length) {
                  var surLastR = _rpToDesign(surExist[surExist.length - 1].getBoundingClientRect());
                  surCursor = surIsOpp ? (surLastR.top - surGap)                    // 对方：已有牌堆顶部之上
                                       : (surLastR.top + surLastR.height + surGap); // 我方：已有牌堆底部之下
                } else {
                  surCursor = surIsOpp ? (surEndRect.top + surEndRect.height - 2) : surEndRect.top;  // 空槽兜底
                }
                var surAnims = [];
                surItems.forEach(function (it, surIdx) {
                  var sr = surRects[surIdx];
                  if (!it.el || !sr || sr.width <= 0) return;  // 无源 DOM：跳过飞行（最终快照兜底显示）
                  var surTop;
                  if (surIsOpp) { surTop = surCursor - sr.height; surCursor = surTop - surGap; }           // 向上堆
                  else          { surTop = surCursor;           surCursor = surTop + sr.height + surGap; } // 向下堆
                  var surLeft = surEndRect.left + (surEndRect.width - sr.width) / 2;
                  var surTemp = document.createElement('div');
                  surTemp.className = 'animation-card';   // ★ 供 rpCleanupAnimCards 兜底清理
                  surTemp.style.position = 'absolute';
                  surTemp.style.left = sr.left + 'px';
                  surTemp.style.top = sr.top + 'px';
                  surTemp.style.width = sr.width + 'px';
                  surTemp.style.height = sr.height + 'px';
                  surTemp.style.zIndex = '10300';
                  surTemp.style.pointerEvents = 'none';
                  surTemp.style.display = 'flex';
                  surTemp.style.alignItems = 'center';
                  surTemp.style.justifyContent = 'center';
                  surTemp.style.overflow = 'hidden';
                  surTemp.style.background = it.el.style.background || getComputedStyle(it.el).background;
                  surTemp.style.border = it.el.style.border || getComputedStyle(it.el).border;
                  surTemp.style.borderRadius = it.el.style.borderRadius || getComputedStyle(it.el).borderRadius;
                  surTemp.style.boxShadow = it.el.style.boxShadow || getComputedStyle(it.el).boxShadow;
                  // ★ 2026-9-17 FIX（Bug1）：同步拷贝文字颜色/字重——真实围牌动画
                  //   （animateCardMove 的 support/surround 分支）会拷贝 color/fontWeight，
                  //   漏拷时飞行中的牌点文字失去 .card 继承色，回退成默认黑色
                  surTemp.style.color = it.el.style.color || getComputedStyle(it.el).color;
                  surTemp.style.fontWeight = it.el.style.fontWeight || getComputedStyle(it.el).fontWeight;
                  surTemp.style.fontSize = it.el.style.fontSize || getComputedStyle(it.el).fontSize;
                  surTemp.innerHTML = it.el.innerHTML;
                  // ★ 挂 game-container 内（容器坐标随 transform scale 一同缩放，与援牌同构）
                  if (_rpGc) _rpGc.appendChild(surTemp); else document.body.appendChild(surTemp);
                  if (it.el.parentNode) it.el.parentNode.removeChild(it.el);  // 与真实一致：源牌起飞即移除
                  var surDx = surLeft - sr.left, surDy = surTop - sr.top;
                  var surAnim = surTemp.animate([
                    { transform: 'translate(0, 0)', opacity: 1 },
                    { transform: 'translate(' + surDx + 'px, ' + surDy + 'px)', opacity: 1 }
                  ], { duration: 500, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards' });
                  surAnims.push(new Promise(function (res3) { surAnim.onfinish = function () { surTemp.remove(); res3(); }; }));
                });
                var surMout = await rpAwait(Promise.all(surAnims), 2500);
                if (!_replayModeActive) { rpCleanupAnimCards(); return; }
                if (surMout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
                if (rpEpoch !== ep0) return;
                if (surAnims.length && typeof playSound === 'function') playSound('surroundCardSound');  // 与真实一致：全部落地后播一次
              }
            }
            rpRender(next);
            // ★ 2026-9-21 回放围牌联动波浪：从打出的牌 A 开始 → 被围的牌按转移顺序依次脉冲
            if (inf.mt === 'surround') {
              setTimeout(function () {
                var _rpSurSlot = rpRoadSlotEl(pt, s.r);
                if (!_rpSurSlot || typeof surItems === 'undefined' || !surItems.length) return;
                var _rpSurAll = Array.prototype.slice.call(_rpSurSlot.querySelectorAll('.card, .card-small'));
                var _rpSurN = Math.min(surItems.length, _rpSurAll.length);
                var _rpSeq = _rpSurAll.slice(_rpSurAll.length - _rpSurN);
                var _rpStartIdx = _rpSurAll.length - _rpSurN - 1;
                if (_rpStartIdx >= 0) _rpSeq.unshift(_rpSurAll[_rpStartIdx]);
                else if (_rpSurAll.length) _rpSeq.unshift(_rpSurAll[0]);
                pbPulseCardList(_rpSeq, 90);
              }, 150);
            }
            await rpAwait(null, 320);
            rpStepCtx = null;  // ★ 本手完成，清除断点
            return;  // 围牌分支已完整走完，跳过通用收尾
          } else {
            // 普通放置：按牌来源映射动画
            var ghost2 = rpMakeGhostCard(s, rpSourceAreaEl(s));
            var toSlot = rpRoadSlotEl(pt, s.r);
            if (toSlot) tasks.push(Promise.resolve(animateCardMove(ghost2, toSlot, pt, rpMkCard(s.c), inf.mt, { skipTargetWrite: true })));
          }
          var tout = await rpAwait(Promise.all(tasks), 2400);
          if (!_replayModeActive) { rpCleanupAnimCards(); return; }  // 动画中途关闭回放：丢弃本步，防覆盖已恢复的实况棋盘
          if (tout === 'timeout' || rpEpoch !== ep0) rpCleanupAnimCards();
          if (rpEpoch !== ep0) return;  // ★ 代次已变：不渲染旧快照（重播/跳转已接管画面）
          // ★ 撞牌落地音效（真实对局在撞牌逻辑中播放，回放在此补齐；拖牌音效已在动画开头播过）
          if (inf.mt === 'crash' && typeof playSound === 'function') playSound('crashSound');
          rpRender(next);
          rpBounceRoadSlot(pt, s.r);  // ★ 落位弹动（与正式对局一致，替代原变化脉冲线框）
          // ★ 2026-9-21 回放援牌联动波浪：落下的援牌（打出方中立格末张）带动两格依次脉冲
          // ★ 2026-10-02 FIX（用户澄清：错误触发）：对局门控是 performNeutralAction 的
          //   _supOwnershipMine =（援牌落地后，援牌方该格数量 > 对方）——归属变更才触发。
          //   回放此前无条件触发，导致"援牌后双方中立牌数量相同（归属未变）"的局面错误波浪。
          //   现按最终快照复核同一门控（以援牌方视角计数）。
          if (inf.mt === 'support') {
            var _supJ2 = inf.neutral >= 0 ? inf.neutral : 0;
            var _supOther = (pt === 'player') ? 'opponent' : 'player';
            var _supMeArr = (pt === 'player') ? (s.pn || [])[_supJ2] : (s.on || [])[_supJ2];
            var _supOpArr = (pt === 'player') ? (s.on || [])[_supJ2] : (s.pn || [])[_supJ2];
            var _supMeCnt = Array.isArray(_supMeArr) ? _supMeArr.filter(Boolean).length : 0;
            var _supOpCnt = Array.isArray(_supOpArr) ? _supOpArr.filter(Boolean).length : 0;
            if (_supMeCnt > _supOpCnt) {   // ★ 与对局 _supOwnershipMine 同口径：归属变为援牌方才触发
              setTimeout(function () {
                pbPlayChainPulse([
                  rpNeutralSlot(pt, _supJ2),
                  rpNeutralSlot(_supOther, _supJ2)
                ], 'last');
              }, 120);
            }
          }
          await rpAwait(null, 320);  // 脉冲观察期
          rpStepCtx = null;  // ★ 本手完成，清除断点
        }
      } catch (e) {
        try { rpCleanupAnimCards(); rpRender(next); } catch (e2) {}
        rpStepCtx = null;
      } finally {
        rpStepping = false;
      }
    }
    // 异步播放循环：动画完成 → 倍速间隔 → 下一手（★ 代次守卫：重播/跳转/暂停会作废旧循环）
    async function rpLoop() {
      var my = rpEpoch;
      while (rpTimer && _replayModeActive && rpEpoch === my) {
        if (rpIdx >= rpActions.length - 1) { rpStopTimer(); rpUpdatePlayBtn(false); return; }
        await rpStepOnce();
        if (!rpTimer || rpEpoch !== my) return;  // 中途暂停/代次变化
        var iv = rpInterval();
        if (iv > 60) await new Promise(function (res) { setTimeout(res, iv); });
      }
    }
    function rpDownloadCurrent() {
      if (rpReplay) downloadReplayJSON(rpReplay);
    }

    // ============================================================================
    // 账号系统（账号+密码 注册/登录）2026-9-12
    // ★ 隐私合规备注：
    //   - 账号 = 用户手机号（11位，注册时提供，仅用于登录标识），【不向其他玩家展示】等敏感信息，
    //     浏览器仅存账号名 pbp_auth_account（账号非 PII，无需脱敏）
    //   - 注册协议复选框默认不勾选 = PIPL 第13/14条"单独同意"（自愿、明确、充分知情）
    //   - 密码明文只经内存提交给服务器，服务器端仅存 scrypt 加盐哈希
    // ============================================================================
    // 服务端地址：?server= 覆盖 → 默认跟随页面同源（https→wss；本地/线上部署均自动正确；
    // 若需指定其他服务器，URL 加 ?server=host:port）
    // ★ 2026-9-15 wss 化：file://（Electron）时 location.host 为空 → 回退 wss://frontline-stratagem.com/ws
    // ★ 2026-9-16：仅自有部署源（本机/IP/官方域名）同源跟随；第三方托管（itch.io 等嵌入）没有我们的
    //   WS 后端，必须回退部署服务器 wss 域名，否则联机/账号在 itch 上全部失联
    function _pbIsOwnOrigin() {
      var h = location.hostname || '';
      return h === 'frontline-stratagem.com' || h.endsWith('.frontline-stratagem.com')
        || h === 'localhost' || h === '127.0.0.1' || /^\d+\.\d+\.\d+\.\d+$/.test(h);
    }
    function _authServerUrl() {
      var m = location.search.match(/[?&]server=([^&]+)/);
      if (m) return 'ws://' + m[1] + '/ws';
      // ★ 2026-9-20 Capacitor 安卓 APK：WebView 源为 https://localhost，不能同源跟随；
      //   首选部署服务器 IP 直连（最快最稳），wss 域名作兜底候选（见 _authServerUrls）
      if (window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform()) {
        return AUTH_FALLBACK_IP_URL;
      }
      if (location.host && _pbIsOwnOrigin()) {
        return (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws';
      }
      return 'wss://frontline-stratagem.com/ws';
    }

    var _authWs = null;
    var _authWsHandlers = {};  // type -> fn（短连接一次性应答）
    // ★ 2026-9-16 IP 兜底故障转移：国内直连 CF 海外节点（wss 域名）常被墙干扰（实测 VPN 通/直连断），
    //   首选地址连不上时自动降级到部署服务器 IP 直连（纯 IP 不受域名拦截影响）。
    //   候选规则与联机 online-client.js 一致：https 页面禁止 ws://（混合内容限制）只保留 wss 候选；
    //   ?server= 覆盖视为用户明确指定，不追加兜底。
    var AUTH_FALLBACK_IP_URL = 'ws://106.14.116.171:8080/ws';
    function _authServerUrls() {
      var urls = [_authServerUrl()];
      var _cap = window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform();
      if (!location.search.match(/[?&]server=/) && urls[0] !== AUTH_FALLBACK_IP_URL
          && (location.protocol !== 'https:' || _cap)) {
        urls.push(AUTH_FALLBACK_IP_URL);
      }
      // ★ APK：IP 首选连不上时，补 wss 域名候选（allowMixedContent 已放开 ws:// 限制）
      if (_cap && !location.search.match(/[?&]server=/) && urls[0] === AUTH_FALLBACK_IP_URL) {
        urls.push('wss://frontline-stratagem.com/ws');
      }
      return urls;
    }

    // 独立短连接：注册/登录弹窗不依赖 PBOnline.connect()（避免触发联机登录流程）
    function authSend(msg, onReply) {
      try {
        if (_authWs && _authWs.readyState === WebSocket.OPEN) {
          if (onReply) _authWsHandlers[msg._replyType] = onReply;
          _authWs.send(JSON.stringify(msg));
          return;
        }
      } catch (e) { /* 重连 */ }
      try { if (_authWs) { _authWs.onmessage = null; _authWs.close(); } } catch (e) {}
      var _pending = [msg];
      var _urls = _authServerUrls();
      var _idx = 0;
      var _connGen = 0;  // 连接代数：兜底重连后忽略旧连接的残留事件
      function _connect() {
        var gen = ++_connGen;
        _authWsHandlers = {};
        _authWs = new WebSocket(_urls[_idx]);
        if (onReply && msg._replyType) _authWsHandlers[msg._replyType] = onReply;
        var _openedThis = false;  // 当前这条连接是否成功 open 过（区分「连不上」和「连上后出错」）
        _authWs.onopen = function () {
          if (gen !== _connGen) return;
          _openedThis = true;
          _pending.forEach(function (m) { _authWs.send(JSON.stringify(m)); });
        };
        _authWs.onmessage = function (ev) {
          if (gen !== _connGen) return;
          var m; try { m = JSON.parse(ev.data); } catch (e) { return; }
          var h = _authWsHandlers[m.type];
          if (h) { h(m.data); }
        };
        // 连接失败：从未成功连接且还有候选地址 → 切换候选地址自动重试（IP 兜底）；
        // 没有候选了才通知所有挂起的应答（onReply(null)），调用方显示失败态
        _authWs.onerror = function () {
          if (gen !== _connGen) return;
          if (!_openedThis && _idx < _urls.length - 1) {
            _idx++;
            console.log('[账号] 首选地址连不上，切换备用地址:', _urls[_idx]);
            try { _authWs.onmessage = null; _authWs.close(); } catch (e) {}
            setTimeout(_connect, 800);
          } else {
            Object.keys(_authWsHandlers).forEach(function (k) {
              var h = _authWsHandlers[k];
              try { h(null); } catch (e) {}
            });
            _authWsHandlers = {};
          }
        };
      }
      _connect();
    }
    function closeAuthWs() {
      try { if (_authWs) { _authWs.onmessage = null; _authWs.close(); } } catch (e) {}
      _authWs = null; _authWsHandlers = {};
    }

    // ---- 登录态存取 ----
    function pbIsLoggedIn() {
      return !!(localStorage.getItem('pbp_auth_token') && localStorage.getItem('pbp_auth_user_id'));
    }
    function pbSaveAuth(token, userId, nickname, avatar, account) {
      localStorage.setItem('pbp_auth_token', token);
      localStorage.setItem('pbp_auth_user_id', userId);
      if (account) localStorage.setItem('pbp_auth_account', account);
      if (nickname) localStorage.setItem('pbp_nickname', nickname);
      if (avatar) localStorage.setItem('pbp_avatar', avatar);
    }
    function pbClearAuth() {
      localStorage.removeItem('pbp_auth_token');
      localStorage.removeItem('pbp_auth_user_id');
      localStorage.removeItem('pbp_auth_account');
      // 兼容清理：旧版手机号制残留
      localStorage.removeItem('pbp_auth_phone_masked');
      localStorage.removeItem('pbp_remember_phone');
    }
    // 刷新个人资料弹窗账号按钮：未登录→「登录 / 注册」；已登录→「退出登录」
    function updateAuthButton() {
      var btn = document.getElementById('pp-auth-btn');
      if (!btn) return;
      if (pbIsLoggedIn()) {
        btn.textContent = __t('ag_logout', '退出登录');
        btn.removeAttribute('data-i18n'); // 防止 applyGameLang 覆盖动态文案
        btn.classList.add('pp-logout-danger');
      } else {
        btn.textContent = __t('ag_login_register', '登录 / 注册');
        btn.setAttribute('data-i18n', 'ag_login_register');
        btn.classList.remove('pp-logout-danger');
      }
    }

    // 个人资料弹窗「修改昵称」按钮：已登录→关资料弹窗开改名弹窗；未登录→仅提示（资料弹窗保持打开）
    function onPpEditNickClick() {
      if (typeof pbIsLoggedIn === 'function' && pbIsLoggedIn()) {
        closeProfileModal();
        openNicknameEditor();
      } else {
        pbToast(__t('ag_need_login', '请先登录账号'), 'error');
      }
    }

    // 个人资料弹窗账号按钮点击：未登录→打开登录窗；已登录→退出登录
    function onPpAuthClick() {
      if (pbIsLoggedIn()) { pbLogout(); }
      else { closeProfileModal(); openAuthModal('login'); }
    }
    // 联机入口拦截回调（PBOnline.requireLogin 调用）
    window.PBRequireLogin = function () {
      openAuthModal('login');
      return false;
    };
    // token 失效回调（online-client auth_expired 广播）
    window.PBOnAuthExpired = function () {
      pbClearAuth();
      updateAuthButton();
      pbRefreshGuestLock();  // 恢复游客锁定态
      pbResetGuestProfile(); // ★ 被顶号/登录过期：恢复游客初始状态（2026-9-13）
    };

    // ★ 游客初始状态复位（2026-9-13）：退出登录/被顶号后恢复游客初始状态——
    //   名称「游客」（无编号）、头像默认第一个（🗡️，清除自定义存档）、等级/经验条隐藏、锁定态恢复
    function pbResetGuestProfile() {
      try {
        localStorage.removeItem('pbp_avatar');   // 清除头像存档，initPlayerProfile 恢复默认第一个
        initPlayerProfile();                     // 全量恢复（名称/头像/经验条/锁定态内部都会刷新）
      } catch (e) {}
      // ★ 排行榜属在线内容：回游客态立即隐藏入口（2026-9-14）
      if (typeof lbRefreshVisibility === 'function') { try { lbRefreshVisibility(); } catch (e) {} }
    }

    // ---- auth-modal 开关/切换 ----
    function openAuthModal(tab) {
      var modal = document.getElementById('auth-modal');
      if (!modal) return;
      modal.style.display = 'flex';
      switchAuthTab(tab || 'login');
      // 记住密码：预填账号/密码
      var rAcc = localStorage.getItem('pbp_remember_account') || '';
      var rPwd = localStorage.getItem('pbp_remember_pwd') || '';
      if (rAcc) document.getElementById('auth-login-account').value = rAcc;
      if (rPwd) document.getElementById('auth-login-pwd').value = rPwd;
      document.getElementById('auth-remember-pwd').checked = !!(rAcc && rPwd);
    }
    function closeAuthModal() {
      var modal = document.getElementById('auth-modal');
      if (modal) modal.style.display = 'none';
      var e1 = document.getElementById('auth-login-error');
      var e2 = document.getElementById('auth-reg-error');
      if (e1) e1.textContent = '';
      if (e2) e2.textContent = '';
      closeAuthWs();
    }
    function switchAuthTab(tab) {
      var tLogin = document.getElementById('auth-tab-login');
      var tReg = document.getElementById('auth-tab-register');
      var fLogin = document.getElementById('auth-form-login');
      var fReg = document.getElementById('auth-form-register');
      if (!tLogin || !tReg) return;
      if (tab === 'register') {
        tReg.classList.add('active'); tLogin.classList.remove('active');
        fReg.style.display = 'flex'; fLogin.style.display = 'none';
        pbRefreshCaptcha();
      } else {
        tLogin.classList.add('active'); tReg.classList.remove('active');
        fLogin.style.display = 'flex'; fReg.style.display = 'none';
        closeAuthWs();
      }
    }

    // ---- 图形验证码 ----
    var _captchaId = '';
    function pbRefreshCaptcha() {
      var img = document.getElementById('auth-captcha-img');
      if (img) img.style.opacity = '0.5'; // 加载中半透明
      authSend({ type: 'captcha_request', data: {}, _replyType: 'captcha_result' }, function (d) {
        _captchaId = d ? (d.captchaId || '') : '';
        if (img && d && d.svg) {
          img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(d.svg)));
          img.style.opacity = '1';
        } else if (img && !d) {
          // 连接失败：显示重试提示（点击图片可重试）
          img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(
            '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#3a2a2a" rx="4"/><text x="60" y="17" text-anchor="middle" font-size="10" fill="#f87171">加载失败</text><text x="60" y="31" text-anchor="middle" font-size="9" fill="#fca5a5">点击重试</text></svg>'
          )));
          img.style.opacity = '1';
        }
      });
    }

    // ---- 密码明文切换（👁️）：点击眼睛显示/隐藏密码，防输错 ----
    function pbTogglePwd(inputId, btn) {
      var input = document.getElementById(inputId);
      if (!input || !btn) return;
      var showing = input.type === 'text';
      input.type = showing ? 'password' : 'text';
      btn.classList.toggle('showing', !showing);
      // 同步悬停提示（并更新 i18n 键，保证语言切换时正确）
      var key = showing ? 'ag_pwd_show' : 'ag_pwd_hide';
      btn.setAttribute('data-i18n-title', key);
      btn.setAttribute('title', __t(key, showing ? '显示密码' : '隐藏密码'));
    }

    // ---- 密码强度（注册表单实时提示）：长度 + 字符多样性评分 ----
    // 弱：仅满足最低要求（8位+字母+数字）；中：12位以上或含大小写/特殊字符之一；强：≥12位且多样性≥3
    function pbPwdScore(pwd) {
      if (!pwd) return -1;
      var variety = 0;
      if (/[a-z]/.test(pwd)) variety++;
      if (/[A-Z]/.test(pwd)) variety++;
      if (/\d/.test(pwd)) variety++;
      if (/[^a-zA-Z0-9]/.test(pwd)) variety++;
      if (pwd.length < 8) return 0; // 不满足最低要求恒为弱
      if (pwd.length >= 12 && variety >= 3) return 3;
      if (pwd.length >= 10 || variety >= 3) return 2;
      return 1;
    }
    function pbUpdatePwdStrength() {
      var pwd = document.getElementById('auth-reg-pwd').value || '';
      var row = document.getElementById('pwd-strength-row');
      var bars = [document.getElementById('pwd-bar-1'), document.getElementById('pwd-bar-2'), document.getElementById('pwd-bar-3')];
      var label = document.getElementById('pwd-strength-label');
      if (!row || !label) return;
      var score = pbPwdScore(pwd);
      if (score < 0) { row.style.display = 'none'; return; }
      row.style.display = 'flex';
      var lv = ['weak', 'mid', 'strong'][Math.max(0, score - 1)];
      var labels = { weak: ['ag_pwd_weak', '弱'], mid: ['ag_pwd_mid', '中'], strong: ['ag_pwd_strong', '强'] };
      var cls = { weak: 'lv-weak', mid: 'lv-mid', strong: 'lv-strong' };
      label.textContent = __t(labels[lv][0], labels[lv][1]);
      label.className = 'pwd-strength-label ' + cls[lv];
      for (var i = 0; i < 3; i++) {
        bars[i].className = 'pwd-strength-bar' + (i < score ? ' on-' + lv : '');
      }
    }

    // ★ 两次密码一致性实时校验（2026-9-12）：输入时即提示，无需等点击注册
    //   仅在红色错误区显示/清除「两次输入的密码不一致」，不覆盖账号格式等其他错误
    function pbCheckPwdMatch() {
      var errEl = document.getElementById('auth-reg-error');
      if (!errEl) return;
      var pwd = document.getElementById('auth-reg-pwd').value || '';
      var pwd2 = document.getElementById('auth-reg-pwd2').value || '';
      var tip = __t('ag_err_pwd_match', '两次输入的密码不一致');
      if (pwd && pwd2 && pwd2 !== pwd) {
        errEl.textContent = tip;
      } else if (errEl.textContent === tip) {
        errEl.textContent = '';
      }
    }

    // ---- 注册（勾选协议由服务器强制校验；缺勾前端直接提示） ----
    // ★ 账号 = 手机号（2026-9-13）：11位大陆手机号，与服务器端 isValidAccount 保持一致
    //   （Steam 客户端内自动 steam_auth 登录，不走本表单）
    function pbIsValidAccount(a) {
      return /^1[3-9]\d{9}$/.test(a);
    }

    function pbDoRegister() {
      var errEl = document.getElementById('auth-reg-error');
      var btn = document.getElementById('auth-reg-btn');
      errEl.textContent = '';
      var account = (document.getElementById('auth-reg-account').value || '').trim();
      var pwd = document.getElementById('auth-reg-pwd').value || '';
      var pwd2 = document.getElementById('auth-reg-pwd2').value || '';
      var captcha = (document.getElementById('auth-reg-captcha').value || '').trim();
      var agreeService = document.getElementById('auth-agree-service').checked;
      var agreePrivacy = document.getElementById('auth-agree-privacy').checked;
      if (!pbIsValidAccount(account)) { errEl.textContent = __t('ag_err_account', '请输入正确的11位手机号'); return; }
      if (pwd.length < 8 || pwd.length > 32 || !/[a-zA-Z]/.test(pwd) || !/\d/.test(pwd)) {
        errEl.textContent = __t('ag_err_pwd', '密码需 8-32 位且同时包含字母和数字'); return;
      }
      if (pwd !== pwd2) { errEl.textContent = __t('ag_err_pwd_match', '两次输入的密码不一致'); return; }
      if (!captcha) { errEl.textContent = __t('ag_err_captcha', '请输入图形验证码'); return; }
      // ★ PIPL 单独同意：漏勾任何一个协议都不允许注册
      if (!agreeService || !agreePrivacy) {
        errEl.textContent = __t('ag_err_agree', '请先阅读并勾选《用户服务协议》和《隐私政策》');
        return;
      }
      btn.disabled = true;
      authSend({ type: 'register', data: { account: account, password: pwd, captchaId: _captchaId, captchaCode: captcha, agreeService: agreeService, agreePrivacy: agreePrivacy }, _replyType: 'register_result' }, function (d) {
        btn.disabled = false;
        if (d && d.ok) {
          pbSaveAuth(d.token, d.userId, d.nickname, d.avatar, '');
          localStorage.setItem('pbp_auth_account', account);
          closeAuthWs();
          // 重载页面：以账号身份刷新全链路（主菜单/左上角/联机）
          try { sessionStorage.setItem('pbp_auth_toast', __t('ag_register_ok', '注册成功')); } catch (e) {}
          location.reload();
        } else if (d) {
          errEl.textContent = _authErrText(d);
          // 验证码用错后自动刷新
          if (d.code === 'captcha_wrong') pbRefreshCaptcha();
        } else {
          errEl.textContent = __t('ag_err_network', '网络异常，请重试');
        }
      });
    }

    // ---- 登录 ----
    function pbDoLogin() {
      var errEl = document.getElementById('auth-login-error');
      var btn = document.getElementById('auth-login-btn');
      errEl.textContent = '';
      var account = (document.getElementById('auth-login-account').value || '').trim();
      var pwd = document.getElementById('auth-login-pwd').value || '';
      if (!pbIsValidAccount(account)) { errEl.textContent = __t('ag_err_account', '请输入正确的11位手机号'); return; }
      if (!pwd) { errEl.textContent = __t('ag_err_pwd_empty', '请输入密码'); return; }
      btn.disabled = true;
      authSend({ type: 'account_login', data: { account: account, password: pwd }, _replyType: 'account_login_result' }, function (d) {
        btn.disabled = false;
        if (d && d.ok) {
          // 记住密码：勾选则本机保存（明文存 localStorage，仅建议个人设备使用），否则清除
          try {
            if (document.getElementById('auth-remember-pwd').checked) {
              localStorage.setItem('pbp_remember_account', account);
              localStorage.setItem('pbp_remember_pwd', pwd);
            } else {
              localStorage.removeItem('pbp_remember_account');
              localStorage.removeItem('pbp_remember_pwd');
            }
          } catch (e) {}
          pbSaveAuth(d.token, d.userId, d.nickname, d.avatar, '');
          closeAuthWs();
          try { sessionStorage.setItem('pbp_auth_toast', __t('ag_login_ok', '登录成功')); } catch (e) {}
          location.reload();
        } else if (d) {
          errEl.textContent = _authErrText(d);
        } else {
          errEl.textContent = __t('ag_err_network', '网络异常，请重试');
        }
      });
    }
    // ---- Steam 自动登录（2026-9-15）：Electron+Steam 客户端环境免注册登录 ----
    //   取 Session Ticket → 服务器 steam_auth（Steam Web API 验证）→ 复用账号登录成功流程。
    //   失败（非 Steam 环境/取票失败/验证拒绝）静默回退普通注册登录 UI，不阻塞页面。
    function pbSteamAutoLogin() {
      try {
        if (pbIsLoggedIn()) return;  // 已有登录态（含 Steam 登录后的 reload），不重复
        if (!window.pbSteam || !window.pbSteam.available()) return;
        window.pbSteam.ticket().then(function (ticketHex) {
          if (!ticketHex || pbIsLoggedIn()) return;
          authSend({ type: 'steam_auth', data: { ticket: ticketHex }, _replyType: 'steam_auth_result' }, function (d) {
            if (d && d.ok) {
              pbSaveAuth(d.token, d.userId, d.nickname, d.avatar, '');
              closeAuthWs();
              try { sessionStorage.setItem('pbp_auth_toast', __t('ag_login_ok', '登录成功')); } catch (e) {}
              location.reload();
            } else {
              console.log('[Steam] 自动登录失败:', d && (d.message || d.code));
            }
          });
        }).catch(function () {});
      } catch (e) {}
    }
    pbSteamAutoLogin();

    function _authErrText(d) {
      var map = {
        account_invalid: ['ag_err_account', '请输入正确的11位手机号'],
        pwd_weak: ['ag_err_pwd', '密码需 8-32 位且同时包含字母和数字'],
        captcha_wrong: ['ag_err_captcha_wrong', '图形验证码错误或已过期'],
        agree_required: ['ag_err_agree', '请先阅读并勾选《用户服务协议》和《隐私政策》'],
        account_exists: ['ag_err_account_exists', '该账号已注册'],
        no_user: ['ag_err_no_user', '该账号尚未注册'],
        pwd_wrong: ['ag_err_pwd_wrong', '密码错误'],
        locked: ['ag_err_locked', '失败次数过多，请稍后再试'],
      };
      var m = map[d.code];
      if (m) return __t(m[0], m[1]);
      return d.message || __t('ag_err_network', '网络异常，请重试');
    }

    // ---- 退出登录 ----
    function pbLogout() {
      var token = localStorage.getItem('pbp_auth_token') || '';
      pbClearAuth();
      updateAuthButton();
      pbRefreshGuestLock();  // 恢复游客锁定态
      pbResetGuestProfile(); // ★ 恢复游客初始状态：游客名/默认头像/隐藏经验条（2026-9-13）
      closeProfileModal();
      // 通知服务器吊销 token（若联机连接存活）
      try {
        if (typeof PBOnline !== 'undefined' && PBOnline.isConnected) {
          PBOnline.send({ type: 'logout', data: { token: token } });
          // ★ 退出登录后断开游戏连接（2026-9-13）：游客不保持 WS，右上角在线人数立即回落
          setTimeout(function () { try { PBOnline.disconnect(); } catch (e) {} }, 200); // 等 logout 消息发出后再断开
        } else {
          authSend({ type: 'logout', data: { token: token }, _replyType: 'logout_result' }, function () { closeAuthWs(); });
        }
      } catch (e) {}
      // ★ 复位右上角服务器状态显示（2026-9-13）：游客态无连接无轮询，状态点归灰、在线人数归 --
      try {
        var ind = document.getElementById('server-stats-indicator');
        if (ind) ind.className = 'server-stats-indicator';
        var stText = document.getElementById('server-stats-text');
        if (stText) { stText.dataset.onlineCount = ''; stText.textContent = '--'; }
        var ssMap = { 'ss-online': '--', 'ss-rooms': '--', 'ss-queue': '--', 'ss-mem': '--', 'ss-uptime': '--', 'ss-latency': '--' };
        for (var sid in ssMap) {
          var sEl = document.getElementById(sid);
          if (sEl) sEl.textContent = ssMap[sid];
        }
      } catch (e) {}
      // ★ 游客（未登录）= 单机状态：隐藏 ✉️ 并清空线上消息（2026-9-14）
      try { DevMail.refreshVisibility(); } catch (e) {}
      try {
        if (typeof PBOnline !== 'undefined' && PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast((typeof __t === 'function' ? __t('ag_logout_ok', '已退出登录') : '已退出登录'), 'info');
        }
      } catch (e) {}
    }

    // ---- 协议全文弹窗 ----
    // ★ 完整正式文本（用户服务协议 / 隐私政策），zh+en 双语
    var LEGAL_TEXTS = {
      zh: {
        service: {
          title: '用户服务协议',
          body: '欢迎使用《临阵伐谋》（以下简称"本游戏"）。在注册、登录及使用本游戏前，请您务必仔细阅读并充分理解本协议全部条款，特别是免除或限制责任的条款。您勾选"我已阅读并同意"即视为您已阅读并同意本协议的全部内容。\n\n一、账号注册与安全\n1. 本游戏以您提供的手机号（11 位，仅用于登录验证）作为登录标识。您应妥善保管账号与密码，并对该账号下的全部行为负责。\n2. 您应妥善保管账号密码，不得转让、出借或出售账号。因您主动泄露密码或遭受他人攻击导致的损失由您自行承担。\n3. 如发现账号被盗用，请及时联系我们处理。\n\n二、用户行为规范\n1. 您承诺不在游戏中发布、传播含有违法违规、侵犯他人合法权益内容的信息。\n2. 您不得利用游戏漏洞进行不正当获利，不得使用外挂、脚本等破坏游戏公平性的工具。\n3. 您不得冒充他人或官方人员。\n\n三、服务变更与中断\n1. 本游戏有权根据运营需要对服务内容进行调整、更新或终止，并将以弹窗、公告等合理方式通知。\n2. 因系统维护、网络故障等原因造成服务中断的，本游戏将尽力缩短中断时间。\n\n四、未成年人保护\n1. 未满14周岁的未成年人应在监护人陪同、同意下使用本游戏。\n2. 监护人应加强对未成年人使用网络行为的引导与监督。\n\n五、免责声明\n1. 因不可抗力（自然灾害、网络攻击、政策调整等）导致服务无法正常提供的，本游戏不承担责任。\n2. 您因违反本协议导致的一切后果由您自行承担。\n\n六、协议的变更与生效\n1. 本游戏有权适时修订本协议，修订后的协议将在游戏内公示。若您继续使用本游戏，视为接受修订后的协议。\n2. 本协议自您勾选同意之日起生效。\n\n七、联系我们\n如您对本协议或本游戏服务有任何疑问、意见或建议，可通过游戏内客服渠道与我们联系。',
        },
        privacy: {
          title: '隐私政策',
          body: '《临阵伐谋》开发者（以下简称"我们"）深知个人信息对您的重要性，我们将按照《中华人民共和国个人信息保护法》《中华人民共和国网络安全法》等法律法规，以最小必要原则处理您的个人信息。请您在使用本游戏前仔细阅读本政策。\n\n一、我们收集的信息\n1. 账号信息：注册时收集您的手机号（11 位），用于创建账号、登录验证与账号找回。手机号是您的唯一登录凭据，我们不会向其他玩家展示您的手机号，游戏内展示的名称为系统随机分配的编号昵称（如"游客（123456）"）。\n2. 密码信息：您设置的登录密码仅以加密哈希形式存储在服务器，我们无法看到您的密码明文。\n3. 游戏数据：您的游戏昵称、头像、战绩等信息，用于游戏内展示与匹配。战绩数据保存在您的浏览器本地。\n\n二、我们如何使用信息\n1. 账号名仅用于账号注册、登录身份验证与账号安全保护，不用于商业营销。\n2. 我们不会向任何第三方共享、出售您的账号名等个人信息（法律法规另有规定的除外）。\n3. 图形验证码用于防止机器脚本恶意注册，验证完成后立即失效。\n\n三、信息的存储\n1. 您的个人信息存储于中华人民共和国境内的服务器。\n2. 我们仅在为您提供服务所必需的期限内保留您的个人信息；您注销账号或申请删除后，我们将删除相关个人信息。\n3. 密码以单向加密哈希存储。\n\n四、您的权利\n按照相关法律法规，您有权：\n1. 查询、更正您的个人信息（可在游戏内修改昵称、头像）；\n2. 删除您的个人信息（可联系我们删除）；\n3. 注销账号（注销后我们将删除您的全部个人信息）；\n4. 撤回同意（撤回同意不影响撤回前基于同意已进行的处理）。\n\n五、未成年人保护\n1. 我们非常重视未成年人个人信息的保护。未满14周岁的未成年人应在监护人陪同下阅读本政策并取得监护人同意后使用本游戏。\n2. 如我们发现在未事先获得监护人同意的情况下收集了未成年人的个人信息，将设法尽快删除相关数据。\n\n六、信息安全\n1. 我们采取加密传输、访问控制等技术措施保护您的个人信息安全。\n2. 如不幸发生个人信息安全事件，我们将按照法律法规要求及时告知您并采取补救措施。\n\n七、政策的更新\n我们可能适时修订本政策，修订后将在游戏内公示。重大变更时我们将以显著方式提示您。\n\n八、联系我们\n如您对本政策有任何疑问、意见或建议，或需行使上述权利，可通过游戏内客服渠道与我们联系。我们将在15个工作日内回复。',
        },
      },
      en: {
        service: {
          title: 'Terms of Service',
          body: 'Welcome to "Frontline Stratagem" (the "Game"). Please read this agreement carefully before registering, logging in, or using the Game. By checking "I have read and agree", you are deemed to have read and agreed to all terms herein.\n\n1. Account Registration & Security\n1.1 Your mobile phone number (11 digits, used for login verification only) serves as your login identifier. Keep your password safe, and you are responsible for all activities under your account.\n1.2 Keep your password safe. Do not transfer, lend, or sell your account.\n1.3 Report account theft to us promptly.\n\n2. Code of Conduct\n2.1 Do not post or spread unlawful content or content infringing others\' rights.\n2.2 Do not exploit bugs for unfair gains, or use cheats/scripts.\n2.3 Do not impersonate others or official staff.\n\n3. Service Changes\n3.1 We may adjust, update, or terminate the service as needed for operation, with reasonable notice.\n\n4. Minors\n4.1 Minors under 14 should use the Game under guardian supervision and consent.\n\n5. Disclaimer\n5.1 We are not liable for service failures caused by force majeure (natural disasters, network attacks, policy changes, etc.).\n\n6. Changes to This Agreement\n6.1 We may revise this agreement from time to time; continued use constitutes acceptance.\n\n7. Contact Us\nFor questions, reach us via in-game customer service channels.',
        },
        privacy: {
          title: 'Privacy Policy',
          body: 'We value your personal information and process it under the Personal Information Protection Law (PIPL) and Cybersecurity Law of the PRC, following the principle of minimal necessity.\n\n1. Information We Collect\n1.1 Account info: your mobile phone number (11 digits), used for account creation, login verification, and account recovery. We never display your phone number to other players; the in-game name is a randomly assigned numeric nickname (e.g. "Guest (123456)").\n1.2 Password: stored only as a salted cryptographic hash on the server — we never see your plaintext password.\n1.3 Game data: nickname, avatar, and match records for in-game display and matchmaking. Match records are stored locally in your browser.\n\n2. How We Use Information\n2.1 Your account name is used solely for account registration, login verification, and account security — never for marketing.\n2.2 We do not share or sell your personal information to any third party (except as required by law).\n2.3 CAPTCHAs prevent automated sign-ups and expire immediately after use.\n\n3. Storage\n3.1 Your information is stored on servers within the PRC.\n3.2 We retain personal information only as long as necessary to provide the service; it is deleted upon account cancellation or deletion request.\n3.3 Passwords are hashed one-way.\n\n4. Your Rights\nYou have the right to: access and correct your information (edit nickname/avatar in-game); request deletion; cancel your account (all personal data deleted); and withdraw consent.\n\n5. Minors\n5.1 Minors under 14 should read this policy with a guardian and use the Game only with guardian consent.\n\n6. Security\nWe adopt encryption and access control to protect your information. In case of a security incident, we will notify you and take remedial measures as required by law.\n\n7. Updates\nWe may update this policy and will post it in the Game.\n\n8. Contact Us\nFor questions or to exercise your rights, reach us via in-game customer service channels. We will respond within 15 business days.',
        },
      },
    };
    var _legalCurrentType = '';
    function openLegalModal(type, fromRegister) {
      var lang = (typeof __gameCurrentLang !== 'undefined' && __gameCurrentLang === 'en') ? 'en' : 'zh';
      var doc = LEGAL_TEXTS[lang] && LEGAL_TEXTS[lang][type];
      if (!doc) return;
      _legalCurrentType = fromRegister ? type : '';
      var modal = document.getElementById('legal-modal');
      var title = document.getElementById('legal-title');
      var body = document.getElementById('legal-body');
      var agreeBtn = document.getElementById('legal-agree-btn');
      if (title) title.textContent = doc.title;
      if (body) body.innerHTML = doc.body.split('\n').map(function (line) {
        if (!line.trim()) return '';
        // 小节标题（一、/1. 开头）加粗着色
        if (/^([一二三四五六七八九十]+、|\d+\.\d*)/.test(line.trim()) && line.length < 30) {
          return '<h3>' + line + '</h3>';
        }
        return '<p>' + line + '</p>';
      }).join('');
      if (agreeBtn) {
        agreeBtn.style.display = fromRegister ? 'block' : 'none';
        agreeBtn.setAttribute('data-legal-type', type);
      }
      if (modal) modal.style.display = 'flex';
    }
    function closeLegalModal() {
      var modal = document.getElementById('legal-modal');
      if (modal) modal.style.display = 'none';
      _legalCurrentType = '';
    }
    // 协议弹窗点"我已阅读并同意" → 帮用户勾选对应复选框
    function agreeLegalAndCheck() {
      var btn = document.getElementById('legal-agree-btn');
      var type = btn ? btn.getAttribute('data-legal-type') : '';
      if (type === 'service') {
        var c = document.getElementById('auth-agree-service');
        if (c) c.checked = true;
      } else if (type === 'privacy') {
        var c2 = document.getElementById('auth-agree-privacy');
        if (c2) c2.checked = true;
      }
      closeLegalModal();
    }

    // 暴露给 HTML onclick
    window.openAuthModal = openAuthModal;
    window.closeAuthModal = closeAuthModal;
    window.switchAuthTab = switchAuthTab;
    window.pbRefreshCaptcha = pbRefreshCaptcha;
    window.pbDoRegister = pbDoRegister;
    window.pbDoLogin = pbDoLogin;
    window.pbLogout = pbLogout;
    window.openLegalModal = openLegalModal;
    window.closeLegalModal = closeLegalModal;
    window.agreeLegalAndCheck = agreeLegalAndCheck;
    window.pbIsLoggedIn = pbIsLoggedIn;
    window.updateAuthButton = updateAuthButton;
    window.onPpAuthClick = onPpAuthClick;
    window.onPpEditNickClick = onPpEditNickClick;
    window.pbUpdatePwdStrength = pbUpdatePwdStrength;
    window.pbTogglePwd = pbTogglePwd;

    // ★ 全局 toast 助手：showToast 定义在 online-client.js 的 IIFE 内，
    //   经 window.PBOnline.showToast 暴露；此处统一入口，避免静默失败
    function pbToast(msg, type) {
      if (window.PBOnline && typeof PBOnline.showToast === 'function') PBOnline.showToast(msg, type);
      else if (typeof showToast === 'function') showToast(msg, type);
    }

    // 页面加载后：刷新账号按钮显示 + 弹出注册/登录成功 toast（reload 后）
    (function __initAuthUi() {
      function _showAuthToast() {
        try {
          var t = sessionStorage.getItem('pbp_auth_toast');
          if (t) {
            sessionStorage.removeItem('pbp_auth_toast');
            setTimeout(function () { pbToast(t, 'success'); }, 600);
          }
        } catch (e) {}
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { updateAuthButton(); _showAuthToast(); });
      } else {
        updateAuthButton();
        _showAuthToast();
      }
    })();

    // ★ 2026-9-13 FIX：同浏览器多窗口共享 localStorage——其他窗口注册/登录会覆盖本窗口登录态。
    //   storage 事件只在「其他」窗口触发：检测到账号身份变化时提示刷新，避免新旧身份混搭显示
    (function __watchAuthStorage() {
      var lastToken = localStorage.getItem('pbp_auth_token');
      var lastUserId = localStorage.getItem('pbp_auth_user_id');
      function _checkAuthChanged() {
        var t = localStorage.getItem('pbp_auth_token');
        var u = localStorage.getItem('pbp_auth_user_id');
        if (t === lastToken && u === lastUserId) return;
        lastToken = t; lastUserId = u;
        try { pbToast(__t('ag_auth_changed', '检测到本浏览器其他窗口的登录状态已变更，请刷新页面'), 'info'); } catch (e) {}
        if (typeof updateAuthButton === 'function') updateAuthButton();
      }
      window.addEventListener('storage', function (e) {
        if (!e.key || e.key === 'pbp_auth_token' || e.key === 'pbp_auth_user_id') _checkAuthChanged();
      });
    })();

    // ★ 2026-9-17：主页头像/昵称统一入口——游客直接弹出登录/注册界面（用户明令），
    //   已登录保持原行为：头像→头像选择器，昵称→个人资料
    function onHomeBadgeClick(source) {
      if (pbIsLoggedIn()) {
        if (source === 'avatar') openAvatarPicker();
        else openProfileModal();
        return;
      }
      closeProfileModal();
      openAuthModal('login');
    }
    function openProfileModal() {
      const modal = document.getElementById('player-profile-modal');
      if (!modal) return;
      // ★ 2026-9-13 FIX：头像/昵称/ID 全部实时读取当前登录态（localStorage），
      //   修复同浏览器多窗口共享存储时「旧窗口昵称 + 新账号ID」的混搭错乱
      const avatarEl = document.getElementById('pp-avatar');
      if (avatarEl) {
        const liveAvatar = localStorage.getItem('pbp_avatar') || '';
        if (liveAvatar.startsWith('data:')) {
          avatarEl.src = liveAvatar;
        } else if (liveAvatar) {
          // 裸 emoji（服务器默认 🗡️ 等）：canvas 转 dataURL 渲染（skipSync 不回写服务器）
          setAvatarEmoji(liveAvatar, true);
          avatarEl.src = document.getElementById('profile-avatar-img')?.src || '';
        } else {
          avatarEl.src = document.getElementById('profile-avatar-img')?.src || '';
        }
      }
      // 昵称：登录态实时读账号昵称；游客统一显示「游客」
      const loggedIn = (typeof pbIsLoggedIn === 'function') && pbIsLoggedIn();
      let nick = loggedIn
        ? (localStorage.getItem('pbp_nickname') || (typeof __t === 'function' ? __t('nick_default', '玩家') : '玩家'))
        : ((typeof __t === 'function') ? __t('guest_name', '游客') : '游客');
      if (nick.startsWith('👑 ')) nick = nick.substring(2);
      const nickEl = document.getElementById('pp-nickname');
      if (nickEl) nickEl.textContent = nick;
      const idEl = document.getElementById('pp-id');
      // ★ 账号系统：登录态显示账号ID；未登录不分配ID（整行隐藏）
      if (idEl) {
        if (pbIsLoggedIn()) { idEl.textContent = getPlayerId(); idEl.style.display = ''; }
        else { idEl.textContent = ''; idEl.style.display = 'none'; }
      }
      // ★ 账号系统：刷新账号操作区（登录/注册 ↔ 退出登录）
      if (typeof updateAuthButton === 'function') updateAuthButton();
      // ★ 2026-9-13 FIX：打开面板时失效回放列表缓存，确保对局结束后的新回放能及时显示
      ppOnlineReplayCache = null;
      renderProfileStats();
      modal.style.display = 'flex';
    }
    function closeProfileModal() {
      const modal = document.getElementById('player-profile-modal');
      if (modal) modal.style.display = 'none';
      ppExpandedMode = '';  // 重开时默认收起所有模式记录
    }

    // 打开昵称编辑弹窗
    function openNicknameEditor() {
      // ★ 账号系统：未登录不允许改名（昵称绑定账号，登录后全端同步）
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        pbToast(__t('ag_need_login', '请先登录账号'), 'error');
        return;
      }
      const modal = document.getElementById('nickname-editor-modal');
      const input = document.getElementById('nickname-input');
      const currentNick = document.getElementById('profile-nickname');
      const idDisplay = document.getElementById('profile-player-id-display');
      if (modal && input && currentNick) {
        // ★ 去掉皇冠前缀，只显示纯昵称
        var text = currentNick.textContent;
        if (text.startsWith('👑 ')) text = text.substring(2);
        input.value = text;
        if (idDisplay) idDisplay.textContent = getPlayerId();
        if (typeof clearNicknameTip === 'function') clearNicknameTip();
        modal.style.display = 'flex';
        setTimeout(() => input.focus(), 100);
      }
    }

    // 关闭昵称编辑弹窗
    function closeNicknameEditor() {
      const modal = document.getElementById('nickname-editor-modal');
      if (modal) {
        modal.style.display = 'none';
      }
    }

    // ★ 游戏内文字提示（挂在昵称编辑弹窗内），不使用 alert 等浏览器原生弹窗
    var _nicknameTipTimer = null;
    function showNicknameTip(msg) {
      const tipEl = document.getElementById('nickname-tip');
      if (!tipEl) return;
      tipEl.textContent = msg;
      tipEl.style.display = 'block';
      if (_nicknameTipTimer) clearTimeout(_nicknameTipTimer);
      _nicknameTipTimer = setTimeout(function () {
        tipEl.style.display = 'none';
        _nicknameTipTimer = null;
      }, 4000);
    }
    function clearNicknameTip() {
      const tipEl = document.getElementById('nickname-tip');
      if (tipEl) { tipEl.style.display = 'none'; tipEl.textContent = ''; }
      if (_nicknameTipTimer) { clearTimeout(_nicknameTipTimer); _nicknameTipTimer = null; }
    }

    // 保存昵称
    function saveNickname() {
      const input = document.getElementById('nickname-input');
      const nicknameEl = document.getElementById('profile-nickname');
      if (input && nicknameEl) {
        let nick = input.value.trim();
        // ★ 禁止使用《》【】四种括号取名（避免与系统/AI 名称混淆、冒充官方或机器人）
        //   违规时自动剥离括号 + 游戏内红字提示，且**保持弹窗不关闭**
        //   （原来保存后立刻 closeNicknameEditor()，提示随弹窗一起消失 → 玩家根本看不到）
        if (/[《》【】]/.test(nick)) {
          nick = nick.replace(/[《》【】]/g, '').trim();
          input.value = nick;  // 同步回输入框，让玩家直观看到剥离后的结果
          showNicknameTip('限制《》【】符号，请重新输入');
          return;  // 不保存、不关闭，等玩家确认
        }
        if (!nick) {
          nick = '玩家';
        }
        if (nick.length > 12) {
          nick = nick.substring(0, 12);
        }
        var oldNick = localStorage.getItem('pbp_nickname') || '';
        localStorage.setItem('pbp_nickname', nick);
        // ★ 保留队长皇冠前缀
        var isLeader = typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isLeader;
        nicknameEl.textContent = (isLeader ? '👑 ' : '') + nick;

        // ★ 2026-9-16 FIX：改名会改变玩家卡宽度（名字长短→卡片自适应变宽/变窄），
        // 必须重新触发主页定位，否则组队按钮/邀请面板仍停在旧宽度位置，被名字卡遮挡
        if (typeof gameScaleHandler === 'function') gameScaleHandler();
        else if (typeof updateScale === 'function') updateScale();

        // ★ 2026-6-1 FIX: 改名时通知服务器，让服务器广播给好友/队友
        // 之前只写 localStorage，server 的 players Map 还是旧 nickname → 好友列表不更新
        if (nick !== oldNick && typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isOnline) {
          console.log('[昵称] 通知服务器改名:', oldNick, '→', nick);
          PBOnline.updateNickname(nick);
        }
        // ★ 账号系统：已登录时同步昵称到服务器账号（users.json）
        if (nick !== oldNick && typeof pbIsLoggedIn === 'function' && pbIsLoggedIn() && typeof PBOnline !== 'undefined' && PBOnline.updateProfile) {
          PBOnline.updateProfile(nick, undefined);
        }
      }
      closeNicknameEditor();
    }

    // 打开头像选择弹窗
    function openAvatarPicker() {
      const modal = document.getElementById('avatar-picker-modal');
      const grid = document.getElementById('avatar-grid');
      // ★ 账号系统：未登录不允许改头像（头像绑定账号，登录后全端同步）
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        pbToast(__t('ag_need_login', '请先登录账号'), 'error');
        return;
      }
      if (modal && grid) {
        // 填充头像网格
        grid.innerHTML = '';
        const currentAvatar = localStorage.getItem('pbp_avatar') || '';
        DEFAULT_AVATARS.forEach((emoji, index) => {
          const item = document.createElement('div');
          item.className = 'avatar-option';
          item.textContent = emoji;
          // 检查是否为当前选中的头像
          const canvas = document.createElement('canvas');
          canvas.width = 80;
          canvas.height = 80;
          const ctx = canvas.getContext('2d');
          ctx.font = '56px serif';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(emoji, 40, 42);
          if (canvas.toDataURL('image/png') === currentAvatar) {
            item.classList.add('selected');
            selectedAvatarIndex = index;
          }
          item.onclick = function() {
            // 移除其他选中状态
            grid.querySelectorAll('.avatar-option, .avatar-upload').forEach(el => el.classList.remove('selected'));
            item.classList.add('selected');
            selectedAvatarIndex = index;
            setAvatarEmoji(emoji);
          };
          grid.appendChild(item);
        });

        // 添加上传按钮（第21个grid item，与emoji头像同行排列）
        const uploadBtn = document.createElement('div');
        uploadBtn.className = 'avatar-upload';
        uploadBtn.innerHTML = '+';
        // 检查当前是否为上传的自定义头像
        if (currentAvatar && !DEFAULT_AVATARS.some(emoji => {
          const c = document.createElement('canvas');
          c.width = 80; c.height = 80;
          const cx = c.getContext('2d');
          cx.font = '56px serif'; cx.textAlign = 'center'; cx.textBaseline = 'middle';
          cx.fillText(emoji, 40, 42);
          return c.toDataURL('image/png') === currentAvatar;
        })) {
          uploadBtn.classList.add('selected');
          const preview = document.createElement('img');
          preview.src = currentAvatar;
          preview.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:50%;';
          uploadBtn.innerHTML = '';
          uploadBtn.appendChild(preview);
        }
        uploadBtn.onclick = function() {
          document.getElementById('avatar-file-input').click();
        };
        grid.appendChild(uploadBtn);

        modal.style.display = 'flex';
      }
    }

    // 处理头像上传
    // ===== 头像裁剪相关变量 =====
    let cropImageData = null;
    let cropNaturalWidth = 0;
    let cropNaturalHeight = 0;
    let cropOffsetX = 0;
    let cropOffsetY = 0;
    let cropScale = 1;
    let cropIsDragging = false;
    let cropDragStartX = 0;
    let cropDragStartY = 0;
    let cropDragOffsetStartX = 0;
    let cropDragOffsetStartY = 0;
    const CROP_FRAME_SIZE = 200;
    const CROP_VIEWPORT_SIZE = 280;

    // 选择文件后打开裁剪弹窗
    function handleAvatarFileSelect(event) {
      const file = event.target.files[0];
      if (!file) return;
      if (file.size > 2 * 1024 * 1024) {
        updateGameStatus(__t('st_picture_too_big'), 'st_picture_too_big');
        event.target.value = '';
        return;
      }
      const reader = new FileReader();
      reader.onload = function(e) {
        cropImageData = e.target.result;
        openAvatarCropModal();
      };
      reader.readAsDataURL(file);
      event.target.value = '';
    }

    // 打开裁剪弹窗
    function openAvatarCropModal() {
      const modal = document.getElementById('avatar-crop-modal');
      const img = document.getElementById('crop-image');
      const zoomSlider = document.getElementById('crop-zoom');
      if (!modal || !img || !cropImageData) return;

      img.src = cropImageData;
      img.onload = function() {
        cropNaturalWidth = img.naturalWidth;
        cropNaturalHeight = img.naturalHeight;
        // 最小缩放：图片长边缩到裁剪框大小（200px），图片可完全放入裁剪框内
        const minScale = CROP_FRAME_SIZE / Math.max(cropNaturalWidth, cropNaturalHeight);
        // 初始缩放：图片短边填满裁剪框（200px），确保裁剪框内有内容
        const fitFrameScale = CROP_FRAME_SIZE / Math.min(cropNaturalWidth, cropNaturalHeight);
        cropScale = fitFrameScale;
        cropOffsetX = 0;
        cropOffsetY = 0;
        if (zoomSlider) {
          zoomSlider.min = minScale;
          // 最多放大一倍：相对于初始缩放
          zoomSlider.max = fitFrameScale * 2;
          zoomSlider.value = cropScale;
        }
        updateCropImageTransform();
      };

      modal.style.display = 'flex';
      setupCropDragEvents();
    }

    // 关闭裁剪弹窗
    function closeAvatarCropModal() {
      const modal = document.getElementById('avatar-crop-modal');
      if (modal) modal.style.display = 'none';
      cropImageData = null;
      removeCropDragEvents();
    }

    // 缩放变化
    function onCropZoomChange(value) {
      cropScale = parseFloat(value);
      clampCropOffset();
      updateCropImageTransform();
    }

    // 更新图片变换
    function updateCropImageTransform() {
      const img = document.getElementById('crop-image');
      if (!img) return;
      const scaledW = cropNaturalWidth * cropScale;
      const scaledH = cropNaturalHeight * cropScale;
      const centerX = (CROP_VIEWPORT_SIZE - scaledW) / 2 + cropOffsetX;
      const centerY = (CROP_VIEWPORT_SIZE - scaledH) / 2 + cropOffsetY;
      img.style.left = centerX + 'px';
      img.style.top = centerY + 'px';
      img.style.width = scaledW + 'px';
      img.style.height = scaledH + 'px';
      img.style.transform = 'none';
    }

    // 限制偏移：图片必须覆盖裁剪框；当图片>=viewport时，viewport内无黑边
    function clampCropOffset() {
      const scaledW = cropNaturalWidth * cropScale;
      const scaledH = cropNaturalHeight * cropScale;
      const halfVp = CROP_VIEWPORT_SIZE / 2;
      // 图片左上角位置（相对于viewport左上角）
      const imgLeft = halfVp - scaledW / 2 + cropOffsetX;
      const imgTop = halfVp - scaledH / 2 + cropOffsetY;
      // 裁剪框边界（居中）
      const frameLeft = halfVp - CROP_FRAME_SIZE / 2;   // 40
      const frameRight = halfVp + CROP_FRAME_SIZE / 2;  // 240

      // 限制1：图片必须覆盖裁剪框
      let minLeft = frameRight - scaledW;  // 240 - scaledW
      let maxLeft = frameLeft;             // 40
      let minTop = frameRight - scaledH;   // 240 - scaledH
      let maxTop = frameLeft;              // 40

      // 限制2：当图片 >= viewport 时，viewport内不能出现黑边
      if (scaledW >= CROP_VIEWPORT_SIZE) {
        minLeft = Math.max(minLeft, CROP_VIEWPORT_SIZE - scaledW); // 280 - scaledW
        maxLeft = Math.min(maxLeft, 0);
      }
      if (scaledH >= CROP_VIEWPORT_SIZE) {
        minTop = Math.max(minTop, CROP_VIEWPORT_SIZE - scaledH);
        maxTop = Math.min(maxTop, 0);
      }

      // 当图片小于裁剪框时，min>max，此时强制居中
      const clampedLeft = minLeft <= maxLeft
        ? Math.max(minLeft, Math.min(maxLeft, imgLeft))
        : (minLeft + maxLeft) / 2;
      const clampedTop = minTop <= maxTop
        ? Math.max(minTop, Math.min(maxTop, imgTop))
        : (minTop + maxTop) / 2;

      // 反算 offset
      cropOffsetX = clampedLeft - halfVp + scaledW / 2;
      cropOffsetY = clampedTop - halfVp + scaledH / 2;
    }

    // 设置拖拽事件
    function setupCropDragEvents() {
      const viewport = document.getElementById('crop-viewport');
      if (!viewport) return;
      viewport.addEventListener('mousedown', onCropDragStart);
      viewport.addEventListener('touchstart', onCropDragStart, { passive: false });
      viewport.addEventListener('wheel', onCropWheel, { passive: false });
    }

    function removeCropDragEvents() {
      const viewport = document.getElementById('crop-viewport');
      if (!viewport) return;
      viewport.removeEventListener('mousedown', onCropDragStart);
      viewport.removeEventListener('touchstart', onCropDragStart);
      viewport.removeEventListener('wheel', onCropWheel);
      document.removeEventListener('mousemove', onCropDragMove);
      document.removeEventListener('touchmove', onCropDragMove);
      document.removeEventListener('mouseup', onCropDragEnd);
      document.removeEventListener('touchend', onCropDragEnd);
    }

    // 滚轮缩放
    function onCropWheel(e) {
      e.preventDefault();
      const zoomSlider = document.getElementById('crop-zoom');
      if (!zoomSlider) return;
      const min = parseFloat(zoomSlider.min);
      const max = parseFloat(zoomSlider.max);
      const delta = e.deltaY > 0 ? -0.05 : 0.05;
      cropScale = Math.max(min, Math.min(max, cropScale + delta));
      zoomSlider.value = cropScale;
      clampCropOffset();
      updateCropImageTransform();
    }

    function onCropDragStart(e) {
      e.preventDefault();
      cropIsDragging = true;
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      cropDragStartX = clientX;
      cropDragStartY = clientY;
      cropDragOffsetStartX = cropOffsetX;
      cropDragOffsetStartY = cropOffsetY;
      document.addEventListener('mousemove', onCropDragMove);
      document.addEventListener('touchmove', onCropDragMove, { passive: false });
      document.addEventListener('mouseup', onCropDragEnd);
      document.addEventListener('touchend', onCropDragEnd);
    }

    function onCropDragMove(e) {
      if (!cropIsDragging) return;
      e.preventDefault();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      cropOffsetX = cropDragOffsetStartX + (clientX - cropDragStartX);
      cropOffsetY = cropDragOffsetStartY + (clientY - cropDragStartY);
      clampCropOffset();
      updateCropImageTransform();
    }

    function onCropDragEnd() {
      cropIsDragging = false;
      document.removeEventListener('mousemove', onCropDragMove);
      document.removeEventListener('touchmove', onCropDragMove);
      document.removeEventListener('mouseup', onCropDragEnd);
      document.removeEventListener('touchend', onCropDragEnd);
    }

    // 应用裁剪
    function applyAvatarCrop() {
      if (!cropImageData || cropNaturalWidth === 0) return;
      const canvas = document.createElement('canvas');
      canvas.width = 80;
      canvas.height = 80;
      const ctx = canvas.getContext('2d');

      const img = document.getElementById('crop-image');
      if (!img) return;

      // 计算图片在viewport中的位置
      const scaledW = cropNaturalWidth * cropScale;
      const scaledH = cropNaturalHeight * cropScale;
      const imgLeft = (CROP_VIEWPORT_SIZE - scaledW) / 2 + cropOffsetX;
      const imgTop = (CROP_VIEWPORT_SIZE - scaledH) / 2 + cropOffsetY;

      // 裁剪框在viewport中的位置（居中）
      const frameLeft = (CROP_VIEWPORT_SIZE - CROP_FRAME_SIZE) / 2;
      const frameTop = (CROP_VIEWPORT_SIZE - CROP_FRAME_SIZE) / 2;

      // 计算原图上的裁剪区域
      const sourceX = (frameLeft - imgLeft) / cropScale;
      const sourceY = (frameTop - imgTop) / cropScale;
      const sourceSize = CROP_FRAME_SIZE / cropScale;

      ctx.drawImage(img, sourceX, sourceY, sourceSize, sourceSize, 0, 0, 80, 80);
      const dataUrl = canvas.toDataURL('image/png');

      // 保存并更新显示
      localStorage.setItem('pbp_avatar', dataUrl);
      pbSyncAvatarToAccount(dataUrl);
      const avatarImg = document.getElementById('profile-avatar-img');
      if (avatarImg) avatarImg.src = dataUrl;

      // 更新头像选择弹窗中的上传按钮
      const grid = document.getElementById('avatar-grid');
      if (grid) {
        grid.querySelectorAll('.avatar-option, .avatar-upload').forEach(el => el.classList.remove('selected'));
        const uploadEl = grid.querySelector('.avatar-upload');
        if (uploadEl) {
          uploadEl.classList.add('selected');
          uploadEl.innerHTML = '';
          const preview = document.createElement('img');
          preview.src = dataUrl;
          preview.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:50%;';
          uploadEl.appendChild(preview);
        }
      }

      closeAvatarCropModal();
    }

    // 关闭头像选择弹窗
    function closeAvatarPicker() {
      const modal = document.getElementById('avatar-picker-modal');
      if (modal) {
        modal.style.display = 'none';
      }
    }

    // 页面加载时初始化人物信息
    document.addEventListener('DOMContentLoaded', function() {
      initPlayerProfile();
    });

    // ★ 首次用户交互时启动主页 BGM（浏览器禁止自动播放，需用户点击后才能播放）
    // 仅在主菜单处于可见状态（bgmMenuActive=true）时触发；
    // hideMainMenu 会同步把 bgmMenuActive 置 false，因此点击"进入游戏"按钮时此处会跳过，
    // 避免 BGM 在游戏开始后误启动
    function tryStartMenuBGM() {
      if (typeof playBGM !== 'function') return;
      if (typeof bgmPlaying !== 'undefined' && bgmPlaying) return;
      if (typeof bgmMenuActive !== 'undefined' && !bgmMenuActive) return;
      if (typeof GameState !== 'undefined' && GameState && GameState.gamePhase === 'playing') return;
      // 首次交互启动 BGM 同样延迟 3 秒，与回到主页行为保持一致
      if (typeof scheduleMenuBGM === 'function') scheduleMenuBGM();
    }
    document.addEventListener('click', tryStartMenuBGM, { once: false });
    document.addEventListener('keydown', tryStartMenuBGM, { once: false });
    document.addEventListener('touchstart', tryStartMenuBGM, { once: false });
    // 页面加载后立即尝试一次（若浏览器允许自动播放则直接开始）
    setTimeout(tryStartMenuBGM, 500);

    // ============================================================================
    // 【功能牌教程系统】
    // ============================================================================
    
    const FunctionalCardZones = [
      { name: __t('fcz_hand'), selector: '#player-hand', desc: __t('fcz_hand_desc'), color: '#fbbf24' },
      { name: __t('fcz_deck'), selector: '#player-deck', desc: __t('fcz_deck_desc'), color: '#fb923c' },
      { name: __t('fcz_revealed'), selector: '#player-revealed-cards', desc: __t('fcz_revealed_desc'), color: '#fbbf24' },
      { name: __t('fcz_dark'), selector: '#player-dark-cards', desc: __t('fcz_dark_desc'), color: '#fb923c' }
    ];
    
    let isFunctionalCardTutorial = false;
    let functionalCardTutorialStep = 0;
    let fcTutLastHighlightIndex = -2;
    let fcTutMouseMoveHandler = null;
    
    function startFunctionalCardTutorial() {
      currentTutorialType = 'functionalCard';
      const submenu = document.getElementById('tutorial-submenu');
      if (submenu) submenu.classList.remove('open');
      hideMainMenu();
      setMoralePanelVisible(false);  // ★ 2026-9-25 教程模式禁用士气值
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();
      
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();
      
      // 给暗牌和明牌区放几张示例牌，让区域可见
      ensureZoneVisible('#player-dark-cards', 'dark');
      ensureZoneVisible('#player-revealed-cards', 'revealed');
      
      isFunctionalCardTutorial = true;
      isTutorialMode = true;
      GameState.callCardEnabled = false;
      functionalCardTutorialStep = 0;
      fcTutLastHighlightIndex = -2;
      
      const mask = document.createElement('div');
      mask.className = 'tutorial-mask';
      mask.id = 'tutorial-mask';
      document.querySelector('.game-container').appendChild(mask);
      document.getElementById('tutorial-overlay').classList.add('tutorial-active');
      updateTutorialButtons();
      
      document.addEventListener('click', handleFunctionalCardTutorialClick);
      document.addEventListener('wheel', handleFunctionalCardTutorialWheel, { passive: false });
      document.addEventListener('contextmenu', handleFunctionalCardTutorialRightClick);
      document.addEventListener('mousemove', handleFunctionalCardMouseMove);
      
      // 延迟一帧确保 DOM 布局和 transform 完全生效
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          showFCIntroStep();
        });
      });
    }
    
    function ensureZoneVisible(selector, type) {
      const container = document.querySelector(selector);
      if (!container) return;
      // 先清理旧的占位牌
      container.querySelectorAll('[data-fc-placeholder]').forEach(el => el.remove());
      if (container.children.length > 0 && container.offsetWidth > 30) return;
      // 如果区域为空或太小，创建占位卡牌
      const slots = type === 'dark' ? 3 : 2;
      for (let i = 0; i < slots; i++) {
        const card = document.createElement('div');
        card.dataset.fcPlaceholder = 'true';
        card.style.cssText = 'width: 64px; height: 96px; border-radius: 8px; background: linear-gradient(135deg, #1e293b, #334155); border: 2px solid #475569; flex-shrink: 0;';
        if (type === 'dark') {
          card.style.border = '2px solid #6b21a8';
          card.style.background = 'linear-gradient(135deg, #3b0764, #581c87)';
        } else {
          card.style.border = '2px solid #be185d';
          card.style.background = 'linear-gradient(135deg, #831843, #9d174d)';
        }
        container.appendChild(card);
      }
    }
    
    function removeFunctionalCardListeners() {
      hideFCTutHoverTip();
    }
    
    function handleFunctionalCardMouseMove(e) {
      if (!isFunctionalCardTutorial || (functionalCardTutorialStep !== 1 && functionalCardTutorialStep !== 3)) return;
      
      let currentZone = -1;
      for (let i = 0; i < FunctionalCardZones.length; i++) {
        if (e.target.closest(FunctionalCardZones[i].selector)) {
          currentZone = i;
          break;
        }
      }
      
      if (currentZone !== fcTutLastHighlightIndex) {
        if (currentZone >= 0) {
          highlightFCTutItem(currentZone);
        } else {
          highlightFCTutItem(-1);
        }
      }
    }
    
    function showFCTutHoverTip(e, tip) {
      hideFCTutHoverTip();
      const tipEl = document.createElement('div');
      tipEl.id = 'fc-tut-hover-tip';
      tipEl.className = 'tutorial-hover-tip';
      tipEl.textContent = tip;
      tipEl.style.cssText = 'position:fixed;left:' + e.clientX + 'px;top:' + (e.clientY - 15) + 'px;transform:translate(-50%,-100%);background:rgba(26,15,51,0.95);border:2px solid rgba(251,191,36,0.8);border-radius:8px;padding:12px 16px;color:#fff;font-size:14px;z-index:10002;pointer-events:none;box-shadow:0 8px 25px rgba(0,0,0,0.5),0 0 20px rgba(251,191,36,0.3);';
      document.body.appendChild(tipEl);
    }
    
    function hideFCTutHoverTip() {
      const tipEl = document.getElementById('fc-tut-hover-tip');
      if (tipEl) tipEl.remove();
    }
    
    // ==================== 步骤0：展示 - 认识功能牌 ====================
    
    function showFCIntroStep() {
      clearTutorialHighlights();
      removeFunctionalCardListeners();
      
      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';
        
        const screenWidth = 1920;
        const screenHeight = 1080;
        const pad = 10;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
        
        FunctionalCardZones.forEach(zone => {
          const el = document.querySelector(zone.selector);
          if (!el) return;
          const rect = tutRect(el);
          if (rect.width < 10 || rect.height < 10) return;
          const x = rect.left - pad, y = rect.top - pad;
          const w = rect.width + pad * 2, h = rect.height + pad * 2;
          pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
          const hole = document.createElement('div');
          hole.className = 'tutorial-hole-highlight';
          hole.style.cssText = `top:${y}px;left:${x}px;width:${w}px;height:${h}px;pointer-events:none;`;
          mask.appendChild(hole);
        });
        
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);
        
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 1/2</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('fc_intro_title')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px;">${__t('fc_intro_desc')}</p>
        `;
        // 面板居中在牌型栏最右侧到路牌区最左侧之间
        const rankPanel = document.querySelector('.rank-panel');
        const playerRoadArea = document.querySelector('#player-road-area');
        if (rankPanel && playerRoadArea) {
          const rankRight = tutRect(rankPanel).right;
          const roadLeft = tutRect(playerRoadArea).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);
        
        // 绑定"重新体验"和"结束教程"按钮
        const replayBtn = document.getElementById('fc-replay-btn');
        const exitBtn = document.getElementById('fc-exit-tutorial-btn');
        if (replayBtn) {
          replayBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            // 隐藏结算按钮
            const btns = document.getElementById('fc-step2-end-buttons');
            if (btns) btns.style.display = 'none';
            // 重新开始交互步骤2
            showFCInteractiveStep2();
          });
        }
        if (exitBtn) {
          exitBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            // 结束牌型教程，回到主界面
            if (typeof exitFunctionalCardTutorial === 'function') {
              exitFunctionalCardTutorial();
            }
          });
        }
      
      tutorialReady = true;
    });

  }
  
  // 交互步骤2：高亮某条规则（全局定义，供 checkRoadResult / updateCardTypeDisplay / handleStopPlaying 调用）
  function fcStep2HighlightRule(ruleIndex) {
    // 交互步骤2包含展示阶段(step=2)和实战阶段(step=3)
    if (!isFunctionalCardTutorial || (functionalCardTutorialStep !== 2 && functionalCardTutorialStep !== 3)) return;
    const el = document.getElementById('fc-rule-' + ruleIndex);
    if (!el) return;
    // 如果已经高亮，先移除再重新触发（确保动画重新播放）
    el.classList.remove('fc-rule-highlight');
    // 强制重排，确保移除后立即添加能触发动画
    void el.offsetWidth;
    el.classList.add('fc-rule-highlight');
    // 清除该元素上已有的定时器
    if (el._fcHighlightTimer) {
      clearTimeout(el._fcHighlightTimer);
    }
    el._fcHighlightTimer = setTimeout(() => {
      el.classList.remove('fc-rule-highlight');
      el._fcHighlightTimer = null;
    }, 2000);
  }
  
  // ==================== 步骤1：交互 - 了解功能牌规则 ====================
    
    function showFunctionalCardStep1() {
      clearTutorialHighlights();
      removeFunctionalCardListeners();
      document.querySelectorAll('[data-fc-placeholder]').forEach(el => el.remove());
      
      // 重置并发牌
      resetGameState();
      createCards();
      renderDeckCardBacks();
      
      requestAnimationFrame(async () => {
        await dealInitialCards();
        
        if (GameState.isGameInterrupted) return;
        updateUI();
        
        GameState.opponentStoppedPlaying = true;
        GameState.gamePhase = 'playing';
        GameState.currentTurn = 'player';
        GameState.cardPlayedThisTurn = false;
        isTutorialMode = false;
        updateUI();
        
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        
        const screenWidth = 1920;
        const screenHeight = 1080;
        const pad = 10;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
        
        // 为四个区域分别创建高亮
        FunctionalCardZones.forEach(zone => {
          const el = document.querySelector(zone.selector);
          if (!el) return;
          const rect = tutRect(el);
          if (rect.width < 10 || rect.height < 10) return;
          
          const x = rect.left - pad;
          const y = rect.top - pad;
          const w = rect.width + pad * 2;
          const h = rect.height + pad * 2;
          
          pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
          
          const hole = document.createElement('div');
          hole.className = 'fc-tut-hole-static';
          hole.style.cssText = `position:absolute;top:${y}px;left:${x}px;width:${w}px;height:${h}px;pointer-events:none;`;
          hole.dataset.zone = zone.name;
          mask.appendChild(hole);
        });
        
        // SVG 遮罩，pointer-events 穿透
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.position = 'absolute';
        svg.style.top = '0';
        svg.style.left = '0';
        svg.style.pointerEvents = 'none';
        
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathD);
        path.setAttribute('fill-rule', 'evenodd');
        path.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        path.style.pointerEvents = 'none';
        svg.appendChild(path);
        mask.appendChild(svg);
        
        // 创建面板，含四项描述
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        
        let itemsHTML = '';
        FunctionalCardZones.forEach((zone, i) => {
          itemsHTML += `
            <div class="fc-tut-item" data-zone-index="${i}" style="
              padding: 8px 12px;
              margin-bottom: 6px;
              border-radius: 8px;
              border-left: 3px solid ${zone.color};
              background: rgba(255,255,255,0.03);
              transition: all 0.3s ease;
              cursor: default;
            ">
              <div style="font-weight: 600; color: ${zone.color}; font-size: 0.9rem; margin-bottom: 2px;">${i + 1}. ${zone.name}</div>
              <div class="fc-tut-desc" style="font-size: 0.8rem; color: #94a3b8; line-height: 1.5; white-space: pre-line;">${zone.desc}</div>
            </div>
          `;
        });
        
        panel.innerHTML = `
          <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 1/2</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('fc_rule_title')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px;">${__t('fc_rule_desc')}</p>
          <div id="fc-tut-items">${itemsHTML}</div>
          <div id="fc-tut-step1-buttons" style="display:none; justify-content: center; gap: 12px; margin-top: 14px;">
            <button id="fc-tut-restart-btn-1" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: #1e293b; border: none; padding: 8px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer;">${__t('tut_restart_btn')}</button>
            <button id="fc-tut-finish-btn-1" style="background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; border: none; padding: 8px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer;">${__t('tutx_end_exp')}</button>
          </div>
        `;
        
        panel.style.left = '15%';
        panel.style.top = '50%';
        panel.style.transform = 'translateY(-50%)';
        mask.appendChild(panel);

        // 按钮事件绑定
        document.getElementById('fc-tut-restart-btn-1').addEventListener('click', function(e) {
          e.stopPropagation();
          e.preventDefault();
          stopEndGameMusic();
          if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
          if (typeof restoreTechNormal === 'function') restoreTechNormal();
          if (typeof restoreForestNormal === 'function') restoreForestNormal();
          functionalCardTutorialStep = 1;
          isFunctionalCardTutorial = true;
          interruptGame();
          clearAllCardSlots();
          resetGameState();
          updateUI();
          setTimeout(() => showFunctionalCardStep1(), 350);
        });
        document.getElementById('fc-tut-finish-btn-1').addEventListener('click', function(e) {
          e.stopPropagation();
          e.preventDefault();
          stopEndGameMusic();
          if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
          if (typeof restoreTechNormal === 'function') restoreTechNormal();
          if (typeof restoreForestNormal === 'function') restoreForestNormal();
          functionalCardTutorialStep = 2;
          isTutorialMode = true;
          setTimeout(() => showFCStep2Transition(), 350);
        });

        fcTutLastHighlightIndex = -2;
        tutorialReady = true;
      });
    }
    
    function highlightFCTutItem(activeIndex) {
      if (fcTutLastHighlightIndex === activeIndex) return;
      fcTutLastHighlightIndex = activeIndex;
      const items = document.querySelectorAll('#fc-tut-items .fc-tut-item, #fc-tut-items-2 .fc-tut-item');
      items.forEach((item, i) => {
        const zone = FunctionalCardZones[i];
        if (i === activeIndex) {
          item.style.background = zone.color + '22';
          item.style.borderLeftColor = zone.color;
          item.style.transform = 'translateX(4px)';
          item.querySelector('.fc-tut-desc').style.color = '#e2e8f0';
        } else {
          item.style.background = 'rgba(255,255,255,0.03)';
          item.style.transform = 'translateX(0)';
          item.querySelector('.fc-tut-desc').style.color = '#94a3b8';
        }
      });
    }
    
    function highlightFCTutHole(activeIndex) {
      const holes = document.querySelectorAll('.fc-tut-hole-static[data-zone]');
      holes.forEach(hole => {
        const zoneName = hole.dataset.zone;
        const idx = FunctionalCardZones.findIndex(z => z.name === zoneName);
        if (idx === activeIndex) {
          hole.style.boxShadow = `0 0 30px ${FunctionalCardZones[idx].color}88, inset 0 0 20px ${FunctionalCardZones[idx].color}22`;
          hole.style.borderColor = FunctionalCardZones[idx].color;
        } else {
          hole.style.boxShadow = '';
          hole.style.borderColor = '';
        }
      });
    }

    // 交互步骤1：点击卡牌后高亮路牌区（追加SVG挖孔 + 呼吸闪烁边框）
    function fcTutAddRoadHighlight() {
      if (!isFunctionalCardTutorial || functionalCardTutorialStep !== 1) return;
      requestAnimationFrame(() => {
        const mask = document.getElementById('tutorial-mask');
        if (!mask) return;
        if (document.getElementById('fc-tut-road-hole')) return;
        const pad = 10;
        const playerRoad = document.querySelector('#player-road-area');
        if (!playerRoad) return;
        const r = tutRect(playerRoad);
        if (r.width < 10 || r.height < 10) return;
        const x = r.left - pad, y = r.top - pad;
        const w = r.width + pad * 2, h = r.height + pad * 2;
        // 追加路牌区到SVG路径（不重建4个功能牌区域的路径，避免闪烁）
        const svgPath = mask.querySelector('svg path');
        if (svgPath) {
          const currentD = svgPath.getAttribute('d');
          svgPath.setAttribute('d', currentD + ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`);
        }
        // 添加呼吸闪烁边框
        const hole = document.createElement('div');
        hole.id = 'fc-tut-road-hole';
        hole.className = 'fc-tut-hole-static';
        hole.style.cssText = `position:absolute;top:${y}px;left:${x}px;width:${w}px;height:${h}px;pointer-events:none;`;
        mask.appendChild(hole);
      });
    }
    
    // 交互步骤1：检查是否无法出牌
    function fcTutCheckCanPlay() {
      if (!isFunctionalCardTutorial || functionalCardTutorialStep !== 1) return;
      setTimeout(() => {
        if (!isFunctionalCardTutorial || functionalCardTutorialStep !== 1) return;
        if (GameState.gamePhase === 'ended') return;
        const canPlay = canPlayerPlay();
        if (!canPlay) {
          fcTutShowStep1Buttons();
        }
      }, 600);
    }

    // 交互步骤1：显示底部按钮
    function fcTutShowStep1Buttons() {
      const btnContainer = document.getElementById('fc-tut-step1-buttons');
      if (btnContainer) btnContainer.style.display = 'flex';
    }
    
    // ==================== 步骤2：展示 - 进入实战 ====================

    function showFCStep2Transition() {
      clearTutorialHighlights();
      removeFunctionalCardListeners();
      isTutorialMode = true;
      // ★ 2026-9-23 FIX：显式锁定步骤状态（防外部竞态把 step 拉回 1 导致过渡面板后
      //   进入交互步骤1 而非交互步骤2——用户实测），面板点击直接推进到交互步骤2
      functionalCardTutorialStep = 2;
      
      // 重置界面
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();
      
      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        
        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
        
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);
        
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 2/2</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('fc_step2_title')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px;">${__t('fc_step2_desc')}</p>
        `;
        // 面板居中在牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);
        
        // ★ 2026-9-23 FIX：过渡面板自身可点击推进（点面板直接进交互步骤2 实战），
        //   不再依赖全局 handleClick 的状态判定——消除竞态导致的错误跳转
        panel.style.pointerEvents = 'auto';
        panel.style.cursor = 'pointer';
        panel.addEventListener('click', function(e) {
          e.stopPropagation();
          functionalCardTutorialStep = 3;
          showFCInteractiveStep2();
        });
        
        tutorialReady = true;
      });
    }

    // ==================== 交互步骤2：实战演练 ====================

    function showFCInteractiveStep2() {
      clearTutorialHighlights();
      removeFunctionalCardListeners();
      isTutorialMode = false;
      // ★ 2026-9-23 FIX：显式锁定实战步骤状态（防竞态回退到交互步骤1）
      functionalCardTutorialStep = 3;
      
      // 恢复终止出牌按钮显示（教程开始时 updateTutorialButtons 会隐藏它们）
      if (GameElements.ui.stopBtn) GameElements.ui.stopBtn.style.display = '';

      // ★ 2026-10-04：旧 AI 战术/战略开关已移除（决策走 PBAIBridge 引擎），无需教程临时降档

      // 按游戏流程发牌，然后正常对局（禁用匹配功能）
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      GameState.fcPrevPlayerCardType = undefined;
      updateUI();
      
      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      renderDeckCardBacks();
      if (GameElements.player.deck) GameElements.player.deck.style.backgroundColor = '';
      if (GameElements.opponent.deck) GameElements.opponent.deck.style.backgroundColor = '';
      
      createCards();
      updatePlayerDeck();
      updateOpponentDeck();
      
      GameState.gamePhase = 'playing';
      GameState.isGameInterrupted = false;
      // 随机先手（resetGameState已设置，保留）
      GameState.cardPlayedThisTurn = false;
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = false;
      GameState.turnHistory = [];
      GameState.disableMatchCheck = true;
      
      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_deal'), 'st_deal');
      GameState.isDealingCards = true;
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = true;
      GameElements.ui.startBtn.style.opacity = '0.5';
      GameElements.ui.startBtn.style.cursor = 'not-allowed';
      
      setTimeout(async () => {
        try {
          await dealInitialCards();
          if (GameState.isGameInterrupted) return;
          updateUI();
          GameState.isDealingCards = false;
          GameElements.ui.stopBtn.disabled = false;
          GameElements.ui.stopBtn.style.opacity = '1';
          GameElements.ui.stopBtn.style.cursor = 'pointer';
          updateGameStatus(__t('st_game_start_play'), 'st_game_start_play');
        } catch (e) {
          console.error('交互步骤2发牌失败:', e);
          GameState.isDealingCards = false;
        }
      }, 300);
      
      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        
        const screenWidth = 1920;
        const screenHeight = 1080;
        const pad = 0;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
        
        // 对整个游戏容器打一个大孔（干净整洁，不逐个元素挖孔）
        // game-ctrl-panel 在 game-container 内部，会随大孔一起可见，无需额外挖孔
        const gameContainer = document.querySelector('.game-container');
        if (gameContainer) {
          const r = tutRect(gameContainer);
          pathD += ` M${r.left - pad} ${r.top - pad} L${r.right + pad} ${r.top - pad} L${r.right + pad} ${r.bottom + pad} L${r.left - pad} ${r.bottom + pad} Z`;
        }
        
        // 重新覆盖需要遮罩的元素（能量槽、得分栏、中立区）
        const coverSelectors = [
          '#card-counter-panel',
          '#opponent-score-bar',
          '#player-score-bar',
          '#player-neutral-area',
          '#opponent-neutral-area'
        ];
        coverSelectors.forEach(sel => {
          const el = document.querySelector(sel);
          if (el) {
            const r = tutRect(el);
            if (r.width > 10 && r.height > 10) {
              pathD += ` M${r.left - pad} ${r.top - pad} L${r.right + pad} ${r.top - pad} L${r.right + pad} ${r.bottom + pad} L${r.left - pad} ${r.bottom + pad} Z`;
            }
          }
        });
        
        // SVG 遮罩穿透
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);
        
        // 面板
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.style.maxWidth = '260px';
        
        panel.innerHTML = `
          <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 2/2</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 8px; font-size: 0.95rem;">${__t('fc_field_title')}</h3>
          <div id="fc-step2-rules" style="font-size: 0.85rem; color: #94a3b8;">
            <div id="fc-rule-1" class="fc-rule-item">${__t('fc_rule1')}</div>
            <div id="fc-rule-2" class="fc-rule-item" style="margin-top: 8px;">${__t('fc_rule2')}</div>
            <div id="fc-rule-3" class="fc-rule-item" style="margin-top: 8px;">${__t('fc_rule3')}</div>
          </div>
          <div id="fc-step2-end-buttons" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); gap: 8px; flex-direction: row;">
            <button id="fc-replay-btn" style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tut_restart_btn')}</button>
            <button id="fc-exit-tutorial-btn" style="flex: 1; padding: 7px 0; border: 1px solid #94a3b8; border-radius: 6px; background: transparent; color: #94a3b8; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_learn_next')}</button>
          </div>
        `;
        
        // 面板居中在牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);
        
        // 绑定"重新体验"和"结束教程"按钮
        const replayBtn = document.getElementById('fc-replay-btn');
        const exitBtn = document.getElementById('fc-exit-tutorial-btn');
        if (replayBtn) {
          replayBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            stopCrisisMusic();
            stopEndGameMusic();
            const btns = document.getElementById('fc-step2-end-buttons');
            if (btns) btns.style.display = 'none';
            requestAnimationFrame(() => showFCInteractiveStep2());
          });
        }
        if (exitBtn) {
          exitBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            stopCrisisMusic();
            stopEndGameMusic();
            // ★ 2026-9-23："结束教程"改为"学习新教程"——完整清理功能牌教程后进入匹配操作教程
            if (typeof exitFunctionalCardTutorial === 'function') {
              exitFunctionalCardTutorial();
            }
            if (typeof startMatchTutorial === 'function') {
              startMatchTutorial();
            }
          });
        }
        
        tutorialReady = true;
      });
    }
    
    function handleFunctionalCardTutorialClick(e) {
      if (!isFunctionalCardTutorial || !tutorialReady) return;
      if (e.target.closest('.tutorial-panel')) return;
      if (e.target.closest('.tutorial-hole-highlight')) return;
      if (e.target.closest('button')) return;
      
      // 步骤0（展示）：点击任意处前进到交互步骤1
      if (functionalCardTutorialStep === 0) {
        functionalCardTutorialStep = 1;
        showFunctionalCardStep1();
        return;
      }
      
      // 步骤2（展示）：点击任意处前进到交互步骤2
      if (functionalCardTutorialStep === 2) {
        functionalCardTutorialStep = 3;
        requestAnimationFrame(() => showFCInteractiveStep2());
        return;
      }

      // 步骤1和步骤3（交互）：点击忽略，让游戏交互正常进行
    }
    
    function handleFunctionalCardTutorialWheel(e) {
      if (!isFunctionalCardTutorial) return;
      if (!tutorialReady) return;
      if (tutorialDialogActive) return;
      e.preventDefault();
      const goingBack = e.deltaY < 0;
      
      if (goingBack && functionalCardTutorialStep > 0) {
        showFCTutGoBackDialog();
      }
    }
    
    function showFCTutGoBackDialog() {
      tutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_goback_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_goback_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" id="fc-tut-goback-confirm">${__t('tutx_confirm')}</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" id="fc-tut-goback-cancel">${__t('tutx_cancel')}</button>
        </div>
      `;
      document.body.appendChild(dialog);
      document.getElementById('fc-tut-goback-confirm').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        tutorialDialogActive = false;
        if (functionalCardTutorialStep === 1) {
          functionalCardTutorialStep = 0;
          interruptGame();
          clearAllCardSlots();
          resetGameState();
          updateUI();
          ensureZoneVisible('#player-dark-cards', 'dark');
          ensureZoneVisible('#player-revealed-cards', 'revealed');
          showFCIntroStep();
        } else if (functionalCardTutorialStep === 2) {
          functionalCardTutorialStep = 1;
          isTutorialMode = false;
          showFunctionalCardStep1();
        } else if (functionalCardTutorialStep === 3) {
          functionalCardTutorialStep = 2;
          isTutorialMode = true;
          showFCStep2Transition();
        }
      });
      document.getElementById('fc-tut-goback-cancel').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        setTimeout(() => { tutorialDialogActive = false; }, 100);
      });
    }
    
    function handleFunctionalCardTutorialRightClick(e) {
      if (!isFunctionalCardTutorial) return;
      if (!tutorialReady) return;
      if (tutorialDialogActive) return;
      e.preventDefault();
      showFCTutExitDialog();
    }
    
    function showFCTutExitDialog() {
      tutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_exit_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_exit_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" id="fc-tut-exit-confirm">${__t('tutx_confirm')}</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" id="fc-tut-exit-cancel">${__t('tutx_cancel')}</button>
        </div>
      `;
      document.body.appendChild(dialog);
      document.getElementById('fc-tut-exit-confirm').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        tutorialDialogActive = false;
        exitFunctionalCardTutorial();
      });
      document.getElementById('fc-tut-exit-cancel').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        setTimeout(() => { tutorialDialogActive = false; }, 100);
      });
    }
    
    function exitFunctionalCardTutorial() {
      isFunctionalCardTutorial = false;
      isTutorialMode = false;
      tutorialReady = false;
      currentTutorialType = null;
      
      // 移除悬停监听
      removeFunctionalCardListeners();
      
      document.removeEventListener('click', handleFunctionalCardTutorialClick);
      document.removeEventListener('wheel', handleFunctionalCardTutorialWheel);
      document.removeEventListener('contextmenu', handleFunctionalCardTutorialRightClick);
      document.removeEventListener('mousemove', handleFunctionalCardMouseMove);
      
      clearTutorialHighlights();
      document.querySelectorAll('.game-container > .tutorial-mask, body > .tutorial-mask').forEach(el => el.remove());
      document.getElementById('tutorial-overlay').classList.remove('tutorial-active');
      
      document.querySelectorAll('[data-fc-placeholder]').forEach(el => el.remove());
      
      // 恢复按钮显示（教程中 updateTutorialButtons 会隐藏它们）
      // ★ 2026-9-30 FIX：教程步骤会把开始按钮 disabled=true，退出必须完整恢复，
      //   否则退出教程后打开人机练习，开始游戏按钮灰色不可交互
      if (GameElements.ui.startBtn) { GameElements.ui.startBtn.style.display = ''; GameElements.ui.startBtn.disabled = false; GameElements.ui.startBtn.style.opacity = '1'; GameElements.ui.startBtn.style.cursor = 'pointer'; }
      if (GameElements.ui.stopBtn) { GameElements.ui.stopBtn.style.display = ''; GameElements.ui.stopBtn.disabled = false; }
      if (GameElements.ui.restartBtn) { GameElements.ui.restartBtn.style.display = ''; GameElements.ui.restartBtn.disabled = false; }

      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      updateGameStatus(__t('st_tutorial_done'), 'st_tutorial_done');
      showMainMenu();
    }

    // ============================================================================
    // 【匹配操作教程系统】
    // ============================================================================

    let currentTutorialType = null; // 'functionalCard', 'match', 'newbie'

    // 步骤导航数据：每个教程的非交互步骤列表
    function getTutorialStepNavData() {
      if (currentTutorialType === 'functionalCard') {
        return [
          { label: __t('fc_nav_1'), fn: () => showFCIntroStep() },
          { label: __t('fc_nav_2'), fn: () => showFCStep2Transition() }
        ];
      }
      if (currentTutorialType === 'match') {
        return [
          { label: `${__t('tut_step_word')} 1/7 - ${__t('mtut_match_ops')}`, fn: () => showMatchTutorialStep1() },
          { label: `${__t('tut_step_word')} 2/7 - ${__t('mtut_drag')}`, fn: () => showMatchTutorialStep2() },
          { label: `${__t('tut_step_word')} 3/7 - ${__t('mtut_crash')}`, fn: () => showMatchTutorialStep4() },
          { label: `${__t('tut_step_word')} 4/7 - ${__t('mtut_neutral')}`, fn: () => showMatchTutorialStep6() },
          { label: `${__t('tut_step_word')} 5/7 - ${__t('mtut_reinforce')}`, fn: () => showMatchTutorialStep7() },
          { label: `${__t('tut_step_word')} 6/7 - ${__t('mtut_surround')}`, fn: () => showMatchTutorialStep9() },
          { label: `${__t('tut_step_word')} 7/7 - ${__t('mtut_done')}`, fn: () => showMatchTutorialStep11() }
        ];
      }
      if (currentTutorialType === 'newbie' && typeof TutorialSteps !== 'undefined') {
        const steps = [];
        for (let i = 0; i < TutorialSteps.length; i++) {
          const s = TutorialSteps[i];
          steps.push({
            label: `${__t('tut_step_word')} ${s.id}/${TutorialSteps.length} - ${__t(s.title)}`,
            fn: () => {
              currentTutorialStep = i;
              tutorialPhase = 'showing';
              tutorialRoundLocked = false;
              GameState.cardPlayedThisTurn = false;
              showTutorialStep(i);
              updateTutorialButtons();
            }
          });
        }
        return steps;
      }
      return [];
    }

    function toggleTutorialStepNav(event) {
      event.stopPropagation();
      event.preventDefault();

      // 移除已存在的下拉（连带壳一起清）
      var _existWrap = document.getElementById('tutorial-step-nav-wrap');
      if (_existWrap) {
        _existWrap.remove();
        return;
      }

      const steps = getTutorialStepNavData();
      if (steps.length === 0) return;

      const indicator = this;
      const dropdown = document.createElement('div');
      dropdown.className = 'tutorial-step-nav-dropdown';
      dropdown.id = 'tutorial-step-nav-dropdown';

      // 点击外部关闭
      const closeHandler = function(e) {
        if (!dropdown.contains(e.target) && e.target !== indicator) {
          removeNav();
          document.removeEventListener('click', closeHandler, true);
        }
      };
      // ★ 2026-9-30 FIX：壳+核结构（与电磁波同款）——壳 fixed 只管定位（无 zoom），
      //   dropdown 做核缩放盒子。此前直接给 fixed 元素加 zoom，定位被 zoom 干扰乱跑。
      var _navWrap = document.createElement('div');
      _navWrap.id = 'tutorial-step-nav-wrap';
      _navWrap.style.position = 'fixed';
      _navWrap.style.zIndex = '10001';
      var removeNav = function () { _navWrap.remove(); };

      steps.forEach(s => {
        const item = document.createElement('div');
        item.className = 'tutorial-step-nav-item';
        item.textContent = s.label;
        item.addEventListener('click', function(e) {
          e.stopPropagation();
          removeNav();
          document.removeEventListener('click', closeHandler, true);
          s.fn();
        });
        dropdown.appendChild(item);
      });

      // 固定定位到步骤指示器下方（壳定位，核缩放）
      const rect = indicator.getBoundingClientRect();
      _navWrap.style.left = rect.left + 'px';
      _navWrap.style.top = (rect.bottom + 6) + 'px';
      dropdown.style.position = 'static';   // 类里 absolute 失效，改由壳定位
      // ★ 2026-9-30 手机缩放适配：核 zoom 缩放盒子
      var _navSc = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
      if (Math.abs(_navSc - 1) > 0.005) dropdown.style.zoom = String(_navSc);
      _navWrap.appendChild(dropdown);
      document.body.appendChild(_navWrap);

      setTimeout(() => {
        document.addEventListener('click', closeHandler, true);
      }, 0);
    }

    // 全局事件委托：为所有 .tutorial-step-indicator 添加点击跳转
    document.addEventListener('click', function(e) {
      const indicator = e.target.closest('.tutorial-step-indicator');
      if (indicator && !indicator.classList.contains('tutorial-step-indicator-interactive')) {
        e.stopPropagation();
        e.stopImmediatePropagation();
        e.preventDefault();
        toggleTutorialStepNav.call(indicator, e);
      }
    });

    let isMatchTutorial = false;
    let matchTutorialStep = 0;
    let matchTutorialReady = false;
    let matchTutorialDialogActive = false;
    let matchTutDragCompleted = false;
    let matchTutCrashCompleted = false;
    let matchTutSupportCompleted = false;
    let matchTutSeenAdjacent = false;
    let matchTutSeenSame = false;
    let matchTutSupportHintCount = 0;
    let matchTutSupportAdjacentDone = false;
    let matchTutSupportSameDone = false;
    let matchTutSurroundCompleted = false;
    let matchTutSeenSurroundAdjacent = false;
    let matchTutSeenSurroundSame = false;
    let matchTutSurroundHintCount = 0;
    let matchTutSurroundAdjacentDone = false;
    let matchTutSurroundSameDone = false;

    // ============================================================================
    // 【AI 演示】（2026-9-24）：交互步骤面板"AI演示"按钮——
    //   AI 替玩家打出一张能触发当前步骤匹配操作的牌，匹配光环出现后在光环旁显示
    //   醒目提示文字，由玩家自己点击光环执行操作（执行链路与学员手动操作完全一致）
    // ============================================================================

    // 演示防重入标志
    let matchTutDemoBusy = false;

    // 纯探测：指定手牌打到指定路后，与对方同路牌的路匹配机会（无 UI 副作用，供演示选牌用）
    function probeRoadMatchCard(card, roadIndex, wantType) {
      const result = [];
      if (!card) return result;
      const tryPush = (opponentCard, location, stackIndex) => {
        if (!opponentCard) return;
        const t = checkMatchType(card.value, opponentCard.value);
        if (t === wantType) result.push({ type: t, card: opponentCard, roadIndex: roadIndex, location: location, stackIndex: stackIndex });
      };
      tryPush(GameState.opponentField[roadIndex], 'field');
      (GameState.opponentStack[roadIndex] || []).forEach((sc, si) => tryPush(sc, 'stack', si));
      return result;
    }

    // 纯探测：指定手牌打出后的中立区援/围机会（复刻 checkNeutralAdjacentCards 判定，无 UI 副作用）
    function probeNeutralOpportunitiesCard(card) {
      const opportunities = [];
      const isSupportOnlyTutorial = isMatchTutorial && matchTutorialStep === 7;
      const isSurroundOnlyTutorial = false;
      const rule2MatchedSlots = [];

      for (let i = 0; i < 7; i++) {
        const playerCards = GameState.playerNeutralCards[i] || [];
        const opponentCards = GameState.opponentNeutralCards[i] || [];
        if (playerCards.length === 0 || opponentCards.length === 0) continue;
        const playerHasValue = playerCards.some(c => c.value === card.value);
        const opponentHasValue = opponentCards.some(c => c.value === card.value);
        if (!playerHasValue || !opponentHasValue) continue;
        const allValues = [...playerCards, ...opponentCards].map(c => c.value);
        const hasDifferentValue = allValues.some(v => v !== card.value);
        if (hasDifferentValue) continue;
        rule2MatchedSlots.push(i);
        opportunities.push({ neutralIndex: i, canSupport: !isSurroundOnlyTutorial, canSurround: !isSupportOnlyTutorial, matchType: 'same' });
      }

      for (let i = 0; i < 7; i++) {
        if (rule2MatchedSlots.includes(i)) continue;
        const playerCards = GameState.playerNeutralCards[i] || [];
        const opponentCards = GameState.opponentNeutralCards[i] || [];
        const allValues = [...playerCards, ...opponentCards].map(c => c.value);
        if (allValues.includes(card.value)) continue;
        const hasDuplicate = allValues.length !== new Set(allValues).size;
        if (hasDuplicate) continue;
        let canSupport = false;
        let canSurround = false;
        if (opponentCards.length > 0) {
          const oppTop = opponentCards[opponentCards.length - 1];
          if (isCardsAdjacent(card.value, oppTop.value)) canSurround = true;
        }
        if (playerCards.length > 0 && !isSurroundOnlyTutorial) {
          const plrTop = playerCards[playerCards.length - 1];
          if (isCardsAdjacent(card.value, plrTop.value)) canSupport = true;
        }
        if (canSupport || canSurround) {
          if (isSurroundOnlyTutorial) canSupport = false;
          if (isSupportOnlyTutorial) canSurround = false;
          opportunities.push({ neutralIndex: i, canSupport: canSupport, canSurround: canSurround, matchType: 'adjacent' });
        }
      }
      return opportunities;
    }

    // 提示气泡：在匹配光环旁显示"点击执行XX"醒目提示
    function removeMatchDemoHint() {
      // ★ 2026-9-30：壳+核结构——移除壳（连带核 hint）
      var wrap = document.getElementById('match-demo-hint-wrap');
      if (wrap) { wrap.remove(); return; }
      var old = document.getElementById('match-demo-hint');
      if (old) old.remove();
    }

    function addMatchDemoHint(demoType) {
      removeMatchDemoHint();
      let glowEl = null;
      if (demoType === 'drag' || demoType === 'crash') {
        // ★ 同路可能同时出现拖/撞两种光环（如手牌与场牌同点、与叠牌相邻），按 matchInfo.type 精确匹配
        document.querySelectorAll('.opponent-road-slot .match-glow').forEach(el => {
          if (!glowEl && el.matchInfo && el.matchInfo.type === demoType) glowEl = el;
        });
      } else if (demoType === 'support') {
        // ★ neutral-aura 直接加在槽元素本身（非子元素），用连接选择器
        glowEl = document.querySelector('.player-neutral-slot.neutral-aura');
      } else if (demoType === 'surround') {
        glowEl = document.querySelector('.opponent-neutral-slot.neutral-aura');
      }
      if (!glowEl) return;
      const rect = glowEl.getBoundingClientRect();
      if (!rect || (!rect.width && !rect.height)) return;
      const actionText = demoType === 'drag' ? __t('act_drag')
        : demoType === 'crash' ? __t('act_clash')
        : demoType === 'support' ? __t('act_support')
        : __t('act_encircle');
      const hint = document.createElement('div');
      hint.className = 'match-demo-hint';
      hint.id = 'match-demo-hint';
      // ★ 2026-9-24：拖/撞提示带目标牌点数（"点击A执行撞牌"），援/围保持操作名
      if ((demoType === 'drag' || demoType === 'crash') && glowEl.matchInfo && glowEl.matchInfo.card) {
        const cardDisp = glowEl.matchInfo.card.display || '';
        hint.textContent = '👆 ' + __t('tutx_demo_hint_card').replace('{card}', cardDisp).replace('{action}', actionText);
      } else {
        hint.textContent = '👆 ' + __t('tutx_demo_hint').replace('{action}', actionText);
      }
      const hx = rect.left + rect.width / 2;
      // 默认放光环下方 10px；光环太靠下时放上方（防出屏）
      const below = rect.bottom + 10;
      const above = rect.top - 46;
      const hy = (below + 46 > window.innerHeight && above > 0) ? above : below;
      hint.style.left = hx + 'px';
      hint.style.top = hy + 'px';
      // ★ 2026-9-30 FIX：壳+核结构（与电磁波/步骤下拉同款）——壳 fixed 管定位（无 zoom），
      //   hint 做核缩放盒子。此前直接给 fixed 元素加 zoom，定位被 zoom 干扰乱跑。
      var _hintWrap = document.createElement('div');
      _hintWrap.id = 'match-demo-hint-wrap';
      _hintWrap.style.position = 'fixed';
      _hintWrap.style.zIndex = '10000';
      _hintWrap.style.pointerEvents = 'none';
      _hintWrap.style.left = hx + 'px';
      _hintWrap.style.top = hy + 'px';
      var _hintSc = (typeof currentGameScale === 'number' && currentGameScale > 0) ? currentGameScale : 1;
      if (Math.abs(_hintSc - 1) > 0.005) hint.style.zoom = String(_hintSc);
      hint.style.left = '';
      hint.style.top = '';
      _hintWrap.appendChild(hint);
      document.body.appendChild(_hintWrap);
      // 任意点击后移除（点光环=执行操作，点别处=取消匹配，两种情况气泡都应消失）
      const removeOnClick = function () {
        removeMatchDemoHint();
        document.removeEventListener('click', removeOnClick, true);
      };
      setTimeout(function () {
        document.addEventListener('click', removeOnClick, true);
      }, 120);
    }

    // 演示主入口：AI 替玩家打出一张可触发当前步骤匹配操作的牌
    // ★ 2026-9-24：收集演示候选出牌——手牌优先，明牌其次（AI 演示可运用明牌）
    function collectDemoCandidates() {
      const list = [];
      GameState.playerHand.forEach((c, i) => { if (c) list.push({ card: c, sourceType: 'hand', cardIndex: i }); });
      (GameState.playerRevealedCards || []).forEach((c, i) => { if (c) list.push({ card: c, sourceType: 'revealed', cardIndex: i }); });
      return list;
    }

    // 判断候选牌能否合法打到指定路
    // ★ 2026-9-24（用户要求）：演示出牌严格遵循玩家出牌规则——
    //   手牌/牌堆只能放最左侧空位，明牌=空位或已有牌且叠牌未满，暗牌=已有牌且叠牌未满。
    //   直接复用本体合规函数 AIDecisionEngine.getAvailableRoadIndicesForSource；
    //   找不到可演示组合时由 demoMatchTutorialAction 触发重置
    function canDemoCardLandOn(cand, r) {
      const roads = AIDecisionEngine.getAvailableRoadIndicesForSource('player', cand.sourceType);
      return roads.includes(r);
    }

    // ★ 2026-9-24：按演示类型查找组合（手牌+明牌）
    function findDemoPlan(demoType) {
      const candidates = collectDemoCandidates();
      if (demoType === 'drag' || demoType === 'crash') {
        for (const cand of candidates) {
          for (let r = 0; r < 5; r++) {
            if (!canDemoCardLandOn(cand, r)) continue;
            const opps = probeRoadMatchCard(cand.card, r, demoType);
            if (opps.length > 0) {
              return { candidate: cand, roadIndex: r, opportunity: opps[0] };
            }
          }
        }
      } else {
        const demoNeed = demoType === 'support' ? 'canSupport' : 'canSurround';
        for (const cand of candidates) {
          for (let r = 0; r < 5; r++) {
            if (!canDemoCardLandOn(cand, r)) continue;
            const opps = probeNeutralOpportunitiesCard(cand.card);
            const hit = opps.find(o => o[demoNeed]);
            if (hit) {
              return { candidate: cand, roadIndex: r, opportunity: hit };
            }
          }
        }
      }
      return null;
    }

    // 演示用虚拟牌（value 域 1-13，A=1）
    function makeDemoCard(value, isPlayer) {
      const rankMap = { 1:'A',2:'2',3:'3',4:'4',5:'5',6:'6',7:'7',8:'8',9:'9',10:'10',11:'J',12:'Q',13:'K' };
      const rank = rankMap[value] || String(value);
      return {
        id: 'tut_' + Math.random().toString(36).substr(2, 9),
        suit: isPlayer ? '♠' : '♥',
        rank: rank,
        value: value,
        display: rank
      };
    }

    // 取一张候选牌（手牌+明牌优先级）用于定向构造
    function pickDemoCandidateCard() {
      const list = collectDemoCandidates();
      return list.length > 0 ? list[0] : null;
    }

    // ★ 2026-9-24：重置对方场上（拖/撞演示找不到组合时）——
    //   从对方牌堆取 13 张随机分配到 4 条路（与教程发牌一致），
    //   并定向注入一张与我方候选牌相邻/相同的牌，保证重置后必定可演示
    function resetOpponentFieldForDemo(demoType) {
      const opponentCards = [];
      for (let i = 0; i < 13; i++) {
        if (GameState.opponentDeck.length > 0) opponentCards.push(GameState.opponentDeck.shift());
        else opponentCards.push(makeDemoCard(Math.floor(Math.random() * 13) + 1, false));
      }
      const roadCounts = [1, 1, 1, 1];
      let remaining = opponentCards.length - 4;
      for (let i = 0; i < remaining; i++) roadCounts[Math.floor(Math.random() * 4)]++;
      let cardIdx = 0;
      for (let road = 0; road < 4; road++) {
        const count = roadCounts[road];
        if (count > 0 && cardIdx < opponentCards.length) {
          const roadCards = opponentCards.slice(cardIdx, cardIdx + count);
          cardIdx += count;
          GameState.opponentField[road] = roadCards[0];
          GameState.opponentStack[road] = roadCards.slice(1);
        }
      }
      GameState.opponentField[4] = null;
      GameState.opponentStack[4] = [];

      // 定向注入：若无组合，把某路的一张对方牌改成候选牌的相邻/相同点
      if (!findDemoPlan(demoType)) {
        const cand = pickDemoCandidateCard();
        if (cand) {
          const v = cand.card.value;
          const newVal = demoType === 'crash' ? v : (v < 13 ? v + 1 : v - 1);
          outerInject:
          for (let r = 0; r < 5; r++) {
            if (!canDemoCardLandOn(cand, r)) continue;
            const spots = [];
            if (GameState.opponentField[r]) spots.push('field');
            for (let si = 0; si < (GameState.opponentStack[r] || []).length; si++) spots.push(si);
            if (spots.length === 0) continue;
            const pick = spots[Math.floor(Math.random() * spots.length)];
            const target = pick === 'field' ? GameState.opponentField[r] : GameState.opponentStack[r][pick];
            if (!target) continue;
            const nk = makeDemoCard(newVal, false);
            target.value = nk.value; target.display = nk.display; target.rank = nk.rank;
            break outerInject;
          }
        }
      }
    }

    // ★ 2026-9-24：重置中立区（援/围演示找不到组合时）——
    //   复刻教程中立区生成（7 路双方各 1 张，同点/相邻配对），
    //   并定向构造第一对保证重置后必定可演示
    function resetNeutralForDemo(demoType) {
      // 随机生成其余 6 对（2-14 域，同点/相邻 50/50，A(14)→value 1）
      const randomVal = () => Math.floor(Math.random() * 13) + 2;
      const toCard = (val, isPlayer) => makeDemoCard(val === 14 ? 1 : val, isPlayer);
      const pairs = [];
      for (let i = 0; i < 7; i++) {
        const pv = randomVal();
        const isSame = Math.random() < 0.5;
        let ov = isSame ? pv : pv + (Math.random() < 0.5 ? 1 : -1);
        if (ov < 2) ov = pv + 1;
        if (ov > 14) ov = pv - 1;
        pairs.push({ p: pv, o: ov });
      }

      GameState.playerNeutralCards = [[], [], [], [], [], [], []];
      GameState.opponentNeutralCards = [[], [], [], [], [], [], []];
      for (let i = 0; i < 7; i++) {
        GameState.playerNeutralCards[i].push(toCard(pairs[i].p, true));
        GameState.opponentNeutralCards[i].push(toCard(pairs[i].o, false));
      }

      // 定向构造第 1 路：保证候选牌打出后必定触发目标操作
      // ★ 2026-9-24 FIX（用户反馈：配对必须同点或相邻，5/J 那种违规配对不行）：
      //   条子型：双方都放 v（打3援33 / 打6围66）
      //   顺子型：触发侧放 v-1、另一侧放 v-2（打3援2-1成123 / 打6围5-4成456）
      //   v<=2 用高侧 v+1/v+2（避免 K-A-2 伪顺子，游戏顺子如 JQK）
      const cand = pickDemoCandidateCard();
      if (cand) {
        const v = cand.card.value;
        const isSamePair = Math.random() < 0.5;
        if (isSamePair) {
          GameState.playerNeutralCards[0] = [makeDemoCard(v, true)];
          GameState.opponentNeutralCards[0] = [makeDemoCard(v, false)];
        } else {
          let lo = v - 1, lo2 = v - 2;
          if (v <= 2) { lo = v + 1; lo2 = v + 2; }
          if (demoType === 'support') {
            // 援牌：我方顶牌 lo 与打出的 v 相邻，对方 lo2 与 v 差 2（不误触发围牌）
            GameState.playerNeutralCards[0] = [makeDemoCard(lo, true)];
            GameState.opponentNeutralCards[0] = [makeDemoCard(lo2, false)];
          } else {
            // 围牌：对方顶牌 lo 与打出的 v 相邻，我方 lo2 与 v 差 2（不误触发援牌）
            GameState.opponentNeutralCards[0] = [makeDemoCard(lo, false)];
            GameState.playerNeutralCards[0] = [makeDemoCard(lo2, true)];
          }
        }
      }

      updateUI();
      updateNeutralDisplay();
    }

    // ★ 2026-9-24（用户要求）：AI演示重置场区时一并重置功能牌区（牌堆/手牌/明牌/暗牌）
    //   复刻教程交互步骤开局发牌（showMatchTutorialStep8/10）：createCards 重建双方牌堆（各26张），
    //   跳过发牌动画、跳过对方发牌（临时清空对方牌堆，发完恢复，教程同款技巧）；
    //   不清路牌区/中立区（由调用方 resetOpponentFieldForDemo / resetNeutralForDemo 负责）
    async function resetFunctionCardsForDemo() {
      // 清空双方功能牌区数组与槽位 DOM（dealInitialCards 只 push 不清空，需先清）
      GameState.playerHand = [];
      GameState.playerRevealedCards = [];
      GameState.playerDarkCards = [];
      GameState.opponentHand = [];
      GameState.opponentRevealedCards = [];
      GameState.opponentDarkCards = [];
      document.querySelectorAll('.player-hand-slot, .player-revealed-slot, .player-dark-slot, .opponent-hand-slot, .opponent-revealed-slot, .opponent-dark-slot').forEach(slot => {
        slot.innerHTML = '';
        slot.removeAttribute('style');
        slot.classList.remove('slot-has-card');
      });

      // 重建两副牌（各26张，洗牌）并刷新牌堆数字
      createCards();
      updatePlayerDeck();
      updateOpponentDeck();

      // 跳过发牌动画（教程同款 isFeatureEnabled 覆盖）+ 跳过对方发牌（临时清空对方牌堆）
      GameState.isDealingCards = true;
      const savedOpponentDeck = [...GameState.opponentDeck];
      GameState.opponentDeck = [];
      const origIsFeatureEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled : null;
      if (origIsFeatureEnabled) {
        window.isFeatureEnabled = function (feature) {
          if (feature === 'deal-animation') return false;
          return origIsFeatureEnabled(feature);
        };
      }
      try {
        await dealInitialCards();
      } finally {
        if (origIsFeatureEnabled) window.isFeatureEnabled = origIsFeatureEnabled;
        GameState.opponentDeck = savedOpponentDeck;
        GameState.isDealingCards = false;
      }

      renderDeckCardBacks();
      updatePlayerDeck();
      updateOpponentDeck();
      updateUI();
    }

    async function demoMatchTutorialAction(demoType) {
      if (matchTutDemoBusy) return;
      if (!isMatchTutorial) return;
      const expectedStep = { drag: 2, crash: 4, support: 7, surround: 9 }[demoType];
      if (matchTutorialStep !== expectedStep) return;
      if (GameState.gamePhase !== 'playing' || GameState.currentTurn !== 'player') return;
      if (GameState.cardPlayedThisTurn || GameState.isDealingCards || playState.isPlaying) return;
      if (typeof _isOpponentAnimLockingInput === 'function' && _isOpponentAnimLockingInput()) return;

      // ---- 找演示组合（手牌+明牌）；找不到时重置对应区域后再找 ----
      let plan = findDemoPlan(demoType);
      if (!plan) {
        // ★ 2026-9-24（用户要求）：重置场区时一并重置功能牌区（牌堆/手牌/明牌/暗牌）
        await resetFunctionCardsForDemo();
        if (demoType === 'drag' || demoType === 'crash') {
          resetOpponentFieldForDemo(demoType);
        } else {
          resetNeutralForDemo(demoType);
        }
        updateUI();
        plan = findDemoPlan(demoType);
      }

      if (!plan) {
        updateGameStatus(__t('tutx_demo_none'), 'tutx_demo_none');
        return;
      }

      matchTutDemoBusy = true;
      try {
        GameState.cardPlayedThisTurn = true;
        await CardPlayExecutor.executeCardPlay('player', {
          cardIndex: plan.candidate.cardIndex,
          sourceType: plan.candidate.sourceType,
          roadIndex: plan.roadIndex
        }, {
          onAnimationEnd: function () {
            updatePlayerDeck();
            // 出牌动画结束 → 匹配检测已弹光环 → 稍候在光环旁挂醒目提示，玩家自己点击执行
            setTimeout(function () {
              addMatchDemoHint(demoType);
              matchTutDemoBusy = false;
            }, 400);
          }
        });
      } catch (e) {
        console.error('[教程演示] 异常:', e);
        matchTutDemoBusy = false;
      }
    }

    function startMatchTutorial() {
      currentTutorialType = 'match';
      const submenu = document.getElementById('tutorial-submenu');
      if (submenu) submenu.classList.remove('open');
      hideMainMenu();
      setMoralePanelVisible(false);  // ★ 2026-9-25 教程模式禁用士气值
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();

      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      isMatchTutorial = true;
      isTutorialMode = true;
      GameState.callCardEnabled = false;
      matchTutorialStep = 0;
      matchTutorialReady = false;
      matchTutorialDialogActive = false;
      matchTutDragCompleted = false;
      matchTutCrashCompleted = false;
      matchTutSupportCompleted = false;
      matchTutSurroundCompleted = false;

      const mask = document.createElement('div');
      mask.className = 'tutorial-mask';
      mask.id = 'tutorial-mask';
      document.querySelector('.game-container').appendChild(mask);
      document.getElementById('tutorial-overlay').classList.add('tutorial-active');
      updateTutorialButtons();

      document.addEventListener('click', handleMatchTutorialClick);
      document.addEventListener('wheel', handleMatchTutorialWheel, { passive: false });
      document.addEventListener('contextmenu', handleMatchTutorialRightClick);

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          showMatchTutorialStep1();
        });
      });
    }

    function showMatchTutorialStep1() {
      clearTutorialHighlights();
      matchTutorialStep = 0;
      matchTutorialReady = false;

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';

        const screenWidth = 1920;
        const screenHeight = 1080;
        const pad = 10;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        // 创建面板
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 1/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_s1_title')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8;">${__t('mt_s1_desc')}</p>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel = document.querySelector('.rank-panel');
        const playerRoadArea = document.querySelector('#player-road-area');
        if (rankPanel && playerRoadArea) {
          const rankRight = tutRect(rankPanel).right;
          const roadLeft = tutRect(playerRoadArea).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        matchTutorialReady = true;
      });
    }

    function showMatchTutorialStep2() {
      clearTutorialHighlights();
      matchTutorialStep = 1;
      matchTutorialReady = false;

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';

        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 2/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_drag')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8;">${__t('mt_s2_desc')}</p>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel = document.querySelector('.rank-panel');
        const playerRoadArea = document.querySelector('#player-road-area');
        if (rankPanel && playerRoadArea) {
          const rankRight = tutRect(rankPanel).right;
          const roadLeft = tutRect(playerRoadArea).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
          // 保存位置和宽度供交互步骤使用
          mask.appendChild(panel);
          // 等面板渲染后获取实际宽度
          requestAnimationFrame(() => {
            const actualWidth = panel.offsetWidth;
            window.matchTutorialPanelPos = { left: centerX + 'px', transform: 'translate(-50%, -50%)', width: actualWidth + 'px' };
          });
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
          window.matchTutorialPanelPos = { left: '15%', transform: 'translateY(-50%)', width: null };
          mask.appendChild(panel);
        }

        matchTutorialReady = true;
      });
    }

    function showMatchTutorialStep3() {
      clearTutorialHighlights();
      matchTutorialStep = 2;
      matchTutorialReady = false;
      isTutorialMode = false;
      matchTutDragCompleted = false;
      GameState.disableMatchCheck = false;

      // 恢复终止出牌按钮显示
      if (GameElements.ui.stopBtn) GameElements.ui.stopBtn.style.display = '';

      // 重置游戏状态
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      renderDeckCardBacks();
      if (GameElements.player.deck) GameElements.player.deck.style.backgroundColor = '';
      if (GameElements.opponent.deck) GameElements.opponent.deck.style.backgroundColor = '';

      createCards();
      updatePlayerDeck();
      updateOpponentDeck();

      GameState.gamePhase = 'playing';
      GameState.isGameInterrupted = false;
      GameState.cardPlayedThisTurn = false;
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = true;
      GameState.turnHistory = [];
      GameState.currentTurn = 'player';

      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_deal'), 'st_deal');
      GameState.isDealingCards = true;
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = true;
      GameElements.ui.startBtn.style.opacity = '0.5';
      GameElements.ui.startBtn.style.cursor = 'not-allowed';

      // 跳过发牌动画，只发我方牌，不发对方牌
      setTimeout(() => {
        try {
          // 临时保存对方牌堆并清空，这样 dealInitialCards 只发我方的牌
          const savedOpponentDeck = [...GameState.opponentDeck];
          GameState.opponentDeck = [];

          // 临时覆盖 isFeatureEnabled 让发牌动画跳过
          const origIsFeatureEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled : null;
          if (origIsFeatureEnabled) {
            window.isFeatureEnabled = function(feature) {
              if (feature === 'deal-animation') return false;
              return origIsFeatureEnabled(feature);
            };
          }

          dealInitialCards().then(() => {
            // 恢复 isFeatureEnabled
            if (origIsFeatureEnabled) {
              window.isFeatureEnabled = origIsFeatureEnabled;
            }

            // 恢复对方牌堆（未发出的牌）
            GameState.opponentDeck = savedOpponentDeck;

            if (GameState.isGameInterrupted) return;

            // 从对方牌堆取13张牌
          const opponentCards = [];
          for (let i = 0; i < 13; i++) {
            if (GameState.opponentDeck.length > 0) {
              opponentCards.push(GameState.opponentDeck.shift());
            }
          }

          // 随机分配到4条路（路0-3，第4路即第五条路不放牌），每条路至少1张
          const roadCounts = [1, 1, 1, 1];
          let remaining = opponentCards.length - 4;
          for (let i = 0; i < remaining; i++) {
            const road = Math.floor(Math.random() * 4);
            roadCounts[road]++;
          }

          // 按数量分配牌到各路
          let cardIdx = 0;
          for (let road = 0; road < 4; road++) {
            const count = roadCounts[road];
            if (count > 0 && cardIdx < opponentCards.length) {
              const roadCards = opponentCards.slice(cardIdx, cardIdx + count);
              cardIdx += count;
              GameState.opponentField[road] = roadCards[0];
              GameState.opponentStack[road] = roadCards.slice(1);
            }
          }

          updateUI();
          updateOpponentDeck();

          // 更新拼点栏
          for (var i = 0; i < 5; i++) {
            if (typeof checkRoadResult === 'function') checkRoadResult(i);
          }

          GameState.isDealingCards = false;
          GameElements.ui.stopBtn.disabled = false;
          GameElements.ui.stopBtn.style.opacity = '1';
          GameElements.ui.stopBtn.style.cursor = 'pointer';
          updateGameStatus(__t('mt_drag_status'));
          });
        } catch (e) {
          console.error('交互步骤发牌失败:', e);
          GameState.isDealingCards = false;
        }
      }, 300);

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          let mask = document.getElementById('tutorial-mask');
          if (!mask) {
            mask = document.createElement('div');
            mask.className = 'tutorial-mask';
            mask.id = 'tutorial-mask';
            document.querySelector('.game-container').appendChild(mask);
          } else {
            mask.innerHTML = '';
          }

          // 面板
          const panel = document.createElement('div');
          panel.className = 'tutorial-panel';
          panel.style.pointerEvents = 'auto';
          panel.innerHTML = `
            <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 2/7</div>
            <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_drag')}</h3>
            <p style="font-size: 0.85rem; color: #94a3b8;">${__t('mt_s2i_desc')}</p>
            <button id="match-tut-demo-drag-btn" class="game-cursor-hover" style="margin-top: 12px; width: 100%; padding: 8px 0; border: 1px solid #fbbf24; border-radius: 6px; background: rgba(251, 191, 36, 0.12); color: #fbbf24; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s;">${__t('tutx_demo_btn_drag')}</button>
            <div id="match-step3-end-buttons" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); gap: 8px; flex-direction: row;">
              <button id="match-replay-btn" style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tut_restart_btn')}</button>
              <button id="match-exit-tutorial-btn" style="flex: 1; padding: 7px 0; border: 1px solid #94a3b8; border-radius: 6px; background: transparent; color: #94a3b8; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_exit')}</button>
            </div>
          `;

          // 面板居中于牌型栏最右侧到路牌区最左侧之间
          const rankPanel3 = document.querySelector('.rank-panel');
          const playerRoadArea3 = document.querySelector('#player-road-area');
          if (rankPanel3 && playerRoadArea3) {
            const rankRight3 = tutRect(rankPanel3).right;
            const roadLeft3 = tutRect(playerRoadArea3).left;
            const centerX3 = (rankRight3 + roadLeft3) / 2;
            const availWidth3 = roadLeft3 - rankRight3;
            panel.style.left = centerX3 + 'px';
            panel.style.top = '50%';
            panel.style.transform = 'translate(-50%, -50%)';
            panel.style.maxWidth = (availWidth3 - 10) + 'px';
          } else {
            panel.style.left = '15%';
            panel.style.top = '50%';
            panel.style.transform = 'translateY(-50%)';
          }
          mask.appendChild(panel);

          // 绑定"AI演示拖牌"按钮
          const demoDragBtn = document.getElementById('match-tut-demo-drag-btn');
          if (demoDragBtn) {
            demoDragBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              demoMatchTutorialAction('drag');
            });
          }

          // 绑定"重新体验"和"结束教程"按钮
          const replayBtn = document.getElementById('match-replay-btn');
          if (replayBtn) {
            replayBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              const btns = document.getElementById('match-step3-end-buttons');
              if (btns) btns.style.display = 'none';
              showMatchTutorialStep3();
            });
          }
          const exitBtn = document.getElementById('match-exit-tutorial-btn');
          if (exitBtn) {
            exitBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              exitMatchTutorial();
            });
          }

          matchTutorialReady = true;
        });
      });
    }

    // ==================== 步骤4：撞牌介绍 ====================

    function showMatchTutorialStep4() {
      clearTutorialHighlights();
      matchTutorialStep = 3;
      matchTutorialReady = false;
      removeFunctionalCardListeners();
      isTutorialMode = true;

      // 重置界面
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }

        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 3/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_crash')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; line-height: 1.6;">${__t('mt_s3_desc')}</p>
        `;
        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        matchTutorialReady = true;
      });
    }

    // ==================== 步骤4：中立区介绍 ====================

    function showMatchTutorialStep6() {
      clearTutorialHighlights();
      matchTutorialStep = 5;
      matchTutorialReady = false;

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';

        const screenWidth = 1920;
        const screenHeight = 1080;
        const pad = 10;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        // 高亮中立区
        const neutralSelectors = ['#opponent-neutral-area', '#player-neutral-area'];
        neutralSelectors.forEach(selector => {
          const el = document.querySelector(selector);
          if (!el) return;
          const rect = tutRect(el);
          if (rect.width < 10 || rect.height < 10) return;
          const x = rect.left - pad, y = rect.top - pad;
          const w = rect.width + pad * 2, h = rect.height + pad * 2;
          pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
          const hole = document.createElement('div');
          hole.className = 'tutorial-hole-highlight';
          hole.style.cssText = `top:${y}px;left:${x}px;width:${w}px;height:${h}px;pointer-events:none;`;
          mask.appendChild(hole);
        });

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 4/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_neutral')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; line-height: 1.6;">${__t('mt_s4_desc')}</p>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        matchTutorialReady = true;
      });
    }

    // ==================== 步骤5：援牌介绍 ====================

    function showMatchTutorialStep7() {
      clearTutorialHighlights();
      matchTutorialStep = 6;
      matchTutorialReady = false;
      matchTutSupportCompleted = false;

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';

        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 5/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_reinforce')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; line-height: 1.6;">${__t('mt_s5_desc')}</p>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        matchTutorialReady = true;
      });
    }

    // ==================== 交互步骤5：援牌实战 ====================

    function showMatchTutorialStep8() {
      clearTutorialHighlights();
      matchTutorialStep = 7;
      matchTutorialReady = false;
      isTutorialMode = false;
      matchTutSupportCompleted = false;
      matchTutSeenAdjacent = false;
      matchTutSeenSame = false;
      matchTutSupportHintCount = 0;
      matchTutSupportAdjacentDone = false;
      matchTutSupportSameDone = false;
      GameState.disableMatchCheck = false;

      // 恢复终止出牌按钮显示
      if (GameElements.ui.stopBtn) GameElements.ui.stopBtn.style.display = '';

      // 重置游戏状态
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      renderDeckCardBacks();
      if (GameElements.player.deck) GameElements.player.deck.style.backgroundColor = '';
      if (GameElements.opponent.deck) GameElements.opponent.deck.style.backgroundColor = '';

      createCards();
      updatePlayerDeck();
      updateOpponentDeck();

      GameState.gamePhase = 'playing';
      GameState.isGameInterrupted = false;
      GameState.cardPlayedThisTurn = false;
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = true;
      GameState.turnHistory = [];
      GameState.currentTurn = 'player';

      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_deal'), 'st_deal');
      GameState.isDealingCards = true;
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = true;
      GameElements.ui.startBtn.style.opacity = '0.5';
      GameElements.ui.startBtn.style.cursor = 'not-allowed';

      // 跳过发牌动画，只发我方牌，不发对方牌
      setTimeout(() => {
        try {
          // 临时保存对方牌堆并清空，这样 dealInitialCards 只发我方的牌
          const savedOpponentDeck = [...GameState.opponentDeck];
          GameState.opponentDeck = [];

          // 临时覆盖 isFeatureEnabled 让发牌动画跳过
          const origIsFeatureEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled : null;
          if (origIsFeatureEnabled) {
            window.isFeatureEnabled = function(feature) {
              if (feature === 'deal-animation') return false;
              return origIsFeatureEnabled(feature);
            };
          }

          dealInitialCards().then(() => {
            // 恢复 isFeatureEnabled
            if (origIsFeatureEnabled) {
              window.isFeatureEnabled = origIsFeatureEnabled;
            }

            // 恢复对方牌堆
            GameState.opponentDeck = savedOpponentDeck;

            if (GameState.isGameInterrupted) return;

            // 创建14张牌分布到中立区（7路，每路双方各1张，共14张）
            // 随机生成同点或相邻点配对，确保至少3路同点 + 1路相邻点
            // 牌点范围：2-14（2~10, J=11, Q=12, K=13, A=14）
            function generateNeutralPairs() {
              const pairs = [];
              const usedValues = new Set();
              for (let i = 0; i < 7; i++) {
                let playerVal, opponentVal, isSame;
                let attempts = 0;
                do {
                  playerVal = Math.floor(Math.random() * 13) + 2;
                  isSame = Math.random() < 0.5;
                  if (isSame) {
                    opponentVal = playerVal;
                  } else {
                    const dir = Math.random() < 0.5 ? 1 : -1;
                    opponentVal = playerVal + dir;
                    if (opponentVal < 2) opponentVal = playerVal + 1;
                    if (opponentVal > 14) opponentVal = playerVal - 1;
                  }
                  attempts++;
                  const pairVals = isSame ? [playerVal] : [playerVal, opponentVal];
                  const hasConflict = pairVals.some(v => usedValues.has(v));
                  if (!hasConflict || attempts > 50) {
                    pairVals.forEach(v => usedValues.add(v));
                    break;
                  }
                } while (attempts <= 50);
                pairs.push({ player: playerVal, opponent: opponentVal, isSame: isSame });
              }
              return pairs;
            }

            let neutralPairs;
            let genAttempts = 0;
            do {
              const raw = generateNeutralPairs();
              const sameCount = raw.filter(p => p.isSame).length;
              const adjCount = raw.filter(p => !p.isSame).length;
              genAttempts++;
              if (sameCount >= 3 && adjCount >= 3) {
                neutralPairs = raw.map(({player, opponent}) => ({player, opponent}));
                break;
              }
            } while (genAttempts < 200);

            // 清空中立区
            GameState.playerNeutralCards = [[], [], [], [], [], [], []];
            GameState.opponentNeutralCards = [[], [], [], [], [], [], []];

            // 辅助函数：创建虚拟卡牌
            function createTutorialCard(val, isPlayer) {
              const rankMap = { 2:'2',3:'3',4:'4',5:'5',6:'6',7:'7',8:'8',9:'9',10:'10',11:'J',12:'Q',13:'K',14:'A' };
              const rank = rankMap[val] || String(val);
              // A的value需转换为1，与核心游戏逻辑保持一致
              const cardValue = val === 14 ? 1 : val;
              return {
                id: 'tut_' + Math.random().toString(36).substr(2, 9),
                suit: isPlayer ? '♠' : '♥',
                rank: rank,
                value: cardValue,
                display: rank
              };
            }

            // 分配牌到中立区（直接创建，不依赖牌堆）
            for (let i = 0; i < 7; i++) {
              const pair = neutralPairs[i];
              GameState.playerNeutralCards[i].push(createTutorialCard(pair.player, true));
              GameState.opponentNeutralCards[i].push(createTutorialCard(pair.opponent, false));
            }

            updateUI();
            updatePlayerDeck();
            updateOpponentDeck();
            updateNeutralDisplay();

            GameState.isDealingCards = false;
            GameElements.ui.stopBtn.disabled = false;
            GameElements.ui.stopBtn.style.opacity = '1';
            GameElements.ui.stopBtn.style.cursor = 'pointer';
            updateGameStatus(__t('mt_rein_status'));
          });
        } catch (e) {
          console.error('交互步骤发牌失败:', e);
          GameState.isDealingCards = false;
        }
      }, 300);

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          let mask = document.getElementById('tutorial-mask');
          if (!mask) {
            mask = document.createElement('div');
            mask.className = 'tutorial-mask';
            mask.id = 'tutorial-mask';
            document.querySelector('.game-container').appendChild(mask);
          } else {
            mask.innerHTML = '';
          }

          // 面板
          const panel = document.createElement('div');
          panel.className = 'tutorial-panel';
          panel.style.pointerEvents = 'auto';
          panel.innerHTML = `
            <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 5/7</div>
            <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_reinforce')}</h3>
            <div style="font-size: 0.85rem; color: #94a3b8;">
              <div>${__t('mt_s5i_desc')}</div>
              <div id="match-step8-cond-adjacent" style="display: none; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 6px; background: rgba(16, 185, 129, 0.08); color: #10b981; font-size: 0.82rem;">${__t('mt_cond_adj_r')}</div>
              <div id="match-step8-cond-same" style="display: none; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 6px; background: rgba(16, 185, 129, 0.08); color: #10b981; font-size: 0.82rem;">${__t('mt_cond_same_r')}</div>
              <div id="match-step8-attribution" style="display: none; margin-top: 10px;">${__t('mt_attribution')}</div>
            </div>
            <button id="match-tut-demo-support-btn" class="game-cursor-hover" style="margin-top: 12px; width: 100%; padding: 8px 0; border: 1px solid #fbbf24; border-radius: 6px; background: rgba(251, 191, 36, 0.12); color: #fbbf24; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s;">${__t('tutx_demo_btn_support')}</button>
            <div id="match-step8-end-buttons" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); gap: 8px; flex-direction: row;">
              <button id="match-step8-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_next')}</button>
            </div>
          `;

          // 面板居中于牌型栏最右侧到路牌区最左侧之间
          const rankPanel2 = document.querySelector('.rank-panel');
          const playerRoadArea2 = document.querySelector('#player-road-area');
          if (rankPanel2 && playerRoadArea2) {
            const rankRight2 = tutRect(rankPanel2).right;
            const roadLeft2 = tutRect(playerRoadArea2).left;
            const centerX2 = (rankRight2 + roadLeft2) / 2;
            const availWidth = roadLeft2 - rankRight2;
            panel.style.left = centerX2 + 'px';
            panel.style.top = '50%';
            panel.style.transform = 'translate(-50%, -50%)';
            panel.style.maxWidth = (availWidth - 10) + 'px';
          } else {
            panel.style.left = '15%';
            panel.style.top = '50%';
            panel.style.transform = 'translateY(-50%)';
          }
          mask.appendChild(panel);

          // 绑定"AI演示援牌"按钮
          const demoSupportBtn = document.getElementById('match-tut-demo-support-btn');
          if (demoSupportBtn) {
            demoSupportBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              demoMatchTutorialAction('support');
            });
          }

          // 绑定__t('tut_btn_next')按钮
          const completeBtn = document.getElementById('match-step8-complete-btn');
          if (completeBtn) {
            completeBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              showMatchTutorialStep9();
            });
          }

          matchTutorialReady = true;
        });
      });
    }

    // ==================== 步骤6：围牌介绍 ====================

    function showMatchTutorialStep9() {
      clearTutorialHighlights();
      matchTutorialStep = 8;
      matchTutorialReady = false;
      matchTutSurroundCompleted = false;

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        mask.style.animation = 'none';
        mask.style.opacity = '1';

        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 6/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_surround')}</h3>
          <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; line-height: 1.6;">${__t('mt_s6_desc')}</p>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        matchTutorialReady = true;
      });
    }

    // ==================== 交互步骤6：围牌实战 ====================

    function showMatchTutorialStep10() {
      clearTutorialHighlights();
      matchTutorialStep = 9;
      matchTutorialReady = false;
      isTutorialMode = false;
      matchTutSurroundCompleted = false;
      matchTutSeenSurroundAdjacent = false;
      matchTutSeenSurroundSame = false;
      matchTutSurroundHintCount = 0;
      matchTutSurroundAdjacentDone = false;
      matchTutSurroundSameDone = false;
      GameState.disableMatchCheck = false;

      // 恢复终止出牌按钮显示
      if (GameElements.ui.stopBtn) GameElements.ui.stopBtn.style.display = '';

      // 重置游戏状态
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      renderDeckCardBacks();
      if (GameElements.player.deck) GameElements.player.deck.style.backgroundColor = '';
      if (GameElements.opponent.deck) GameElements.opponent.deck.style.backgroundColor = '';

      createCards();
      updatePlayerDeck();
      updateOpponentDeck();

      GameState.gamePhase = 'playing';
      GameState.isGameInterrupted = false;
      GameState.cardPlayedThisTurn = false;
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = true;
      GameState.turnHistory = [];
      GameState.currentTurn = 'player';

      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_deal'), 'st_deal');
      GameState.isDealingCards = true;
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = true;
      GameElements.ui.startBtn.style.opacity = '0.5';
      GameElements.ui.startBtn.style.cursor = 'not-allowed';

      // 跳过发牌动画，只发我方牌，不发对方牌
      setTimeout(() => {
        try {
          // 临时保存对方牌堆并清空，这样 dealInitialCards 只发我方的牌
          const savedOpponentDeck = [...GameState.opponentDeck];
          GameState.opponentDeck = [];

          // 临时覆盖 isFeatureEnabled 让发牌动画跳过
          const origIsFeatureEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled : null;
          if (origIsFeatureEnabled) {
            window.isFeatureEnabled = function(feature) {
              if (feature === 'deal-animation') return false;
              return origIsFeatureEnabled(feature);
            };
          }

          dealInitialCards().then(() => {
            // 恢复 isFeatureEnabled
            if (origIsFeatureEnabled) {
              window.isFeatureEnabled = origIsFeatureEnabled;
            }

            // 恢复对方牌堆
            GameState.opponentDeck = savedOpponentDeck;

            if (GameState.isGameInterrupted) return;

            // 创建14张牌分布到中立区（7路，每路双方各1张，共14张）
            // 随机生成同点或相邻点配对，确保至少3路同点 + 1路相邻点
            // 牌点范围：2-14（2~10, J=11, Q=12, K=13, A=14）
            function generateNeutralPairs() {
              const pairs = [];
              const usedValues = new Set();
              for (let i = 0; i < 7; i++) {
                let playerVal, opponentVal, isSame;
                let attempts = 0;
                do {
                  playerVal = Math.floor(Math.random() * 13) + 2;
                  isSame = Math.random() < 0.5;
                  if (isSame) {
                    opponentVal = playerVal;
                  } else {
                    const dir = Math.random() < 0.5 ? 1 : -1;
                    opponentVal = playerVal + dir;
                    if (opponentVal < 2) opponentVal = playerVal + 1;
                    if (opponentVal > 14) opponentVal = playerVal - 1;
                  }
                  attempts++;
                  const pairVals = isSame ? [playerVal] : [playerVal, opponentVal];
                  const hasConflict = pairVals.some(v => usedValues.has(v));
                  if (!hasConflict || attempts > 50) {
                    pairVals.forEach(v => usedValues.add(v));
                    break;
                  }
                } while (attempts <= 50);
                pairs.push({ player: playerVal, opponent: opponentVal, isSame: isSame });
              }
              return pairs;
            }

            let neutralPairs;
            let genAttempts = 0;
            do {
              const raw = generateNeutralPairs();
              const sameCount = raw.filter(p => p.isSame).length;
              const adjCount = raw.filter(p => !p.isSame).length;
              genAttempts++;
              if (sameCount >= 3 && adjCount >= 3) {
                neutralPairs = raw.map(({player, opponent}) => ({player, opponent}));
                break;
              }
            } while (genAttempts < 200);

            // 清空中立区
            GameState.playerNeutralCards = [[], [], [], [], [], [], []];
            GameState.opponentNeutralCards = [[], [], [], [], [], [], []];

            // 辅助函数：创建虚拟卡牌
            function createTutorialCard(val, isPlayer) {
              const rankMap = { 2:'2',3:'3',4:'4',5:'5',6:'6',7:'7',8:'8',9:'9',10:'10',11:'J',12:'Q',13:'K',14:'A' };
              const rank = rankMap[val] || String(val);
              // A的value需转换为1，与核心游戏逻辑保持一致
              const cardValue = val === 14 ? 1 : val;
              return {
                id: 'tut_' + Math.random().toString(36).substr(2, 9),
                suit: isPlayer ? '♠' : '♥',
                rank: rank,
                value: cardValue,
                display: rank
              };
            }

            // 分配牌到中立区（直接创建，不依赖牌堆）
            for (let i = 0; i < 7; i++) {
              const pair = neutralPairs[i];
              GameState.playerNeutralCards[i].push(createTutorialCard(pair.player, true));
              GameState.opponentNeutralCards[i].push(createTutorialCard(pair.opponent, false));
            }

            updateUI();
            updatePlayerDeck();
            updateOpponentDeck();
            updateNeutralDisplay();

            GameState.isDealingCards = false;
            GameElements.ui.stopBtn.disabled = false;
            GameElements.ui.stopBtn.style.opacity = '1';
            GameElements.ui.stopBtn.style.cursor = 'pointer';
            updateGameStatus(__t('mt_sur_status'));
          });
        } catch (e) {
          console.error('交互步骤发牌失败:', e);
          GameState.isDealingCards = false;
        }
      }, 300);

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          let mask = document.getElementById('tutorial-mask');
          if (!mask) {
            mask = document.createElement('div');
            mask.className = 'tutorial-mask';
            mask.id = 'tutorial-mask';
            document.querySelector('.game-container').appendChild(mask);
          } else {
            mask.innerHTML = '';
          }

          // 面板
          const panel = document.createElement('div');
          panel.className = 'tutorial-panel';
          panel.style.pointerEvents = 'auto';
          panel.innerHTML = `
            <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 6/7</div>
            <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_surround')}</h3>
            <div style="font-size: 0.85rem; color: #94a3b8;">
              <div>${__t('mt_s6i_sur')}</div>
              <div id="match-step10-cond-adjacent" style="display: none; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 6px; background: rgba(16, 185, 129, 0.08); color: #10b981; font-size: 0.82rem;">${__t('mt_cond_adj_s')}</div>
              <div id="match-step10-cond-same" style="display: none; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 6px; background: rgba(16, 185, 129, 0.08); color: #10b981; font-size: 0.82rem;">${__t('mt_cond_same_s')}</div>
            </div>
            <button id="match-tut-demo-surround-btn" class="game-cursor-hover" style="margin-top: 12px; width: 100%; padding: 8px 0; border: 1px solid #fbbf24; border-radius: 6px; background: rgba(251, 191, 36, 0.12); color: #fbbf24; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s;">${__t('tutx_demo_btn_encircle')}</button>
            <div id="match-step10-end-buttons" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); gap: 8px; flex-direction: row;">
              <button id="match-step10-complete-btn" style="flex: 1; padding: 7px 0; border: 1px solid #10b981; border-radius: 6px; background: transparent; color: #10b981; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_done_learn')}</button>
            </div>
          `;

          // 面板居中于牌型栏最右侧到路牌区最左侧之间
          const rankPanel2 = document.querySelector('.rank-panel');
          const playerRoadArea2 = document.querySelector('#player-road-area');
          if (rankPanel2 && playerRoadArea2) {
            const rankRight2 = tutRect(rankPanel2).right;
            const roadLeft2 = tutRect(playerRoadArea2).left;
            const centerX2 = (rankRight2 + roadLeft2) / 2;
            const availWidth = roadLeft2 - rankRight2;
            panel.style.left = centerX2 + 'px';
            panel.style.top = '50%';
            panel.style.transform = 'translate(-50%, -50%)';
            panel.style.maxWidth = (availWidth - 10) + 'px';
          } else {
            panel.style.left = '15%';
            panel.style.top = '50%';
            panel.style.transform = 'translateY(-50%)';
          }
          mask.appendChild(panel);

          // 绑定"AI演示围牌"按钮
          const demoSurroundBtn = document.getElementById('match-tut-demo-surround-btn');
          if (demoSurroundBtn) {
            demoSurroundBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              demoMatchTutorialAction('surround');
            });
          }

          // 绑定"完成学习"按钮
          const completeBtn = document.getElementById('match-step10-complete-btn');
          if (completeBtn) {
            completeBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              showMatchTutorialStep11();
            });
          }

          matchTutorialReady = true;
        });
      });
    }

    // ==================== 交互步骤3：撞牌实战 ====================

    function showMatchTutorialStep5() {
      clearTutorialHighlights();
      matchTutorialStep = 4;
      matchTutorialReady = false;
      isTutorialMode = false;
      matchTutCrashCompleted = false;
      GameState.disableMatchCheck = false;

      // 恢复终止出牌按钮显示
      if (GameElements.ui.stopBtn) GameElements.ui.stopBtn.style.display = '';

      // 重置游戏状态
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      if (typeof updateRoadAndCompareStyle === 'function') {
        updateRoadAndCompareStyle();
      }
      renderDeckCardBacks();
      if (GameElements.player.deck) GameElements.player.deck.style.backgroundColor = '';
      if (GameElements.opponent.deck) GameElements.opponent.deck.style.backgroundColor = '';

      createCards();
      updatePlayerDeck();
      updateOpponentDeck();

      GameState.gamePhase = 'playing';
      GameState.isGameInterrupted = false;
      GameState.cardPlayedThisTurn = false;
      GameState.playerStoppedPlaying = false;
      GameState.opponentStoppedPlaying = true;
      GameState.turnHistory = [];
      GameState.currentTurn = 'player';

      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_deal'), 'st_deal');
      GameState.isDealingCards = true;
      GameElements.ui.stopBtn.disabled = true;
      GameElements.ui.stopBtn.style.opacity = '0.5';
      GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      GameElements.ui.startBtn.disabled = true;
      GameElements.ui.startBtn.style.opacity = '0.5';
      GameElements.ui.startBtn.style.cursor = 'not-allowed';

      // 跳过发牌动画，只发我方牌，不发对方牌
      setTimeout(() => {
        try {
          // 临时保存对方牌堆并清空，这样 dealInitialCards 只发我方的牌
          const savedOpponentDeck = [...GameState.opponentDeck];
          GameState.opponentDeck = [];

          // 临时覆盖 isFeatureEnabled 让发牌动画跳过
          const origIsFeatureEnabled = typeof isFeatureEnabled === 'function' ? isFeatureEnabled : null;
          if (origIsFeatureEnabled) {
            window.isFeatureEnabled = function(feature) {
              if (feature === 'deal-animation') return false;
              return origIsFeatureEnabled(feature);
            };
          }

          dealInitialCards().then(() => {
            // 恢复 isFeatureEnabled
            if (origIsFeatureEnabled) {
              window.isFeatureEnabled = origIsFeatureEnabled;
            }

            // 恢复对方牌堆（未发出的牌）
            GameState.opponentDeck = savedOpponentDeck;

            if (GameState.isGameInterrupted) return;

            // 从对方牌堆取13张牌
          const opponentCards = [];
          for (let i = 0; i < 13; i++) {
            if (GameState.opponentDeck.length > 0) {
              opponentCards.push(GameState.opponentDeck.shift());
            }
          }

          // 随机分配到4条路（路0-3，第4路即第五条路不放牌），每条路至少1张
          const roadCounts = [1, 1, 1, 1];
          let remaining = opponentCards.length - 4;
          for (let i = 0; i < remaining; i++) {
            const road = Math.floor(Math.random() * 4);
            roadCounts[road]++;
          }

          // 按数量分配牌到各路
          let cardIdx = 0;
          for (let road = 0; road < 4; road++) {
            const count = roadCounts[road];
            if (count > 0 && cardIdx < opponentCards.length) {
              const roadCards = opponentCards.slice(cardIdx, cardIdx + count);
              cardIdx += count;
              GameState.opponentField[road] = roadCards[0];
              GameState.opponentStack[road] = roadCards.slice(1);
            }
          }

          updateUI();
          updateOpponentDeck();

          // 更新拼点栏
          for (var i = 0; i < 5; i++) {
            if (typeof checkRoadResult === 'function') checkRoadResult(i);
          }

          GameState.isDealingCards = false;
          GameElements.ui.stopBtn.disabled = false;
          GameElements.ui.stopBtn.style.opacity = '1';
          GameElements.ui.stopBtn.style.cursor = 'pointer';
          updateGameStatus(__t('mt_crash_status'));
          });
        } catch (e) {
          console.error('交互步骤发牌失败:', e);
          GameState.isDealingCards = false;
        }
      }, 300);

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          let mask = document.getElementById('tutorial-mask');
          if (!mask) {
            mask = document.createElement('div');
            mask.className = 'tutorial-mask';
            mask.id = 'tutorial-mask';
            document.querySelector('.game-container').appendChild(mask);
          } else {
            mask.innerHTML = '';
          }

          // 面板
          const panel = document.createElement('div');
          panel.className = 'tutorial-panel';
          panel.style.pointerEvents = 'auto';
          panel.innerHTML = `
            <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 3/7</div>
            <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_t_crash')}</h3>
            <div style="font-size: 0.85rem; color: #94a3b8;">
              <div>${__t('mt_s3i_crash')}</div>
            </div>
            <button id="match-tut-demo-crash-btn" class="game-cursor-hover" style="margin-top: 12px; width: 100%; padding: 8px 0; border: 1px solid #fbbf24; border-radius: 6px; background: rgba(251, 191, 36, 0.12); color: #fbbf24; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s;">${__t('tutx_demo_btn_crash')}</button>
            <div id="match-step5-end-buttons" style="display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); gap: 8px; flex-direction: row;">
              <button id="match-step5-replay-btn" style="flex: 1; padding: 7px 0; border: 1px solid #fbbf24; border-radius: 6px; background: transparent; color: #fbbf24; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tut_restart_btn')}</button>
              <button id="match-step5-exit-btn" style="flex: 1; padding: 7px 0; border: 1px solid #94a3b8; border-radius: 6px; background: transparent; color: #94a3b8; font-size: 0.82rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_exit')}</button>
            </div>
          `;

          // 面板居中于牌型栏最右侧到路牌区最左侧之间
          const rankPanel5 = document.querySelector('.rank-panel');
          const playerRoadArea5 = document.querySelector('#player-road-area');
          if (rankPanel5 && playerRoadArea5) {
            const rankRight5 = tutRect(rankPanel5).right;
            const roadLeft5 = tutRect(playerRoadArea5).left;
            const centerX5 = (rankRight5 + roadLeft5) / 2;
            const availWidth5 = roadLeft5 - rankRight5;
            panel.style.left = centerX5 + 'px';
            panel.style.top = '50%';
            panel.style.transform = 'translate(-50%, -50%)';
            panel.style.maxWidth = (availWidth5 - 10) + 'px';
          } else {
            panel.style.left = '15%';
            panel.style.top = '50%';
            panel.style.transform = 'translateY(-50%)';
          }
          mask.appendChild(panel);

          // 绑定"AI演示撞牌"按钮
          const demoCrashBtn = document.getElementById('match-tut-demo-crash-btn');
          if (demoCrashBtn) {
            demoCrashBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              demoMatchTutorialAction('crash');
            });
          }

          // 绑定"重新体验"和"结束教程"按钮
          const replayBtn = document.getElementById('match-step5-replay-btn');
          if (replayBtn) {
            replayBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              const btns = document.getElementById('match-step5-end-buttons');
              if (btns) btns.style.display = 'none';
              showMatchTutorialStep5();
            });
          }
          const exitBtn = document.getElementById('match-step5-exit-btn');
          if (exitBtn) {
            exitBtn.addEventListener('click', function(e) {
              e.stopPropagation();
              stopCrisisMusic();
              stopEndGameMusic();
              exitMatchTutorial();
            });
          }

          matchTutorialReady = true;
        });
      });
    }

    // ==================== 步骤7：教程完成 ====================

    function showMatchTutorialStep11() {
      clearTutorialHighlights();
      matchTutorialStep = 10;
      matchTutorialReady = false;
      isTutorialMode = true;

      // 重置界面
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }

        const screenWidth = 1920;
        const screenHeight = 1080;
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:auto;';
        const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathEl.setAttribute('d', pathD);
        pathEl.setAttribute('fill-rule', 'evenodd');
        pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        svg.appendChild(pathEl);
        mask.appendChild(svg);

        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        panel.style.pointerEvents = 'auto';
        panel.innerHTML = `
          <div class="tutorial-step-indicator">${__t('tutx_step')} 7/7</div>
          <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('mt_final_title')}</h3>
          <div style="margin-top: 20px;">
            <button id="match-step11-practice-btn" style="width: 100%; padding: 10px 0; border: 1px solid #10b981; border-radius: 6px; background: rgba(16, 185, 129, 0.15); color: #10b981; font-size: 0.9rem; cursor: pointer; transition: all 0.2s;">${__t('tutx_practice')}</button>
          </div>
        `;

        // 面板居中于牌型栏最右侧到路牌区最左侧之间
        const rankPanel2 = document.querySelector('.rank-panel');
        const playerRoadArea2 = document.querySelector('#player-road-area');
        if (rankPanel2 && playerRoadArea2) {
          const rankRight = tutRect(rankPanel2).right;
          const roadLeft = tutRect(playerRoadArea2).left;
          const centerX = (rankRight + roadLeft) / 2;
          panel.style.left = centerX + 'px';
          panel.style.top = '50%';
          panel.style.transform = 'translate(-50%, -50%)';
        } else {
          panel.style.left = '15%';
          panel.style.top = '50%';
          panel.style.transform = 'translateY(-50%)';
        }
        mask.appendChild(panel);

        // 绑定人机模式按钮 - 带过渡动画
        const practiceBtn = document.getElementById('match-step11-practice-btn');
        if (practiceBtn) {
          practiceBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            stopCrisisMusic();
            stopEndGameMusic();
            exitMatchTutorial();
            startPracticeGame();

            // ===== 过渡动画：80%黑暗遮罩 + 游戏界面从右侧滑入 =====
            const gameContainer = document.querySelector('.game-container');
            if (!gameContainer) return;

            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            const targetScale = windowHeight / 1080;
            const startScale = targetScale * 0.8;

            // 暂时移除 resize 监听器，防止动画期间被覆盖
            if (gameScaleHandler) {
              window.removeEventListener('resize', gameScaleHandler);
            }

            // 1. 添加80%黑暗遮罩
            const darkOverlay = document.createElement('div');
            darkOverlay.id = 'practice-transition-overlay';
            darkOverlay.style.cssText = `
              position: fixed; top: 0; left: 0; right: 0; bottom: 0;
              background: rgba(0, 0, 0, 0.8); z-index: 99998;
              opacity: 0; transition: opacity 0.3s ease;
              pointer-events: none;
            `;
            document.body.appendChild(darkOverlay);
            requestAnimationFrame(() => {
              darkOverlay.style.opacity = '1';
            });

            // 2. 游戏界面以80%大小定位到屏幕右侧外
            const startOffsetX = windowWidth; // 屏幕右侧外
            const startOffsetY = (windowHeight - 1080 * startScale) / 2;
            gameContainer.style.transition = 'none';
            gameContainer.style.transform = `translate(${startOffsetX}px, ${startOffsetY}px) scale(${startScale})`;

            // 3. 从右侧滑入中央（80%大小）
            requestAnimationFrame(() => {
              const centerX = (windowWidth - 1920 * startScale) / 2;
              gameContainer.style.transition = 'transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
              gameContainer.style.transform = `translate(${centerX}px, ${startOffsetY}px) scale(${startScale})`;

              // 4. 滑入完成后，放大到100%并淡出遮罩
              setTimeout(() => {
                const finalOffsetX = (windowWidth - 1920 * targetScale) / 2;
                const finalOffsetY = (windowHeight - 1080 * targetScale) / 2;
                gameContainer.style.transition = 'transform 0.4s ease';
                gameContainer.style.transform = `translate(${finalOffsetX}px, ${finalOffsetY}px) scale(${targetScale})`;
                currentGameScale = targetScale;

                // 淡出遮罩
                darkOverlay.style.opacity = '0';
                setTimeout(() => {
                  darkOverlay.remove();
                  // 清除transition，恢复正常缩放控制
                  gameContainer.style.transition = '';
                  // 恢复 resize 监听器
                  if (gameScaleHandler) {
                    window.addEventListener('resize', gameScaleHandler);
                  }
                }, 400);
              }, 600);
            });
          });
        }

        matchTutorialReady = true;
      });
    }

    function handleMatchTutorialClick(e) {
      if (!isMatchTutorial || !matchTutorialReady) return;
      if (e.target.closest('.tutorial-panel')) return;
      if (e.target.closest('button')) return;

      // 步骤1点击进入步骤2
      if (matchTutorialStep === 0) {
        showMatchTutorialStep2();
        return;
      }
      // 步骤2点击进入步骤3（交互）
      if (matchTutorialStep === 1) {
        showMatchTutorialStep3();
        return;
      }
      // 步骤3（撞牌介绍）点击进入交互步骤3（撞牌实战）
      if (matchTutorialStep === 3) {
        showMatchTutorialStep5();
        return;
      }
      // 步骤4（中立区介绍）点击进入步骤5（援牌介绍）
      if (matchTutorialStep === 5) {
        showMatchTutorialStep7();
        return;
      }
      // 步骤5（援牌介绍）点击进入交互步骤5（援牌实战）
      if (matchTutorialStep === 6) {
        showMatchTutorialStep8();
        return;
      }
      // 步骤6（围牌介绍）点击进入交互步骤6（围牌实战）
      if (matchTutorialStep === 8) {
        showMatchTutorialStep10();
        return;
      }
      // 交互模式（step=2 或 step=4）点击不做任何事
    }

    function handleMatchTutorialWheel(e) {
      if (!isMatchTutorial) return;
      if (!matchTutorialReady) return;
      if (matchTutorialDialogActive) return;
      e.preventDefault();
      const goingBack = e.deltaY < 0;
      
      if (goingBack && matchTutorialStep > 0) {
        showMatchTutGoBackDialog();
      }
    }

    function showMatchTutGoBackDialog() {
      matchTutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_goback_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_goback_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" id="match-tut-goback-confirm">${__t('tutx_confirm')}</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" id="match-tut-goback-cancel">${__t('tutx_cancel')}</button>
        </div>
      `;
      document.body.appendChild(dialog);
      document.getElementById('match-tut-goback-confirm').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        matchTutorialDialogActive = false;
        stopCrisisMusic();
        stopEndGameMusic();
        if (matchTutorialStep === 10) {
          matchTutorialStep = 9;
          isTutorialMode = false;
          showMatchTutorialStep10();
        } else if (matchTutorialStep === 9) {
          matchTutorialStep = 8;
          isTutorialMode = true;
          showMatchTutorialStep9();
        } else if (matchTutorialStep === 7) {
          matchTutorialStep = 6;
          isTutorialMode = true;
          showMatchTutorialStep7();
        } else if (matchTutorialStep === 6) {
          matchTutorialStep = 5;
          isTutorialMode = true;
          showMatchTutorialStep6();
        } else if (matchTutorialStep === 5) {
          matchTutorialStep = 3;
          isTutorialMode = true;
          showMatchTutorialStep4();
        } else if (matchTutorialStep === 4) {
          matchTutorialStep = 3;
          isTutorialMode = true;
          showMatchTutorialStep4();
        } else if (matchTutorialStep === 3) {
          matchTutorialStep = 2;
          isTutorialMode = false;
          showMatchTutorialStep3();
        } else if (matchTutorialStep === 2) {
          showMatchTutorialStep2();
        } else if (matchTutorialStep === 1) {
          showMatchTutorialStep1();
        }
      });
      document.getElementById('match-tut-goback-cancel').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        setTimeout(() => { matchTutorialDialogActive = false; }, 100);
      });
    }

    function handleMatchTutorialRightClick(e) {
      if (!isMatchTutorial) return;
      if (!matchTutorialReady) return;
      if (matchTutorialDialogActive) return;
      e.preventDefault();
      showMatchTutExitDialog();
    }

    function showMatchTutExitDialog() {
      matchTutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_exit_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_exit_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" id="match-tut-exit-confirm">${__t('tutx_confirm')}</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" id="match-tut-exit-cancel">${__t('tutx_cancel')}</button>
        </div>
      `;
      document.body.appendChild(dialog);
      document.getElementById('match-tut-exit-confirm').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        matchTutorialDialogActive = false;
        exitMatchTutorial();
      });
      document.getElementById('match-tut-exit-cancel').addEventListener('click', function(e) {
        e.stopPropagation();
        dialog.remove();
        setTimeout(() => { matchTutorialDialogActive = false; }, 100);
      });
    }

    function exitMatchTutorial() {
      stopCrisisMusic();
      stopEndGameMusic();
      isMatchTutorial = false;
      isTutorialMode = false;
      matchTutorialReady = false;
      currentTutorialType = null;
      matchTutorialDialogActive = false;

      document.removeEventListener('click', handleMatchTutorialClick);
      document.removeEventListener('wheel', handleMatchTutorialWheel);
      document.removeEventListener('contextmenu', handleMatchTutorialRightClick);

      clearTutorialHighlights();
      document.getElementById('tutorial-overlay').classList.remove('tutorial-active');

      if (GameElements.ui.startBtn) { GameElements.ui.startBtn.style.display = ''; GameElements.ui.startBtn.disabled = false; GameElements.ui.startBtn.style.opacity = '1'; GameElements.ui.startBtn.style.cursor = 'pointer'; }
      if (GameElements.ui.stopBtn) { GameElements.ui.stopBtn.style.display = ''; GameElements.ui.stopBtn.disabled = false; }
      if (GameElements.ui.restartBtn) { GameElements.ui.restartBtn.style.display = ''; GameElements.ui.restartBtn.disabled = false; }

      interruptGame();
      clearAllCardSlots();
      resetGameState();
      updateUI();

      updateGameStatus(__t('st_match_tutorial_done'), 'st_match_tutorial_done');
      showMainMenu();
      updateGameStatus('');
    }

    window.startMatchTutorial = startMatchTutorial;
    window.exitMatchTutorial = exitMatchTutorial;

    window.startFunctionalCardTutorial = startFunctionalCardTutorial;

    function startPracticeGame() {
      // ★ 清理 PBOnline 残留状态 —— 仅 单机 1v1（playerCountSetting==='2'）才清理
      // 组队四人模式走 startPracticeGame2v2() → enterFourPlayerPractice()，绝对不能在这里清
      var _pbOnline = (typeof PBOnline !== 'undefined' && PBOnline) ? PBOnline : null;
      var _count = window.playerCountSetting || '2';
      var _willPlay4 = (_count === '4'); // 四人模式不需要清理
      console.log('[startPracticeGame] PBOnline状态检查:', {
        isOnline: _pbOnline?.isOnline,
        hasTeammate: _pbOnline?.hasTeammate,
        isPractice2v2Mode: _pbOnline?.isPractice2v2Mode,
        isPracticeLeader: _pbOnline?.isPracticeLeader,
        playerCountSetting: _count,
        is4PlayerPath: _willPlay4
      });
      if (_pbOnline && !_willPlay4 && !_pbOnline.isOnline && !_pbOnline.hasTeammate) {
        // 真·单机 1v1：强制清理所有 PBOnline 残留
        console.log('[startPracticeGame] 单机1v1：清理 PBOnline 残留状态');
        try { _pbOnline.isPractice2v2Mode = false; } catch(e) {}
        try { _pbOnline.isPracticeLeader = false; } catch(e) {}
        try { _pbOnline.leaveTeam && _pbOnline.leaveTeam(); } catch(e) {}
      } else {
        console.log('[startPracticeGame] 非单机1v1：保留 PBOnline 状态');
      }

      // ★ 兜底清理：如果刚从联机2v2模式退出，强制清除所有残留UI（头像、控制面板、计时器等）
      //   防止联机模式的头像、获胜动画等残留在人机练习界面中
      if (typeof PBOnline !== 'undefined' && PBOnline && (PBOnline.isOnline || PBOnline.isOnline2v2Mode)) {
        try { PBOnline.exitOnlineGame(); } catch(e) {}
      } else {
        // 即使PBOnline未激活，也手动清理可能残留的DOM元素
        var _cleanupIds = ['online-player-info', 'online-teammate-info', 'online-opp-info', 'online-opp2-info',
          'online-ctrl-panel', 'online-turn-timer', 'match-timer-display', 'restart-vote-btn'];
        _cleanupIds.forEach(function(id) {
          var el = document.getElementById(id);
          if (el) { el.style.display = 'none'; el.classList.remove('active'); }
        });
        // 清理获胜/失败音乐
        if (typeof stopEndGameMusic === 'function') stopEndGameMusic();
        if (typeof stopCrisisMusic === 'function') stopCrisisMusic();
        // 清理能量槽传播动画状态
        if (typeof energyPropagationActive !== 'undefined') { energyPropagationActive = false; }
      }
      hideMainMenu();
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();
      // ★ 重置游戏阶段为setup，确保可以修改设置
      GameState.gamePhase = 'setup';
      GameState.isGameInterrupted = false;
      // ★ 进入游戏界面时，根据保存的对局模式应用布局
      try {
        if (window.playerCountSetting === '4') {
          applyFourPlayerLayout();
        } else {
          restoreTwoPlayerLayout();
        }
      } catch(e) {
        console.error('[进入游戏] 布局应用错误:', e);
      }
      // ★ 2026-10-6 修复：进入对局界面时按当前卡面风格重置所有槽位类名。
      //   卡通风格依赖 stone-hand-slot 类（石板槽），此前静态 HTML 是经典类名，
      //   又无人在进入时设置槽类 → 卡通下初始手牌槽显示为白色半透明经典槽。
      //   clearAllCardSlots 内含 cartoon 分支，会为双方手牌槽设置石板类。
      try { clearAllCardSlots(); } catch(e) { console.error('[进入游戏] 槽位重置错误:', e); }
      updateGameStatus(__t('st_ready'), 'st_ready');
      // 不主动开始游戏，等待用户点击开始游戏按钮
    }

    // ★ 队员组队状态检查：如果是队员（非队长），阻止操作并提示
    function blockIfTeammateMode() {
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate && !PBOnline.isLeader) {
        if (PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast('请等待队长选择游戏模式', 'warning');
        } else {
          alert('请等待队长选择游戏模式');
        }
        return true;
      }
      return false;
    }

    // ★ 人机练习子菜单切换
    function togglePracticeSubmenu(e) {
      e.stopPropagation();
      if (blockIfTeammateMode()) return;
      var submenu = document.getElementById('practice-submenu');
      var tutSubmenu = document.getElementById('tutorial-submenu');
      var onlineSubmenu = document.getElementById('online-submenu');
      if (tutSubmenu) tutSubmenu.classList.remove('open');
      if (onlineSubmenu) onlineSubmenu.classList.remove('open');
      if (submenu) submenu.classList.toggle('open');
    }

    // ★ 主页按钮左侧长条：子菜单开合时保持/收回延伸状态（2026-9-13）
    //   监听 3 个子菜单的 class 变化，把 .submenu-open 同步到对应主按钮
    //   覆盖所有开合路径（三个 toggle、点击外部关闭、游戏入口自动关闭等）
    (function () {
      var pairs = [
        ['btn-online', 'online-submenu'],
        ['btn-practice', 'practice-submenu'],
        ['btn-tutorial', 'tutorial-submenu']
      ];
      function pbSyncSubmenuBars() {
        for (var i = 0; i < pairs.length; i++) {
          var btn = document.querySelector('.' + pairs[i][0]);
          var sub = document.getElementById(pairs[i][1]);
          if (btn && sub) btn.classList.toggle('submenu-open', sub.classList.contains('open'));
        }
      }
      function pbWatchSubmenu(id) {
        var el = document.getElementById(id);
        if (el && typeof MutationObserver !== 'undefined') {
          new MutationObserver(pbSyncSubmenuBars).observe(el, { attributes: true, attributeFilter: ['class'] });
        }
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
          pbWatchSubmenu('online-submenu'); pbWatchSubmenu('practice-submenu'); pbWatchSubmenu('tutorial-submenu');
          pbSyncSubmenuBars();
        });
      } else {
        pbWatchSubmenu('online-submenu'); pbWatchSubmenu('practice-submenu'); pbWatchSubmenu('tutorial-submenu');
        pbSyncSubmenuBars();
      }
    })();

    // 单人1v1（双人模式）
    function startPracticeGame1v1() {
      if (blockIfTeammateMode()) return;
      window._forceNeutralBorder = false; // ★ 清除强制中立区线框标志（仅2v1模式需要）
      window.playerCountSetting = '2';
      localStorage.setItem('playerCountSetting', '2');
      startPracticeGame();
    }

    // 人机2v1（四人模式，2人组队对2AI）
    function startPracticeGame2v2() {
      // ★ 游客点击人机 2v1（2026-9-12）：仅弹出提示，不关闭子菜单/界面，不执行任何后续流程
      if (typeof pbIsLoggedIn === 'function' && !pbIsLoggedIn()) {
        window._forceNeutralBorder = false; // 清除 onclick 预置标志，避免污染后续人机1v1
        if (typeof PBOnline !== 'undefined' && PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast((typeof __t === 'function' ? __t('ag_register_guide') : '') || '请点击左上角名称，注册个人账号', 'warning');
        }
        return;
      }
      // ★ 注意：不使用 blockIfTeammateMode() 拦截，因为该函数需要队员能点击来发送重新加入请求
      // ★ 检查是否已组队
      if (typeof PBOnline !== 'undefined' && PBOnline && !PBOnline.hasTeammate) {
        // 关闭子菜单
        var submenu = document.getElementById('practice-submenu');
        if (submenu) submenu.classList.remove('open');
        if (PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast('请完成组队才能开始双人练习哦', 'warning');
        } else {
          alert('请完成组队才能开始双人练习哦');
        }
        return;
      }
      // 关闭子菜单
      var submenu2 = document.getElementById('practice-submenu');
      if (submenu2) submenu2.classList.remove('open');

      // ★ 队长/队员不同逻辑
      var _isLeader = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isLeader) || false;
      console.log('[人机2v1] isLeader:', _isLeader);
      if (_isLeader) {
        // 队长：发送邀请给队员，不直接进入游戏
        if (PBOnline.sendPractice2v2Invite) {
          PBOnline.sendPractice2v2Invite();
        }
        if (PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast('正在邀请队员加入人机2v1，等待确认...', 'info');
        }
      } else {
        // ★ 队员：发送重新加入请求给队长
        if (PBOnline.sendPractice2v2RejoinRequest) {
          PBOnline.sendPractice2v2RejoinRequest();
          if (PBOnline.showOnlineToast) {
            PBOnline.showOnlineToast('已通知队长重新发起2v2邀请，请等待...', 'info');
          }
        } else {
          if (PBOnline.showOnlineToast) {
            PBOnline.showOnlineToast('你是队员，请等待队长发起人机2v1邀请', 'warning');
          }
        }
      }
    }

    // ★ 四人模式练习：座位状态 [null, null]（seat 0=左, seat 1=右）
    var practiceSeats = [null, null];
    var practiceSeatMode = false; // 是否处于练习座位模式
    var _practiceMyPlayerId = null; // 本地玩家ID
    var _practiceMyIsLeader = false;
    var _practiceMySeatIndex = -1; // ★ 本地玩家所在的座位索引（0=左, 1=右），-1=未入座

    // 进入四人模式练习游戏界面
    function enterFourPlayerPractice(isLeader) {
      // ★ 强制显示中立区线框（仅2v1标签的练习模式）
      window._forceNeutralBorder = true;
      window.playerCountSetting = '4';
      localStorage.setItem('playerCountSetting', '4');
      startPracticeGame();
      // ★ 立即激活四人模式标志（后续进入 playing 阶段时回合线框函数需要它）
      // 正常 startGame() 会设，但队员重加入走 isReconnect 分支跳过了 startGame，
      // 所以必须在 enterFourPlayerPractice 这里就设好
      if (typeof GameState !== 'undefined' && GameState) {
        GameState.fourPlayerActive = true;
      }
      // ★ 初始化座位（每次进入都强制清空数据+刷新DOM）
      practiceSeatMode = true;
      practiceSeats = [null, null];
      _practiceMyIsLeader = isLeader;
      _practiceMyPlayerId = localStorage.getItem('pbp_player_id') || 'local';
      _practiceMySeatIndex = -1;
      // ★ 进入人机2v1模式时立即设置标志，确保选座阶段退出也能正确通知对方
      if (typeof PBOnline !== 'undefined' && PBOnline) {
        PBOnline.isPractice2v2Mode = true;
        PBOnline.isPracticeLeader = isLeader;
      }
      // ★ 立即应用2v2专用背景图（isPractice2v2Mode刚设为true，需重新applyCardFaceBg切换到经典2背景）
      if (typeof applyCardFaceBg === 'function') {
        applyCardFaceBg();
      }
      // 延迟再调用一次，确保DOM完全就绪后背景正确
      setTimeout(function() {
        if (typeof applyCardFaceBg === 'function') applyCardFaceBg();
      }, 200);
      // ★ 立即刷新DOM，清除残留的头像
      renderAllPracticeSeats();
      // 立即禁用开始按钮
      var startBtn = document.getElementById('start-game');
      if (startBtn) {
        startBtn.disabled = true;
        startBtn.style.opacity = '0.5';
        startBtn.style.cursor = 'not-allowed';
        // ★ 2026-9-2 FIX: 队员端直接隐藏按钮（队长控制开局，队员不需要）
        if (!isLeader) {
          startBtn.style.display = 'none';
        }
      }
      if (typeof updateGameStatus === 'function') {
        updateGameStatus(__t('st_select_seat'), 'st_select_seat');
      }
      // 延迟显示座位区并再次刷新DOM（确保DOM元素已就绪）
      setTimeout(function() {
        showPracticeSeats(true);
        renderAllPracticeSeats();
        updatePracticeStartButton();
        // ★ 通知队友自己已进入座位模式（发送自己的座位，让对方同步）
        syncPracticeSeatsToTeammate();
      }, 200);
    }

    // ★ 队长重新发送牌组和状态给重新加入的队员
    function resendPracticeDeckAndState() {
      console.log('[2v2同步] 队长重新发送牌组和状态');
      // 0. 清除队员座位的掉线状态
      if (typeof _practiceMySeatIndex !== 'undefined' && _practiceMySeatIndex >= 0) {
        var teammateSeat = 1 - _practiceMySeatIndex;
        if (practiceSeats[teammateSeat] && practiceSeats[teammateSeat].disconnected) {
          practiceSeats[teammateSeat].disconnected = false;
          renderPracticeSeat(teammateSeat);
          console.log('[2v2同步] 队员座位已恢复在线');
        }
      }
      // 1. 发送牌组
      if (_practiceDeckData && typeof PBOnline !== 'undefined' && PBOnline) {
        PBOnline.sendPracticeDeckSync(_practiceDeckData.playerDeck, _practiceDeckData.opponentDeck, _practiceDeckData.turnOrder, {
          callCardEnabled: GameState.callCardEnabled,
          isReconnect: true  // ★ 2026-8-31 FIX: 告诉队员跳过发牌动画，直接等 state sync
        });
        console.log('[2v2同步] 队长已重新发送牌组(isReconnect=true)');
      }
      // 2. 发送座位数据（恢复队员座位显示）— 使用增量格式
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeSeatSync) {
        // 发送队长的座位
        if (_practiceMySeatIndex >= 0 && practiceSeats[_practiceMySeatIndex]) {
          PBOnline.sendPracticeSeatSync({
            seatIndex: _practiceMySeatIndex,
            seatData: practiceSeats[_practiceMySeatIndex]
          });
        }
        // 发送队员的座位（如果有）
        var teammateSeat = 1 - _practiceMySeatIndex;
        if (teammateSeat >= 0 && practiceSeats[teammateSeat]) {
          PBOnline.sendPracticeSeatSync({
            seatIndex: teammateSeat,
            seatData: practiceSeats[teammateSeat]
          });
        }
        console.log('[2v2同步] 队长已发送座位数据');
      }
      // 3. 延迟发送状态同步（等队员处理完牌组并开始游戏）
      setTimeout(function() {
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeStateSync) {
          PBOnline.sendPracticeStateSync(collectPracticeState());
          console.log('[2v2同步] 队长已发送状态同步');
        }
      }, 3000);
      // 4. 再次发送状态同步作为保险
      setTimeout(function() {
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeStateSync) {
          PBOnline.sendPracticeStateSync(collectPracticeState());
          console.log('[2v2同步] 队长已发送状态同步(重试)');
        }
      }, 6000);
    }

    window.resendPracticeDeckAndState = resendPracticeDeckAndState;

    // 显示/隐藏座位区
    function showPracticeSeats(show) {
      var seatL = document.getElementById('practice-seat-left');
      var seatR = document.getElementById('practice-seat-right');
      if (seatL) seatL.style.display = show ? 'flex' : 'none';
      if (seatR) seatR.style.display = show ? 'flex' : 'none';
    }

    // ★ 游戏开始后：保持头像显示但禁用点击（只读模式）
    function setPracticeSeatsReadOnly(readOnly) {
      var seatL = document.getElementById('practice-seat-left');
      var seatR = document.getElementById('practice-seat-right');
      [seatL, seatR].forEach(function(seat) {
        if (!seat) return;
        if (readOnly) {
          seat.style.cursor = 'default';
          // ★ 2026-8-31 FIX: 掉线队友的座位保持可点击（用于重新邀请）
          // 检查：该座位是否是队友座位且已断开连接
          var seatIdx = (seat === seatL) ? 0 : 1;
          var _seatData = practiceSeats[seatIdx];
          var _isDisconnectedTeammate = _seatData && _seatData.disconnected && (seatIdx !== _practiceMySeatIndex);
          if (_isDisconnectedTeammate && _practiceMyIsLeader) {
            // 掉线队友 + 我是队长 → 保留 pointer events，让队长能点击重新邀请
            seat.style.pointerEvents = 'auto';
            seat.style.cursor = 'pointer';
          } else {
            seat.style.pointerEvents = 'none'; // 禁用点击
          }
          seat.classList.add('practice-seat-readonly');
        } else {
          seat.style.cursor = '';
          seat.style.pointerEvents = '';
          seat.classList.remove('practice-seat-readonly');
        }
      });
    }

    // ★ 2026-8-31 FIX: 创建覆盖队友功能牌区的大重新邀请覆盖层
    // 使用与 fp-active-box 完全相同的 bounding rect 计算逻辑，精确匹配回合线框大小
    function createReinviteOverlay(seatIdx, data) {
      var _wrapper = document.querySelector('.game-container-wrapper') || document.getElementById('game-container') || document.body;
      if (!_wrapper) return;

      // seatIdx → 对应的 3 个功能牌容器（暗牌 + 手牌 + 明牌）
      var containers = (seatIdx === 0)
        ? ['player-dark-cards', 'player-hand', 'player-revealed-cards']
        : ['player-dark-cards-right', 'player-hand-right', 'player-revealed-cards-right'];

      // 找到父容器（player-function-area 或 opponent-function-area）
      var parent = document.querySelector('.player-function-area') || _wrapper;
      if (!parent) return;

      var scale = (typeof currentGameScale !== 'undefined') ? currentGameScale : 1;
      if (!scale || scale < 0.01) scale = 1;
      var parentRect = parent.getBoundingClientRect();
      var minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
      var hasVisible = false;

      containers.forEach(function(id) {
        var el = document.getElementById(id);
        if (el && el.style.display !== 'none' && el.offsetParent !== null) {
          var rect = el.getBoundingClientRect();
          if (rect.width > 0 && rect.height > 0) {
            hasVisible = true;
            minLeft = Math.min(minLeft, rect.left);
            minTop = Math.min(minTop, rect.top);
            maxRight = Math.max(maxRight, rect.right);
            maxBottom = Math.max(maxBottom, rect.bottom);
          }
        }
      });

      if (!hasVisible) return; // 队友功能牌区还没渲染，跳过

      var padding = 6;
      var overlay = document.createElement('div');
      overlay.id = 'practice-reinvite-overlay-' + seatIdx;
      overlay.className = 'practice-reinvite-big-overlay';
      overlay.style.left = ((minLeft - parentRect.left) / scale - padding) + 'px';
      overlay.style.top = ((minTop - parentRect.top) / scale - padding) + 'px';
      overlay.style.width = ((maxRight - minLeft) / scale + padding * 2) + 'px';
      overlay.style.height = ((maxBottom - minTop) / scale + padding * 2) + 'px';
      overlay.style.zIndex = '80';

      overlay.innerHTML = `
        <div class="pro-big-box">
          <div class="pro-big-ring"></div>
          <div class="pro-big-icon">🔄</div>
          <div class="pro-big-text">点击重新邀请 ${escapeHtmlCr(data.nickname || '')}</div>
        </div>
      `;

      overlay.addEventListener('click', function() {
        // ★ 2026-9-18 诊断增强：点击必留痕
        console.log('[人机2v1] 重邀覆盖层被点击, seatIdx=', seatIdx);
        if (typeof reinviteDisconnectedTeammate === 'function') {
          reinviteDisconnectedTeammate(seatIdx);
        }
      });

      parent.appendChild(overlay);
    }

    // 渲染单个座位UI
    function renderPracticeSeat(seatIdx) {
      var seatEl = document.getElementById(seatIdx === 0 ? 'practice-seat-left' : 'practice-seat-right');
      if (!seatEl) return;
      var data = practiceSeats[seatIdx];
      var _overlayId = 'practice-reinvite-overlay-' + seatIdx;
      // ★ 覆盖层挂在 .player-function-area 里（createReinviteOverlay 的 parent），清除也要从那里找
      var _host = document.querySelector('.player-function-area') || document.querySelector('.game-container-wrapper') || document.body;
      var _existingOverlay = _host ? _host.querySelector('#' + _overlayId) : null;

      // 先清除之前的覆盖层（无论 canReinvite 与否）
      if (_existingOverlay) _existingOverlay.remove();

      if (!data) {
        seatEl.classList.remove('filled');
        seatEl.classList.remove('leader');
        seatEl.classList.remove('disconnected');
        seatEl.classList.remove('clickable-reinvite');
        seatEl.innerHTML = '<div class="practice-seat-plus">+</div>';
        return;
      }
      seatEl.classList.add('filled');
      // ★ 2026-9-2 FIX: 防御性检查——如果是自己的座位但被误标 disconnected（handleTeammateExitedPractice
      // 逻辑 bug 时会发生：_practiceMySeatIndex=-1 导致所有座位都被遍历标记），强制修正！
      var isMySeatIndex = (seatIdx === _practiceMySeatIndex);
      if (isMySeatIndex && data.disconnected) {
        console.warn('[renderPracticeSeat] 自己的座位被误标 disconnected，强制修正! seatIdx:', seatIdx);
        data.disconnected = false;
      }
      // ★ 掉线状态：灰色头像
      var isDisconnected = !!data.disconnected;
      if (isDisconnected) {
        seatEl.classList.add('disconnected');
      } else {
        seatEl.classList.remove('disconnected');
      }
      if (data.isLeader) {
        seatEl.classList.add('leader');
      } else {
        seatEl.classList.remove('leader');
      }
      // ★ 2026-8-31 FIX: 掉线队友的座位 → 显示覆盖整个功能牌区的大重新邀请覆盖层
      var isMySeat = (seatIdx === _practiceMySeatIndex);
      var canReinvite = isDisconnected && !isMySeat && !!data.id && _practiceMyIsLeader;
      if (canReinvite) {
        seatEl.classList.add('clickable-reinvite');
        seatEl.style.cursor = 'pointer';
        seatEl.style.pointerEvents = 'auto'; // 关键：游戏开始后 readonly 会把 pointerEvents 设为 none
        // 创建覆盖整个功能牌区的大覆盖层
        createReinviteOverlay(seatIdx, data);
      } else {
        seatEl.classList.remove('clickable-reinvite');
        seatEl.style.cursor = '';
        // 如果是 readonly 状态，保持 pointerEvents=none
        if (seatEl.classList.contains('practice-seat-readonly')) {
          seatEl.style.pointerEvents = 'none';
        } else {
          seatEl.style.pointerEvents = '';
        }
      }
      var avatar = data.avatar;
      var avatarHtml = '';
      if (avatar && avatar.startsWith('data:')) {
        avatarHtml = '<img class="practice-seat-avatar" src="' + avatar + '" alt="' + data.nickname + '" />';
      } else {
        avatarHtml = '<div class="practice-seat-avatar-emoji">' + avatar + '</div>';
      }
      var namePrefix = data.isLeader ? '👑 ' : '';
      var nameSuffix = isDisconnected ? ' (掉线)' : '';
      seatEl.innerHTML = avatarHtml + '<div class="practice-seat-name">' + namePrefix + data.nickname + nameSuffix + '</div>';
    }

    // 渲染所有座位
    function renderAllPracticeSeats() {
      renderPracticeSeat(0);
      renderPracticeSeat(1);
    }

    // 检查是否所有座位都已入座（掉线的不算）
    function allSeatsFilled() {
      return practiceSeats[0] !== null && !practiceSeats[0].disconnected
          && practiceSeats[1] !== null && !practiceSeats[1].disconnected;
    }

    // 更新开始游戏按钮状态
    function updatePracticeStartButton() {
      if (!practiceSeatMode) return;
      var startBtn = document.getElementById('start-game');
      if (!startBtn) return;
      if (allSeatsFilled()) {
        if (_practiceMyIsLeader) {
          // 队长：可以点击开始游戏
          startBtn.disabled = false;
          startBtn.style.opacity = '1';
          startBtn.style.cursor = 'pointer';
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_both_ready_leader_start'), 'st_both_ready_leader_start');
          }
        } else {
          // 队员：不能点击，等待队长开始
          startBtn.disabled = true;
          startBtn.style.opacity = '0.5';
          startBtn.style.cursor = 'not-allowed';
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_both_ready_wait'), 'st_both_ready_wait');
          }
          // ★ 队员：主动请求牌组数据（防止错过队长的推送）
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeRequestDeck) {
            window._practiceDeckReceived = false;
            PBOnline.sendPracticeRequestDeck();
            console.log('[2v2同步] 队员已发起牌组请求');
          }
        }
      } else {
        startBtn.disabled = true;
        startBtn.style.opacity = '0.5';
        startBtn.style.cursor = 'not-allowed';
        if (typeof updateGameStatus === 'function') {
          updateGameStatus(__t('st_both_seated_required'), 'st_both_seated_required');
        }
      }
    }

    // 同步座位状态给队友（只发送自己的座位，不覆盖对方）
    // ★ forceClearSeatIndex: 右键离开时传入，保证发送有效的 seatIndex + null，
    //   避免 _practiceMySeatIndex=-1 导致队友端 idx>=0 校验挡掉
    function syncPracticeSeatsToTeammate(forceClearSeatIndex) {
      console.log('[座位同步] syncPracticeSeatsToTeammate 调用, mySeatIndex:', _practiceMySeatIndex, 'forceClearSeatIndex:', forceClearSeatIndex);
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeSeatSync) {
        // ★ 只发送自己的座位信息，避免覆盖对方的座位
        var mySeatData = null;
        var sendSeatIndex = _practiceMySeatIndex;
        if (_practiceMySeatIndex >= 0 && practiceSeats[_practiceMySeatIndex]) {
          // 正常入座/切换：发送当前座位数据
          mySeatData = practiceSeats[_practiceMySeatIndex];
        } else if (typeof forceClearSeatIndex === 'number' && forceClearSeatIndex >= 0 && forceClearSeatIndex < 2) {
          // 右键离开：发送指定 seatIndex 的清空信号 (seatData=null)
          sendSeatIndex = forceClearSeatIndex;
          mySeatData = null;
        } else {
          // 不在任何座位上：不发（避免发送 seatIndex=-1 被队友端忽略）
          console.log('[座位同步] 不在任何座位上，跳过发送');
          return;
        }
        console.log('[座位同步] 发送 seatIndex:', sendSeatIndex, 'seatData:', mySeatData ? mySeatData.nickname : 'null');
        PBOnline.sendPracticeSeatSync({
          seatIndex: sendSeatIndex,
          seatData: mySeatData
        });
      } else {
        console.log('[座位同步] PBOnline.sendPracticeSeatSync 不可用, PBOnline=', typeof PBOnline);
      }
    }

    // 接收队友的座位同步（合并，不覆盖自己的座位）
    function handlePracticeSeatSync(data) {
      console.log('[座位同步] handlePracticeSeatSync 收到:', JSON.stringify(data), 'practiceSeatMode=', practiceSeatMode);
      // ★ 始终更新数据（不管 practiceSeatMode），防止消息丢失
      if (data && typeof data.seatIndex !== 'undefined') {
        // 新格式：增量同步 { seatIndex, seatData }
        var idx = data.seatIndex;
        if (idx >= 0 && idx < 2) {
          var incomingId = data.seatData && data.seatData.id;
          var myId = _practiceMyPlayerId || localStorage.getItem('pbp_player_id') || 'local';
          // ★ 2026-8-31 FIX: 重加入场景，_practiceMySeatIndex=-1
          // 收到属于自己的数据时，自动锁定座位 —— 但这一次不能跳过写入！
          var justLockedMySeat = false;
          if (incomingId && incomingId === myId && _practiceMySeatIndex === -1) {
            _practiceMySeatIndex = idx;
            justLockedMySeat = true;
            console.log('[座位同步] 自动确定我的座位 seatIndex=' + idx);
          }
          // 只有"之前就知道自己坐哪"时，才跳过覆盖（防止自己选座后被队友重复消息覆盖）
          if (!justLockedMySeat && idx === _practiceMySeatIndex && _practiceMySeatIndex >= 0) {
            console.log('[座位同步] 忽略对自己座位的覆盖');
          } else {
            practiceSeats[idx] = data.seatData || null;
            console.log('[座位同步] 已更新座位', idx, '=', data.seatData ? data.seatData.nickname : 'null');
          }
        }
      } else if (Array.isArray(data)) {
        // 兼容旧格式：全量数组
        for (var i = 0; i < 2; i++) {
          var arrId = data[i] && data[i].id;
          var myId2 = _practiceMyPlayerId || localStorage.getItem('pbp_player_id') || 'local';
          if (arrId && arrId === myId2 && _practiceMySeatIndex === -1) {
            _practiceMySeatIndex = i;
          }
          if (i !== _practiceMySeatIndex) {
            practiceSeats[i] = data[i] || null;
          }
        }
      }
      // 始终刷新DOM和按钮（即使 practiceSeatMode 为 false，也要更新数据）
      if (typeof renderAllPracticeSeats === 'function') renderAllPracticeSeats();
      if (practiceSeatMode && typeof updatePracticeStartButton === 'function') {
        updatePracticeStartButton();
      }
      console.log('[座位同步] 已更新本地座位:', JSON.stringify(practiceSeats));
    }

    // ========================================================================
    // 【人机2v1游戏同步】队长生成牌组→发送给队员→双方同时开始游戏
    // ========================================================================
    var _practiceDeckData = null; // 存储收到的牌组数据（队员端）

    // 队长：生成牌组并发送给队员
    function generateAndSyncDeck(_restartFlag) {
      // 2026-9-2: restartFlag=true → 这是队长重新开始游戏，队员端需要重置 _practiceDeckReceived

      // 生成完整牌组
      var fullDeck = [];
      for (var s = 0; s < suits.length; s++) {
        for (var r = 0; r < ranks.length; r++) {
          fullDeck.push({
            id: Math.random().toString(36).substr(2, 9),
            suit: suits[s],
            rank: ranks[r],
            value: values[ranks[r]],
            display: ranks[r]
          });
        }
      }
      shuffleArray(fullDeck);
      var playerDeck = fullDeck.slice(0, 26);
      var opponentDeck = fullDeck.slice(26);
      // 存储到全局，供createCards使用
      _practiceDeckData = { playerDeck: playerDeck, opponentDeck: opponentDeck };

      // ★ 生成四人模式回合顺序（2v1模式：2个AI位置由同一个AI控制）
      //   ★★★ 子玩家映射：AI=0(AI左)和2(AI右)，玩家=1(玩家A左)和3(玩家B右)
      //   AI先手：0(AI左) → 1(玩家A) → 3(玩家B) → 2(AI右) = [0,1,3,2]
      //   玩家先手：1(玩家A) → 0(AI左) → 2(AI右) → 3(玩家B) = [1,0,2,3]
      var turnOrder;
      if (GameState.firstPlayerSetting === 'opponent') {
        turnOrder = [0, 1, 3, 2];
      } else if (GameState.firstPlayerSetting === 'player') {
        turnOrder = [1, 0, 2, 3];
      } else {
        // random：队长随机选择，发送给队员保持一致
        turnOrder = Math.random() < 0.5 ? [0, 1, 3, 2] : [1, 0, 2, 3];
      }
      _practiceDeckData.turnOrder = turnOrder;

      // 发送给队员（含回合顺序）
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendPracticeDeckSync) {
        var _deckOpts = { callCardEnabled: GameState.callCardEnabled };
        if (_restartFlag) _deckOpts.restart = true;
        PBOnline.sendPracticeDeckSync(playerDeck, opponentDeck, turnOrder, _deckOpts);
        if (typeof PBOnline.showOnlineToast === 'function') {
          PBOnline.showOnlineToast('已发送牌组给队员', 'success');
        }
        if (typeof updateGameStatus === 'function') updateGameStatus(__t('st_game_starting'), 'st_game_starting');
        // ★ 队长延迟重发牌组3次（确保队员收到）
        // ★ 2026-9-2 FIX: 必须加 addTimer + isGameInterrupted guard！
        //   上一局残留的重试会携带 restart=true，队员端收到后会重置 _practiceDeckReceived=false
        //   → 绕过防重复检查 → 再次 startGame → 重复发牌！
        var _retryDeck = function(delay, count) {
          var _t = setTimeout(function() {
            if (GameState.isGameInterrupted) return;
            if (PBOnline && PBOnline.sendPracticeDeckSync && _practiceDeckData) {
              var _retryOpts = { callCardEnabled: GameState.callCardEnabled };
              if (_restartFlag) _retryOpts.restart = true;
              PBOnline.sendPracticeDeckSync(_practiceDeckData.playerDeck, _practiceDeckData.opponentDeck, _practiceDeckData.turnOrder, _retryOpts);
              console.log('[2v2同步] 队长第' + count + '次重发牌组');
            }
          }, delay);
          addTimer(_t); // ★ 关键：让 interruptGame 能清掉这个定时器！
        };
        _retryDeck(1000, 1);
        _retryDeck(3000, 2);
        _retryDeck(5000, 3);
      } else {
        if (typeof updateGameStatus === 'function') updateGameStatus(__t('st_deck_send_fail_single'), 'st_deck_send_fail_single');
      }
      // 队长开始游戏
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();
      startGame();
    }

    // 队员：收到队长发来的牌组数据，开始游戏
    function handlePracticeDeckSync(data) {
      try {
        // ★ 2026-9-2 FIX: restart=true 只有在 gamePhase !== 'playing' 时才处理！
        //   延迟到达的旧 restart 消息会重置 _practiceDeckReceived → 绕过防重复 → 重复发牌！
        //   新局重开时 gamePhase='ended'（还没进入 playing），此时 restart=true 才应重置标志
        //   新局已在 playing 时到达的 restart=true 一定是旧消息 → 丢弃
        if (data.restart && GameState.gamePhase !== 'playing') {
          console.log('[练习同步] 收到 restart=true，重置 _practiceDeckReceived（gamePhase=' + GameState.gamePhase + '）');
          window._practiceDeckReceived = false;
        } else if (data.restart) {
          console.log('[练习同步] 丢弃旧 restart 消息（gamePhase=' + GameState.gamePhase + '，新局已在进行中）');
        }
        
        // ★ 防止重复处理（队长会重发多次）
        if (window._practiceDeckReceived) {
          console.log('[练习同步] 牌组已处理过，忽略重复消息');
          return;
        }
        // ★ 标记已收到牌组，停止重试
        window._practiceDeckReceived = true;
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.stopDeckRequest) {
          PBOnline.stopDeckRequest();
        }
        
        // ★ 直接设为2v2模式（邀请已经明确是2v2，请保留原有单人练习入口）
        if (typeof PBOnline !== 'undefined' && PBOnline) {
          PBOnline.isPractice2v2Mode = true;
          PBOnline.isPracticeLeader = false;
        }
        
        // ★ 同步队长的叫牌设置，确保双方一致
        if (typeof data.callCardEnabled !== 'undefined') {
          if (typeof setCallCard === 'function') {
            setCallCard(data.callCardEnabled);
          } else {
            GameState.callCardEnabled = data.callCardEnabled;
          }
          console.log('[2v2同步] 已同步叫牌设置: callCardEnabled =', data.callCardEnabled);
        }
        
        // 2v2模式：四人模式
        window.playerCountSetting = '4';
        localStorage.setItem('playerCountSetting', '4');

        // ★ 2026-8-31 FIX: isReconnect=true → 队员重加入游戏，跳过发牌动画
        // 直接设置牌组数据，等后续 state sync 同步完整游戏状态
        if (data.isReconnect) {
          console.log('[2v2同步] 重连模式：跳过 startGame，等待 state sync');
          // 保存牌组到 _practiceDeckData（createCards 里会用到）
          _practiceDeckData = {
            playerDeck: data.playerDeck,
            opponentDeck: data.opponentDeck,
            turnOrder: data.turnOrder
          };
          // 准备 UI 但不开始游戏
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.showOnlineToast) {
            PBOnline.showOnlineToast('正在恢复游戏状态...', 'info');
          }
          if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(true);
          practiceSeatMode = false;
          return;
        }

        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast('收到队长牌组数据，开始人机2v1！', 'success');
        }
        if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(true);
        practiceSeatMode = false;
        // ★ 2026-9-2: 队员端隐藏开始/重新开始按钮（队长控制开局，队员只玩）
        if (GameElements.ui.startBtn) GameElements.ui.startBtn.style.display = 'none';
        
        // 开始游戏
        playGameStartMusic();
        if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
        if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
        if (typeof generateMeteors === 'function') generateMeteors();
        startGame();
      } catch(e) {
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.showOnlineToast) {
          PBOnline.showOnlineToast('开始游戏失败: ' + e.message, 'error');
        }
      }
    }

    // 修改createCards：练习模式使用同步牌组
    var _origCreateCards = createCards;
    createCards = function() {
      // 练习模式（2v2）：使用同步的牌组数据
      var _is2v2 = (_practiceDeckData && typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode);
      if (_is2v2) {
        GameState.playerDeck = _practiceDeckData.playerDeck.slice();
        GameState.opponentDeck = _practiceDeckData.opponentDeck.slice();
        console.log('[练习同步] 使用同步牌组数据, playerDeck:', GameState.playerDeck.length, 'opponentDeck:', GameState.opponentDeck.length);
        return;
      }
      // 非练习模式：清除残留的练习数据
      _practiceDeckData = null;
      _origCreateCards.call(this);
    };

    // 处理队员发来的玩家出牌
    function handlePracticePlayerMove(data) {
      console.log('[练习同步] 收到对方玩家出牌:', JSON.stringify(data.decision));
      // ★ 两端都只放动画 + 改路牌位置，不 finalizePlacement：
      //   - 队员端/队长端都不在这里调 confirmCardPlacement / finalizePlacement
      //   - 等出牌方（队员端）自己 finalizePlacement 后发 practice_state_sync
      //   - 队长端收到队员 sync 后 safeSwitchTurn + 发权威 sync
      // ★ 设置动画进行中标记，防止匹配光环/匹配操作在 updateUI 重新渲染时丢失
      var _isPractice = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode);
      if (_isPractice) {
        if (PBOnline.setOpponentAnimationInProgress) PBOnline.setOpponentAnimationInProgress(true);
      }
      CardPlayExecutor.executeCardPlay('player', data.decision, {
        skipMatchCheck: true,
        skipConfirmPlacement: true, // ★ 两端都 skip，等出牌方 finalizePlacement 发 sync
        skipCallCard: true,
        onAnimationEnd: function(card, isField, roadIndex) {
          // ★ 清除动画进行中标记
          if (_isPractice) {
            if (PBOnline.setOpponentAnimationInProgress) PBOnline.setOpponentAnimationInProgress(false);
          }
          GameState.cardPlayedThisTurn = false;
          // ★ 检查是否有待处理的叫牌提示（动画期间收到叫牌消息时暂存）
          if (_isPractice) {
            if (PBOnline.checkPendingCallCardPrompt) PBOnline.checkPendingCallCardPrompt();
          }
          // ★ 处理暂存的匹配事件（光环/悬停/匹配操作），在 updateUI 之后执行确保卡牌已在 DOM 中
          if (_isPractice) {
            if (PBOnline.processPendingMatchEvents) PBOnline.processPendingMatchEvents();
          }
        }
      });
    }

    // 处理队长发来的AI出牌
    function handlePracticeAIMove(data) {
      console.log('[练习同步] 收到AI出牌:', JSON.stringify(data.decision));
      var _isPractice = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode);
      if (data.decision.action === 'stop') {
        // AI终止出牌
        // ★ 人机2v1：AI=0(idx0)或2(idx1)
        var aiIdx = data.subTurn === 0 ? 0 : 1;
        GameState.fourPlayerAIStopped[aiIdx] = true;
        var stopName = data.subName || 'AI';
        updateGameStatus(stopName + '已终止出牌！');
        if (typeof addTurnRecord === 'function') {
          addTurnRecord('终止出牌', stopName + '终止出牌', 'opponent');
        }
        // ★ 不推进回合，等待队长的全状态同步
        return;
      }
      // 在本地执行AI出牌 - 只播放动画和拼点判定
      // 匹配评估和回合推进由队长端处理，通过全状态同步更新
      // ★ skipCallCard=true：AI出牌不触发叫牌（叫牌仅限人类玩家）
      // ★ 设置动画进行中标记，防止匹配光环/匹配操作在 updateUI 重新渲染时丢失
      if (_isPractice) {
        if (PBOnline.setOpponentAnimationInProgress) PBOnline.setOpponentAnimationInProgress(true);
      }
      CardPlayExecutor.executeCardPlay('opponent', data.decision, {
        skipMatchCheck: true,
        skipConfirmPlacement: true, // ★ 2026-9-2: FIX! 队员端绝对不能调 confirmCardPlacement → checkRoadResult
                                    //   队长 AI 打出状态期间 opponentField 有 AI 牌，match 完成后才移走。
                                    //   队员端如果在 executeCardPlay 内部自动调 confirmCardPlacement → checkRoadResult，
                                    //   就会用"AI 打出状态"的 opponentField 算拼点 → 看到错误结果！
                                    //   必须等队长 finalizePlacement 后 collectPracticeState 同步正确的 playerWins。
        skipCallCard: true,
        onAnimationEnd: async function(card, isField, roadIndex) {
          // ★ 清除动画进行中标记
          if (_isPractice) {
            if (PBOnline.setOpponentAnimationInProgress) PBOnline.setOpponentAnimationInProgress(false);
          }
          // ★ 队员端不独立执行拼点判定！
          //   由队长 finalizePlacement 后 collectPracticeState 同步 playerWins/opponentWins，
          //   handlePracticeStateSync → updateUI 自然渲染正确结果。
          GameState.cardPlayedThisTurn = false;
          // ★ 不调用 startOpponentPlayDelay()，等待全状态同步
          // ★ 处理暂存的匹配事件（光环/悬停/匹配操作）
          if (_isPractice) {
            if (PBOnline.processPendingMatchEvents) PBOnline.processPendingMatchEvents();
          }
        }
      });
    }

    // 处理对方发来的回合推进信号
    function handlePracticeTurnAdvance(data) {
      // ★ 人机2v1模式没有真实队友，忽略所有收到的 turn_advance（防止 server.js 回环覆盖本地状态）
      var _isRealTeammateMode = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      if (!_isRealTeammateMode) {
        console.log('[handlePracticeTurnAdvance] 人机2v1无真实队友，忽略收到的 turn_advance');
        return;
      }
      console.log('[2v2同步] 收到回合推进信号:', JSON.stringify(data));
      // 发送方已自行推进，接收方同步状态即可
      if (GameState.isGameInterrupted) return;
      if (GameState.gamePhase !== 'playing') return;

      // 清理匹配状态
      clearRoadMatchHighlights();
      clearNeutralAuras();
      hidePlayableCardsHint();

      // ★ 清理叫牌状态（防止叫牌状态残留导致卡牌一直显示背面）
      if (typeof GameState !== 'undefined' && GameState.pendingCallCard) {
        GameState.pendingCallCard = null;
        // ★ 清理叫牌提示框及其事件监听器
        var _ccp2 = document.getElementById('call-card-prompt');
        if (_ccp2) { if (_ccp2._cleanup) _ccp2._cleanup(); else _ccp2.remove(); }
      }
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
        if (PBOnline.clearOpponentCallCardState) PBOnline.clearOpponentCallCardState();
      }

      // 同步回合状态到队长端
      GameState.fourPlayerTurnIndex = data.turnIndex;
      GameState.fourPlayerSubTurn = data.subTurn;
      // ★ 2026-9-1: 同步 turnNumber（否则接收端 turnNumber 落后，
      //   之后的 (turnNumber, turnIndex) 字典序新鲜度校验会误判）
      if (typeof data.turnNumber === 'number' && data.turnNumber > GameState.turnNumber) {
        GameState.turnNumber = data.turnNumber;
      }
      // ★ 人机2v1：AI=0和2，玩家=1和3
      var isAI = (data.subTurn === 0 || data.subTurn === 2);
      GameState.currentTurn = isAI ? 'opponent' : 'player';
      GameState.cardPlayedThisTurn = false;

      var subName = data.subName || getCurrentSubPlayerName();
      var sideText = isAI ? ((typeof __t==='function')?__t('st_opp_turn'):'对方回合') : ((typeof __t==='function')?__t('st_my_turn'):'我方回合');
      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(sideText + ' [' + subName + ']');

      // ★ 刷新UI（叫牌状态清理后需要重新渲染卡牌正面）
      // ★ 2026-9-1 FIX: 本地 match 执行中跳过 updateUI——回合推进信号可能在队员端
      //   仍在播放匹配光环（1.5s 窗口）时到达，updateUI 重建 DOM 会冲掉光环。
      //   回合状态数据（上方赋值）与回合线框（updateTurnDisplay/Indicator）不受影响。
      if (typeof updateUI === 'function' && !(typeof GameState !== 'undefined' && GameState.localMatchInProgress)) {
        updateUI();
      }

      // 更新终止按钮
      if (isAI) {
        GameElements.ui.stopBtn.disabled = true;
        GameElements.ui.stopBtn.style.opacity = '0.5';
        GameElements.ui.stopBtn.style.cursor = 'not-allowed';
      } else {
        GameElements.ui.stopBtn.disabled = false;
        GameElements.ui.stopBtn.style.opacity = '1';
        GameElements.ui.stopBtn.style.cursor = 'pointer';
      }

      // 高亮当前活跃区域
      fourPlayerHighlightActiveArea();

      // 如果是AI回合
      if (isAI) {
        // ★ 队长端：负责触发AI出牌（队员端跳过，等待队长同步）
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
          console.log('[2v2同步] 队长端：收到回合推进，触发AI出牌');
          // 检查AI是否能出牌
          // ★ 正确阵营划分：AI子玩家(0,2)→'opponent'，人类子玩家(1,3)→'player'
          var _aiSideSync = (data.subTurn === 0 || data.subTurn === 2) ? 'opponent' : 'player';
          if (!canFourPlayerSubPlay(_aiSideSync)) {
            // ★ 人机2v1：AI=0(idx0)或2(idx1)
            var aiIdx2 = (data.subTurn === 0) ? 0 : 1;
            GameState.fourPlayerAIStopped[aiIdx2] = true;
            updateGameStatus(subName + '无法出牌，已终止！');
            if (typeof addTurnRecord === 'function') {
              addTurnRecord('终止出牌', subName + '无法出牌，终止出牌', 'opponent');
            }
            var timer = setTimeout(function() {
              if (GameState.isGameInterrupted) return;
              if (GameState.gamePhase !== 'playing') return;
              fourPlayerAdvanceTurn();
            }, 500);
            if (typeof addTimer === 'function') addTimer(timer);
          } else {
            var timer2 = setTimeout(function() {
              if (GameState.isGameInterrupted) return;
              if (GameState.gamePhase !== 'playing') return;
              // ★ 2026-9-2 FIX: 发牌阶段绝对不能触发 AI 出牌！
              if (GameState.isDealingCards) return;
              opponentPlayCard();
            }, AIConfig.strategy.thinkDelay);
            if (typeof addTimer === 'function') addTimer(timer2);
          }
        } else {
          console.log('[2v2同步] 队员端：AI回合，等待队长同步AI出牌');
        }
      }
    }

    // 处理对方发来的终止出牌信号
    function handlePracticeStopPlaying(data) {
      console.log('[2v2同步] 收到终止出牌信号:', JSON.stringify(data));
      var sub = data.subTurn;
      if (data.side === 'opponent') {
        // ★ 人机2v1：AI=0(idx0)或2(idx1)
        var aiIdx = sub === 0 ? 0 : 1;
        GameState.fourPlayerAIStopped[aiIdx] = true;
      } else {
        // ★ 人机2v1：玩家=1(idx0)或3(idx1)
        var pIdx = sub === 1 ? 0 : 1;
        GameState.fourPlayerPlayerStopped[pIdx] = true;
      }
      // ★★ 2026-9-19 FIX（用户实测·全部终止不结算）：此前只标记不推进——若这是最后一家
      //   终止（如队员最后无法出牌），四方 allStopped 判定永无人触发，对局永久卡在
      //   "等待已终止玩家出牌"。现补：标记后检查四人是否已全部终止，是则由队长端触发
      //   战略结算；ended 随 sync 广播（gamePhase 已入 collectPracticeState），
      //   队员端经 handlePracticeStateSync 的结束同步一同弹出结算。
      if (GameState.fourPlayerActive && GameState.gamePhase === 'playing') {
        var _allAIStop = GameState.fourPlayerAIStopped[0] && GameState.fourPlayerAIStopped[1];
        var _allPStop = GameState.fourPlayerPlayerStopped[0] && GameState.fourPlayerPlayerStopped[1];
        if (_allAIStop && _allPStop) {
          console.log('%c[人机2v1] ⏹ 收到终止信号后四方已全部终止，触发战略结算', 'color:#0ff;background:#800;font-weight:bold');
          if (typeof addTurnRecord === 'function') {
            addTurnRecord('终止出牌', '双方均无法出牌，终止出牌');
          }
          if (typeof checkWinCondition === 'function') {
            try { checkWinCondition(); } catch (e) { console.error('[人机2v1] 终止结算触发失败:', e); }
          }
          // 结算后把 ended 状态广播给队友
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && PBOnline.isPracticeLeader) {
            if (typeof collectPracticeState === 'function') {
              PBOnline.sendPracticeStateSync(collectPracticeState());
            }
          }
        }
      }
      // ★ 未全部终止时不推进回合，等待队长的全状态同步
    }

    // 处理对方game_ready信号
    function handlePracticeGameReady() {
      console.log('[2v2同步] 对方已准备就绪');
    }

    // ★ 收集当前游戏状态（用于全状态同步）
    function collectPracticeState() {
      // ★ 安全克隆辅助函数：处理 null/undefined 卡牌，返回 null 而非空对象
      var safeCloneCard = function(c) { return (c && typeof c === 'object') ? Object.assign({}, c) : null; };
      var safeCloneCardArr = function(arr) { return arr.map(safeCloneCard); };
      var safeCloneNestedArr = function(arr) { return arr.map(function(s) { return s.map(safeCloneCard); }); };

      // ★ 2026-9-2 FIX: 判断是否真的处于"打出状态"——三重守卫
      //   ① localCardPlayPending=true（本地端标记）
      //   ② 当前回合是"自己"的回合（subTurn === 我的座位对应的 subTurn）
      //      → 关键！队长端收到队员出牌时 handlePracticePlayerMove 用 playerType='player'
      //        执行动画 → 也会误设 localCardPlayPending=true！
      //        但此时 subTurn=3（队员回合）≠ 自己的 subTurn=1 → 不上报！
      //   ③ 只有同时满足①②才上报 pendingCardRoadIndex >=0
      var _mySubTurn = -1;
      if (typeof _practiceMySeatIndex !== 'undefined' && _practiceMySeatIndex >= 0) {
        _mySubTurn = _practiceMySeatIndex === 0 ? 1 : 3; // 左座=玩家A=subTurn 1，右座=玩家B=subTurn 3
      }
      var _isMySubTurn = (_mySubTurn > 0 && GameState.fourPlayerSubTurn === _mySubTurn);
      var _isRealPlayState = (typeof GameState !== 'undefined'
        && GameState.localCardPlayPending === true
        && _isMySubTurn);

      var _state = {
        playerField: GameState.playerField.map(safeCloneCard),
        opponentField: GameState.opponentField.map(safeCloneCard),
        playerStack: safeCloneNestedArr(GameState.playerStack),
        opponentStack: safeCloneNestedArr(GameState.opponentStack),
        playerNeutralCards: safeCloneNestedArr(GameState.playerNeutralCards),
        opponentNeutralCards: safeCloneNestedArr(GameState.opponentNeutralCards),
        playerWins: GameState.playerWins.slice(),
        opponentWins: GameState.opponentWins.slice(),
        // ★ 完整卡牌数据（重新加入时需要还原）
        playerDeck: safeCloneCardArr(GameState.playerDeck),
        opponentDeck: safeCloneCardArr(GameState.opponentDeck),
        playerHand: safeCloneCardArr(GameState.playerHand),
        opponentHand: safeCloneCardArr(GameState.opponentHand),
        playerRevealedCards: safeCloneCardArr(GameState.playerRevealedCards),
        opponentRevealedCards: safeCloneCardArr(GameState.opponentRevealedCards),
        playerDarkCards: safeCloneCardArr(GameState.playerDarkCards),
        opponentDarkCards: safeCloneCardArr(GameState.opponentDarkCards),
        fourPlayerTurnIndex: GameState.fourPlayerTurnIndex,
        fourPlayerSubTurn: GameState.fourPlayerSubTurn,
        fourPlayerTurnOrder: GameState.fourPlayerTurnOrder.slice(),
        fourPlayerAIStopped: GameState.fourPlayerAIStopped.slice(),
        fourPlayerPlayerStopped: GameState.fourPlayerPlayerStopped.slice(),
        currentTurn: GameState.currentTurn,
        turnNumber: GameState.turnNumber,
        cardPlayedThisTurn: GameState.cardPlayedThisTurn,
        playerStoppedPlaying: GameState.playerStoppedPlaying,
        opponentStoppedPlaying: GameState.opponentStoppedPlaying,
        gamePhase: GameState.gamePhase,
        // ★ 叫牌相关状态同步（确保双方计分一致）
        callCardEnabled: GameState.callCardEnabled,
        callCardSuccessCount: GameState.callCardSuccessCount,
        callCardBonusScore: GameState.callCardBonusScore,
        callCardCardTypeBonus: GameState.callCardCardTypeBonus,
        callCardHasSuccess: GameState.callCardHasSuccess,
        // ★★★ 2026-9-1: 打出 vs 放置 状态同步，让队员端 UI 与队长端同步显示
        //   pendingCardRoadIndex: -1 = 队长端已完成放置（process 中无 match 链）
        //                       >=0 = 队长端处于"打出了 X 路牌"的待 match 状态
        //   ★ 2026-9-2 FIX: 必须同时检查 localCardPlayPending！
        //   只有 localCardPlayPending=true 才说明真的处于"打出状态"，
        //   否则即使 localCardPlayRoadIndex 残留旧值也应该上报 -1。
        //   match 执行中 finalizePlacement 发 sync 时 localCardPlayRoadIndex 可能还没清
        //   （confirmCardPlacement 刚清了 localCardPlayPending=false 但 localCardPlayRoadIndex=-1 已清），
        //   双重保险确保不会误报。
        // ★ 注意：_isRealPlayState 已在函数开头声明（L37643），此处直接引用
        pendingCardRoadIndex: (_isRealPlayState && typeof GameState.localCardPlayRoadIndex === 'number') ? GameState.localCardPlayRoadIndex : -1,
        // ★ 2026-9-1: 当前是否处于 match 执行链中（用于 UI 显示"正在拼点中..."）
        matchChainActive: (typeof GameState !== 'undefined' && GameState.localMatchInProgress === true)
      };
      console.log('%c[SYNC-SEND] collectPracticeState playerField=' +
        JSON.stringify(_state.playerField.map(function(c){return c?c.display:null})) +
        ' opponentField=' + JSON.stringify(_state.opponentField.map(function(c){return c?c.display:null})) +
        ' idx=' + _state.fourPlayerTurnIndex + ' sub=' + _state.fourPlayerSubTurn,
        'color:#000;background:#0ff;font-weight:bold');
      return _state;
    }

    // ★ 延迟补应用 watcher（2026-9-1 新增）
    //   背景：handlePracticeStateSync 在本地 match 执行期间（localMatchInProgress=true）
    //   必须跳过路牌/中立区数据覆盖，否则会打断队员端正在播放的匹配动画。
    //   但"跳过"绝不等于"丢弃"——被跳过的 sync 暂存到 GameState._deferredPracticeSync，
    //   由本 watcher 等本地 match 结束后（localMatchInProgress 回落 false）自动补应用。
    //   补应用时依旧走新鲜度校验，若期间已应用过更新的 sync，旧的会被自动判定过期丢弃。
    function ensureDeferredSyncWatcher() {
      if (GameState._deferredSyncTimer) return;
      GameState._deferredSyncTimer = setInterval(function () {
        // 本地仍在播 match 动画 → 继续等
        if (GameState.localMatchInProgress) return;
        var pending = GameState._deferredPracticeSync;
        if (!pending) {
          // 队列已排空 → 停掉 watcher，避免空转
          clearInterval(GameState._deferredSyncTimer);
          GameState._deferredSyncTimer = null;
          return;
        }
        GameState._deferredPracticeSync = null;
        console.log('[2v2同步] 本地 match 已结束 → 补应用暂存的 sync');
        try {
          if (typeof handlePracticeStateSync === 'function') handlePracticeStateSync(pending);
        } catch (e) {
          console.warn('[2v2同步] 延迟补应用 sync 失败:', e);
        }
      }, 120);
    }

    // ★ 应用全状态同步（队员端接收队长的完整游戏状态）
    function handlePracticeStateSync(state) {
      // ★ 人机2v1模式没有真实队友，忽略所有收到的 sync（防止 server.js 回环覆盖本地状态）
      var _isRealTeammateMode = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.hasTeammate);
      if (!_isRealTeammateMode) {
        return;
      }
      // ★ 新鲜度校验：丢弃过期 sync
      // ★★ 2026-9-1 根因修复：turnIndex 是 0→3→0 循环回绕的！单纯比较 turnIndex 数值
      //   在回绕后完全失效，产生两种互相破坏的故障（2026-9-1 实测 Run5/6 复现）：
      //   ① 队长已推进到新轮 idx0，收到上一轮 idx3 的旧 sync → 3<0 不成立 → 被当"新状态"应用
      //      → 队长状态回退 → AI 重复出牌、出现 0.1s 假回合；
      //   ② 队员停在上轮 idx3，收到队长新轮 idx0 的 sync → 0<3 成立 → 被误判"过期"丢弃
      //      → 队员端冻结在旧回合，且不断重发旧状态反过来污染队长。
      //   修复：用 (turnNumber, turnIndex) 字典序比较——turnNumber 每轮 +1 单调递增，
      //   跨轮回绕时能正确分辨新旧。
      var _recvTurn = (typeof state.turnNumber === 'number') ? state.turnNumber : 0;
      var _recvIdx = (typeof state.fourPlayerTurnIndex === 'number') ? state.fourPlayerTurnIndex : 0;
      var _localTurn = (typeof GameState.turnNumber === 'number') ? GameState.turnNumber : 0;
      var _localIdx = GameState.fourPlayerTurnIndex;
      var _isStaleSync = (_recvTurn < _localTurn)
        || (_recvTurn === _localTurn && _recvIdx < _localIdx);
      if (_isStaleSync) {
        console.warn('[2v2同步] 收到过期 sync，丢弃（本地 turn=' + _localTurn + ' idx=' + _localIdx +
          ' 收到 turn=' + _recvTurn + ' idx=' + _recvIdx + '）');
        return;
      }
      // ★ 2026-9-1 FIX: localMatchInProgress 时**仍然更新回合状态**！
      //   只跳过 match 相关数据的覆盖（中立区、路牌），不跳过 subTurn/turnIndex
      //   否则队员端在 player* 1.5s 光环等待期间收到队长的回合推进 sync 会被跳过
      //   → subTurn 卡在旧值 → 回合线框消失 → 游戏卡住！
      var _localMatchWasActive = (typeof GameState !== 'undefined' && GameState.localMatchInProgress === true);
      if (_localMatchWasActive) {
        console.log('[2v2同步] 本地 match 执行中 → 仅更新回合状态，跳过数据覆盖');
        // ★★ 2026-9-1 FIX: 被跳过的 sync 不能【永久丢弃】，必须暂存后补应用！
        //   此前直接丢弃 → 队员端一旦与队长端分叉（例如 relay 执行用了错误阵营的 match 函数），
        //   后续若没有更新的 sync 到达，错误状态会一直留在界面上（"AI 围牌把中立牌放到我方场上"
        //   正是这样变得持久可见的）。
        //   改为：暂存 → 等本地 match 执行结束（localMatchInProgress 回落 false）后自动补应用，
        //   补应用时仍会走上面的新鲜度校验（turnNumber/turnIndex 字典序），过期则自动丢弃，
        //   因此不会把旧状态盖回新状态。这样既不会打断进行中的 match 动画，又能保证两端收敛。
        // ★★ 仅限【队员端】暂存！队长端是权威数据源，它在自己跑 AI match 期间也会设
        //   localMatchInProgress=true，此时收到的都是队员端 relay 回来的 sync（见
        //   fourPlayerAdvanceTurn / finalizePlacement 里的"双方都发送"），队长端必须
        //   维持原来的【直接丢弃】语义，否则补应用后权威状态反而被队员状态覆盖。
        var _deferAllowed = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPracticeLeader === false);
        if (_deferAllowed) {
          GameState._deferredPracticeSync = state;
          if (typeof ensureDeferredSyncWatcher === 'function') ensureDeferredSyncWatcher();
        }
      }
      console.log('[2v2同步] 应用全状态同步, turnIndex:', state.fourPlayerTurnIndex, 'subTurn:', state.fourPlayerSubTurn, '本地turnIndex:', GameState.fourPlayerTurnIndex, '本地subTurn:', GameState.fourPlayerSubTurn, 'localMatchInProgress:', _localMatchWasActive);
      console.log('[2v2同步] playerWins=', JSON.stringify(state.playerWins), '本地playerWins=', JSON.stringify(GameState.playerWins));
      try {
        // ★ 清理叫牌状态（全状态同步时叫牌必然已结束，清理防止残留）
        if (typeof GameState !== 'undefined' && GameState.pendingCallCard) {
          GameState.pendingCallCard = null;
          // ★ 清理叫牌提示框及其事件监听器
          var _ccp3 = document.getElementById('call-card-prompt');
          if (_ccp3) { if (_ccp3._cleanup) _ccp3._cleanup(); else _ccp3.remove(); }
        }
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode) {
          if (PBOnline.clearOpponentCallCardState) PBOnline.clearOpponentCallCardState();
        }

        // ★ 2026-9-1 FIX: 本地 match 执行中时**只跳过 DOM 相关数据**（路牌/中立区/手牌渲染数据），
        //   但拼点结果 playerWins/opponentWins 是纯数据，必须无条件更新！
        //   否则队员端因 localMatchInProgress 误拦，永远收不到拼点结果 → updateResults 渲染为空
        //   ★ 先无条件更新 playerWins/opponentWins（拼点结果）
        if (state.playerWins) GameState.playerWins = state.playerWins;
        if (state.opponentWins) GameState.opponentWins = state.opponentWins;
        if (typeof updateResults === 'function') updateResults(); // 立即渲染拼点X/✓

        if (!_localMatchWasActive) {
          // 更新路牌
          GameState.playerField = state.playerField;
          GameState.opponentField = state.opponentField;
          GameState.playerStack = state.playerStack;
          GameState.opponentStack = state.opponentStack;
          // 更新中立区
          GameState.playerNeutralCards = state.playerNeutralCards;
          GameState.opponentNeutralCards = state.opponentNeutralCards;
          // ★ 更新完整卡牌数据（手牌、暗牌、明牌、牌堆）
          if (state.playerDeck) GameState.playerDeck = state.playerDeck;
          if (state.opponentDeck) GameState.opponentDeck = state.opponentDeck;
          if (state.playerHand) GameState.playerHand = state.playerHand;
          if (state.opponentHand) GameState.opponentHand = state.opponentHand;
          if (state.playerRevealedCards) GameState.playerRevealedCards = state.playerRevealedCards;
          if (state.opponentRevealedCards) GameState.opponentRevealedCards = state.opponentRevealedCards;
          if (state.playerDarkCards) GameState.playerDarkCards = state.playerDarkCards;
          if (state.opponentDarkCards) GameState.opponentDarkCards = state.opponentDarkCards;
        }

        // ★ 回合状态**无条件更新**！这是修复"回合线框消失/卡住"的关键
        console.log('%c[SYNC] 回合更新 本地 idx=' + GameState.fourPlayerTurnIndex +
          ' sub=' + GameState.fourPlayerSubTurn + ' → sync idx=' + state.fourPlayerTurnIndex +
          ' sub=' + state.fourPlayerSubTurn + ' matchActive=' + _localMatchWasActive +
          ' aiStopped=' + JSON.stringify(state.fourPlayerAIStopped) +
          ' playerStopped=' + JSON.stringify(state.fourPlayerPlayerStopped),
          'color:#000;background:#f80;font-weight:bold');
        GameState.fourPlayerTurnIndex = state.fourPlayerTurnIndex;
        GameState.fourPlayerSubTurn = state.fourPlayerSubTurn;
        GameState.fourPlayerTurnOrder = state.fourPlayerTurnOrder;
        GameState.fourPlayerAIStopped = state.fourPlayerAIStopped;
        GameState.fourPlayerPlayerStopped = state.fourPlayerPlayerStopped;
        GameState.currentTurn = state.currentTurn;
        GameState.turnNumber = state.turnNumber;
        GameState.cardPlayedThisTurn = state.cardPlayedThisTurn;
        GameState.playerStoppedPlaying = state.playerStoppedPlaying;
        GameState.opponentStoppedPlaying = state.opponentStoppedPlaying;

        // ★★ 2026-9-19 FIX（结束同步·用户实测）：collectPracticeState 一直携带 gamePhase，
        //   但接收端从未应用——对方（如队员）判定游戏结束弹出结算后，本端（如已提前终止
        //   出牌的队长）收到 ended sync 却毫无反应，只能干等。现补齐：对方 ended 且本地
        //   还在 playing → 调本地 checkWinCondition（playerWins/opponentWins 已在上方
        //   无条件更新，判定结果与对方一致，弹窗/音乐/战绩/回放收尾全部走原生流程）
        if (state.gamePhase === 'ended' && GameState.gamePhase !== 'ended') {
          console.log('%c[人机2v1] ⏹ 对方已结束对局，本地同步结算', 'color:#0ff;background:#800;font-weight:bold');
          try {
            if (typeof checkWinCondition === 'function') checkWinCondition();
          } catch (e) { console.error('[人机2v1] 结算触发失败:', e); }
          // 兜底：若因异常数据未达成结算条件，强制结束防"幽灵对局"
          if (GameState.gamePhase !== 'ended') {
            GameState.gamePhase = 'ended';
            GameState._resultLocked = true;
            if (typeof updateEndGameButtons === 'function') updateEndGameButtons();
          }
        }

        // ★ 同步叫牌相关状态（确保双方计分一致）
        if (typeof state.callCardEnabled !== 'undefined') GameState.callCardEnabled = state.callCardEnabled;
        if (typeof state.callCardSuccessCount !== 'undefined') GameState.callCardSuccessCount = state.callCardSuccessCount;
        if (typeof state.callCardBonusScore !== 'undefined') GameState.callCardBonusScore = state.callCardBonusScore;
        if (typeof state.callCardCardTypeBonus !== 'undefined') GameState.callCardCardTypeBonus = state.callCardCardTypeBonus;
        if (typeof state.callCardHasSuccess !== 'undefined') GameState.callCardHasSuccess = state.callCardHasSuccess;

        // ★★★ 2026-9-1: 同步队长端的"打出 vs 放置"状态到队员端 GameState
        //   让队员端 UI 状态栏与队长端看到相同的"队长正在打牌/匹配中"信息
        //   关键：保存后由 UI 更新循环读取显示
        if (typeof state.pendingCardRoadIndex !== 'undefined') {
          GameState.teammatePendingCardRoadIndex = state.pendingCardRoadIndex;
        }
        if (typeof state.matchChainActive !== 'undefined') {
          GameState.teammateMatchChainActive = state.matchChainActive;
        }

        // 如果游戏结束
        if (state.gamePhase === 'ended' && GameState.gamePhase !== 'ended') {
          // ★ 2026-9-2 FIX: 不要在这里先设 gamePhase='ended'！
          // checkWinCondition() 开头有 guard: if (gamePhase==='ended') return;
          // 如果先设再调，它进去直接 return → updateGameStatus/playVictoryMusic 等结算逻辑
          // 全部不执行！让 checkWinCondition 自己设 gamePhase='ended'。
          // ★ 2026-9-2: 重置牌组接收标志，让队长下次发新牌组（重新开始）时能正常处理
          if (typeof window !== 'undefined') window._practiceDeckReceived = false;
          // ★ 队员端隐藏开始/重新开始按钮（队长控制开局，队员游戏结束后也不需要手动点）
          if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode && !PBOnline.isPracticeLeader) {
            if (GameElements.ui.startBtn) GameElements.ui.startBtn.style.display = 'none';
          }
          if (typeof checkWinCondition === 'function') checkWinCondition();
          return;
        }

        // ★ 2026-8-31 FIX: 队员重加入时，从 setup 切换到 playing 阶段
        // 队长已在 playing，队员刚 enterFourPlayerPractice 是 setup，需要升级
        if (state.gamePhase === 'playing' && GameState.gamePhase !== 'playing') {
          console.log('[2v2同步] 队员端 gamePhase:', GameState.gamePhase, '→ playing');
          GameState.gamePhase = 'playing';
          // ★ 从选座模式退出（队长已开始游戏）
          practiceSeatMode = false;
          // ★ 座位保持显示（显示双方头像），只是变成只读（不能点击）
          // 队长端 playing 时座位也是显示头像的，两边要一致
          if (typeof showPracticeSeats === 'function') showPracticeSeats(true);
          if (typeof setPracticeSeatsReadOnly === 'function') setPracticeSeatsReadOnly(true);
          if (typeof renderAllPracticeSeats === 'function') renderAllPracticeSeats();
          if (typeof updatePracticeStartButton === 'function') updatePracticeStartButton();
          // ★ 牌堆需要重新渲染（currentBlueCardBack 等在非 startGame 路径下可能为 null）
          // 强制触发 init + render
          if (typeof initBlueRedCardBackDesigns === 'function') initBlueRedCardBackDesigns();
          if (typeof renderDeckCardBacks === 'function') {
            setTimeout(function() { renderDeckCardBacks(); }, 50);
          }
          // ★ 如果还有发牌动画在排队，跳过它（直接进入 playing 状态）
          if (typeof window !== 'undefined' && window._skipDealAnimation) {
            console.log('[2v2同步] 跳过发牌动画');
          }
        }

        // 重新渲染整个界面
        // ★ 2026-9-1 FIX: 本地 match 执行中（1.5s 光环等待窗口）严禁 updateUI！
        //   updateUI 会整体重建路牌区 DOM，把刚加的 match-glow 光环冲掉
        //   → 玩家视觉上光环只显示 ~0.2s（实测 Run11/12：delay(1500) 真实执行，
        //     但光环 DOM 在 0.15-0.19s 即被 sync 触发的 updateUI 重建消灭）。
        //   match 执行器（opponent/playerPerformRoadMatch 等）结束后自己会调 updateUI 补渲染，
        //   回合线框由下方 updateTurnDisplay/updateTurnIndicator 负责不受影响。
        if (typeof updateUI === 'function' && !_localMatchWasActive) {
          updateUI();
        } else if (_localMatchWasActive) {
          console.log('[2v2同步] 本地 match 执行中 → 跳过 updateUI，保护匹配光环');
        }
        if (typeof updateTurnDisplay === 'function') updateTurnDisplay();
        if (typeof updateTurnIndicator === 'function') updateTurnIndicator();

        // 更新终止按钮状态
        // ★ 人机2v1：AI=0和2，玩家=1和3
        var isAI = (GameState.fourPlayerSubTurn === 0 || GameState.fourPlayerSubTurn === 2);
        if (GameElements.ui && GameElements.ui.stopBtn) {
          if (isAI) {
            GameElements.ui.stopBtn.disabled = true;
            GameElements.ui.stopBtn.style.opacity = '0.5';
            GameElements.ui.stopBtn.style.cursor = 'not-allowed';
          } else {
            GameElements.ui.stopBtn.disabled = false;
            GameElements.ui.stopBtn.style.opacity = '1';
            GameElements.ui.stopBtn.style.cursor = 'pointer';
          }
        }

        // 更新高亮
        fourPlayerHighlightActiveArea();

        // ★ 2026-9-2 FIX: 游戏结束后绝对不能再覆盖状态栏！
        //   checkWinCondition 设了胜利/失败文字后，晚到的 turn sync 会把它覆盖回
        //   "我方回合[玩家B]" 之类的回合文字。这里加 guard 防止。
        if (GameState.gamePhase !== 'ended') {
        // 更新状态文字
        var subName = getCurrentSubPlayerName();
        var sideText = isAI ? ((typeof __t==='function')?__t('st_opp_turn'):'对方回合') : ((typeof __t==='function')?__t('st_my_turn'):'我方回合');

        // ★★★ 2026-9-1: 队长端的"打出 vs 放置/匹配中"状态同步到队员端状态栏
        //   - pendingCardRoadIndex >= 0: 队长正"打出"某路牌（卡牌已在路牌区，但未确认）
        //   - matchChainActive: 队长处于 match 链（play_action → opponentPerform*Match 执行中）
        //   队员端如果看到这两个状态，应该在状态栏显示"队长打牌中/匹配中"而不是简单的回合文字
        var _myIdx2 = (typeof PBOnline !== 'undefined' && PBOnline && typeof PBOnline.myPracticeSeatIndex === 'number')
          ? PBOnline.myPracticeSeatIndex : -1;
        var _isLeaderFromSync = (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPracticeLeader === true);
        if (!_isLeaderFromSync) {
          // 队员端：根据同步过来的状态显示
          if (state.matchChainActive === true && state.pendingCardRoadIndex >= 0) {
            updateGameStatus('队长打出第' + (state.pendingCardRoadIndex + 1) + '路牌,1.5秒匹配中...');
          } else if (state.pendingCardRoadIndex >= 0) {
            updateGameStatus('队长已打出第' + (state.pendingCardRoadIndex + 1) + '路牌（待确认放置）');
          } else {
            updateGameStatus(sideText + ' [' + subName + ']');
          }
        } else {
          updateGameStatus(sideText + ' [' + subName + ']');
        }
        }

        // ★ 队长端收到队员 finalizePlacement 发来的 sync（_isTeammateFinalize=true）
        //   → GameState 已包含队员本地的正确拼点/路牌/中立区状态
        //   → 直接 safeSwitchTurn(0) 推进回合（0延迟因为队员动画已播完）
        //   → safeSwitchTurn 内部 fourPlayerAdvanceTurn 会发权威 sync
        //   → 防循环：只有 _isTeammateFinalize=true 才触发
        //   ★ 2026-9-1 BUGFIX: 加 localMatchInProgress guard！
        //     根因：AI match 动画执行中（localMatchInProgress=true），
        //     此时收到任何 sync 都不能推进回合——否则会把 AI 正在执行的 match 链打断！
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode
            && PBOnline.isPracticeLeader && state._isTeammateFinalize === true
            && GameState.gamePhase !== 'ended'
            && !GameState.localMatchInProgress) {
          console.log('%c[CRITICAL] 队长端收到 _isTeammateFinalize sync，推进回合！state.turnIdx=' + state.fourPlayerTurnIndex +
            ' state.subTurn=' + state.fourPlayerSubTurn,
            'color:#ff0;background:#ff0;font-weight:bold');
          // safeSwitchTurn 内部有防重入 guard，不会重复推进
          safeSwitchTurn(0);
        } else if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.isPractice2v2Mode
            && PBOnline.isPracticeLeader && state._isTeammateFinalize === true
            && GameState.localMatchInProgress) {
          console.warn('%c[SKIP] 收到 _isTeammateFinalize sync，但 localMatchInProgress=true，跳过回合推进',
            'color:#f90;background:#ff0;font-weight:bold');
          // ★★ 2026-9-18 FIX（看门狗·兜底推进）：本地 match 链正常完成后会自己 finalizePlacement
          //   推进回合；但若 match 链意外死亡（异常/中断），SKIP 掉的推进将无人补偿 → 永久卡死
          //   （2026-9-18 回合7卡死即 SKIP + 链死双断）。5 秒后检查：回合未推进、match 已结束
          //   且游戏仍在进行 → 补推进一次（turnGen guard 防重入，误推无害）。
          var _skipGen = GameState._turnGen || 0;
          var _skipIdx = GameState.fourPlayerTurnIndex;
          var _skipSub = GameState.fourPlayerSubTurn;
          setTimeout(function () {
            try {
              if (GameState.isGameInterrupted || GameState.gamePhase !== 'playing') return;
              if (GameState.localMatchInProgress) return;  // match 仍在执行：本地链还活着，等它自己推进
              if ((GameState._turnGen || 0) !== _skipGen) return;  // 回合已推进过
              if (GameState.fourPlayerTurnIndex !== _skipIdx || GameState.fourPlayerSubTurn !== _skipSub) return;
              console.warn('[2v2同步] ⚠ 看门狗：队员 finalize 后 5 秒回合仍未推进，补推进（原 sub=' + _skipSub + '）');
              safeSwitchTurn(0);
            } catch (e) { console.error('[2v2同步] 看门狗补推进失败:', e); }
          }, 5000);
        }
      } catch(e) {
        console.error('[2v2同步] 应用状态同步失败:', e.message);
      }
    }

    // ★ 队长：收到队员的牌组请求，重新发送牌组
    function handlePracticeRequestDeck(data) {
      console.log('[2v2同步] 队长收到队员牌组请求, 已有牌组:', !!_practiceDeckData);
      if (_practiceDeckData && typeof PBOnline !== 'undefined' && PBOnline) {
        PBOnline.sendPracticeDeckSync(_practiceDeckData.playerDeck, _practiceDeckData.opponentDeck, _practiceDeckData.turnOrder, { callCardEnabled: GameState.callCardEnabled });
        if (typeof PBOnline.showOnlineToast === 'function') {
          PBOnline.showOnlineToast('队员请求牌组，已重新发送', 'success');
        }
        console.log('[2v2同步] 队长已重新发送牌组');
      }
    }

    // 暴露到全局供online-client.js调用
    window.handlePracticeDeckSync = handlePracticeDeckSync;
    window.handlePracticePlayerMove = handlePracticePlayerMove;
    window.handlePracticeAIMove = handlePracticeAIMove;
    window.handlePracticeTurnAdvance = handlePracticeTurnAdvance;
    window.handlePracticeGameReady = handlePracticeGameReady;
    window.handlePracticeStopPlaying = handlePracticeStopPlaying;
    window.handlePracticeStateSync = handlePracticeStateSync;
    window.handlePracticeRequestDeck = handlePracticeRequestDeck;

    // ★ 2026-8-31 FIX: 队长点击掉线队友座位 → 重新邀请
    function reinviteDisconnectedTeammate(seatIdx) {
      var data = practiceSeats[seatIdx];
      // ★ 2026-9-18 诊断增强：静默 return 改为可见日志+状态栏提示（此前中止时队长端无任何反馈，
      //   无法区分"点击没触发"和"数据异常中止"）
      if (!data || !data.id || !data.disconnected) {
        console.warn('[人机2v1] 重邀中止@数据校验: seatIdx=', seatIdx,
          'seatData=', JSON.stringify(data),
          'teammateData=', JSON.stringify(typeof PBOnline !== 'undefined' ? PBOnline.teammateData : null));
        if (typeof updateGameStatus === 'function') {
          updateGameStatus('重新邀请中止：座位数据异常（按F12看控制台详情）', 'st_offline_retry');
        }
        return;
      }
      console.log('[人机2v1] 重邀开始: seatIdx=', seatIdx, 'teammateId=', data.id,
        'localTeammateId=', (typeof PBOnline !== 'undefined' && PBOnline.teammateData) ? PBOnline.teammateData.id : null);

      // ★ 2026-9-18 FIX（第6轮根因）：座位记录的队友 id 可能是旧会话残留（实测 seatId=#z09383089
      //   而真实队友=#l63009691）→ 被误判为"team 已解散"，向幽灵 id 发 team invite → 队友永远无反应。
      //   以 PBOnline.teammateData（当前队伍关系，含三级兜底的服务器队伍）为准：不一致立即校正座位
      var _tm = (typeof PBOnline !== 'undefined' && PBOnline.teammateData) ? PBOnline.teammateData : null;
      if (_tm && _tm.id && _tm.id !== data.id) {
        console.warn('[人机2v1] 座位id与当前队友不一致（旧会话残留），已校正:', data.id, '→', _tm.id);
        data.id = _tm.id;
        if (_tm.nickname) data.nickname = _tm.nickname;
        if (typeof renderPracticeSeat === 'function') renderPracticeSeat(seatIdx);
      }
      console.log('[人机2v1] 队长点击掉线队友座位，尝试重新邀请, seatIdx:', seatIdx, 'teammateId:', data.id);

      if (typeof updateGameStatus === 'function') {
        updateGameStatus('正在邀请 ' + data.nickname + ' 重新加入人机2v1...');
      }

      // ★ 两步走：先 re-form team → 再 practice 2v2 invite
      // 如果 team 还在（队友是主动退出练习而非 WS 断开），直接发 practice invite
      // 如果 team 已解散（WS 断开导致 handleDisconnect 删了 team），先发 team invite
      if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.teammateData && PBOnline.teammateData.id === data.id) {
        // team 还在 → 直接发 practice 2v2 invite
        console.log('[人机2v1] team 仍然存在，直接发送 practice 2v2 invite');
        PBOnline.sendPractice2v2Invite();
      } else {
        // team 已解散 → 先发 team invite → 等 team_formed 后自动发 practice invite
        console.log('[人机2v1] team 已解散，先发 team invite，_pendingReinviteAfterTeamFormed = ', data.id);
        // 设置 pending 标记（online-client.js 会在 team_formed 后自动触发 practice invite）
        if (typeof PBOnline !== 'undefined' && PBOnline) {
          PBOnline._pendingReinviteAfterTeamFormed = data.id;
        }
        if (typeof PBOnline !== 'undefined' && PBOnline && PBOnline.sendTeamInvite) {
          PBOnline.sendTeamInvite(data.id);
        } else {
          console.error('[人机2v1] PBOnline.sendTeamInvite 不可用');
          if (typeof updateGameStatus === 'function') {
            updateGameStatus(__t('st_offline_retry'), 'st_offline_retry');
          }
        }
      }
    }

    // ★ 队员退出练习：队长端将队员座位标记为掉线（灰色头像），不清空
    function handleTeammateExitedPractice() {
      console.log('[人机2v1] 队员退出，标记队员座位为掉线, practiceSeatMode:', practiceSeatMode);
      // ★ 遍历所有座位，将非自己的座位标记为掉线（不管是否已开始游戏）
      for (var i = 0; i < practiceSeats.length; i++) {
        // 跳过自己的座位
        if (i === _practiceMySeatIndex) continue;
        // 跳过空座位
        if (!practiceSeats[i]) continue;
        // 已标记为掉线的不用重复处理
        if (practiceSeats[i].disconnected) continue;
        practiceSeats[i].disconnected = true;
        if (typeof renderPracticeSeat === 'function') renderPracticeSeat(i);
        console.log('[人机2v1] 座位', i, '已标记为掉线:', practiceSeats[i].nickname);
      }
      // 刷新开始按钮状态（掉线后座位虽然有人但不算有效就座）
      if (practiceSeatMode && typeof updatePracticeStartButton === 'function') {
        updatePracticeStartButton();
      }
      // 更新状态提示
      if (typeof updateGameStatus === 'function') {
        updateGameStatus(__t('st_teammate_offline'), 'st_teammate_offline');
      }
    }
    window.handleTeammateExitedPractice = handleTeammateExitedPractice;

    // 座位点击事件（左键加入/转移，右键离开）
    function handlePracticeSeatClick(e) {
      e.preventDefault();
      e.stopPropagation();
      var seatEl = e.currentTarget;
      var seatIdx = parseInt(seatEl.getAttribute('data-seat'));
      if (isNaN(seatIdx)) return;

      var myId = _practiceMyPlayerId;
      var myNick = localStorage.getItem('pbp_nickname') || '玩家';
      var myAvatar = localStorage.getItem('pbp_avatar') || '🗡️';
      var amILeader = _practiceMyIsLeader;

      // 右键：离开座位（只能离开自己的座位）
      if (e.button === 2 || e.type === 'contextmenu') {
        if (practiceSeats[seatIdx] && practiceSeats[seatIdx].id === myId) {
          practiceSeats[seatIdx] = null;
          _practiceMySeatIndex = -1; // ★ 清除座位索引
          renderPracticeSeat(seatIdx);
          updatePracticeStartButton();
          // ★ 2026-6-1 FIX: 传入 seatIdx 让队友知道哪个座位空了
          // 之前不传参数 → sendSeatIndex=-1 → 队友端 idx>=0 校验挡掉
          syncPracticeSeatsToTeammate(seatIdx);
        }
        return;
      }

      // 左键点击
      var currentSeat = practiceSeats[seatIdx];

      // 如果点击的是自己的座位，不做任何操作
      if (currentSeat && currentSeat.id === myId) return;

      // ★ 2026-8-31 FIX: 点击掉线队友的座位 → 重新邀请
      if (currentSeat && currentSeat.disconnected && currentSeat.id !== myId) {
        if (typeof reinviteDisconnectedTeammate === 'function') {
          reinviteDisconnectedTeammate(seatIdx);
        }
        return;
      }

      // 如果座位已被队友占据，不能加入
      if (currentSeat && currentSeat.id !== myId) {
        if (typeof updateGameStatus === 'function') {
          updateGameStatus(__t('st_seat_taken'), 'st_seat_taken');
        }
        return;
      }

      // 座位为空，加入此座位
      // 先从另一个座位移除自己（如果有）
      var otherIdx = seatIdx === 0 ? 1 : 0;
      var hadOldSeat = practiceSeats[otherIdx] && practiceSeats[otherIdx].id === myId;
      if (hadOldSeat) {
        practiceSeats[otherIdx] = null;
        renderPracticeSeat(otherIdx);
        // ★ 2026-8-31 FIX: 切换座位时，先发旧座位的清空信号给队友
        // 之前漏了这步 → 队友端旧座位数据没清空 → 两个座位都被队友占据
        syncPracticeSeatsToTeammate(otherIdx);
      }
      // 加入新座位
      practiceSeats[seatIdx] = {
        id: myId,
        nickname: myNick,
        avatar: myAvatar,
        isLeader: amILeader
      };
      // ★ 记录本地玩家的座位索引
      _practiceMySeatIndex = seatIdx;
      console.log('[人机2v1] 本地玩家入座, seatIndex:', _practiceMySeatIndex, 'isLeader:', amILeader);
      renderPracticeSeat(seatIdx);
      updatePracticeStartButton();
      syncPracticeSeatsToTeammate();
    }

    window.hideMainMenu = hideMainMenu;
    window.showMainMenu = showMainMenu;
    window.showFeatureComingSoon = showFeatureComingSoon;
    window.showGameEndProfile = showGameEndProfile;
    window.closeGameEndProfile = closeGameEndProfile;
    window.flyToAvatarAndReturn = flyToAvatarAndReturn;
    window.startPracticeGame = startPracticeGame;
    window.togglePracticeSubmenu = togglePracticeSubmenu;
    window.startPracticeGame1v1 = startPracticeGame1v1;
    window.startPracticeGame2v2 = startPracticeGame2v2;
    window.enterFourPlayerPractice = enterFourPlayerPractice;
    window.forceExitPractice2v2 = forceExitPractice2v2;
    window.handlePracticeSeatSync = handlePracticeSeatSync;
    window.syncPracticeSeatsToTeammate = syncPracticeSeatsToTeammate;
    window.generatePlayerId = generatePlayerId;
    window.getPlayerId = getPlayerId;
    window.openNicknameEditor = openNicknameEditor;
    window.closeNicknameEditor = closeNicknameEditor;
    window.saveNickname = saveNickname;
    window.openProfileModal = openProfileModal;
    window.closeProfileModal = closeProfileModal;
    window.openAvatarPicker = openAvatarPicker;
    window.closeAvatarPicker = closeAvatarPicker;
    window.handleAvatarFileSelect = handleAvatarFileSelect;
    window.openAvatarCropModal = openAvatarCropModal;
    window.closeAvatarCropModal = closeAvatarCropModal;
    window.onCropZoomChange = onCropZoomChange;
    window.applyAvatarCrop = applyAvatarCrop;
    window.toggleTutorialSubmenu = function(e) {
      e.stopPropagation();
      if (typeof blockIfTeammateMode === 'function' && blockIfTeammateMode()) return;
      window._forceNeutralBorder = false; // ★ 清除强制中立区线框标志
      const submenu = document.getElementById('tutorial-submenu');
      const otherSubmenu = document.getElementById('online-submenu');
      const pracSubmenu = document.getElementById('practice-submenu');
      if (otherSubmenu) otherSubmenu.classList.remove('open');
      if (pracSubmenu) pracSubmenu.classList.remove('open');
      if (submenu) {
        submenu.classList.toggle('open');
      }
    };
    document.addEventListener('click', function() {
      const tutSubmenu = document.getElementById('tutorial-submenu');
      if (tutSubmenu) tutSubmenu.classList.remove('open');
      const onlineSubmenu = document.getElementById('online-submenu');
      if (onlineSubmenu) onlineSubmenu.classList.remove('open');
      const pracSubmenu = document.getElementById('practice-submenu');
      if (pracSubmenu) pracSubmenu.classList.remove('open');
    });

    // ============================================================================
    // 【教程系统】
    // ============================================================================

    const TutorialSteps = [
      {
        id: 1,
        title: 'tut_hello_title',
        content: 'tut_hello_content',
        highlight: null,
        arrow: null,
        panelPosition: { left: '15%', transform: 'translateY(-50%)' },
        setup: function() {
          interruptGame();
          clearAllCardSlots();
          resetGameState();
          updateUI();
        }
      },
      {
        id: 2,
        title: 'tut_point_title',
        content: 'tut_point_content',
        highlight: ['#player-hand', '#player-road-area', '#opponent-road-area', '#center-divider', '#battlefield'],
        arrow: null,
        panelPosition: { left: '15%', transform: 'translateY(-50%)' },
        interactive: true,
        setup: setupTutorialStep2,
        validate: validateTutorialStep2
      },
      {
        id: 3,
        title: 'tut_point_win_title',
        content: 'tut_point_win_content',
        highlight: ['#center-divider'],
        interactiveHighlight: ['#player-hand', '#player-road-area', '#opponent-road-area', '#center-divider', '#battlefield'],
        arrow: null,
        panelPosition: { left: '15%', transform: 'translateY(-50%)' },
        interactive: true,
        setup: setupTutorialStep3,
        validate: validateTutorialStep3
      },
      {
        id: 4,
        title: 'tut_deck_title',
        content: 'tut_deck_content',
        highlight: ['#player-deck'],
        interactiveHighlight: ['#center-divider', '#battlefield', '#player-hand', '#player-road-area', '#opponent-road-area', '#player-deck'],
        arrow: null,
        panelPosition: { left: '15%', transform: 'translateY(-50%)' },
        interactive: true,
        setup: setupTutorialStep4,
        validate: validateTutorialStep4
      },
      {
        id: 5,
        title: 'tut_win_title',
        content: 'tut_win_content',
        highlight: ['.rank-panel'],
        arrow: null,
        panelPosition: { left: 'calc(50% - 30rem)', transform: 'translateY(-50%)', maxWidth: '220px' },
        interactive: false
      },
      {
        id: 6,
        title: 'tut_settle_title',
        content: 'tutorial-settlement',
        highlight: ['.rank-panel', '#player-road-area', '#opponent-road-area', '#center-divider'],
        arrow: null,
        panelPosition: { left: 'calc(50% - 30rem)', transform: 'translateY(-50%)', maxWidth: '220px' },
        interactive: true,
        setup: setupTutorialStep6
      },
      {
        id: 7,
        title: 'tut_next_title',
        content: 'tut_next_content',
        highlight: null,
        arrow: null,
        panelPosition: { left: '15%', transform: 'translateY(-50%)' },
        interactive: false
      }
    ];

    let tutorialInteractiveSnapshot = null;
    let tutorialSnapshots = {};

    function saveTutorialInteractiveSnapshot() {
      const snap = {
        step: currentTutorialStep,
        phase: tutorialPhase,
        playerHand: JSON.parse(JSON.stringify(GameState.playerHand || [])),
        playerField: JSON.parse(JSON.stringify(GameState.playerField || [null,null,null,null,null])),
        playerStack: JSON.parse(JSON.stringify(GameState.playerStack || [[],[],[],[],[]])),
        opponentHand: JSON.parse(JSON.stringify(GameState.opponentHand || [])),
        opponentField: JSON.parse(JSON.stringify(GameState.opponentField || [null,null,null,null,null])),
        opponentStack: JSON.parse(JSON.stringify(GameState.opponentStack || [[],[],[],[],[]])),
        playerDeck: JSON.parse(JSON.stringify(GameState.playerDeck || [])),
        opponentDeck: JSON.parse(JSON.stringify(GameState.opponentDeck || [])),
        playerRevealedCards: JSON.parse(JSON.stringify(GameState.playerRevealedCards || [])),
        opponentRevealedCards: JSON.parse(JSON.stringify(GameState.opponentRevealedCards || [])),
        playerDarkCards: JSON.parse(JSON.stringify(GameState.playerDarkCards || [])),
        opponentDarkCards: JSON.parse(JSON.stringify(GameState.opponentDarkCards || [])),
        playerWins: JSON.parse(JSON.stringify(GameState.playerWins || [false,false,false,false,false])),
        opponentWins: JSON.parse(JSON.stringify(GameState.opponentWins || [false,false,false,false,false])),
        playerNeutralCards: JSON.parse(JSON.stringify(GameState.playerNeutralCards || [[],[],[],[],[],[],[]])),
        opponentNeutralCards: JSON.parse(JSON.stringify(GameState.opponentNeutralCards || [[],[],[],[],[],[],[]])),
        currentTurn: GameState.currentTurn,
        cardPlayedThisTurn: GameState.cardPlayedThisTurn,
        gamePhase: GameState.gamePhase
      };
      tutorialInteractiveSnapshot = snap;
      tutorialSnapshots[snap.step] = snap;
    }

    function restoreTutorialInteractiveSnapshot() {
      if (!tutorialInteractiveSnapshot) return false;
      const snap = tutorialInteractiveSnapshot;
      currentTutorialStep = snap.step;
      tutorialPhase = snap.phase;
      GameState.playerHand = snap.playerHand;
      GameState.playerField = snap.playerField;
      GameState.playerStack = snap.playerStack;
      GameState.opponentHand = snap.opponentHand;
      GameState.opponentField = snap.opponentField;
      GameState.opponentStack = snap.opponentStack;
      GameState.playerDeck = snap.playerDeck;
      GameState.opponentDeck = snap.opponentDeck;
      GameState.playerRevealedCards = snap.playerRevealedCards;
      GameState.opponentRevealedCards = snap.opponentRevealedCards;
      GameState.playerDarkCards = snap.playerDarkCards;
      GameState.opponentDarkCards = snap.opponentDarkCards;
      GameState.playerWins = snap.playerWins;
      GameState.opponentWins = snap.opponentWins;
      GameState.playerNeutralCards = snap.playerNeutralCards;
      GameState.opponentNeutralCards = snap.opponentNeutralCards;
      GameState.currentTurn = snap.currentTurn;
      GameState.cardPlayedThisTurn = snap.cardPlayedThisTurn;
      GameState.gamePhase = snap.gamePhase;
      tutorialInteractiveSnapshot = null;
      updateUI();
      if (GameState.playerDeck.length > 0) renderDeckCardBacks();
      if (tutorialPhase === 'interactive') {
        enterTutorialInteractiveMode();
      } else {
        showTutorialStep(currentTutorialStep);
      }
      updateTutorialButtons();
      return true;
    }

    function startTutorial(mode) {
      currentTutorialType = 'newbie';
      const submenu = document.getElementById('tutorial-submenu');
      if (submenu) submenu.classList.remove('open');
      hideMainMenu();
      setMoralePanelVisible(false);  // ★ 2026-9-25 教程模式禁用士气值
      playGameStartMusic();
      if (typeof restoreStarfieldNormal === 'function') restoreStarfieldNormal();
      if (typeof generateStarfieldStars === 'function') generateStarfieldStars();
      if (typeof generateMeteors === 'function') generateMeteors();
      
      isTutorialMode = true;
      GameState.callCardEnabled = false;
      currentTutorialStep = 0;
      tutorialMaxStep = 0;
      tutorialInteractiveSnapshot = null;
      tutorialSnapshots = {};
      
      const mask = document.createElement('div');
      mask.className = 'tutorial-mask';
      mask.id = 'tutorial-mask';
      document.querySelector('.game-container').appendChild(mask);
      
      document.getElementById('tutorial-overlay').classList.add('tutorial-active');
      
      updateTutorialButtons();
      
      document.addEventListener('click', handleTutorialClick);
      document.addEventListener('wheel', handleTutorialWheel, { passive: false });
      document.addEventListener('contextmenu', handleTutorialRightClick);
      
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          showTutorialStep(currentTutorialStep);
        });
      });
      
      setTimeout(() => {
        tutorialReady = true;
      }, 100);
    }

    function showTutorialStep(stepIndex) {
      const step = TutorialSteps[stepIndex];
      
      clearTutorialHighlights();
      
      if (step.setup) {
        step.setup();
      }
      
      // 保存 showing 阶段的卡牌状态快照（setup 执行后），用于滚轮回退时恢复
      if (step.interactive) {
        saveTutorialInteractiveSnapshot();
        // 保存的是 showing 阶段状态，但 phase 需要标记为 'showing'
        tutorialSnapshots[step.id] = { ...tutorialSnapshots[step.id], phase: 'showing' };
      }
      
      requestAnimationFrame(() => {
        let mask = document.getElementById('tutorial-mask');
        if (!mask) {
          mask = document.createElement('div');
          mask.className = 'tutorial-mask';
          mask.id = 'tutorial-mask';
          document.querySelector('.game-container').appendChild(mask);
        } else {
          mask.innerHTML = '';
        }
        
        const screenWidth = 1920;
        const screenHeight = 1080;
        
        let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
        
        if (step.highlight) {
          const rects = [];
          
          if (Array.isArray(step.highlight)) {
            step.highlight.forEach(selector => {
              const element = document.querySelector(selector);
              if (element) {
                rects.push(tutRect(element));
              }
            });
          } else {
            const element = document.querySelector(step.highlight);
            if (element) {
              rects.push(tutRect(element));
            }
          }
          
          if (rects.length > 0) {
            const padding = 10;
            
            if ((step.id === 2 || step.id === 3 || step.id === 6) && rects.length >= 2) {
              let minTop = screenHeight;
              let maxBottom = 0;
              let minLeft = screenWidth;
              let maxRight = 0;
              
              rects.forEach(rect => {
                minTop = Math.min(minTop, rect.top - padding);
                maxBottom = Math.max(maxBottom, rect.bottom + padding);
                minLeft = Math.min(minLeft, rect.left - padding);
                maxRight = Math.max(maxRight, rect.right + padding);
              });
              
              const x = minLeft;
              const y = minTop;
              const w = maxRight - minLeft;
              const h = maxBottom - minTop;
              
              pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
              
              const holeHighlight = document.createElement('div');
              holeHighlight.className = 'tutorial-hole-highlight';
              holeHighlight.style.top = y + 'px';
              holeHighlight.style.left = x + 'px';
              holeHighlight.style.width = w + 'px';
              holeHighlight.style.height = h + 'px';
              mask.appendChild(holeHighlight);
            } else {
              rects.forEach(rect => {
                const x = rect.left - padding;
                const y = rect.top - padding;
                const w = rect.width + padding * 2;
                const h = rect.height + padding * 2;
                
                pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
                
                const holeHighlight = document.createElement('div');
                holeHighlight.className = 'tutorial-hole-highlight';
                holeHighlight.style.top = y + 'px';
                holeHighlight.style.left = x + 'px';
                holeHighlight.style.width = w + 'px';
                holeHighlight.style.height = h + 'px';
                mask.appendChild(holeHighlight);
              });
            }
          }
        }
        
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', screenWidth);
        svg.setAttribute('height', screenHeight);
        svg.style.position = 'absolute';
        svg.style.top = '0';
        svg.style.left = '0';
        svg.style.pointerEvents = 'auto';
        
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathD);
        path.setAttribute('fill-rule', 'evenodd');
        path.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
        path.style.transition = 'fill 0.4s ease-out';
        
        svg.appendChild(path);
        mask.appendChild(svg);
        
        setTimeout(() => {
          path.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
        }, 50);
        
        const panel = document.createElement('div');
        panel.className = 'tutorial-panel';
        const formattedContent = __t(step.content).replace(/\n\n/g, '<br><br>').replace(/\n/g, '<br>');

        let panelHTML = `<div class="tutorial-step-indicator">${__t('tut_step_word')} ${step.id}/${TutorialSteps.length}</div><h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t(step.title)}</h3>`;

        if (step.id === 6) {
          // 步骤6：结算内容
          const resultText = getTutorialSettlementText();
          panelHTML += `<p style="margin-bottom: 12px;">${resultText}</p>`;
          panelHTML += `<div style="text-align: center; margin-top: 10px;"><button id="tutorial-restart-btn" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: #1e293b; border: none; padding: 8px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;">${__t('tut_restart_btn')}</button></div>`;
        } else if (step.id === 7) {
          panelHTML += `<p>${formattedContent}</p>`;
          panelHTML += `<div style="text-align: center; margin-top: 10px;"><button id="tutorial-learn-match-btn" style="background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; border: none; padding: 8px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;">${__t('tut_learn_btn')}</button></div>`;
        } else {
          panelHTML += `<p>${formattedContent}</p>`;
        }
        
        panel.innerHTML = panelHTML;
        
        // 步骤5和步骤6：面板居中于牌型栏最右侧到路牌区最左侧之间
        if (step.id === 5 || step.id === 6) {
          const rankPanel = document.querySelector('.rank-panel');
          const playerRoadArea = document.querySelector('#player-road-area');
          if (rankPanel && playerRoadArea) {
            const rankRight = tutRect(rankPanel).right;
            const roadLeft = tutRect(playerRoadArea).left;
            const centerX = (rankRight + roadLeft) / 2;
            panel.style.left = centerX + 'px';
            panel.style.top = '50%';
            panel.style.transform = 'translate(-50%, -50%)';
            panel.style.maxWidth = '220px';
          } else {
            Object.keys(step.panelPosition).forEach(key => {
              panel.style[key] = step.panelPosition[key];
            });
          }
        } else {
          Object.keys(step.panelPosition).forEach(key => {
            panel.style[key] = step.panelPosition[key];
          });
        }
        
        mask.appendChild(panel);
        
        // 交互步骤（2,3,4,6）和步骤7：面板需要可点击
        if (step.interactive || step.id === 7) {
          panel.style.pointerEvents = 'auto';
        }
        
        // 步骤7：绑定"学习新玩法"按钮事件
        if (step.id === 7) {
          setTimeout(() => {
            const learnBtn = document.getElementById('tutorial-learn-match-btn');
            if (learnBtn) {
              learnBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                // 先清理拼点教程的所有状态和事件
                document.removeEventListener('click', handleTutorialClick);
                document.removeEventListener('wheel', handleTutorialWheel);
                document.removeEventListener('contextmenu', handleTutorialRightClick);
                removeTutorialHoverTips();
                clearTutorialHighlights();
                isTutorialMode = false;
                tutorialReady = false;
                tutorialDialogActive = false;
                // 清除状态栏提示
                updateGameStatus('');
                // ★ 2026-9-23 FIX：步骤7"学习新玩法"应进入功能牌教程（原误入匹配操作教程）
                startFunctionalCardTutorial();
              });
            }
          }, 100);
        }
      });
    }

    function clearTutorialHighlights() {
      document.querySelectorAll('.tutorial-highlight').forEach(el => el.remove());
      document.querySelectorAll('.tutorial-arrow').forEach(el => el.remove());
      document.querySelectorAll('.tutorial-panel').forEach(el => el.remove());
      document.querySelectorAll('.tutorial-hole-highlight').forEach(el => el.remove());
      document.querySelectorAll('.fc-tut-hole-static').forEach(el => el.remove());
      document.querySelectorAll('.game-container > .tutorial-mask, body > .tutorial-mask').forEach(el => el.remove());
    }

    function setupTutorialStep2() {
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      
      tutorialPhase = 'showing';
      tutorialAClicked = false;
      
      GameState.playerHand = [
        { rank: 'A', suit: 'hearts', value: 1, id: 'tut-hand-0', display: 'A' },
        { rank: 'K', suit: 'spades', value: 13, id: 'tut-hand-1', display: 'K' },
        null,
        null,
        null,
        null
      ];
      GameState.playerField = [null, null, null, null, null];
      GameState.playerStack = [[], [], [], [], []];
      GameState.opponentField = [{ rank: '10', suit: 'clubs', value: 10, id: 'tut-opp-10', owner: 'opponent', display: '10' }, null, null, null, null];
      GameState.opponentStack = [[], [], [], [], []];
      GameState.playerRevealedCards = [];
      GameState.opponentRevealedCards = [];
      GameState.playerDarkCards = [];
      GameState.opponentDarkCards = [];
      GameState.playerDeck = [];
      GameState.opponentDeck = [];
      GameState.playerNeutralCards = [[], [], [], [], [], [], []];
      GameState.opponentNeutralCards = [[], [], [], [], [], [], []];
      
      GameState.playerWins = [false, false, false, false, false];
      GameState.opponentWins = [false, false, false, false, false];
      GameState.gamePhase = 'playing';
      GameState.currentTurn = 'player';
      GameState.cardPlayedThisTurn = false;
      
      updateUI();
      checkRoadResult(0, true);
    }

    function validateTutorialStep2(card) {
      return true;
    }

    function setupTutorialStep3() {
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      interruptGame();
      
      tutorialPhase = 'showing';
      
      GameState.playerHand = [
        { rank: 'A', suit: 'hearts', value: 1, id: 'tut-step3-hand-0', display: 'A' },
        { rank: '2', suit: 'hearts', value: 2, id: 'tut-step3-hand-1', display: '2' },
        { rank: '3', suit: 'hearts', value: 3, id: 'tut-step3-hand-2', display: '3' },
        { rank: '9', suit: 'hearts', value: 9, id: 'tut-step3-hand-3', display: '9' },
        { rank: '9', suit: 'spades', value: 9, id: 'tut-step3-hand-4', display: '9' },
        { rank: 'J', suit: 'hearts', value: 11, id: 'tut-step3-hand-5', display: 'J' }
      ];
      GameState.playerField = [{ rank: 'K', suit: 'spades', value: 13, id: 'tut-step3-field-0', owner: 'player', display: 'K' }, null, null, null, null];
      GameState.playerStack = [[], [], [], [], []];
      GameState.opponentField = [{ rank: '10', suit: 'clubs', value: 10, id: 'tut-step3-opp-field-0', owner: 'opponent', display: '10' }, null, null, null, null];
      GameState.opponentStack = [[], [], [], [], []];
      GameState.opponentHand = [
        { rank: '7', suit: 'clubs', value: 7, id: 'tut-step3-opp-hand-0', display: '7' },
        { rank: '9', suit: 'clubs', value: 9, id: 'tut-step3-opp-hand-1', display: '9' },
        { rank: 'Q', suit: 'clubs', value: 12, id: 'tut-step3-opp-hand-2', display: 'Q' },
        { rank: 'J', suit: 'clubs', value: 11, id: 'tut-step3-opp-hand-3', display: 'J' },
        { rank: '7', suit: 'clubs', value: 7, id: 'tut-step3-opp-hand-4', display: '7' },
        { rank: '6', suit: 'clubs', value: 6, id: 'tut-step3-opp-hand-5', display: '6' }
      ];
      GameState.playerRevealedCards = [];
      GameState.opponentRevealedCards = [];
      GameState.playerDarkCards = [];
      GameState.opponentDarkCards = [];
      GameState.playerDeck = [];
      GameState.opponentDeck = [];
      GameState.playerNeutralCards = [[], [], [], [], [], [], []];
      GameState.opponentNeutralCards = [[], [], [], [], [], [], []];
      
      GameState.playerWins = [true, false, false, false, false];
      GameState.opponentWins = [false, false, false, false, false];
      GameState.gamePhase = 'playing';
      GameState.currentTurn = 'opponent';
      GameState.cardPlayedThisTurn = false;
      
      updateUI();
    }

    function handleTutorialStep3PlayerPlay(cardIndex) {
      const card = GameState.playerHand[cardIndex];
      if (!card) return;

      CardPlayExecutor.executeCardPlay('player', {
        cardIndex: cardIndex,
        sourceType: 'hand',
        roadIndex: 1
      }, {
        onAnimationEnd: function() {
          updatePlayerDeck();
          GameState.cardPlayedThisTurn = true;
          checkRoadResult(1, true);
          updateUI();

          setTimeout(() => {
            GameState.currentTurn = 'opponent';
            GameState.cardPlayedThisTurn = false;

            setTimeout(() => {
              CardPlayExecutor.executeCardPlay('opponent', {
                cardIndex: 1,
                sourceType: 'hand',
                roadIndex: 2
              }, {
                skipMatchCheck: true,
                onAnimationEnd: function() {
                  setTimeout(() => {
                    GameState.currentTurn = 'player';
                    GameState.cardPlayedThisTurn = false;
                    enterTutorialInteractiveMode();
                  }, 1000);
                }
              });
            }, 1000);
          }, 1000);
        }
      });
    }

    function validateTutorialStep3(card) {
      return true;
    }

    function getTutorialSettlementText() {
      const playerWins = GameState.playerWins.filter(w => w).length;
      const opponentWins = GameState.opponentWins.filter(w => w).length;
      
      function formatTypeForTutorial(type) {
        function cd(v) { return v === 1 ? 'A' : v === 11 ? 'J' : v === 12 ? 'Q' : v === 13 ? 'K' : v.toString(); }
        const names = { 'single':__t('type_single'),'threeStraight':__t('type_3straight'),'pair':__t('type_pair'),'fiveStraight':__t('type_5straight'),'threeOfAKind':__t('type_three'),'threePairStraight':__t('type_3pair'),'twoTriples':__t('type_3double'),'fourOfAKind':__t('type_four'),'fivePairStraight':__t('type_5pair'),'adjacentTriples':__t('type_adjacent3'),'tripleStraight':__t('type_straight3'),'flowerTripleStraight':__t('type_t3straight') };
        if (type.type === 'none') return __t('tut_type_none');
        if (type.type === 'pair') { const v = cd(type.maxValue); return `${names[type.type]}：${v}${v}`; }
        if (type.type === 'threeOfAKind') { const v = cd(type.maxValue); return `${names[type.type]}：${v}${v}${v}`; }
        if (type.type === 'fourOfAKind') { const v = cd(type.maxValue); return `${names[type.type]}：${v}${v}${v}${v}`; }
        if (type.type === 'single') { return `${names[type.type]}：${cd(type.maxValue)}`; }
        if (type.type === 'flowerTripleStraight') { return `${names[type.type]}：JJJ-QQQ-KKK`; }
        const m3 = type.description.match(/(\d+)-(\d+)-(\d+)/);
        if (type.type === 'threeStraight' && m3) { return `${names[type.type]}：${cd(+m3[1])}-${cd(+m3[2])}-${cd(+m3[3])}`; }
        if (type.type === 'fiveStraight' && m3) { const m5 = type.description.match(/(\d+)-(\d+)-(\d+)-(\d+)-(\d+)/); if(m5) return `${names[type.type]}：${cd(+m5[1])}-${cd(+m5[2])}-${cd(+m5[3])}-${cd(+m5[4])}-${cd(+m5[5])}`; }
        if (type.type === 'threePairStraight' && m3) { return `${names[type.type]}：${cd(+m3[1])}${cd(+m3[1])}-${cd(+m3[2])}${cd(+m3[2])}-${cd(+m3[3])}${cd(+m3[3])}`; }
        if (type.type === 'twoTriples' && m3) { return `${names[type.type]}：${cd(+m3[1])}${cd(+m3[1])}${cd(+m3[1])}-${cd(+m3[2])}${cd(+m3[2])}${cd(+m3[2])}`; }
        if (type.type === 'adjacentTriples' && m3) { return `${names[type.type]}：${cd(+m3[1])}${cd(+m3[1])}${cd(+m3[1])}-${cd(+m3[2])}${cd(+m3[2])}${cd(+m3[2])}`; }
        if (type.type === 'tripleStraight' && m3) { return `${names[type.type]}：${cd(+m3[1])}${cd(+m3[1])}${cd(+m3[1])}-${cd(+m3[2])}${cd(+m3[2])}${cd(+m3[2])}-${cd(+m3[3])}${cd(+m3[3])}${cd(+m3[3])}`; }
        if (type.type === 'fivePairStraight' && m3) { const m5 = type.description.match(/(\d+)-(\d+)-(\d+)-(\d+)-(\d+)/); if(m5) return `${names[type.type]}：${cd(+m5[1])}${cd(+m5[1])}-${cd(+m5[2])}${cd(+m5[2])}-${cd(+m5[3])}${cd(+m5[3])}-${cd(+m5[4])}${cd(+m5[4])}-${cd(+m5[5])}${cd(+m5[5])}`; }
        return type.description;
      }
      
      let text = '';
      let winner = '';
      
      // 1. 五路全胜判定
      if (playerWins >= 5) {
        text += `<span style="color: #4ade80;">${__t('tut_settle_player_5win')}</span>`;
        winner = 'player';
      } else if (opponentWins >= 5) {
        text += `<span style="color: #f87171;">${__t('tut_settle_opp_5win')}</span>`;
        winner = 'opponent';
      } else {
        text += __t('tut_settle_no5win');

        // 2. 牌面获胜判定
        const playerCards = getAllCards('player');
        const opponentCards = getAllCards('opponent');
        const playerType = identifyCardType(playerCards);
        const opponentType = identifyCardType(opponentCards);

        text += `<br><br>`;
        text += `${__t('tut_settle_my_type')}${formatTypeForTutorial(playerType)}<br>`;
        text += `${__t('tut_settle_opp_type')}${formatTypeForTutorial(opponentType)}<br><br>`;

        if (playerType.level > opponentType.level) {
          text += `<span style="color: #4ade80;">${__t('tut_settle_my_face_win')}</span>`;
          winner = 'player';
        } else if (opponentType.level > playerType.level) {
          text += `<span style="color: #f87171;">${__t('tut_settle_opp_face_win')}</span>`;
          winner = 'opponent';
        } else if (playerType.maxValue > opponentType.maxValue) {
          text += `<span style="color: #4ade80;">${__t('tut_settle_my_higher')}</span>`;
          winner = 'player';
        } else if (opponentType.maxValue > playerType.maxValue) {
          text += `<span style="color: #f87171;">${__t('tut_settle_opp_higher')}</span>`;
          winner = 'opponent';
        } else {
          winner = 'draw';
        }
      }

      // 最终结论
      text += `<br><br>`;
      if (winner === 'player') {
        text += `<span style="color: #4ade80; font-weight: bold; font-size: 1.05rem;">${__t('tut_settle_my_game_win')}</span>`;
      } else if (winner === 'opponent') {
        text += `<span style="color: #f87171; font-weight: bold; font-size: 1.05rem;">${__t('tut_settle_opp_game_win')}</span>`;
      } else {
        text += `<span style="color: #fbbf24; font-weight: bold; font-size: 1.05rem;">${__t('tut_settle_draw')}</span>`;
      }
      
      return text;
    }

    function setupTutorialStep6() {
      // 绑定"重来一局"按钮
      setTimeout(() => {
        const btn = document.getElementById('tutorial-restart-btn');
        if (btn) {
          btn.addEventListener('click', function(e) {
            e.stopPropagation();
            clearTutorialHighlights();
            // 清场并重新发牌
            clearAllCardSlots();
            resetGameState();
            GameState.gamePhase = 'playing';
            GameState.currentTurn = 'opponent';
            GameState.cardPlayedThisTurn = false;
            GameState.callCardEnabled = false;
            const suits = ['hearts', 'diamonds', 'clubs', 'spades'];
            const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
            const values = { 'A': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'J': 11, 'Q': 12, 'K': 13 };
            const deck = [];
            suits.forEach(suit => {
              ranks.forEach(rank => {
                deck.push({ rank, suit, value: values[rank], display: rank });
              });
            });
            for (let i = deck.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1));
              [deck[i], deck[j]] = [deck[j], deck[i]];
            }
            GameState.playerDeck = deck.slice(0, 26).map((card, i) => ({ ...card, id: 'tut6-pdeck-' + i }));
            GameState.opponentDeck = deck.slice(26, 52).map((card, i) => ({ ...card, id: 'tut6-odeck-' + i }));
            
            // 发6张手牌
            for (let i = 0; i < 6; i++) {
              GameState.playerHand[i] = GameState.playerDeck.shift();
              GameState.opponentHand[i] = GameState.opponentDeck.shift();
            }
            
            renderDeckCardBacks();
            updateUI();
            tutorialRoundLocked = false;
            updateTurnDisplay();
            updateTurnIndicator();
            updateGameStatus(__t('st_opp_turn'), 'st_opp_turn');
            
            // 重新显示高亮和面板
            tutorialPhase = 'interactive';
            enterTutorialStep6Interactive();
            
            // 对方先手，触发对方出牌
            setTimeout(() => {
              if (GameState.currentTurn === 'opponent' && canOpponentPlay()) {
                opponentPlayCard();
              }
            }, 800);
          });
        }
      }, 200);
    }

    function enterTutorialStep6Interactive() {
      const step = TutorialSteps[5]; // id=6, index=5
      clearTutorialHighlights();
      tutorialPhase = 'interactive';
      
      const mask = document.createElement('div');
      mask.className = 'tutorial-mask';
      mask.id = 'tutorial-mask';
      document.querySelector('.game-container').appendChild(mask);
      
      // 合并高亮组：双方手牌区+路牌区+拼点栏+状态栏
      const mergedSelectors = [
        '#player-hand', '#opponent-hand', '#player-road-area', '#opponent-road-area', '#center-divider', '#battlefield'
      ];
      
      const screenWidth = 1920;
      const screenHeight = 1080;
      const pad = 8;
      let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
      
      // 计算所有高亮区域
      function getBBox(selectors) {
        const rects = [];
        selectors.forEach(sel => {
          const el = document.querySelector(sel);
          if (el) rects.push(tutRect(el));
        });
        if (rects.length === 0) return null;
        let t = screenHeight, b = 0, l = screenWidth, r = 0;
        rects.forEach(rc => {
          t = Math.min(t, rc.top - pad); b = Math.max(b, rc.bottom + pad);
          l = Math.min(l, rc.left - pad); r = Math.max(r, rc.right + pad);
        });
        return { t, b, l, r, w: r - l, h: b - t };
      }
      
      const merged = getBBox(mergedSelectors);
      const rank = getBBox(['.rank-panel']);
      const decks = getBBox(['#player-deck', '#opponent-deck']);
      
      // 添加高亮边框
      function addHole(top, left, width, height) {
        if (width <= 0 || height <= 0) return;
        const h = document.createElement('div');
        h.className = 'tutorial-hole-highlight tutorial-hole-highlight-breathe';
        h.style.top = top + 'px';
        h.style.left = left + 'px';
        h.style.width = width + 'px';
        h.style.height = height + 'px';
        h.style.pointerEvents = 'none';
        mask.appendChild(h);
      }
      
      // 合并区域 hole + SVG 镂空路径
      if (merged) {
        pathD += ` M${merged.l} ${merged.t} L${merged.r} ${merged.t} L${merged.r} ${merged.b} L${merged.l} ${merged.b} Z`;
        addHole(merged.t, merged.l, merged.w, merged.h);
      }
      if (rank) {
        pathD += ` M${rank.l} ${rank.t} L${rank.r} ${rank.t} L${rank.r} ${rank.b} L${rank.l} ${rank.b} Z`;
        addHole(rank.t, rank.l, rank.w, rank.h);
      }
      if (decks) {
        pathD += ` M${decks.l} ${decks.t} L${decks.r} ${decks.t} L${decks.r} ${decks.b} L${decks.l} ${decks.b} Z`;
        addHole(decks.t, decks.l, decks.w, decks.h);
      }
      
      // SVG 遮罩（evenodd 镂空）—— 和其他步骤完全一致
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('width', screenWidth);
      svg.setAttribute('height', screenHeight);
      svg.style.position = 'absolute';
      svg.style.top = '0';
      svg.style.left = '0';
      svg.style.pointerEvents = 'none';
      
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', pathD);
      path.setAttribute('fill-rule', 'evenodd');
      path.setAttribute('fill', 'rgba(0, 0, 0, 0.5)');
      svg.appendChild(path);
      mask.appendChild(svg);
      
      // 显示提示面板 - 两种获胜方式 + 结束体验按钮
      const panel = document.createElement('div');
      panel.className = 'tutorial-panel';
      panel.innerHTML = `
        <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 6/${TutorialSteps.length}</div>
        <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('t1_exp_title')}</h3>
        <p style="margin-bottom: 8px;"><strong style="color: #60a5fa;">${__t('t1_win_way')}</strong></p>
        <p style="margin-bottom: 6px; font-size: 0.85rem;">1. <span style="color: #4ade80;">${__t('t1_win_roads')}</span>${__t('t1_win_roads_desc')}</p>
        <p style="margin-bottom: 10px; font-size: 0.85rem;">2. <span style="color: #f472b6;">${__t('t1_win_hand')}</span>${__t('t1_win_hand_desc')}</p>
        <p style="font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px;">${__t('t1_free_play')}</p>
        <div style="text-align: center;">
          <button id="tutorial-end-experience-btn" style="background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; border: none; padding: 6px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer;">${__t('tutx_end_exp')}</button>
        </div>
      `;
      Object.keys(step.panelPosition).forEach(key => {
        panel.style[key] = step.panelPosition[key];
      });
      mask.appendChild(panel);
      
      // 绑定结束体验按钮
      setTimeout(() => {
        const endBtn = document.getElementById('tutorial-end-experience-btn');
        if (endBtn) {
          endBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            endTutorialStep6Experience();
          });
        }
      }, 100);
      
      document.addEventListener('mousemove', handleTutorialAreaHover);
      document.addEventListener('click', handleTutorialInteractiveClick, true);
      document.addEventListener('mouseover', handleTutorialInteractiveMouseOver, true);
      document.addEventListener('mouseenter', handleTutorialInteractiveMouseEnter, true);
      
      // 启动游戏结算检查
      startTutorialStep6GameCheck();
    }
    
    let tutorialStep6CheckTimer = null;
    
    function startTutorialStep6GameCheck() {
      if (tutorialStep6CheckTimer) {
        clearInterval(tutorialStep6CheckTimer);
      }
      tutorialStep6CheckTimer = setInterval(() => {
        if (!isTutorialMode || currentTutorialStep !== 5 || tutorialPhase !== 'interactive') {
          clearInterval(tutorialStep6CheckTimer);
          tutorialStep6CheckTimer = null;
          return;
        }
        checkTutorialStep6WinCondition();
      }, 500);
    }
    
    function checkTutorialStep6WinCondition() {
      if (GameState.gamePhase === 'ended') return;
      
      const playerWins = GameState.playerWins.filter(w => w).length;
      const opponentWins = GameState.opponentWins.filter(w => w).length;
      
      // 五路全胜判定
      if (playerWins >= 5) {
        GameState.gamePhase = 'ended';
        stopCrisisMusic();
        playVictoryMusic();
        updateGameStatus(__t('st_win_five'), 'st_win_five');
        showTutorialStep6Settlement('player', __t('t1_win_roads'));
        return;
      } else if (opponentWins >= 5) {
        GameState.gamePhase = 'ended';
        stopCrisisMusic();
        playDefeatMusic();
        updateGameStatus(__t('st_lose_five'), 'st_lose_five');
        showTutorialStep6Settlement('opponent', __t('t1_win_roads'));
        return;
      }
      
      // 简化流程：双方场上无空位时，结算牌型大小
      const playerAllFilled = GameState.playerField.every(c => c !== null);
      const opponentAllFilled = GameState.opponentField.every(c => c !== null);
      if (playerAllFilled && opponentAllFilled) {
        GameState.gamePhase = 'ended';
        stopCrisisMusic();
        
        const playerCards = getAllCards('player');
        const opponentCards = getAllCards('opponent');
        const playerType = identifyCardType(playerCards);
        const opponentType = identifyCardType(opponentCards);
        
        let winner = 'draw';
        
        if (playerType.level > opponentType.level) {
          winner = 'player';
          playVictoryMusic();
          updateGameStatus(__t('st_win_hand'), 'st_win_hand');
        } else if (opponentType.level > playerType.level) {
          winner = 'opponent';
          playDefeatMusic();
          updateGameStatus(__t('st_lose_hand'), 'st_lose_hand');
        } else if (playerType.maxValue > opponentType.maxValue) {
          winner = 'player';
          playVictoryMusic();
          updateGameStatus(__t('st_win_same_big'), 'st_win_same_big');
        } else if (opponentType.maxValue > playerType.maxValue) {
          winner = 'opponent';
          playDefeatMusic();
          updateGameStatus(__t('st_lose_same_big'), 'st_lose_same_big');
        } else {
          winner = 'draw';
          updateGameStatus(__t('st_draw_hand_identical'), 'st_draw_hand_identical');
        }
        
        showTutorialStep6Settlement(winner, __t('t1_win_hand'));
        return;
      }
      
      // 双方都终止出牌 - 牌面获胜判定
      if (GameState.playerStoppedPlaying && GameState.opponentStoppedPlaying) {
        GameState.gamePhase = 'ended';
        stopCrisisMusic();
        
        const playerCards = getAllCards('player');
        const opponentCards = getAllCards('opponent');
        const playerType = identifyCardType(playerCards);
        const opponentType = identifyCardType(opponentCards);
        
        let winner = 'draw';
        let winType = __t('t1_win_hand');
        
        if (playerType.level > opponentType.level) {
          winner = 'player';
          playVictoryMusic();
          updateGameStatus(__t('st_my_hand_win'), 'st_my_hand_win');
        } else if (opponentType.level > playerType.level) {
          winner = 'opponent';
          playDefeatMusic();
          updateGameStatus(__t('st_opp_hand_win'), 'st_opp_hand_win');
        } else if (playerType.maxValue > opponentType.maxValue) {
          winner = 'player';
          playVictoryMusic();
          updateGameStatus(__t('st_win_hand_big'), 'st_win_hand_big');
        } else if (opponentType.maxValue > playerType.maxValue) {
          winner = 'opponent';
          playDefeatMusic();
          updateGameStatus(__t('st_lose_hand_big'), 'st_lose_hand_big');
        } else {
          winner = 'draw';
          updateGameStatus(__t('st_draw_all'), 'st_draw_all');
        }
        
        showTutorialStep6Settlement(winner, winType);
      }
    }
    
    function showTutorialStep6Settlement(winner, winType) {
      if (tutorialStep6CheckTimer) {
        clearInterval(tutorialStep6CheckTimer);
        tutorialStep6CheckTimer = null;
      }
      
      const panel = document.querySelector('.tutorial-panel');
      if (!panel) return;
      panel.style.pointerEvents = 'auto';
      
      const resultText = getTutorialSettlementText();
      panel.innerHTML = `
        <div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 6/${TutorialSteps.length}</div>
        <h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('t1_settle_title')}</h3>
        <p style="margin-bottom: 12px;">${resultText}</p>
        <div style="display: flex; justify-content: center; gap: 12px; margin-top: 10px;">
          <button id="tutorial-restart-btn-2" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: #1e293b; border: none; padding: 8px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;">${__t('tut_restart_btn')}</button>
          <button id="tutorial-end-btn" style="background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; border: none; padding: 8px 24px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;">${__t('tutx_exit')}</button>
        </div>
      `;
      
      setTimeout(() => {
        const restartBtn = document.getElementById('tutorial-restart-btn-2');
        const endBtn = document.getElementById('tutorial-end-btn');
        
        if (restartBtn) {
          restartBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            restartTutorialStep6();
          });
        }
        if (endBtn) {
          endBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            exitTutorial();
          });
        }
      }, 100);
    }
    
    function restartTutorialStep6() {
      stopEndGameMusic();
      stopCrisisMusic();
      resetCrisisMusicState();
      
      clearTutorialHighlights();
      clearAllCardSlots();
      resetGameState();
      GameState.gamePhase = 'playing';
      GameState.currentTurn = 'opponent';
      GameState.cardPlayedThisTurn = false;
      GameState.callCardEnabled = false;
      
      const suits = ['hearts', 'diamonds', 'clubs', 'spades'];
      const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
      const values = { 'A': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'J': 11, 'Q': 12, 'K': 13 };
      const deck = [];
      suits.forEach(suit => {
        ranks.forEach(rank => {
          deck.push({ rank, suit, value: values[rank], display: rank });
        });
      });
      for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [deck[i], deck[j]] = [deck[j], deck[i]];
      }
      GameState.playerDeck = deck.slice(0, 26).map((card, i) => ({ ...card, id: 'tut6-pdeck-' + i }));
      GameState.opponentDeck = deck.slice(26, 52).map((card, i) => ({ ...card, id: 'tut6-odeck-' + i }));
      
      // 发6张手牌
      for (let i = 0; i < 6; i++) {
        GameState.playerHand[i] = GameState.playerDeck.shift();
        GameState.opponentHand[i] = GameState.opponentDeck.shift();
      }
      
      renderDeckCardBacks();
      updateUI();
      tutorialRoundLocked = false;
      updateTurnDisplay();
      updateTurnIndicator();
      updateGameStatus(__t('st_opp_turn'), 'st_opp_turn');
      
      tutorialPhase = 'interactive';
      enterTutorialStep6Interactive();
      
      // 对方先手，触发对方出牌
      setTimeout(() => {
        if (GameState.currentTurn === 'opponent' && canOpponentPlay()) {
          opponentPlayCard();
        }
      }, 800);
    }
    
    function endTutorialStep6Experience() {
      if (tutorialStep6CheckTimer) {
        clearInterval(tutorialStep6CheckTimer);
        tutorialStep6CheckTimer = null;
      }
      stopEndGameMusic();
      exitTutorial();
    }

    function setupTutorialStep4() {
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      
      const suits = ['hearts', 'diamonds', 'clubs', 'spades'];
      const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
      const values = { 'A': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'J': 11, 'Q': 12, 'K': 13 };
      
      const deck = [];
      suits.forEach(suit => {
        ranks.forEach(rank => {
          deck.push({ rank, suit, value: values[rank], display: rank });
        });
      });
      
      for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [deck[i], deck[j]] = [deck[j], deck[i]];
      }
      
      GameState.playerDeck = deck.slice(0, 26).map((card, index) => ({
        ...card,
        id: 'tut-step4-deck-' + index
      }));
      
      GameState.opponentDeck = deck.slice(26, 52).map((card, index) => ({
        ...card,
        id: 'tut-step4-opp-deck-' + index
      }));
      // 确保对方牌堆顶部是7点（玩家出牌后对方在第五路打出7）
      const sevenIndex = GameState.opponentDeck.findIndex(c => c.rank === '7');
      if (sevenIndex > 0) {
        const seven = GameState.opponentDeck.splice(sevenIndex, 1)[0];
        GameState.opponentDeck.push(seven);
      }
      
      GameState.gamePhase = 'playing';
      GameState.currentTurn = 'player';
      GameState.cardPlayedThisTurn = false;

      updateUI();
      renderDeckCardBacks();
    }

    function validateTutorialStep4(card) {
      return true;
    }

    function handleTutorialCardClick(index, cardType, e) {
      const step = TutorialSteps[currentTutorialStep];
      if (!step.interactive || !step.validate) return;
      if (tutorialPhase !== 'interactive') return;
      if (playState.isPlaying || GameState.isDealingCards) return;
      if (GameState.cardPlayedThisTurn) return;
      if (tutorialRoundLocked) return;
      
      let card;
      if (cardType === 'hand') {
        card = GameState.playerHand[index];
      }
      
      if (!card) return;
      
      if (currentTutorialStep === 1) {
        if (card.value === 1) {
          let slot = null;
          if (e) {
            slot = e.target.closest('.player-hand-slot');
          }
          if (!slot) {
            slot = document.querySelector('#player-hand > .player-hand-slot[data-hand-slot="' + index + '"]');
          }
          if (slot) {
            const cardEl = slot.querySelector('.card');
            if (cardEl) {
              cardEl.classList.remove('tutorial-card-fail-shake');
              void cardEl.offsetWidth;
              
              const wasHover = cardEl.classList.contains('card-hover');
              if (wasHover) {
                cardEl.classList.remove('card-hover');
              }
              
              cardEl.classList.add('tutorial-card-fail-shake');
              setTimeout(() => {
                cardEl.classList.remove('tutorial-card-fail-shake');
                if (wasHover) {
                  cardEl.classList.add('card-hover');
                }
              }, 600);
            }
          }
        } else if (card.value === 13) {
          CardPlayExecutor.executeCardPlay('player', {
            cardIndex: index,
            sourceType: cardType,
            roadIndex: 0
          }, {
            onAnimationEnd: function () {
              updatePlayerDeck();
              GameState.cardPlayedThisTurn = true;
              setTimeout(() => {
                nextTutorialStep();
              }, 2000);
            }
          });
        }
      } else if (currentTutorialStep === 2) {
        if (GameState.cardPlayedThisTurn) return;
        
        const emptyRoadIndex = GameState.playerField.findIndex(c => c === null);
        if (emptyRoadIndex === -1) return;
        
        GameState.cardPlayedThisTurn = true;
        tutorialRoundLocked = true;
        
        CardPlayExecutor.executeCardPlay('player', {
          cardIndex: index,
          sourceType: cardType,
          roadIndex: emptyRoadIndex
        }, {
          skipMatchCheck: true,
          onAnimationEnd: function() {
            checkRoadResult(emptyRoadIndex, false);
            
            setTimeout(() => {
              GameState.currentTurn = 'opponent';
              
              setTimeout(() => {
                const opponentEmptyRoadIndex = GameState.opponentField.findIndex(c => c === null);
                if (opponentEmptyRoadIndex !== -1 && opponentEmptyRoadIndex <= 3) {
                  CardPlayExecutor.executeCardPlay('opponent', {
                    cardIndex: 0,
                    sourceType: 'hand',
                    roadIndex: opponentEmptyRoadIndex
                  }, {
                    skipMatchCheck: true,
                    onAnimationEnd: function() {
                      checkRoadResult(opponentEmptyRoadIndex, false);
                      
                      setTimeout(() => {
                        const maxPlayerHandValue = Math.max(...GameState.playerHand.filter(c => c).map(card => card.value));
                        const maxOpponentFieldValue = Math.max(...GameState.opponentField.filter(card => card).map(card => card.value));
                        
                        if (maxPlayerHandValue < maxOpponentFieldValue) {
                          setTimeout(() => {
                            nextTutorialStep();
                          }, 1000);
                        } else {
                          GameState.currentTurn = 'player';
                          GameState.cardPlayedThisTurn = false;
                          tutorialRoundLocked = false;
                          tutorialPhase = 'interactive';
                          enterTutorialInteractiveMode();
                        }
                      }, 1000);
                    }
                  });
                }
              }, 1000);
            }, 1000);
          }
        });
      } else if (currentTutorialStep === 3) {
        // 交互步骤4：走正常出牌流程
        if (GameState.cardPlayedThisTurn) return;
        const card = GameState.playerHand[index];
        if (!card) return;
        const emptyRoadIndex = GameState.playerField.findIndex(c => c === null);
        if (emptyRoadIndex === -1) return;
        GameState.cardPlayedThisTurn = true;
        tutorialRoundLocked = true;
        CardPlayExecutor.executeCardPlay('player', {
          cardIndex: index,
          sourceType: cardType,
          roadIndex: emptyRoadIndex
        }, {
          skipMatchCheck: true,
          onAnimationEnd: function() {
            checkRoadResult(emptyRoadIndex, false);
            setTimeout(() => {
              GameState.currentTurn = 'opponent';
              setTimeout(() => {
                const oppEmpty = GameState.opponentField.findIndex(c => c === null);
                if (oppEmpty !== -1) {
                  CardPlayExecutor.executeCardPlay('opponent', {
                    cardIndex: 0,
                    sourceType: 'deck',
                    roadIndex: oppEmpty
                  }, {
                    skipMatchCheck: true,
                    onAnimationEnd: function() {
                      checkRoadResult(oppEmpty, false);
                      setTimeout(() => {
                        GameState.currentTurn = 'player';
                        GameState.cardPlayedThisTurn = false;
                        tutorialRoundLocked = false;
                        if (GameState.playerField.every(c => c !== null) && GameState.opponentField.every(c => c !== null)) {
                          setTimeout(() => { nextTutorialStep(); }, 1500);
                        }
                      }, 1000);
                    }
                  });
                } else {
                  GameState.currentTurn = 'player';
                  GameState.cardPlayedThisTurn = false;
                  tutorialRoundLocked = false;
                  if (GameState.playerField.every(c => c !== null)) {
                    setTimeout(() => { nextTutorialStep(); }, 1500);
                  }
                }
              }, 1000);
            }, 1000);
          }
        });
      }
    }

    function nextTutorialStep() {
      if (currentTutorialStep < TutorialSteps.length - 1) {
        currentTutorialStep++;
        if (currentTutorialStep > tutorialMaxStep) {
          tutorialMaxStep = currentTutorialStep;
        }
        tutorialPhase = 'showing';
        tutorialRoundLocked = false;
        GameState.cardPlayedThisTurn = false;
        showTutorialStep(currentTutorialStep);
        updateTutorialButtons();
      } else {
        exitTutorial();
      }
    }

    function prevTutorialStep() {
      if (currentTutorialStep > 0) {
        currentTutorialStep--;
        tutorialPhase = 'showing';
        showTutorialStep(currentTutorialStep);
        updateTutorialButtons();
      }
    }

    function handleTutorialClick(e) {
      if (!isTutorialMode) return;
      if (!tutorialReady) return;
      if (tutorialDialogActive) return;
      // 点击步骤指示器时不触发下一步，交给步骤导航处理
      if (e.target.closest('.tutorial-step-indicator')) return;
      
      const step = TutorialSteps[currentTutorialStep];
      if (step.interactive) {
        if (tutorialPhase === 'showing') {
          if (step.id === 6) {
            // 步骤6：点击"重新体验"按钮以外区域，进入步骤7
            if (!e.target.closest('#tutorial-restart-btn')) {
              e.preventDefault();
              e.stopPropagation();
              nextTutorialStep();
            }
            return;
          }
          tutorialPhase = 'interactive';
          enterTutorialInteractiveMode();
        } else {
          return;
        }
        return;
      }
      
      e.preventDefault();
      nextTutorialStep();
    }

    function handleTutorialWheel(e) {
      if (!isTutorialMode) return;
      if (!tutorialReady) return;
      if (tutorialDialogActive) return;
      e.preventDefault();
      
      const goingBack = e.deltaY < 0;
      
      if (goingBack && currentTutorialStep > 0) {
        showTutorialGoBackDialog();
      }
    }

    function showTutorialGoBackDialog() {
      tutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_goback_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_goback_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" onclick="confirmGoBackTutorial(event)">确定</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" onclick="cancelGoBackTutorial(event)">取消</button>
        </div>
      `;
      document.body.appendChild(dialog);
    }

    function confirmGoBackTutorial(e) {
      if (e) e.stopPropagation();
      const dialog = document.querySelector('.tutorial-confirm-dialog');
      if (dialog) dialog.remove();
      tutorialDialogActive = false;
      tutorialRoundLocked = false;
      GameState.cardPlayedThisTurn = false;
      // 交互阶段退回到当前步骤的showing，showing阶段退回到上一步
      if (tutorialPhase === 'interactive') {
        tutorialPhase = 'showing';
        showTutorialStep(currentTutorialStep);
        updateTutorialButtons();
      } else {
        prevTutorialStep();
      }
    }

    function cancelGoBackTutorial(e) {
      if (e) e.stopPropagation();
      const dialog = document.querySelector('.tutorial-confirm-dialog');
      if (dialog) dialog.remove();
      setTimeout(() => {
        tutorialDialogActive = false;
      }, 100);
    }

    function handleTutorialRightClick(e) {
      if (!isTutorialMode) return;
      if (!tutorialReady) return;
      if (tutorialDialogActive) return;
      e.preventDefault();
      showTutorialConfirmDialog();
    }

    function showTutorialConfirmDialog() {
      tutorialDialogActive = true;
      const dialog = document.createElement('div');
      dialog.className = 'tutorial-confirm-dialog';
      dialog.innerHTML = `
        <div class="tutorial-confirm-title">${__t('tx_exit_title')}</div>
        <div class="tutorial-confirm-text">${__t('tx_exit_text')}</div>
        <div class="tutorial-confirm-buttons">
          <button class="tutorial-confirm-btn tutorial-confirm-btn-confirm" onclick="confirmExitTutorial(event)">确定</button>
          <button class="tutorial-confirm-btn tutorial-confirm-btn-cancel" onclick="cancelExitTutorial(event)">取消</button>
        </div>
      `;
      document.body.appendChild(dialog);
    }

    function confirmExitTutorial(e) {
      if (e) e.stopPropagation();
      const dialog = document.querySelector('.tutorial-confirm-dialog');
      if (dialog) dialog.remove();
      tutorialDialogActive = false;
      exitTutorial();
    }

    function cancelExitTutorial(e) {
      if (e) e.stopPropagation();
      const dialog = document.querySelector('.tutorial-confirm-dialog');
      if (dialog) dialog.remove();
      setTimeout(() => {
        tutorialDialogActive = false;
      }, 100);
    }

    // ★ 2026-9-20 教程框上方退出提示：自动为所有 .tutorial-panel 顶部插入提示行
    //   （MutationObserver 覆盖三个教程的全部面板创建点，含未来新增）
    //   注：安卓长按退出为既有能力——长按触发 contextmenu 事件走右键同链路，无需另加处理
    (function () {
      function _hintText() {
        return (typeof __t === 'function') ? __t('tx_exit_hint', '鼠标右键退出教程（安卓长按退出）') : '鼠标右键退出教程（安卓长按退出）';
      }
      var _mo = new MutationObserver(function () {
        try {
          document.querySelectorAll('.tutorial-panel').forEach(function (p) {
            if (p.querySelector('.tutorial-exit-hint')) return;
            var h = document.createElement('div');
            h.className = 'tutorial-exit-hint';
            h.textContent = _hintText();
            p.insertBefore(h, p.firstChild);
          });
        } catch (e) {}
      });
      if (document.body) _mo.observe(document.body, { childList: true, subtree: true });
      else document.addEventListener('DOMContentLoaded', function () { _mo.observe(document.body, { childList: true, subtree: true }); });
    })();

    function enterTutorialInteractiveMode() {
      const step = TutorialSteps[currentTutorialStep];
      
      const mask = document.getElementById('tutorial-mask');
      if (mask) {
        mask.style.pointerEvents = 'none';
        const svg = mask.querySelector('svg');
        if (svg) {
          svg.style.pointerEvents = 'none';
          const path = svg.querySelector('path');
          if (path) {
            path.style.pointerEvents = 'none';
          }
        }
      }
      
      document.querySelectorAll('.tutorial-hole-highlight').forEach(el => {
        el.style.pointerEvents = 'none';
        el.classList.add('tutorial-hole-highlight-breathe');
      });
      
      // 如果步骤有 interactiveHighlight，进入交互阶段时重建整个高亮区域（与 showTutorialStep 一致）
      if (step && step.interactiveHighlight) {
        const mask = document.getElementById('tutorial-mask');
        if (mask) {
          mask.innerHTML = '';
          const screenWidth = 1920;
          const screenHeight = 1080;
          let pathD = `M0 0 L${screenWidth} 0 L${screenWidth} ${screenHeight} L0 ${screenHeight} Z`;
          const rects = [];
          const padding = 10;
          
          step.interactiveHighlight.forEach(selector => {
            const element = document.querySelector(selector);
            if (element) {
              rects.push(tutRect(element));
            }
          });
          
          if (rects.length > 0) {
            if ((step.id === 2 || step.id === 3) && rects.length >= 4) {
              // 与 showTutorialStep 一致：合并所有 rect 为一个整体大框
              let minTop = screenHeight;
              let maxBottom = 0;
              let minLeft = screenWidth;
              let maxRight = 0;
              
              rects.forEach(rect => {
                minTop = Math.min(minTop, rect.top - padding);
                maxBottom = Math.max(maxBottom, rect.bottom + padding);
                minLeft = Math.min(minLeft, rect.left - padding);
                maxRight = Math.max(maxRight, rect.right + padding);
              });
              
              const x = minLeft;
              const y = minTop;
              const w = maxRight - minLeft;
              const h = maxBottom - minTop;
              
              pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
              
              const holeHighlight = document.createElement('div');
              holeHighlight.className = 'tutorial-hole-highlight tutorial-hole-highlight-breathe';
              holeHighlight.style.top = y + 'px';
              holeHighlight.style.left = x + 'px';
              holeHighlight.style.width = w + 'px';
              holeHighlight.style.height = h + 'px';
              holeHighlight.style.pointerEvents = 'none';
              mask.appendChild(holeHighlight);
            } else if (step.id === 4 && rects.length >= 4) {
              // 步骤4：除牌堆外合并为大框，牌堆单独高亮
              let minTop = screenHeight;
              let maxBottom = 0;
              let minLeft = screenWidth;
              let maxRight = 0;
              let deckRect = null;
              
              step.interactiveHighlight.forEach((selector, idx) => {
                const element = document.querySelector(selector);
                if (!element) return;
                const rect = tutRect(element);
                if (selector === '#player-deck') {
                  deckRect = rect;
                } else {
                  minTop = Math.min(minTop, rect.top - padding);
                  maxBottom = Math.max(maxBottom, rect.bottom + padding);
                  minLeft = Math.min(minLeft, rect.left - padding);
                  maxRight = Math.max(maxRight, rect.right + padding);
                }
              });
              
              if (minTop < screenHeight) {
                const x = minLeft;
                const y = minTop;
                const w = maxRight - minLeft;
                const h = maxBottom - minTop;
                pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
                const holeHighlight = document.createElement('div');
                holeHighlight.className = 'tutorial-hole-highlight tutorial-hole-highlight-breathe';
                holeHighlight.style.top = y + 'px';
                holeHighlight.style.left = x + 'px';
                holeHighlight.style.width = w + 'px';
                holeHighlight.style.height = h + 'px';
                holeHighlight.style.pointerEvents = 'none';
                mask.appendChild(holeHighlight);
              }
              
              if (deckRect) {
                const x = deckRect.left - padding;
                const y = deckRect.top - padding;
                const w = deckRect.width + padding * 2;
                const h = deckRect.height + padding * 2;
                pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
                const holeHighlight = document.createElement('div');
                holeHighlight.className = 'tutorial-hole-highlight tutorial-hole-highlight-breathe';
                holeHighlight.style.top = y + 'px';
                holeHighlight.style.left = x + 'px';
                holeHighlight.style.width = w + 'px';
                holeHighlight.style.height = h + 'px';
                holeHighlight.style.pointerEvents = 'none';
                mask.appendChild(holeHighlight);
              }
            } else {
              rects.forEach(rect => {
                const x = rect.left - padding;
                const y = rect.top - padding;
                const w = rect.width + padding * 2;
                const h = rect.height + padding * 2;
                pathD += ` M${x} ${y} L${x + w} ${y} L${x + w} ${y + h} L${x} ${y + h} Z`;
                const holeHighlight = document.createElement('div');
                holeHighlight.className = 'tutorial-hole-highlight tutorial-hole-highlight-breathe';
                holeHighlight.style.top = y + 'px';
                holeHighlight.style.left = x + 'px';
                holeHighlight.style.width = w + 'px';
                holeHighlight.style.height = h + 'px';
                holeHighlight.style.pointerEvents = 'none';
                mask.appendChild(holeHighlight);
              });
            }
            
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('width', screenWidth);
            svg.setAttribute('height', screenHeight);
            svg.style.position = 'absolute';
            svg.style.top = '0';
            svg.style.left = '0';
            svg.style.pointerEvents = 'none';
            const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            pathEl.setAttribute('d', pathD);
            pathEl.setAttribute('fill-rule', 'evenodd');
            pathEl.setAttribute('fill', 'rgba(0, 0, 0, 0.8)');
            pathEl.style.pointerEvents = 'none';
            svg.appendChild(pathEl);
            mask.appendChild(svg);
          }
        }
      }
      
      removeTutorialHoverTips();
  
  // 如果面板因 mask.innerHTML='' 被清空，重新创建
  let panel = document.querySelector('.tutorial-panel');
  if (!panel && mask) {
    panel = document.createElement('div');
    panel.className = 'tutorial-panel';
    panel.style.pointerEvents = 'auto';
    Object.keys(step.panelPosition).forEach(key => {
      panel.style[key] = step.panelPosition[key];
    });
    mask.appendChild(panel);
  }
  if (panel) {
        let panelContent = '';
        if (currentTutorialStep === 1) {
          panelContent = `<div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 2/${TutorialSteps.length}</div><h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('t1_area_title')}</h3><p><span class="tutorial-area-item" data-area="battlefield">${__t('t1_area_battlefield')}</span><br><br><span class="tutorial-area-item" data-area="center-divider">${__t('t1_area_divider')}</span><br><br><span class="tutorial-area-item" data-area="player-road-area">${__t('t1_area_road')}</span><br><br><span class="tutorial-area-item" data-area="player-hand">${__t('t1_area_hand')}</span><br><br><span class="tutorial-area-item" data-area="card-points">${__t('t1_area_points')}</span></p>`;
        } else if (currentTutorialStep === 2) {
          panelContent = `<div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 3/${TutorialSteps.length}</div><h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('t1_area_title')}</h3><p><span class="tutorial-area-item" data-area="battlefield">${__t('t1_area_battlefield')}</span><br><br><span class="tutorial-area-item" data-area="center-divider">${__t('t1_area_divider')}</span><br><br><span class="tutorial-area-item" data-area="player-road-area">${__t('t1_area_road')}</span><br><br><span class="tutorial-area-item" data-area="player-hand">${__t('t1_area_hand')}</span><br><br><span class="tutorial-area-item" data-area="card-points">${__t('t1_area_points')}</span></p>`;
        } else if (currentTutorialStep === 3) {
          panelContent = `<div class="tutorial-step-indicator-interactive">${__t('tutx_istep')} 4/${TutorialSteps.length}</div><h3 style="color: #fbbf24; margin-top: 0; margin-bottom: 10px;">${__t('t1_area_title')}</h3><p><span class="tutorial-area-item" data-area="battlefield">${__t('t1_area_battlefield')}</span><br><br><span class="tutorial-area-item" data-area="center-divider">${__t('t1_area_divider')}</span><br><br><span class="tutorial-area-item" data-area="player-road-area">${__t('t1_area_road')}</span><br><br><span class="tutorial-area-item" data-area="player-hand">${__t('t1_area_hand')}</span><br><br><span class="tutorial-area-item" data-area="player-deck">${__t('t1_area_deck')}</span><br><br><span class="tutorial-area-item" data-area="card-points">${__t('t1_area_points')}</span></p>`;
        }
        panel.innerHTML = panelContent;
      }
      
      document.addEventListener('mousemove', handleTutorialAreaHover);
      document.addEventListener('click', handleTutorialInteractiveClick, true);
      document.addEventListener('mouseover', handleTutorialInteractiveMouseOver, true);
      document.addEventListener('mouseenter', handleTutorialInteractiveMouseEnter, true);
      
      if (currentTutorialStep === 2 && GameState.currentTurn === 'opponent') {
        setTimeout(() => {
          const opponentEmptyRoadIndex = GameState.opponentField.findIndex(c => c === null);
          if (opponentEmptyRoadIndex !== -1) {
            CardPlayExecutor.executeCardPlay('opponent', {
              cardIndex: 0,
              sourceType: 'hand',
              roadIndex: opponentEmptyRoadIndex
            }, {
              skipMatchCheck: true,
              onAnimationEnd: function() {
                GameState.cardPlayedThisTurn = true;
                checkRoadResult(opponentEmptyRoadIndex, false);
                setTimeout(() => {
                  GameState.currentTurn = 'player';
                  GameState.cardPlayedThisTurn = false;
                }, 1000);
              }
            });
          }
        }, 1000);
      }
    }

    function isInsideHighlightedArea(target) {
      if (!target || typeof target.closest !== 'function') return true;
      const step = TutorialSteps[currentTutorialStep];
      let allowedSelectors = [
        '.tutorial-panel',
        '.tutorial-nav-btn'
      ];
      // 交互阶段使用 interactiveHighlight（如果有），否则使用 highlight
      const highlightSelectors = (step && step.interactiveHighlight) || (step && step.highlight) || [];
      if (Array.isArray(highlightSelectors)) {
        allowedSelectors = allowedSelectors.concat(highlightSelectors);
      } else if (highlightSelectors) {
        allowedSelectors.push(highlightSelectors);
      }
      return allowedSelectors.some(selector => target.closest(selector));
    }

    function handleTutorialInteractiveClick(e) {
      if (tutorialPhase !== 'interactive') return;
      if (!isTutorialMode) return;
      if (tutorialDialogActive) return;
      if (currentTutorialStep === 5) return; // 步骤6自由对战，不拦截
      if (!isInsideHighlightedArea(e.target)) {
        e.stopPropagation();
        e.preventDefault();
      }
    }

    function handleTutorialInteractiveMouseOver(e) {
      if (tutorialPhase !== 'interactive') return;
      if (!isTutorialMode) return;
      if (currentTutorialStep === 5) return;
      if (!isInsideHighlightedArea(e.target)) {
        e.stopPropagation();
        e.preventDefault();
      }
    }

    function handleTutorialInteractiveMouseEnter(e) {
      if (tutorialPhase !== 'interactive') return;
      if (!isTutorialMode) return;
      if (currentTutorialStep === 5) return;
      if (!isInsideHighlightedArea(e.target)) {
        e.stopPropagation();
        e.preventDefault();
      }
    }

    function handleTutorialAreaHover(e) {
      if (tutorialPhase !== 'interactive') return;
      
      let currentArea = null;
      
      if (e.target.closest('.card')) {
        currentArea = 'card-points';
      } else if (e.target.closest('.player-hand-slot') || e.target.closest('#player-hand')) {
        currentArea = 'player-hand';
      } else if (e.target.closest('#opponent-road-area') || e.target.closest('#player-road-area')) {
        currentArea = 'player-road-area';
      } else if (e.target.closest('#battlefield')) {
        currentArea = 'battlefield';
      } else if (e.target.closest('#center-divider')) {
        currentArea = 'center-divider';
      } else if (e.target.closest('#player-deck')) {
        currentArea = 'player-deck';
      }
      
      document.querySelectorAll('.tutorial-area-item').forEach(item => {
        item.classList.remove('tutorial-highlighted');
      });
      
      if (currentArea) {
        const highlightedItem = document.querySelector('.tutorial-area-item[data-area="' + currentArea + '"]');
        if (highlightedItem) {
          highlightedItem.classList.add('tutorial-highlighted');
        }
      }
    }

    let lastTutorialHoverArea = null;

    function addTutorialHoverTips() {
      document.addEventListener('mousemove', handleTutorialMouseMove);
    }

    function removeTutorialHoverTips() {
      document.removeEventListener('mousemove', handleTutorialMouseMove);
      document.removeEventListener('mousemove', handleTutorialAreaHover);
      document.removeEventListener('click', handleTutorialInteractiveClick, true);
      document.removeEventListener('mouseover', handleTutorialInteractiveMouseOver, true);
      document.removeEventListener('mouseenter', handleTutorialInteractiveMouseEnter, true);
      hideTutorialHoverTip();
    }

    function handleTutorialMouseMove(e) {
      if (tutorialPhase !== 'interactive') return;
      
      let currentArea = null;
      let tip = '';
      
      const slot = e.target.closest('.player-hand-slot');
      if (slot) {
        const index = parseInt(slot.getAttribute('data-hand-slot'));
        const card = GameState.playerHand[index];
        if (!card) {
          currentArea = 'hand-empty';
          tip = '功能牌区：包含手牌、牌堆、明牌、暗牌';
        } else if (card.value === 1) {
          currentArea = 'hand-A';
          tip = '本游戏A点=1点，小于对方的10哦';
        } else if (card.value === 13) {
          currentArea = 'hand-K';
          tip = '本游戏K点=13点，大于对方的10了';
        } else {
          currentArea = 'hand-other';
          tip = '手牌区：6张手牌，点击即打出到空位';
        }
      } else if (e.target.closest('#battlefield')) {
        currentArea = 'battlefield';
        tip = '状态栏：显示当前游戏状态和提示信息';
      } else if (e.target.closest('#center-divider')) {
        currentArea = 'center-divider';
        tip = '拼点栏：显示每路拼点结果，蓝色✓表示我方获胜，红色×表示对方获胜';
      } else if (e.target.closest('#player-road-area')) {
        currentArea = 'player-road-area';
        tip = '路牌区：放置场牌和叠牌，每路最多9张牌';
      } else if (e.target.closest('#opponent-road-area')) {
        currentArea = 'opponent-road-area';
        tip = '对方路牌区：显示对方的场牌和叠牌';
      } else if (e.target.closest('#player-hand')) {
        currentArea = 'player-hand';
        tip = '功能牌区：包含手牌、牌堆、明牌、暗牌';
      }
      
      if (currentArea !== lastTutorialHoverArea) {
        if (currentArea) {
          showTutorialHoverTip(e, tip);
        } else {
          hideTutorialHoverTip();
        }
        lastTutorialHoverArea = currentArea;
      }
    }

    function showTutorialHoverTip(e, tip) {
      hideTutorialHoverTip();
      
      const tipEl = document.createElement('div');
      tipEl.className = 'tutorial-hover-tip';
      tipEl.id = 'tutorial-hover-tip';
      tipEl.textContent = tip;
      tipEl.style.position = 'fixed';
      tipEl.style.left = (e.clientX) + 'px';
      tipEl.style.top = (e.clientY - 15) + 'px';
      tipEl.style.transform = 'translate(-50%, -100%)';
      
      tipEl.style.background = 'rgba(26, 15, 51, 0.95)';
      tipEl.style.border = '2px solid rgba(251, 191, 36, 0.8)';
      tipEl.style.borderRadius = '8px';
      tipEl.style.padding = '12px 16px';
      tipEl.style.color = '#fff';
      tipEl.style.fontSize = '14px';
      tipEl.style.zIndex = '10002';
      tipEl.style.pointerEvents = 'none';
      tipEl.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 191, 36, 0.3)';
      
      document.body.appendChild(tipEl);
    }

    function hideTutorialHoverTip() {
      const tipEl = document.getElementById('tutorial-hover-tip');
      if (tipEl) tipEl.remove();
    }

    function addTutorialEffectOverlay(slot, type) {
      document.querySelectorAll('.tutorial-effect-overlay').forEach(el => el.remove());
      
      const rect = tutRect(slot);
      const overlay = document.createElement('div');
      overlay.className = 'tutorial-effect-overlay';
      overlay.style.position = 'fixed';
      overlay.style.left = rect.left + 'px';
      overlay.style.top = rect.top + 'px';
      overlay.style.width = rect.width + 'px';
      overlay.style.height = rect.height + 'px';
      overlay.style.borderRadius = '8px';
      
      if (type === 'shake') {
        overlay.classList.add('tutorial-effect-shake');
        setTimeout(() => {
          overlay.remove();
        }, 500);
      } else if (type === 'glow') {
        overlay.classList.add('tutorial-effect-glow');
        setTimeout(() => {
          overlay.remove();
        }, 2000);
      }
      
      document.body.appendChild(overlay);
    }

    function exitTutorial() {
      isTutorialMode = false;
      tutorialReady = false;
      currentTutorialType = null;
      tutorialDialogActive = false;
      clearTutorialHighlights();
      document.getElementById('tutorial-overlay').classList.remove('tutorial-active');
      
      const mask = document.getElementById('tutorial-mask');
      if (mask) mask.remove();
      
      document.removeEventListener('click', handleTutorialClick);
      document.removeEventListener('wheel', handleTutorialWheel);
      document.removeEventListener('contextmenu', handleTutorialRightClick);
      removeTutorialHoverTips();
      
      const startBtn = GameElements.ui.startBtn;
      const stopBtn = GameElements.ui.stopBtn;
      const restartBtn = GameElements.ui.restartBtn;
      
      startBtn.style.display = '';
      stopBtn.style.display = '';
      restartBtn.style.display = '';
      
      stopBtn.disabled = true;
      stopBtn.style.opacity = '0.5';
      stopBtn.style.cursor = 'not-allowed';
      
      stopCrisisMusic();
      resetCrisisMusicState();
      stopEndGameMusic();
      interruptGame();
      clearAllCardSlots();
      resetGameState();
      showMainMenu();
    }

    function updateTutorialButtons() {
      const startBtn = GameElements.ui.startBtn;
      const stopBtn = GameElements.ui.stopBtn;
      const restartBtn = GameElements.ui.restartBtn;
      
      startBtn.style.display = 'none';
      stopBtn.style.display = 'none';
      restartBtn.style.display = 'none';
    }

    window.startTutorial = startTutorial;
    window.nextTutorialStep = nextTutorialStep;
    window.prevTutorialStep = prevTutorialStep;
    window.exitTutorial = exitTutorial;
    window.confirmExitTutorial = confirmExitTutorial;
    window.cancelExitTutorial = cancelExitTutorial;
    window.confirmGoBackTutorial = confirmGoBackTutorial;
    window.cancelGoBackTutorial = cancelGoBackTutorial;

    // ============================================================================
    // 【初始化执行】
    // ============================================================================
    // 页面加载完成后执行的初始化操作
    //   setupEventListeners(): 绑定玩家卡牌区域点击事件
    //   updateGameStatus():    设置初始状态栏文字
    //   renderEnergySlots():   渲染士气值槽（每局从0开始，不再从 localStorage 恢复）
    //   initEnergySlotInteraction(): 绑定士气值槽的鼠标悬停交互
    setupEventListeners();

    renderEnergySlots();
    initEnergySlotInteraction();

    updateGameStatus(__t('st_ready'), 'st_ready');

    if (typeof applyGameScale === 'function') {
      applyGameScale();
    }
    if (typeof updateRoadAndCompareStyle === 'function') {
      updateRoadAndCompareStyle();
    }
    if (typeof refreshCardFaceBgBtn === 'function') {
      refreshCardFaceBgBtn();
    }
    if (typeof applyCardFaceBg === 'function') {
      applyCardFaceBg();
    }

    // ============================================================================
    // 【PBProbTest · 概率测试工具】(2026-10-16)
    // 人机模式专用：开始按钮上方「概率测试」按钮 → 点击展开六类概率按钮 →
    // 点击类别在场上每路旁显示对应概率浮标 + 顶部总值条。
    // 数据源 = PBAICore.Model（prob-model.js 六类概率）+ PBAIBridge.buildMirrorState。
    // 浮标用 fixed 视口坐标（slot 的 getBoundingClientRect），不受棋盘缩放影响；
    // 显示开启时 800ms 轮询刷新，对局每手自动更新。
    // ============================================================================
    var PBProbTest = (function () {
      var CATS = {
        tRisk: { label: '战术风险', color: '#f87171', dim: 'tactic' },
        tFlip: { label: '战术翻盘', color: '#4ade80', dim: 'tactic' },
        tPot:  { label: '战术潜力', color: '#60a5fa', dim: 'tactic' },
        sRisk: { label: '战略风险', color: '#fb923c', dim: 'strategy' },
        sFlip: { label: '战略翻盘', color: '#2dd4bf', dim: 'strategy' },
        sPot:  { label: '战略潜力', color: '#c084fc', dim: 'strategy' }
      };
      var activeCat = null;      // 当前显示类别
      var _timer = null;         // 刷新轮询
      var _gateTimer = null;     // 按钮显隐门控轮询
      var _layer = null;         // 浮标层（body 直属）

      function _pct(x) { return Math.round((x || 0) * 100) + '%'; }

      function _ensureLayer() {
        if (_layer) return _layer;
        _layer = document.createElement('div');
        _layer.id = 'pb-prob-overlay';
        _layer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:80;display:none;';
        document.body.appendChild(_layer);
        return _layer;
      }

      // 每类别 → { per:[5 个 {text, title}], total:'xx%', totalLabel:'' }
      function _extract(cat, R) {
        var dim = R[CATS[cat].dim];
        var per = [], i;
        if (cat === 'tRisk' || cat === 'sRisk') {
          for (i = 0; i < 5; i++) {
            var rd = dim.roads[i];
            var txt = _pct(rd.risk) + (rd.sure ? '!' : '');
            var tip = cat === 'tRisk'
              ? '我方顶' + (rd.myMax || '空') + ' 对方顶' + (rd.opMax || '空')
              : '关键点[' + (rd.keyHere || []).join(',') + ']';
            per.push({ text: txt, title: tip });
          }
          return { per: per, total: _pct(dim.riskTotal), totalLabel: '风险总值' };
        }
        if (cat === 'tFlip' || cat === 'sFlip') {
          var map = {};
          (dim.flip.roads || []).forEach(function (fr) { map[fr.ri] = fr; });
          for (i = 0; i < 5; i++) {
            var fr = map[i];
            per.push(fr
              ? { text: _pct(fr.rate), title: '分' + fr.n + '张 r=' + _pct(fr.r) + ' 对方顶' + (fr.opTop || '空') }
              : { text: '—', title: '不参与翻盘' });
          }
          var zero = dim.flip.zeroReason === 'card_shortage' ? '（卡不足归零）' : '';
          return { per: per, total: _pct(dim.flipTotal) + zero, totalLabel: '翻盘总值' };
        }
        // tPot / sPot：全局值 + 每路模拟标注
        var pd = dim.potentialDetail;
        if (cat === 'tPot') {
          var weakMap = {};
          (pd.weakRoads || []).forEach(function (ri) { weakMap[ri] = true; });
          var frMap = {};
          (pd.flipRoads || []).forEach(function (fr) { frMap[fr.ri] = fr; });
          for (i = 0; i < 5; i++) {
            if (weakMap[i]) {
              var f = frMap[i];
              per.push(f ? { text: _pct(f.rate), title: '模拟弱势路·翻盘' + _pct(f.rate) }
                         : { text: '弱', title: '模拟弱势路' });
            } else {
              per.push({ text: '占', title: '模拟压制成功' });
            }
          }
          return { per: per, total: _pct(dim.potential), totalLabel: '潜力值（模拟占' + pd.held + '路）' };
        }
        // sPot
        var roadMap = {};
        ((pd.flipDetail && pd.flipDetail.roads) || []).forEach(function (fr) { roadMap[fr.ri] = fr; });
        for (i = 0; i < 5; i++) {
          var sf = roadMap[i];
          per.push(sf ? { text: _pct(sf.rate), title: '关键点路·翻盘' + _pct(sf.rate) }
                      : { text: '—', title: '非关键点路' });
        }
        var aheadTxt = pd.equalAll ? '持平' : (pd.ahead ? '我方牌型领先' : '对方牌型领先');
        return { per: per, total: _pct(dim.potential), totalLabel: '潜力值（' + aheadTxt + '）' };
      }

      function refresh() {
        if (!activeCat) return;
        _ensureLayer();
        var core = window.PBAICore;
        var state = null;
        try { state = (typeof PBAIBridge !== 'undefined' && PBAIBridge) ? PBAIBridge.buildMirrorState() : null; } catch (e) { state = null; }
        if (!core || !core.Model || !state) { _layer.style.display = 'none'; return; }
        var R;
        try { R = core.Model.computeAll(state, 'player'); } catch (e2) { _layer.style.display = 'none'; return; }
        if (GameState.gamePhase !== 'playing') { _layer.style.display = 'none'; return; }

        var ext = _extract(activeCat, R);
        var meta = CATS[activeCat];
        var html = '';
        // 顶部总值条
        var bf = document.getElementById('battlefield');
        if (bf) {
          var r0 = bf.getBoundingClientRect();
          html += '<div style="position:fixed;left:' + r0.left + 'px;top:' + (r0.top - 26) + 'px;'
            + 'padding:2px 10px;border-radius:6px;background:rgba(15,23,42,0.92);border:1px solid ' + meta.color + ';'
            + 'color:' + meta.color + ';font-size:12px;font-weight:600;">'
            + meta.label + ' ' + ext.totalLabel + '：<span style="font-size:14px;">' + ext.total + '</span></div>';
        }
        // 每路浮标（挂我方路 slot 右侧）
        for (var i = 0; i < 5; i++) {
          var slot = document.querySelector('.player-road-slot[data-road-slot="' + i + '"]');
          if (!slot) continue;
          var rc = slot.getBoundingClientRect();
          if (rc.width <= 0) continue;
          var p = ext.per[i];
          html += '<div title="' + (p.title || '') + '" style="position:fixed;left:' + (rc.right + 6) + 'px;top:'
            + (rc.top + rc.height / 2 - 9) + 'px;padding:1px 7px;border-radius:5px;'
            + 'background:rgba(15,23,42,0.9);border:1px solid ' + meta.color + '55;color:' + meta.color + ';'
            + 'font-size:12px;font-weight:600;white-space:nowrap;">' + (i + 1) + '路 ' + p.text + '</div>';
        }
        _layer.innerHTML = html;
        _layer.style.display = 'block';
      }

      function setActive(cat) {
        if (activeCat === cat) cat = null;      // 重复点击 = 关闭
        activeCat = cat;
        if (_layer) { _layer.innerHTML = ''; _layer.style.display = 'none'; }
        // 按钮选中态
        document.querySelectorAll('.prob-cat-btn').forEach(function (b) {
          b.style.outline = (b.getAttribute('data-cat') === activeCat) ? '2px solid #fff' : 'none';
        });
        if (activeCat) {
          refresh();
          if (!_timer) _timer = setInterval(refresh, 800);
        } else if (_timer) {
          clearInterval(_timer); _timer = null;
        }
      }

      function init() {
        var wrap = document.getElementById('prob-test-wrap');
        var btn = document.getElementById('prob-test-btn');
        var menu = document.getElementById('prob-test-menu');
        if (!wrap || !btn || !menu) return;
        // ★ 悬停展开（用户口径），点击 toggle 作为触屏兜底；移出 400ms 后收起
        var _hideTimer = null;
        wrap.addEventListener('mouseenter', function () {
          if (_hideTimer) { clearTimeout(_hideTimer); _hideTimer = null; }
          menu.style.display = 'block';
        });
        wrap.addEventListener('mouseleave', function () {
          if (_hideTimer) clearTimeout(_hideTimer);
          _hideTimer = setTimeout(function () { _hideTimer = null; menu.style.display = 'none'; }, 400);
        });
        btn.addEventListener('click', function (e) {
          e.stopPropagation();
          menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
        });
        document.addEventListener('click', function (e) {
          if (!wrap.contains(e.target)) menu.style.display = 'none';
        });
        document.querySelectorAll('.prob-cat-btn').forEach(function (b) {
          b.addEventListener('click', function () { setActive(b.getAttribute('data-cat')); });
        });
        var closeBtn = document.getElementById('prob-test-close');
        if (closeBtn) closeBtn.addEventListener('click', function () { setActive(null); menu.style.display = 'none'; });
        _ensureLayer();
        // 按钮显隐门控：人机模式（非联机）+ 游戏界面可见
        _gateTimer = setInterval(function () {
          var online = (typeof PBOnline !== 'undefined' && PBOnline && (PBOnline.isOnline || PBOnline.isOnline2v2Mode));
          var inGame = GameState && (GameState.gamePhase === 'playing' || GameState.gamePhase === 'setup');
          wrap.style.display = (!online && inGame) ? 'block' : 'none';
          if (online) setActive(null);
        }, 500);
      }

      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
      else setTimeout(init, 0);

      return { setActive: setActive, refresh: refresh, _extract: _extract };
    })();
  </script>
  <!-- ★ 2v2超时投票最终防线：以 localCardPlayPending 为唯一真相源
     若卡牌处于"打出状态"（localCardPlayPending=true），阻止 timeout_vote 并强制放置
     否则允许正常发送 timeout_vote -->
  <script>
  (function() {
    if (typeof window === 'undefined') return;
    var OriginalWebSocket = window.WebSocket;
    function WrappedWebSocket(url, protocols) {
      var realWs = protocols ? new OriginalWebSocket(url, protocols) : new OriginalWebSocket(url);
      var originalSend = realWs.send.bind(realWs);
      realWs.send = function(data) {
        try {
          var msg = JSON.parse(data);
          if (msg && msg.type === 'timeout_vote') {
            // ★ 唯一检查：localCardPlayPending 表示卡牌处于"打出状态"
            //   此时不应发起投票，应强制放置
            var isPlayed = (typeof GameState !== 'undefined' && !!GameState.localCardPlayPending);
            if (isPlayed) {
              console.warn('[index.html 最终防线] 阻止 timeout_vote，卡牌处于打出状态，改为强制放置');
              // 清除所有匹配光环 DOM（confirmCardPlacement 通过 .match-glow 判断是否提前 return）
              if (typeof document !== 'undefined') {
                document.querySelectorAll('.match-glow, .neutral-aura').forEach(function(el) { el.remove(); });
              }
              if (typeof clearRoadMatchHighlights === 'function') { try { clearRoadMatchHighlights(); } catch(e){} }
              if (typeof clearNeutralAuras === 'function') { try { clearNeutralAuras(); } catch(e){} }
              if (typeof GameState !== 'undefined') {
                GameState.activeRoadMatchGlow = null;
                GameState.activeNeutralMatchGlow = null;
                GameState.pendingCallCard = null;
              }
              if (typeof document !== 'undefined') {
                var el = document.getElementById('call-card-prompt');
                if (el) { if (el._cleanup) el._cleanup(); else el.remove(); }
              }
              if (typeof GameState !== 'undefined' && GameState.lastPlayedCard && typeof confirmCardPlacement === 'function') {
                try { confirmCardPlacement('player', GameState.lastPlayedCard.index, GameState.lastPlayedCard.card, true); } catch(e){}
              } else if (typeof switchTurn === 'function') {
                try { switchTurn(); } catch(e){}
              }
              return;
            }
          }
        } catch(e) {}
        return originalSend(data);
      };
      return realWs;
    }
    WrappedWebSocket.prototype = OriginalWebSocket.prototype;
    WrappedWebSocket.OPEN = OriginalWebSocket.OPEN;
    WrappedWebSocket.CONNECTING = OriginalWebSocket.CONNECTING;
    WrappedWebSocket.CLOSING = OriginalWebSocket.CLOSING;
    WrappedWebSocket.CLOSED = OriginalWebSocket.CLOSED;
    window.WebSocket = WrappedWebSocket;
  })();
  </script>
  <script src="online-client.js?v=20260923a"></script>
  <!-- ★ 2026-10-04 AI引擎浏览器版（ai-core 打包产物，node _build_browser_ai.js 生成；人机模式 AI 决策同源联机AI玩家） -->
  <script src="ai-browser.js?v=20261011a"></script>
  <!-- 快捷键一览浮层（body 直属 + fixed 定位：任何模式都可由 Alt / 主页按钮呼出） -->
  <div id="hotkey-panel" onclick="event.stopPropagation()">
    <div style="padding:14px 18px 12px;border-bottom:1px solid rgba(250,204,21,0.25);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg, rgba(250,204,21,0.2) 0%, rgba(34,211,238,0.08) 50%, transparent 100%);">
      <div style="display:flex;align-items:center;gap:10px;">
        <span style="display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 6px rgba(250,204,21,0.6));">
          <svg viewBox="0 0 24 24" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
            <rect x="2" y="6" width="20" height="12" rx="2.5" fill="rgba(250,204,21,0.16)" stroke="#facc15" stroke-width="1.6"/>
            <rect x="5" y="9" width="2.6" height="2.4" rx="0.6" fill="#facc15"/>
            <rect x="9" y="9" width="2.6" height="2.4" rx="0.6" fill="#facc15"/>
            <rect x="13" y="9" width="2.6" height="2.4" rx="0.6" fill="#facc15"/>
            <rect x="17" y="9" width="2.6" height="2.4" rx="0.6" fill="#facc15"/>
            <rect x="7" y="13.2" width="10" height="2.4" rx="0.6" fill="#fde68a"/>
          </svg>
        </span>
        <span style="color:#fef9c3;font-size:16px;font-weight:700;letter-spacing:0.3px;text-shadow:0 1px 2px rgba(0,0,0,0.3);" data-i18n="hk_title">快捷键一览</span>
      </div>
      <button onclick="closeHotkeyPanel()" style="width:28px;height:28px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#fde68a;border-radius:8px;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:all 0.18s;">×</button>
    </div>
    <div style="padding:14px 18px;color:#c4b5fd;font-size:13px;line-height:1.7;">
      <div class="hk-group">
        <div class="hk-group-title" data-i18n="hk_g_tutorial">教程模式</div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_right">鼠标右键</span><span class="hk-desc" data-i18n="hk_d_exit">退出教程</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_wheelup">滚轮向上</span><span class="hk-desc" data-i18n="hk_d_prev">返回上一步</span></div>
      </div>
      <div class="hk-group">
        <div class="hk-group-title" data-i18n="hk_g_game">对局模式（单机 / 联机）</div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_esc">Esc</span><span class="hk-desc" data-i18n="hk_d_settings">打开 / 关闭设置面板</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_nums">数字键</span><span class="hk-desc" data-i18n="hk_d_ccnum">叫牌时输入叫牌点数</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_backspace">Backspace</span><span class="hk-desc" data-i18n="hk_d_ccdel">叫牌时删除已输入数字</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_esc">Esc</span><span class="hk-desc" data-i18n="hk_d_cccancel">叫牌时取消叫牌</span></div>
      </div>
      <div class="hk-group" style="margin-bottom:0;">
        <div class="hk-group-title" data-i18n="hk_g_general">通用</div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_alt">Alt 键</span><span class="hk-desc" data-i18n="hk_d_self">打开 / 关闭本面板</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_volwheel">滚轮（悬停音量图标）</span><span class="hk-desc" data-i18n="hk_d_vol">调节音乐音量（每次 ±5%）</span></div>
        <div class="hk-row"><span class="hk-key" data-i18n="hk_k_seatright">鼠标右键（人机2v1座位）</span><span class="hk-desc" data-i18n="hk_d_seat">离开座位</span></div>
      </div>
    </div>
  </div>

</body>
</html>