/* ═══════════════════════════════════════════════════════════════════
   诡道也 — 对战样式
   从 index.html 拆分（2026-06-08）
   ═══════════════════════════════════════════════════════════════════ */

/* === 全局 === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ★ 2026-08-25 第三批 B2：消除 Android WebView 原生点击高亮（tap-highlight）。
   点击实色蒙板按钮（历史/结束回合等）瞬间闪现系统级半透明灰框——WebKit
   默认 rgba(0,0,0,0.4) 高亮，在黑色圆形蒙板上最明显。 */
*{-webkit-tap-highlight-color:transparent}
body{
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:#0a0a0a;overflow:hidden;height:100vh;width:100vw;
  user-select:none;-webkit-user-select:none;
}
/* ★ #game 的居中由 #screen-battle（screens.css）负责 */
/* 当独立使用（不经过 #app-root）时回退到 body 居中 */
body:not(:has(#app-root)) #game,
body > #game {
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
}
/* v4：26 zone 平面布局（13 ply- + 13 opp- 镜像）——编辑模式切绝对定位 */
/* ★ 场地图 1889×1169（对战场地5.2.2.png）——容器始终等比缩放、图片完整显示不裁边（2026-08-16 用户拍板回到此设计）：
     取视口宽高两者中更受限的维度；桌面 16:9 恰满屏；手机 20:9 图上下完整显示、左右露背景，
     屏内上下完整显示 */
#game{
  position:relative;overflow:hidden;
  width:min(100vw, calc(100vh * 1889 / 1169));
  height:min(100vh, calc(100vw * 1169 / 1889));
  /* ★ flex-shrink:0——完整显示模式下 #game 尺寸 ≤ 视口、无溢出，此声明仅为保险（防止未来回归），
     若无此声明 #game 会被压扁致图变形 */
  flex-shrink:0;
  /* ★ 背景已迁至 #battle-cam-layer（开场镜头层，2026-08-16 用户拍板）——#game 透明，
     只作卡牌布局窗口；容器公式 1889:1169、overflow:hidden 不动 */
}

/* ★ 开场镜头层（2026-08-16 用户拍板）——整图 battlefield-cam.webp（2848×1600）铺满视口，
   垫在所有对战元素最底层（DOM 在 #game 之前）；仅进对局时显示，大厅模式隐藏。
   ★ 几何锁定 = 用户校准终值反推：#game 背景 257.4% 165.1% 居中 → 图宽=gameW×2.574、
   图高=gameH×1.651（gameW=min(100vw,100vh*1889/1169)、gameH=min(100vh,100vw*1169/1889)）。
   #game 由 #screen-battle.in-game flex 居中于视口 → 图中心=赛场中心，任何横屏视口对齐。
   ★ transition=开场推进动画（battle-camera-intro.js 控制），3s 缓动 */
#battle-cam-layer{
  display:none;
  position:absolute; inset:0;
  background-image:url('../assets/battle/battlefield-cam.webp');
  background-size:calc(min(100vw, 100vh * 1889 / 1169) * 2.574)
                 calc(min(100vh, 100vw * 1169 / 1889) * 1.651);
  background-position:center;background-repeat:no-repeat;
  z-index:0;
  pointer-events:none;
  transition:background-size 3s ease-in-out;
}
#screen-battle.active.in-game #battle-cam-layer{ display:block; }
/* ★ 开场帧（play() 挂 .cam-start）：全图铺满视口 + 禁过渡——撤 class 即开始 3s 推进 */
#battle-cam-layer.cam-start{ transition:none; background-size:100% 100%; }
/* ★ 动画期间藏卡牌（play() 挂 .cam-intro 于 #screen-battle）——镜头到位才显示，对标 YGO。
   重连/刷新不加 .cam-intro → 默认直接可见 */
#screen-battle.cam-intro #game{ visibility:hidden; }

/* === 背景层（保留为备选，隐藏 img 用 CSS 背景替代）=== */
#bg-layer{display:none}

/* 英雄信息/资源区徽章已删除（2026-08-16 用户拍板）——
   兵力/士气/粮草改在场上兵力显示卡（#ply-troops-card / #opp-troops-card）上展示 */

/* —— 对方手牌（牌背）—— */
#opp-hand-row{
  display:flex;justify-content:center;align-items:center;gap:2px;
  min-width:0;overflow:hidden;padding:2px 0;
}
.opp-hand-card{
  width:36px;height:50px;border-radius:3px;flex-shrink:0;
  background-image:var(--cosmetic-cardback, url('../assets/card-back.png'));
  background-size:cover;background-position:center;
  border:1px solid #5a4a2a;
}
/* ★ 2026-08-23 #1：对手手牌新增牌背的高亮提示——金色描边一亮 1.2s 淡出（抽牌变化可见）。
   只动 box-shadow/filter，不碰 transform（VFX 铁律：布局 transform 元素禁简写冲突）。 */
.opp-hand-card.hand-new{
  animation:opp-hand-new-flash 1.2s ease-out forwards;
}
@keyframes opp-hand-new-flash{
  0%{box-shadow:0 0 0 2px #e6c268,0 0 14px 3px rgba(230,194,104,.9);filter:brightness(1.5);}
  100%{box-shadow:0 0 0 0 rgba(230,194,104,0);filter:brightness(1);}
}

/* —— 牌库（卡牌化：卡背+张数徽章，与手牌卡同尺寸 80×112）—— */
.deck-stack{
  position:relative;
  width:80px;height:112px; /* 与手牌卡同尺寸 */
  cursor:pointer;
  transition:transform 0.2s,filter 0.2s;
}
.deck-stack:hover{
  transform:scale(1.08);
  filter:brightness(1.15);
}
/* 卡组卡面：直接使用卡背（与手牌同尺寸 60×84） */
.deck-card-face{
  position:absolute;
  inset:0;
  background-image:var(--cosmetic-cardback, url('../assets/card-back.png'));
  background-size:cover;background-position:center;
  border:2px solid #3a2a1a;border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}
/* 张数徽章——右下角覆盖 */
.deck-count-badge{
  position:absolute;
  bottom:-6px;right:-6px;
  min-width:24px;height:24px;line-height:24px;
  background:linear-gradient(135deg,#2a1a0a,#1a0a00);
  border:2px solid #7a6a4a;border-radius:12px;
  color:#d4b87a;font-size:13px;font-weight:bold;
  text-align:center;padding:0 5px;
  z-index:2;
  box-shadow:0 2px 4px rgba(0,0,0,0.6);
}
/* 空牌库时淡化 */
.deck-stack.empty{
  opacity:0.45;
  cursor:default;
}
.deck-stack.empty:hover{ transform:none;filter:none; }

/* —— 前场行 —— */
/* 双方召唤区：卡牌垂直居中，位置通过 Ctrl+E 拖拽召唤区调整 */
/* 间距由 Ctrl+E 人物卡面板统一控制，垂直偏移各独立 */
#player-field-row{
  display:flex;justify-content:center;align-items:center;
  gap:var(--field-gap, 10px);
  height:100%;padding:4px 8px;
  transform:translate(var(--field-offset-x-ply, 0px), var(--field-offset-y-ply, 0px));
}
#opp-field-row{
  display:flex;justify-content:center;align-items:center;
  gap:var(--field-gap, 10px);
  height:100%;padding:4px 8px;
  transform:translate(var(--field-offset-x-opp, 0px), var(--field-offset-y-opp, 0px));
}

/* —— 计谋区行（盖放/表侧计谋卡）—— */
/* 间距/倾斜度/垂直偏移由 Ctrl+E 陷阱面板控制（CSS 变量） */
.plot-row{
  display:flex;justify-content:center;align-items:center;
  gap:var(--trap-gap, 9px);
  min-height:56px;padding:2px 8px;
}
/* 己方陷阱/计谋区——XY偏移独立（己方面板滑条） */
#player-plot-row{
  margin-top:var(--trap-offset-y-ply, 4px);
  transform:translateX(var(--trap-offset-x-ply, 0px));
}
/* 对方陷阱/计谋区——XY偏移独立（对方面板滑条） */
#opp-plot-row{
  margin-top:var(--trap-offset-y-opp, 4px);
  transform:translateX(var(--trap-offset-x-opp, 0px));
}
/* 己方盖放左倾，对方盖放右倾——倾斜度由 Ctrl+E 陷阱面板统一控制 */
#player-plot-row .plot-card.face-down{transform:translateX(calc(-5px * var(--battle-s,1))) translateY(calc(56px * var(--battle-s,1))) rotate(var(--trap-face-down-rotate, -12deg))}
#opp-plot-row .plot-card.face-down{transform:translateX(calc(165px * var(--battle-s,1))) translateY(calc(16px * var(--battle-s,1))) rotate(calc(-1 * var(--trap-face-down-rotate, -12deg)))}

/* —— 战场分隔线（已取消）—— */
#battle-divider{display:none}

/* —— 大营徽章 —— */
#camp-zone{
  display:inline-flex;align-items:center;justify-content:center;
  width:109px;height:109px;
  background:#7d6b3f;border:1px solid #a09060;border-radius:6px;
  color:#fff;font-size:26px;
  writing-mode:vertical-rl;
  cursor:pointer;transition:all 0.25s;
  padding:4px 12px;gap:4px;
  -webkit-user-select:none;user-select:none;z-index:5;
}
#camp-zone:hover{background:#9a8552;border-color:#c9a050;color:#fff;box-shadow:0 0 12px rgba(201,160,80,.25)}
#camp-zone .camp-count{color:#f1c40f;font-weight:bold;font-size:12px;writing-mode:horizontal-tb}
#camp-zone.empty{color:#888;border-color:#555;background:#4a3d28}
#camp-zone.highlight{border-color:#c55;color:#c55;box-shadow:0 0 10px rgba(200,50,50,0.4)}

/* —— 对方大营徽章——与我方同款（2026-07-18） */
#opp-camp-inner{
  display:inline-flex;align-items:center;justify-content:center;
  width:109px;height:109px;
  background:#7d6b3f;border:1px solid #a09060;border-radius:6px;
  color:#fff;font-size:26px;
  writing-mode:vertical-rl;
  cursor:pointer;transition:all 0.25s;
  padding:4px 12px;gap:4px;
  -webkit-user-select:none;user-select:none;z-index:5;
}
#opp-camp-inner:hover{background:#9a8552;border-color:#c9a050;color:#fff;box-shadow:0 0 12px rgba(201,160,80,.25)}
#opp-camp-inner.highlight{border-color:#c55;color:#c55;box-shadow:0 0 10px rgba(200,50,50,0.4)}

/* ── 放逐区弹窗卡牌样式 ── */
.camp-popup-card.banished{
  background:rgba(50,20,15,.8);border-color:#8a4a3a;color:#d4a090;
}
.camp-popup-card.banished:hover{background:rgba(70,35,25,.9);border-color:#c06040;color:#f0c0a0}
.camp-popup-card.banish-selectable{
  border-color:#e67e22;box-shadow:0 0 8px rgba(230,126,34,.3);cursor:pointer;
}
.camp-popup-card.banish-selectable:hover{
  border-color:#f39c12;box-shadow:0 0 14px rgba(243,156,18,.5);transform:scale(1.08);
}
.camp-popup-card.banish-selected{
  border-color:#e74c3c;background:rgba(180,50,20,.7);box-shadow:0 0 12px rgba(231,76,60,.5);
  color:#ffcccc;
}

#banish-summon-confirm{padding:8px 20px 20px;margin-top:12px;border-top:1px solid rgba(201,160,80,.2)}
#camp-popup-overlay{
  position:absolute;inset:0;z-index:50;background:transparent;
  display:none;align-items:center;justify-content:center;
}
#camp-popup-overlay.active{display:flex}
#camp-popup-box{
  position:relative;
  background:linear-gradient(180deg,rgba(24,18,12,.96),rgba(34,26,18,.96));
  border:2px solid #8a6a3a;border-radius:14px;
  padding:0; /* ★ 内边距移入 #camp-popup-content（2026-08-17）——sticky 钉住范围=父元素 content box，
                盒带内边距时头栏只能钉在内边距之下，必须让头栏的父内容盒从盒顶开始 */
  width:92vw;max-width:1200px;
  /* ★ 盒高双约束（2026-08-17）：min(88vh, 100%) —— 100% 相对 overlay（=#game）高度。
     手机端 #game 按 1889:1169 比例锁定只有 ~309px 高，盒子 88vh 居中会两端溢出 #game
     （头栏落进 screen-battle 区域，点击全部穿透）——必须同时钳制在 #game 内 */
  max-height:min(88vh,100%);
  box-shadow:0 0 50px rgba(138,106,58,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
  overflow-y:auto;
}
/* ★ 头栏 sticky 置顶（2026-08-17 用户拍板）——内容上下滚动时，关闭叉与"大营/放逐区"标题始终在上方可见 */
#camp-popup-header{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  margin:0;
  padding:10px 20px;
  background:linear-gradient(180deg,rgba(24,18,12,.97),rgba(30,22,14,.97)); /* 不透明背景遮住下方滚上来的内容 */
  border-bottom:1px solid rgba(138,106,58,.35);
}
/* 盒内边距移到这里——头栏贴在盒顶，内容在头栏之下留出原内边距 */
#camp-popup-content{
  padding:20px 20px 24px;
}
#camp-popup-title{
  font-size:15px;color:#c9a050;text-align:center;
  font-weight:bold;letter-spacing:1px;
}
/* 关闭叉锚到头栏（sticky 是 positioned 祖先，absolute 后代以它为准）——随头栏一起钉在顶部 */
#camp-popup-close{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  background:none;border:none;color:#888;font-size:18px;
  cursor:pointer;transition:color .15s;z-index:1;
}
#camp-popup-close:hover{color:#c55}
.camp-divider{height:1px;background:rgba(138,106,58,.2);margin:14px 0}
#camp-popup-content .camp-section{margin-bottom:20px}
#camp-popup-content .camp-label{
  font-size:13px;color:#c9a050;margin-bottom:8px;display:block;
  border-bottom:1px solid rgba(138,106,58,.3);padding-bottom:6px;
}
/* 大营横排卡牌滚动行 */
.camp-card-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.camp-card-row::-webkit-scrollbar{height:6px}
.camp-card-row::-webkit-scrollbar-thumb{background:rgba(138,106,58,.3);border-radius:3px}
/* 大营内整卡容器 */
.camp-full-card-wrap{
  flex-shrink:0;cursor:pointer;transition:transform .15s;
}
.camp-full-card-wrap:hover{transform:scale(1.04)}
/* ── 通用选择弹窗横排卡牌滑动行（大营 + 卡组检索 + 回收共用）── */
.select-card-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.select-card-row::-webkit-scrollbar{height:6px}
.select-card-row::-webkit-scrollbar-thumb{background:rgba(138,106,58,.3);border-radius:3px}
.select-card-wrap{
  flex-shrink:0;cursor:pointer;transition:transform .15s;
}
.select-card-wrap:hover{transform:scale(1.04)}
/* 弹窗内的大营卡牌（旧文本模式——保留兼容） */
.camp-popup-card{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(40,28,50,.8);border:1px solid #5a4a5a;border-radius:4px;
  padding:4px 8px;margin:2px;cursor:pointer;
  color:#c8c0d4;font-size:11px;
  transition:all .15s;
}
.camp-popup-card:hover{background:rgba(60,40,70,.9);border-color:#a0a0c0;transform:scale(1.05)}

/* ── 卡组探底弹窗（国佐内乱效果——翻开卡组顶部卡牌）── */
#deck-peek-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:56;display:none;
  justify-content:center;align-items:center;
}
#deck-peek-overlay.active{display:flex}
#deck-peek-box{
  /* ★ 2026-08-25 第三批 B1：不要蒙板（用户拍板）——只显示翻开的卡本身，
     透明无边框无阴影；关闭按钮已删（1 秒自动关闭，render.js showDeckPeekPopup） */
  position:relative;
  background:transparent;
  border:none;border-radius:0;
  padding:0;
  max-width:none;width:auto;max-height:none;
  box-shadow:none;
  overflow:visible;
}
#deck-peek-title{
  font-size:14px;color:rgba(255,255,255,.88);text-align:center;margin-bottom:8px;
  font-weight:bold;letter-spacing:1px;
  text-shadow:0 1px 4px #000;
}
#deck-peek-grid{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  padding:8px 0;
}
/* ── 卡组检索选择弹窗（Select 模式）── */
/* （.deck-peek-card 旧样式已随 B3 翻牌弹窗重写删除——2026-08-24 代码审查：无 JS 引用） */
#deck-search-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:55;display:none;
  justify-content:center;align-items:center;
}
#deck-search-overlay.active{display:flex}
#deck-search-box{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,rgba(20,14,10,.98),rgba(30,22,14,.98));
  border:2px solid #c9a050;border-radius:14px;
  padding:24px 20px 20px;
  max-width:900px;width:94%;max-height:82vh;
  box-shadow:0 0 50px rgba(201,160,80,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
  overflow-y:auto;
}
#deck-search-title{display:none}
#deck-search-close{
  position:absolute;top:8px;right:12px;
  background:none;border:none;color:#e74c3c;font-size:20px;
  cursor:pointer;transition:color .15s;
}
#deck-search-close:hover{color:#c55}
#deck-search-grid{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.deck-search-card{
  width:120px;height:160px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  cursor:pointer;border:2px solid transparent;border-radius:8px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  position:relative;display:flex;align-items:flex-end;
}
.deck-search-card:hover{
  transform:scale(1.08);border-color:#ffd700;
  box-shadow:0 0 16px rgba(255,215,0,.35);
}
.deck-search-card .card-inner{
  width:100%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  color:#fff;font-size:11px;text-align:center;
  padding:4px 4px 6px;border-radius:0 0 6px 6px;
  line-height:1.3;
}

/* ── 大营回收选择弹窗（RequiredCardIds 多匹配）── 对标 DeckSearch */
#camp-selection-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:55;display:none;
  justify-content:center;align-items:center;
}
#camp-selection-overlay.active{display:flex}
#camp-selection-box{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,rgba(20,14,10,.98),rgba(30,22,14,.98));
  border:2px solid #c9a050;border-radius:14px;
  padding:24px 20px 20px;
  max-width:900px;width:94%;max-height:82vh;
  box-shadow:0 0 50px rgba(201,160,80,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
  overflow-y:auto;
}
#camp-selection-title{display:none}
#camp-selection-close{
  position:absolute;top:8px;right:12px;
  background:none;border:none;color:#e74c3c;font-size:20px;
  cursor:pointer;transition:color .15s;
}
#camp-selection-close:hover{color:#c55}
#camp-selection-grid{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}

/* ── 加血目标选择弹窗（Select 模式）── */
#heal-target-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:55;display:none;
  justify-content:center;align-items:center;
}
#heal-target-overlay.active{display:flex}
#heal-target-box{
  position:relative;
  background:linear-gradient(180deg,rgba(20,14,10,.98),rgba(30,22,14,.98));
  border:2px solid #c9a050;border-radius:14px;
  padding:24px 20px 20px;
  max-width:680px;width:92%;max-height:82vh;
  box-shadow:0 0 50px rgba(201,160,80,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
  overflow-y:auto;
}
#heal-target-title{
  font-size:16px;color:#ffd700;text-align:center;margin-bottom:16px;
  font-weight:bold;letter-spacing:1px;
}
#heal-target-close{
  position:absolute;top:8px;right:12px;
  background:none;border:none;color:#e74c3c;font-size:20px;
  cursor:pointer;transition:color .15s;
}
#heal-target-close:hover{color:#c55}
#heal-target-grid{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.heal-target-card{
  background:rgba(0,0,0,.6);border:2px solid #555;
  border-radius:10px;padding:14px 18px;
  cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;
  text-align:center;min-width:140px;
}
.heal-target-card:hover{
  transform:scale(1.06);border-color:#ffd700;
  box-shadow:0 0 18px rgba(255,215,0,.3);
}
.heal-target-card .ht-name{font-size:15px;color:#fff;font-weight:bold}
.heal-target-card .ht-stats{font-size:13px;color:#ccc;margin-top:4px}
.heal-target-card .ht-hp{color:#4caf50}
.heal-target-card .ht-tags{font-size:11px;color:#888;margin-top:2px}

/* —— ★ 献祭目标选择弹窗（齐桓公手发效果） —— */
#field-tribute-overlay{
  display:none;
  position:fixed;inset:0;background:transparent;
  justify-content:center;align-items:center;z-index:1005;
}
#field-tribute-overlay.active{display:flex}
#field-tribute-box{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid #d4a574;border-radius:12px;
  padding:20px;min-width:360px;max-width:480px;
  max-height:70vh;overflow-y:auto;
}
#field-tribute-title{font-size:16px;color:#ff9800;font-weight:bold;margin-bottom:8px}
#field-tribute-close{position:absolute;top:8px;right:8px;background:none;border:none;color:#aaa;font-size:18px;cursor:pointer}
#field-tribute-close:hover{color:#c55}
#field-tribute-total{font-size:14px;color:#ffcc80;margin-bottom:8px}
#field-tribute-grid{display:flex;flex-wrap:wrap;gap:6px}
#field-tribute-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}

/* ── 手牌人物卡选择弹窗（子贡掠阵）── 对标 DeckSearch */
#hand-card-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:55;display:none;
  justify-content:center;align-items:center;
}
#hand-card-overlay.active{display:flex}
#hand-card-box{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,rgba(20,14,10,.98),rgba(30,22,14,.98));
  border:2px solid #c9a050;border-radius:14px;
  padding:24px 20px 20px;
  max-width:900px;width:94%;max-height:82vh;
  box-shadow:0 0 50px rgba(201,160,80,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
  overflow-y:auto;
}
#hand-card-title{display:none}
#hand-card-grid{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}

/* ── 多选项效果弹窗（孔子掠阵）── */
#multi-option-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:transparent;z-index:55;display:none;
  justify-content:center;align-items:center;
}
#multi-option-overlay.active{display:flex}
#multi-option-box{
  position:relative;
  background:linear-gradient(180deg,rgba(20,14,10,.98),rgba(30,22,14,.98));
  border:2px solid #c9a050;border-radius:14px;
  padding:24px 20px 20px;max-width:700px;width:94%;
  box-shadow:0 0 50px rgba(201,160,80,.25),0 12px 40px rgba(0,0,0,.7);
  animation:detail-pop .2s ease-out;
}
#multi-option-title{display:none}
#multi-option-close{
  position:absolute;top:8px;right:12px;
  background:none;border:none;color:#e74c3c;font-size:20px;
  cursor:pointer;transition:color .15s;
}
#multi-option-close:hover{color:#c55}
#multi-option-grid{
  display:flex;flex-direction:column;gap:8px;
}
.multi-option-btn{
  background:linear-gradient(135deg,rgba(201,160,80,.15),rgba(138,106,58,.08));
  border:1px solid #c9a050;border-radius:10px;
  padding:14px 18px;cursor:pointer;transition:all .15s;
  text-align:left;color:#eee;
  display:flex;justify-content:space-between;align-items:center;
}
.multi-option-btn:hover{
  background:linear-gradient(135deg,rgba(201,160,80,.3),rgba(138,106,58,.15));
  border-color:#ffd700;box-shadow:0 0 14px rgba(255,215,0,.2);
  transform:translateX(4px);
}
.multi-option-btn .mo-cost{
  background:rgba(201,160,80,.3);color:#ffd700;
  font-weight:bold;font-size:16px;
  padding:4px 14px;border-radius:6px;
  white-space:nowrap;margin-left:10px;
}
.multi-option-btn .mo-label{
  font-size:15px;flex:1;
}

.field-tribute-card{
  background:#2a2a3e;border:2px solid #444;
  border-radius:8px;padding:8px 12px;
  cursor:pointer;transition:all 0.2s;
  min-width:120px;
}
.field-tribute-card:hover{border-color:#ff9800;background:#3a3a4e}
.field-tribute-card.ft-selected{border-color:#4caf50;background:#1b3a1b;box-shadow:0 0 8px rgba(76,175,80,0.4)}
.field-tribute-card .ft-name{font-size:14px;color:#fff;font-weight:bold}
.field-tribute-card .ft-stats{font-size:12px;color:#ccc;margin-top:3px}

/* —— 手牌 —— */
#hand-row{
  display:flex;justify-content:center;align-items:flex-end;gap:2px;
  min-width:0;overflow-x:auto;overflow-y:visible;
  padding-bottom:4px;flex:1;
}
#provisions-display{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:linear-gradient(135deg,#2a3a10,#1a250a);
  border:2px solid #6a8a3a;border-radius:50%;
  color:#ffd700;font-size:14px;font-weight:bold;
  text-shadow:0 0 6px rgba(255,215,0,0.5);
  margin:2px;
}
#provisions-display.low{color:#e74c3c;border-color:#8a3a3a;animation:pulse-provisions 0.8s infinite}
@keyframes pulse-provisions{0%,100%{box-shadow:0 0 4px rgba(231,76,60,0.3)}50%{box-shadow:0 0 12px rgba(231,76,60,0.8)}}

/* === 卡牌通用 === */
.card{
  position:relative;border-radius:6px;cursor:pointer;
  transition:transform 0.15s,box-shadow 0.15s;flex-shrink:0;
  background-size:cover;background-position:center;overflow:hidden;
}
.card:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(255,215,0,0.5);z-index:5}
.card.hand-card{width:80px;height:112px}
.card.field-card{width:100px;height:140px;cursor:pointer;-webkit-user-select:none;user-select:none}
.card.field-card:hover{transform:translateY(-2px);box-shadow:0 0 8px rgba(255,215,0,.2)}
/* #54：上场渐显动画（2026-08-15 用户拍板：召唤卡牌不位移——transform:scale 会清零
   布局偏移（对手行 translate(0,-85px)）→ 召唤期间卡牌大跳；改纯 opacity 渐显不动布局） */
.card.field-card.summon-appear{animation:summon-appear .5s ease-out}
@keyframes summon-appear{
  0%{opacity:0}
  100%{opacity:1}
}
/* #54：位置滑移动画——transition 由 JS 动态注入，此处仅保底 */
.card.field-card{transition:transform .28s ease-out}
/* ★ 万智牌风格简化场上卡——名条+卡图+攻防右下，立体厚度 */
/* 长宽由 Ctrl+E 人物卡面板控制（--field-card-w / --field-card-h） */
.card.field-card.field-card-simple{
  width:var(--field-card-w, 92px);height:var(--field-card-h, 128px);
  border-radius:4px;overflow:hidden;
  background:none !important;
  border:none;
  position:relative;
  display:flex;flex-direction:column;
  /* 立体厚度：多层阴影模拟卡牌边缘 */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.3),           /* 最外层暗边 */
    0 1px 0 1px rgba(255,255,255,.08),  /* 顶面微光 */
    0 3px 0 0 #1a1a1a,                  /* 底部厚度主色 */
    0 4px 0 0 rgba(0,0,0,.4),           /* 厚度暗面 */
    0 4px 8px rgba(0,0,0,.5),           /* 投影 */
    0 6px 16px rgba(0,0,0,.3);          /* 远投影 */
  /* 卡面微弧光 */
  border-top:1px solid rgba(255,255,255,.12);
  border-left:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.4);
}
/* 名条——顶部细条 */
.field-card-simple .fcs-namebar{
  background:rgba(0,0,0,.75);color:#fff;
  font-size:11px;font-weight:bold;text-align:center;
  padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:0;z-index:2;
}
/* 卡图区——填充剩余空间，顶光渐变模拟立体 */
.field-card-simple .fcs-art{
  flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:linear-gradient(170deg, #4a4a5a 0%, #2a2a3a 100%);
}
/* 卡图顶部高光 + 底部暗角 overlay（统用于所有阵营色） */
.field-card-simple .fcs-art::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    rgba(255,255,255,.1) 0%,
    transparent 25%,
    transparent 75%,
    rgba(0,0,0,.25) 100%);
  border-radius:0;
}
.field-card-simple .fcs-art-inner{
  font-size:28px;opacity:.15;pointer-events:none;user-select:none;
}
/* 攻防——右下角小方块（万智牌 P/T 风格） */
.field-card-simple .fcs-pt{
  position:absolute;bottom:0;right:0;
  background:rgba(0,0,0,.8);color:#fff;
  font-size:12px;font-weight:bold;
  padding:1px 6px;border-radius:4px 0 0 0;
  display:flex;gap:2px;align-items:center;
  z-index:3;
}
.field-card-simple .fcs-pt .pt-atk{color:#f0a030}
.field-card-simple .fcs-pt .pt-sep{color:#888;font-size:10px}
.field-card-simple .fcs-pt .pt-hp{color:#fff}
.field-card-simple .fcs-pt .pt-hp.hp-injured{color:#e74c3c}
.field-card-simple .fcs-pt .pt-hp.hp-buffed{color:#2ecc71}
/* ★ 制卡平台卡图：有image字段时卡面显示卡图，图框区变透明 */
.field-card-simple.has-card-art{background-size:cover !important;background-position:center !important;}
.field-card-simple.has-card-art .fcs-art{background:transparent;}
.field-card-simple.has-card-art .fcs-art-inner{opacity:0;}
/* 阵营色边框 */
.field-card-simple.faction-鲁{border-color:#3498db}
.field-card-simple.faction-鲁 .fcs-namebar{background:rgba(52,152,219,.85)}
.field-card-simple.faction-鲁 .fcs-art{background:linear-gradient(170deg, #3a6a9a 0%, #1a3a5c 100%)}
.field-card-simple.faction-齐{border-color:#e67e22}
.field-card-simple.faction-齐 .fcs-namebar{background:rgba(230,126,34,.85)}
.field-card-simple.faction-齐 .fcs-art{background:linear-gradient(170deg, #8a5020 0%, #4a2010 100%)}
.field-card-simple.faction-郑{border-color:#2ecc71}
.field-card-simple.faction-郑 .fcs-namebar{background:rgba(46,204,113,.85)}
.field-card-simple.faction-郑 .fcs-art{background:linear-gradient(170deg, #1a6a3a 0%, #0a3a1a 100%)}
.field-card-simple.faction-neutral{border-color:#888}
.field-card-simple.faction-neutral .fcs-namebar{background:rgba(100,100,110,.85)}
.field-card-simple.faction-neutral .fcs-art{background:linear-gradient(170deg, #4a4a5a 0%, #2a2a3a 100%)}
/* ═══ 场上人物卡·框素材版（PvP 重做·阶段3）═══
   素材 assets/battle/field-card-frame.png（744×638）——横版卡框，
   卡图垫底 + 框 PNG 叠加，数值槽位按素材百分比绝对定位。
   八角=粮草费用 · 圆=衍生物消耗 · 右上竖排=标签首字+阵营 · 底墨条=卡名 · 右下药丸=攻/血 */
.card.field-card.field-card-framed{
  /* --ffcs：场上卡最终缩放 = 全局等比 × 每侧放大系数（--ffcs-f 默认 1；
     己方 standard 布局 1.5——见文件末尾等比收口章节 ⑯）。命名避开合成卡组件的 --fcs */
  --ffcs:calc(var(--battle-s, 1) * var(--ffcs-f, 1));
  width:calc(140px * var(--ffcs));
  height:calc(128px * var(--ffcs));
  border:none;background:none !important;overflow:visible;
  position:relative;cursor:pointer;border-radius:6px;-webkit-user-select:none;user-select:none;
  box-shadow:0 calc(3px * var(--ffcs)) calc(8px * var(--ffcs)) rgba(0,0,0,.55);
  /* Y 偏移 +10px：原 -40px 上抬，2026-07-15 用户拍板下移 50px（放大 1.5× 后卡压中线） */
  transform:translate(calc(80px * var(--battle-s,1)), calc(10px * var(--battle-s,1)));
}
.card.field-card.field-card-framed:hover{transform:translate(calc(80px * var(--battle-s,1)), calc(7px * var(--battle-s,1)));box-shadow:0 0 calc(12px * var(--ffcs)) rgba(255,215,0,.35)}
/* 卡图垫底层——填满卡框内窗（素材中央透明区） */
.field-card-framed .ffc-art{
  position:absolute;inset:1.5% 2.5% 3% 2%;border-radius:4px;overflow:hidden;
  background-size:cover;background-position:center 12%;
  background-color:#2a2a33;
}
.field-card-framed .ffc-art-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(22px * var(--ffcs));color:rgba(255,255,255,.2);
  font-family:'KaiTi','楷体','STKaiti',serif;
}
/* 阵营底色（无卡图时的图窗填充） */
.field-card-framed.faction-鲁 .ffc-art{background-image:linear-gradient(170deg,#3a6a9a 0%,#1a3a5c 100%)}
.field-card-framed.faction-齐 .ffc-art{background-image:linear-gradient(170deg,#8a5020 0%,#4a2010 100%)}
.field-card-framed.faction-郑 .ffc-art{background-image:linear-gradient(170deg,#1a6a3a 0%,#0a3a1a 100%)}
.field-card-framed.has-card-art .ffc-art-fallback{display:none}
/* 卡框 PNG 叠加层——盖在卡图之上 */
.field-card-framed .ffc-frame{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;object-fit:fill;
}
/* 数值槽位公共——绝对定位对齐素材，楷体 */
.field-card-framed .ffc-slot{
  position:absolute;z-index:3;pointer-events:none;
  font-family:'KaiTi','楷体','STKaiti',serif;font-weight:bold;
  color:#fff;text-shadow:0 calc(1px*var(--ffcs)) calc(2px*var(--ffcs)) rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;
}
/* 八角——粮草费用（左上，素材中心约 14.8%,14.4%） */
.field-card-framed .ffc-cost{
  left:4%;top:3%;width:20%;height:23%;
  font-size:calc(17px * var(--ffcs));
}
/* 圆——衍生物消耗（八角其下，素材中心约 8.9%,30.2%；requiredTokens=0 时隐藏） */
.field-card-framed .ffc-token{
  left:3.2%;top:23.5%;width:11.5%;height:13.5%;
  font-size:calc(11px * var(--ffcs));color:#ffd24a;
}
/* 右上两竖排标签——上=卡牌标签首字，下=阵营（浅底深字） */
.field-card-framed .ffc-tag{
  right:0.5%;top:4.8%;width:15.5%;height:12.5%;
  font-size:calc(11px * var(--ffcs));color:#3a2a10;text-shadow:none;
}
.field-card-framed .ffc-faction{
  right:0.5%;top:19.8%;width:15.5%;height:14%;
  font-size:calc(11px * var(--ffcs));color:#3a2a10;text-shadow:none;
}
/* 底部墨条——卡名（左半，靠左排版） */
.field-card-framed .ffc-name{
  left:6%;top:80%;width:56%;height:14.5%;justify-content:flex-start;
  font-size:calc(14px * var(--ffcs));color:#f2ead6;
  white-space:nowrap;overflow:hidden;
}
/* 右下药丸——攻/血（浅底深字） */
.field-card-framed .ffc-pt{
  left:66%;top:81%;width:31.5%;height:17%;
  font-size:calc(15px * var(--ffcs));gap:calc(2px*var(--ffcs));text-shadow:none;
}
.field-card-framed .ffc-pt .pt-atk{color:#a05a00}
.field-card-framed .ffc-pt .pt-sep{color:#777;font-size:calc(11px*var(--ffcs))}
/* ★ 礼指示物徽章——玻璃珠底板 + 数字居中 */
.field-card-framed .ffc-counters{
  position:absolute;left:50%;top:56%;z-index:4;pointer-events:none;
  transform:translate(-50%,-50%);
  width:calc(70px * var(--ffcs));height:calc(70px * var(--ffcs));
  border-radius:50%;
  background-image:url('../assets/icons/rite-bead.png');
  background-size:100% 100%;
  display:none; /* 默认隐藏，有指示物时 JS 设为显示 */
  align-items:center;justify-content:center;
  font-size:calc(35px * var(--ffcs));font-weight:bold;color:#fff;
  font-family:'KaiTi','楷体','STKaiti',serif;
  text-shadow:0 calc(2px*var(--ffcs)) calc(4px*var(--ffcs)) rgba(0,0,0,.9);
}
.field-card-framed .ffc-counters.has-counters{display:flex}
.field-card-framed .ffc-pt .pt-hp{color:#222}
.field-card-framed .ffc-pt .pt-hp.hp-injured{color:#c0392b}
.field-card-framed .ffc-pt .pt-hp.hp-buffed{color:#1e8e4e}
.card.plot-card.face-down{
  background-image:var(--cosmetic-cardback, url('../assets/card-back.png')) !important;
  background-size:cover;background-position:center;
  border:2px solid #555;
  box-shadow:0 0 4px rgba(0,0,0,.3);
}
.card.plot-card.face-up{
  transform:translateX(calc(400px * var(--battle-s,1))) translateY(calc(-50px * var(--battle-s,1))) rotate(0deg);
  border:1px solid #8e44ad;
}
.card.plot-card:hover{
  transform:translateX(calc(400px * var(--battle-s,1))) translateY(calc(-50px * var(--battle-s,1))) rotate(0deg) scale(1.12) !important;
  box-shadow:0 0 12px rgba(139,0,0,.6);z-index:5;
}

/* 卡牌内部 */
.card-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:4px;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
  border-radius:6px;
}
.card-name{font-size:10px;font-weight:bold;color:#ffd700;text-align:center;text-shadow:0 1px 3px #000;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-type-badge{position:absolute;top:3px;left:3px;font-size:7px;padding:1px 4px;border-radius:2px;color:#fff;font-weight:bold;text-shadow:0 1px 2px #000}
.badge-char{background:#c0392b}
.badge-plot{background:#8e44ad}
.badge-item{background:#2980b9}
.badge-siege{background:#7d6b3f}
.card-cost{position:absolute;top:3px;right:3px;font-size:9px;color:#ffd700;font-weight:bold;text-shadow:0 1px 3px #000;background:rgba(0,0,0,.6);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.field-info{position:absolute;bottom:2px;left:2px;right:2px;font-size:7px;color:#ccc;text-align:center;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.7);border-radius:2px;padding:1px 2px}

/* 可发动效果卡牌——游戏王式亮框提示 */
.card.activatable{
  animation:glow-activatable 1.5s ease-in-out infinite;
  border:2px solid #ffd700;
  box-shadow:0 0 8px 2px rgba(255,215,0,.4),0 0 20px 4px rgba(255,215,0,.15);
}
@keyframes glow-activatable{
  0%,100%{box-shadow:0 0 8px 2px rgba(255,215,0,.4),0 0 20px 4px rgba(255,215,0,.15)}
  50%{box-shadow:0 0 14px 4px rgba(255,215,0,.7),0 0 32px 8px rgba(255,215,0,.35)}
}
.card.activatable:hover{transform:scale(1.12);box-shadow:0 0 18px 6px rgba(255,215,0,.9),0 0 36px 10px rgba(255,215,0,.5);z-index:6}

/* ★ 卡组/辎重黄框——deck-stack/supply-stack 也支持 activatable */
.deck-stack.activatable{
  animation:glow-activatable 1.5s ease-in-out infinite;
  border-radius:5px;
  box-shadow:0 0 8px 2px rgba(255,215,0,.4),0 0 20px 4px rgba(255,215,0,.15);
}
.deck-stack.activatable:hover{transform:scale(1.12);box-shadow:0 0 18px 6px rgba(255,215,0,.9),0 0 36px 10px rgba(255,215,0,.5);z-index:6}
.supply-stack.activatable{
  animation:glow-activatable 1.5s ease-in-out infinite;
  border-radius:5px;
  box-shadow:0 0 8px 2px rgba(255,215,0,.4),0 0 20px 4px rgba(255,215,0,.15);
}
.hand-row.activatable{
  outline:2px solid #ffd700;
  outline-offset:4px;
  border-radius:6px;
  animation:glow-activatable 1.5s ease-in-out infinite;
}

/* 手牌拖拽中 */
.hand-card.dragging{opacity:.4;transform:scale(.95)}
/* 攻击选中/目标 */
.field-card.attacker-selected{
  box-shadow:0 0 16px 3px rgba(255,215,0,.7),0 0 32px 6px rgba(255,180,0,.4);
  border:2px solid #ffd700;transform:translateY(-6px);cursor:pointer;
}
.field-card.attack-target{cursor:crosshair}
.field-card.attack-target:hover{box-shadow:0 0 12px 3px rgba(231,76,60,.6);border:2px solid #e74c3c}
.field-card.drop-target{cursor:crosshair}
.field-card.drop-target:hover{box-shadow:0 0 12px 3px rgba(50,180,255,.6);border:2px solid #5af}

/* 屯田/征兵徽章 */
.choice-badge{
  position:absolute;top:3px;right:3px;font-size:8px;padding:1px 5px;
  border-radius:3px;color:#fff;font-weight:bold;text-shadow:0 1px 2px #000;z-index:2;
}
.choice-farm{background:#27ae60}
.choice-conscript{background:#2980b9}

/* === 按钮 === */
.game-btn{
  padding:6px 12px;border:1px solid #8a7a4a;border-radius:6px;
  background:linear-gradient(to bottom,#3a3020,#2a2010);color:#d4c8a0;
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:bold;
  transition:all .2s;white-space:nowrap;
}
.game-btn:hover{background:linear-gradient(to bottom,#5a4a2a,#3a3020);border-color:#ffd700}
.game-btn:disabled{opacity:.35;cursor:not-allowed}
.game-btn.primary{background:linear-gradient(to bottom,#2a5a20,#1a3a10);border-color:#4a8a3a}
.game-btn.danger{background:linear-gradient(to bottom,#5a1f1f,#3a1010);border-color:#8a3a3a}
.game-btn.chain-btn{background:linear-gradient(to bottom,#3a2040,#2a1030);border-color:#8a5aaa;min-width:80px}
/* ★ YGO 风格相位切换按钮 */
.game-btn.phase-battle{background:linear-gradient(to bottom,#4a3520,#2a1a10);border-color:#d4a030;color:#ffd080;font-size:14px;padding:8px 20px;min-width:140px;transition:all .25s}
.game-btn.phase-battle:hover{background:linear-gradient(to bottom,#6a4a2a,#4a2a10);border-color:#ffd700;color:#ffd700}
.game-btn.phase-end{background:linear-gradient(to bottom,#5a1f1f,#3a1010);border-color:#c0392b;color:#f08080;font-size:14px;padding:8px 20px;min-width:140px;transition:all .25s}
.game-btn.phase-end:hover{background:linear-gradient(to bottom,#7a2a2a,#4a1515);border-color:#e74c3c;color:#ff9999}
.game-btn.phase-wait{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a);border-color:#555;color:#777;font-size:14px;padding:8px 20px;min-width:140px;transition:all .25s;cursor:not-allowed;opacity:.6}

/* === Phase 8b 阵营选择按钮 === */
.game-btn.faction-btn{font-size:13px;padding:6px 14px;min-width:auto;margin:0 3px;opacity:.5;transition:all .25s}
.game-btn.faction-btn.active{opacity:1;border-color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,.5)}
.game-btn.faction-btn:hover{opacity:.8}

/* === 提示文字 === */
#turn-indicator{
  font-size:22px;font-weight:bold;color:#ffd700;
  text-shadow:0 2px 8px #000;pointer-events:none;text-align:center;
  opacity:0;transition:opacity .5s;
}
#turn-indicator.show{opacity:1}

/* ★ 2026-08-25 第三批 B3：居中提示（用户拍板）——黑色半透明蒙板框 + 白字。
   原 flashMsg 走 #turn-indicator（顶部金色大字、看不清），改为屏幕正中文本框样式。 */
#center-flash{
  position:fixed;top:50%;left:50%;z-index:900;
  transform:translate(-50%,-50%);
  max-width:min(70vw,520px);
  padding:10px 22px;border-radius:10px;
  background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:17px;line-height:1.5;text-align:center;
  pointer-events:none;
  opacity:0;transition:opacity .18s ease;
  display:none;
}
#center-flash.show{display:block;opacity:1;}

/* === 连锁覆盖层 === */
#chain-overlay{
  position:absolute;inset:0;z-index:30;background:transparent;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
#chain-overlay.active{display:flex}
#chain-stack-visual{display:flex;flex-direction:column-reverse;gap:4px;align-items:center;max-height:40vh;overflow-y:auto}
#chain-actions-bar{display:flex;gap:8px;align-items:center}
/* Bug #82：字号从 index.html inline 迁出（inline 压过等比规则）——legacy 基础值 */
#chain-title{font-size:18px}
#chain-priority-text{font-size:14px}

/* === 第二准备阶段弹出层 === */
#secondmain-overlay{
  position:absolute;inset:0;z-index:35;background:transparent;
  display:none;align-items:center;justify-content:center;
}
#secondmain-overlay.active{display:flex}
#secondmain-box{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid #ffd700;border-radius:14px;padding:24px 28px;text-align:center;
  min-width:280px;box-shadow:0 0 40px rgba(255,215,0,.25),0 8px 32px rgba(0,0,0,.6);
  animation:detail-pop .2s ease-out;
}
@keyframes detail-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
#secondmain-title{font-size:20px;font-weight:bold;color:#ffd700;margin-bottom:8px}
#secondmain-charname{font-size:16px;color:#fff;margin-bottom:4px}
#secondmain-hint{font-size:12px;color:#a09060;margin-bottom:14px}
#secondmain-actions{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
#btn-secondmain-cancel{font-size:11px;padding:4px 16px;opacity:.7}

/* === 祭品召唤覆盖层（§6b）=== */
#tribute-overlay{
  position:absolute;inset:0;z-index:36;background:transparent;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
#tribute-overlay.active{display:flex}
#tribute-box{
  background:linear-gradient(135deg,#1a1220,#2a1a30);
  border:2px solid #c0a0e0;border-radius:14px;padding:20px 28px;text-align:center;
  min-width:300px;max-width:420px;
  box-shadow:0 0 40px rgba(180,120,220,.3),0 8px 32px rgba(0,0,0,.6);
  animation:detail-pop .2s ease-out;
}
#tribute-title{font-size:18px;font-weight:bold;color:#c0a0e0;margin-bottom:4px;text-shadow:0 0 10px rgba(180,120,220,.4)}
#tribute-card-name{font-size:14px;color:#eee;margin-bottom:2px}
#tribute-requirement{font-size:13px;color:#e09060;margin-bottom:6px}
#tribute-selected-list{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:24px;margin-bottom:10px}
#tribute-selected-list .tribute-chip{
  background:rgba(180,120,220,.2);border:1px solid #c0a0e0;
  border-radius:6px;padding:2px 8px;font-size:12px;color:#e0c8f0;
}
#tribute-cost-summary{font-size:14px;color:#ffd700;font-weight:bold;margin-bottom:8px}
#tribute-cost-summary.insufficient{color:#e74c3c}
#tribute-actions{display:flex;gap:10px;justify-content:center}
.field-card.tribute-selectable{
  border:2px solid #c0a0e0 !important;
  box-shadow:0 0 10px 3px rgba(180,120,220,.5) !important;
  cursor:pointer;
  animation:tribute-pulse .8s ease-in-out infinite;
}
@keyframes tribute-pulse{
  0%,100%{box-shadow:0 0 8px 2px rgba(180,120,220,.4)}
  50%{box-shadow:0 0 16px 5px rgba(180,120,220,.7)}
}
.field-card.tribute-selected{
  border:2px solid #ffd700 !important;
  box-shadow:0 0 14px 3px rgba(255,215,0,.6) !important;
}

/* === 衍生物献祭确认弹窗（Phase 7h）=== */
#token-tribute-confirm-overlay{
  position:absolute;inset:0;z-index:37;background:transparent;
  display:none;align-items:center;justify-content:center;
}
#token-tribute-confirm-overlay.active{display:flex}
#token-tribute-confirm-box{
  background:linear-gradient(135deg,#12201a,#1a302a);
  border:2px solid #60c0a0;border-radius:14px;padding:20px 28px;text-align:center;
  min-width:280px;max-width:380px;
  box-shadow:0 0 40px rgba(100,180,160,.3),0 8px 32px rgba(0,0,0,.6);
  animation:detail-pop .2s ease-out;
}
#token-tribute-confirm-title{font-size:18px;font-weight:bold;color:#60c0a0;margin-bottom:10px;text-shadow:0 0 10px rgba(100,180,160,.4)}
#token-tribute-confirm-msg{font-size:14px;color:#eee;margin-bottom:16px;line-height:1.5}
#token-tribute-confirm-actions{display:flex;gap:10px;justify-content:center}

/* 衍生物选择中——场上高亮 */
.field-card.token-tribute-selectable{
  border:2px solid #60c0a0 !important;
  box-shadow:0 0 10px 3px rgba(100,180,160,.5) !important;
  cursor:pointer;
  animation:token-pulse .8s ease-in-out infinite;
}
@keyframes token-pulse{
  0%,100%{box-shadow:0 0 8px 2px rgba(100,180,160,.4)}
  50%{box-shadow:0 0 16px 5px rgba(100,180,160,.7)}
}
.field-card.token-tribute-selected{
  border:2px solid #ffd700 !important;
  box-shadow:0 0 14px 3px rgba(255,215,0,.6) !important;
}

/* 衍生物选择中——顶部提示条 */
#token-pick-banner{
  display:none;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:38;
  background:linear-gradient(135deg,#12201a,#1a302a);border:2px solid #60c0a0;
  border-radius:0 0 10px 10px;padding:6px 20px;text-align:center;
  font-size:13px;color:#c0f0e0;white-space:nowrap;
}
#token-pick-banner.active{display:block}
#token-pick-banner .pick-count{color:#ffd700;font-weight:bold}

/* === 卡牌详情覆盖层 === */
/* 卡牌详情——左侧面板（对标 YGO Master Duel：点击场上卡牌 → 左侧滑出大图） */
#card-detail-overlay{
  position:absolute;inset:0;
  /* ★ 2026-08-16：40→600。面板已移出 #game（锚定视口），但 #game 不创建层叠上下文，
     #game 内 pvp-timer（z-index:500，对局开始由 pvp-timer.js 挂载）仍与面板同级比较
     → 计时器盖在大图上（用户实机反馈）。600：压住全部战斗 UI（计时器/聊天 500 封顶），
     低于功能弹窗（辎重/掠夺 1000、献祭 1005、结算 2000+、ReactiveConfirm 9990+）——
     弹窗出现时要求玩家响应，必须仍盖大图。 */
  z-index:600;
  pointer-events:none; /* 透传点击——卡片和空白都能被下层接收到 */
  display:none;
}
#card-detail-overlay.active{display:block;pointer-events:auto}
#card-detail-box{
  position:absolute;top:4%;left:0;bottom:4%;
  width:320px;max-width:42vw;
  background:transparent;
  border:none;
  padding:20px 18px 18px;
  box-shadow:none;
  overflow-y:auto;
  pointer-events:auto;
  animation:detail-slide-in .22s ease-out;
  /* 滚动条美化 */
  scrollbar-width:thin;scrollbar-color:rgba(201,160,80,.3) transparent;
}
/* 面板滑入动画 */
@keyframes detail-slide-in{
  from{transform:translateX(-100%);opacity:.6}
  to{transform:translateX(0);opacity:1}
}
#card-detail-box.fullcard-mode{width:520px;max-width:46vw;}
#card-detail-box.fullcard-mode #card-detail-close{display:none}
/* ★ 佩戴装备大图（2026-08-17 用户拍板）：人物大图在左、装备物品大图依次向右扩展。
   盒子宽度随内容放开（盖过 fullcard-mode 的固定 520px/46vw——放在其后同优先级后者胜），
   装备多到超视口时盒子内横向滚动，绝不把页面撑出横向滚动条。 */
/* ★ 横向拖拽由 initDragScroll(axis:'x') 驱动；touch-action 禁原生横向 pan 防抢手势，
   纵向保留原生兜底（极矮屏内容超高时仍可上下滚）。
   ★★ card-full.css 加载在 main.css 之后，其 .fullcard-mode{width:520px;max-width:46vw}
   与 .has-equipment 同优先级（1,1,0）会压掉 width:auto → 装备盒子卡死在 520px/46vw、
   卡被裁剪（真机"显示不全"真根因）。复合选择器提级到 (1,2,0) 必胜，不受加载顺序影响 */
#card-detail-box.has-equipment,
#card-detail-box.fullcard-mode.has-equipment{width:auto;max-width:94vw;overflow-x:auto;touch-action:pan-y;}
#card-detail-box.has-equipment .detail-equip-row{display:flex;align-items:center;gap:14px;width:max-content;padding-right:14px;}
#card-detail-close{
  position:sticky;top:0;float:right;
  background:rgba(0,0,0,.5);border:1px solid #c9a050;border-radius:50%;
  color:#c9a050;font-size:18px;cursor:pointer;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  z-index:2;margin:-4px -6px 0 0;
}
#card-detail-close:hover{color:#ffd700;border-color:#ffd700;background:rgba(201,160,80,.2)}
#card-detail-content{color:#d4c8a0}
#card-detail-content .detail-name{font-size:20px;font-weight:bold;color:#ffd700;text-align:center;margin-bottom:2px}
#card-detail-content .detail-type{text-align:center;font-size:12px;color:#a09060;margin-bottom:10px}
#card-detail-content .detail-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-bottom:1px solid rgba(201,160,80,.12)}
#card-detail-content .detail-label{color:#a09060}
#card-detail-content .detail-val{font-weight:bold;color:#eee}
#card-detail-content .detail-section{margin-top:10px;padding-top:6px;border-top:1px solid rgba(201,160,80,.25)}
#card-detail-content .detail-section-title{font-size:22px;color:#c9a050;font-weight:bold;margin-bottom:4px}
#card-detail-content .detail-effect{font-size:22px;color:#ccc;padding:3px 6px;background:rgba(255,255,255,.03);border-radius:4px;margin:2px 0}
#card-detail-content .detail-none{font-size:22px;color:#666;font-style:italic}
/* 卡牌描述文本 ★ 长按/拖拽滚动查看 */
#card-detail-content .detail-desc{font-size:30px;color:#c8b878;line-height:1.7;margin:8px 0 10px;padding:8px 10px;background:rgba(201,160,80,.08);border-left:3px solid #c9a050;border-radius:0 4px 4px 0;max-height:140px;overflow-y:auto;position:relative;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;user-select:none;cursor:grab}
#card-detail-content .detail-desc:active{cursor:grabbing}
/* 文本溢出渐变提示（底部淡出 + 拖拽提示） */
#card-detail-content .detail-desc.overflow-bottom::after{content:'';position:sticky;bottom:0;display:block;height:24px;background:linear-gradient(transparent,rgba(30,30,40,.9));pointer-events:none;border-radius:0 0 4px 0}
#card-detail-content .detail-desc.overflow-bottom::before{content:'↕ 拖拽查看更多';display:block;text-align:center;font-size:10px;color:rgba(201,160,80,.6);padding:2px 0;margin-top:4px;pointer-events:none}
/* 效果区也可滚动 */
#card-detail-content .detail-section{max-height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 效果条目头部 */
#card-detail-content .detail-effect-header{margin-bottom:2px}
#card-detail-content .detail-effect-header>*{display:inline-block;vertical-align:middle}
#card-detail-content .detail-effect-trigger{font-size:22px;color:#f1c40f;font-weight:bold}
#card-detail-content .detail-effect-mode{font-size:16px;color:#3498db;background:rgba(52,152,219,.15);border-radius:3px;padding:0 4px;margin-left:4px}
#card-detail-content .detail-effect-cond{font-size:16px;color:#2ecc71;background:rgba(46,204,113,.1);border-radius:3px;padding:0 4px;margin-left:4px}
#card-detail-content .detail-effect-cost{font-size:16px;color:#e74c3c;background:rgba(231,76,60,.12);border-radius:3px;padding:0 4px;margin-left:4px}
#card-detail-content .detail-effect-actions{font-size:20px;color:#ccc;margin-top:2px;padding-left:4px}

/* === Phase 7g：被动效果确认弹窗 === */
/* ★ 2026-08-17：z-index 45→9990（根除：掠阵/纹章确认与特招选位冲突）。
   大图面板 2026-08-16 抬到 600（Bug #125）后盖住本弹窗（45）——点击掠阵角色
   先开大图再弹确认（actions.js），确认框被埋在大图蒙板下：点"是"落到大图蒙板
   （反把大图关了），弹窗原样残留，其透明 inset:0 蒙板随后吞掉全部选位点击——
   实机"无法选择召唤位置/每次点击都是询问是否发动效果"，所有共用此弹窗的确认
   （内乱/手发/被动）都中招，pvp-timer（500）亦一直盖着它。
   9990：压住全部战斗 UI（计时器 500、大图 600、辎重/掠夺 1000、献祭 1005），
   仅低于 .battle-card 9999（拖拽幻影卡，pointer-events:none 纯视觉）——
   弹窗要求玩家响应，必须最顶层。结算兜底见 victory-overlay.js hideReactiveConfirm。 */
#reactive-confirm-overlay{
  position:absolute;inset:0;z-index:9990;background:transparent;
  display:none;align-items:center;justify-content:center;
}
#reactive-confirm-overlay.active{display:flex}
/* ★ 内乱模式弹窗靠右——左侧留给卡牌大图（不遮挡详情面板） */
#reactive-confirm-overlay.strife-right{justify-content:flex-end;align-items:flex-start;
  padding-top:calc(60px * var(--battle-s,1));padding-right:calc(24px * var(--battle-s,1))}
#reactive-confirm-box{
  position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:calc(2px * var(--battle-s,1)) solid #f1c40f;border-radius:calc(16px * var(--battle-s,1));
  padding:calc(32px * var(--battle-s,1)) calc(28px * var(--battle-s,1));
  min-width:calc(340px * var(--battle-s,1));max-width:calc(440px * var(--battle-s,1));
  box-shadow:0 0 calc(60px * var(--battle-s,1)) rgba(241,196,15,.3),0 calc(12px * var(--battle-s,1)) calc(40px * var(--battle-s,1)) rgba(0,0,0,.7);
  animation:detail-pop .25s ease-out;
  text-align:center;
}
#reactive-confirm-title{font-size:calc(18px * var(--battle-s,1));font-weight:bold;color:#f1c40f;margin-bottom:calc(16px * var(--battle-s,1))}
#reactive-confirm-text{font-size:calc(15px * var(--battle-s,1));color:#d4c8a0;margin-bottom:calc(12px * var(--battle-s,1));line-height:1.6}
/* ★ 确认倒计时——与服务端 AutoAdvance 超时同步递减 */
#reactive-confirm-countdown{font-size:calc(14px * var(--battle-s,1));color:#aaa;margin-bottom:calc(16px * var(--battle-s,1))}
#reactive-confirm-countdown.warning{color:#e67e22;font-weight:bold}
#reactive-confirm-countdown.danger{color:#e74c3c;font-weight:bold;animation:pulse-danger .5s infinite}
@keyframes pulse-danger{0%,100%{opacity:1}50%{opacity:.4}}
#reactive-confirm-btns{display:flex;gap:calc(16px * var(--battle-s,1));justify-content:center}
#reactive-confirm-btns button{
  padding:calc(12px * var(--battle-s,1)) calc(36px * var(--battle-s,1));font-size:calc(16px * var(--battle-s,1));font-weight:bold;
  border:none;border-radius:calc(8px * var(--battle-s,1));cursor:pointer;transition:all .2s;
}
#reactive-confirm-btns button:hover{transform:scale(1.05)}
#btn-reactive-yes{background:#27ae60;color:#fff}
#btn-reactive-yes:hover{background:#2ecc71;box-shadow:0 0 16px rgba(46,204,113,.5)}
#btn-reactive-no{background:#c0392b;color:#fff}
#btn-reactive-no:hover{background:#e74c3c;box-shadow:0 0 16px rgba(231,76,60,.5)}
#btn-hand-choice-cancel{background:#7f8c8d;color:#fff}
#btn-hand-choice-cancel:hover{background:#95a5a6;box-shadow:0 0 16px rgba(149,165,166,.5)}

/* === 内乱代价选择高亮 === */
.strife-cost-selectable{
  border:2px solid #e74c3c!important;
  box-shadow:0 0 12px 4px rgba(231,76,60,.5)!important;
  cursor:pointer;
  animation:strife-pulse 1s ease-in-out infinite;
}
@keyframes strife-pulse{
  0%,100%{box-shadow:0 0 12px 4px rgba(231,76,60,.5)}
  50%{box-shadow:0 0 20px 8px rgba(231,76,60,.8)}
}
.strife-cost-selectable:hover{
  transform:scale(1.1);
  box-shadow:0 0 24px 10px rgba(231,76,60,.9)!important;
  z-index:6;
}

/* === 攻击拖拽水墨箭头（2026-08-15 替换 SVG 光束）——left/top + transform 简写 rotate/scale（Bug #122：独立属性旧 WebView 不支持） === */
#attack-arrow{position:absolute;left:0;top:0;z-index:15;pointer-events:none;display:none;
  transform-origin:50% 100%;will-change:left,top,transform}

/* === 战斗飞卡动画（炉石风格：本体+物品移动撞击） === */
.battle-card{
  position:fixed;z-index:9999;pointer-events:none;
  border-radius:6px;
  box-shadow:0 0 24px rgba(255,215,0,.7),0 8px 32px rgba(0,0,0,.4);
  transition:left .22s cubic-bezier(.1,.8,.3,1),top .22s cubic-bezier(.1,.8,.3,1),
             transform .22s cubic-bezier(.1,.8,.3,1),filter .22s ease;
}
.battle-card.charge{filter:brightness(1.3) drop-shadow(0 0 12px gold);transform:scale(1.12) translateY(-10px)}
.battle-card.impact{transition:left .08s ease-in,top .08s ease-in,transform .12s ease;transform:scale(.92)}
.battle-card.returning{transition:left .28s ease-out,top .28s ease-out,transform .28s ease-out,opacity .28s ease-out}
.battle-card.to-camp{transition:all .45s ease-in;opacity:.5;transform:scale(.35) rotate(-18deg)}

/* 旧 card-flying 保留向后兼容（hand-anim.js 盲抽等非战斗动画仍用此名） */
.card-flying{
  position:fixed;z-index:100;pointer-events:none;
  width:100px;height:140px;border-radius:6px;
  background-size:cover;background-position:center;
  box-shadow:0 0 24px rgba(255,215,0,.6);
  transition:left .18s ease-in,top .18s ease-in;
}
.card-flying.returning{transition:left .25s ease-out,top .25s ease-out}
.card-flying.to-camp{transition:all .4s ease-in;opacity:0;transform:scale(.5)}
.card-flying .card-inner,.card-flying .field-info{display:block}

/* 撞击闪光（增强版） */
@keyframes impact-flash{
  0%{box-shadow:0 0 16px 4px rgba(255,200,0,.7),0 0 48px 8px rgba(255,80,0,.5)}
  30%{box-shadow:0 0 36px 12px rgba(255,240,80,1),0 0 64px 16px rgba(255,140,0,.9)}
  100%{box-shadow:0 0 0 0 transparent}
}
.impact-flash{animation:impact-flash .45s ease-out}
/* 受击/反击抖动（2026-08-15 用户拍板：原地向后轻微抖动，不飞起）
   ★ Bug #123（2026-08-15 手机端受击无抖动）——原实现用独立 translate 属性（Chrome 104+），
     旧版 Android WebView 不支持 → 手机上抖动整个失效。改 transform 简写 + 行级 --shake-y
     基底：keyframes 每次都带上行布局偏移（对手行 -85px / 己方行 +10px），简写不清零
     偏移（VFX 铁律），全浏览器兼容。
   ★ --shake-y 按行注入 = 布局偏移 + 向后位移（背离攻击来向：对手行向上退 / 己方行向下退） */
#opp-field-row .shake{--shake-y:calc(calc(-85px * var(--battle-s,1)) - calc(3px * var(--battle-s,1)))}
#player-field-row .shake{--shake-y:calc(calc(10px * var(--battle-s,1)) + calc(3px * var(--battle-s,1)))}
@keyframes shake{
  0%,100%{transform:translate(0,var(--shake-y,0px))}
  15%{transform:translate(calc(-3px * var(--battle-s,1)),var(--shake-y,0px))}
  30%{transform:translate(calc(3px * var(--battle-s,1)),var(--shake-y,0px))}
  45%{transform:translate(calc(-2px * var(--battle-s,1)),var(--shake-y,0px))}
  60%{transform:translate(calc(2px * var(--battle-s,1)),var(--shake-y,0px))}
  75%{transform:translate(calc(-1px * var(--battle-s,1)),var(--shake-y,0px))}
  90%{transform:translate(calc(1px * var(--battle-s,1)),var(--shake-y,0px))}
}
.shake{animation:shake .4s ease}

/* PvP 攻击快速闪光——fire-and-forget 模式的轻量视觉反馈，不搬运 DOM */
@keyframes pvp-attack-flash{
  0%{filter:brightness(1.4) drop-shadow(0 0 8px gold)}
  50%{filter:brightness(1.7) drop-shadow(0 0 18px orange)}
  100%{filter:brightness(1)}
}
.pvp-attack-flash{animation:pvp-attack-flash .4s ease-out}

/* === 响应式 === */
@media(max-width:800px){
  .card.hand-card{width:56px;height:78px}
  .card.field-card{width:60px;height:84px}
  .card.field-card.field-card-simple{width:var(--field-card-w, 56px);height:var(--field-card-h, 78px)}
  .field-card-simple .fcs-namebar{font-size:8px;padding:1px 2px}
  .field-card-simple .fcs-pt{font-size:10px;padding:1px 4px}
  .card.plot-card{width:var(--trap-card-w, 47px);height:var(--trap-card-h, 66px)}
  .equip-card-stack{width:calc(80px * var(--battle-s, 1));height:calc(73px * var(--battle-s, 1))}
  .plot-row{min-height:40px;gap:var(--trap-gap, 7px)}
  .card-name{font-size:8px}
  .card-cost{font-size:7px;width:14px;height:14px}
  .game-btn{font-size:10px;padding:4px 8px}
}

/* ═══ Card Sandbox 调试面板 ═══════════════════════════════════════ */

/* 沙盒开关按钮 */
#sandbox-toggle{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  width:36px;height:64px;
  background:rgba(201,160,80,.15);border:1px solid rgba(201,160,80,.3);
  border-right:none;border-radius:8px 0 0 8px;
  display:none;
  align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;z-index:100;
  transition:all .25s;
}
#sandbox-toggle:hover{background:rgba(201,160,80,.3);border-color:#c9a050}
#sandbox-toggle.open{right:300px}

/* 面板本体 */
#sandbox-panel{
  position:fixed;right:-310px;top:0;width:300px;height:100vh;
  background:rgba(16,14,10,.95);border-left:2px solid #c9a050;
  padding:12px 10px;overflow-y:auto;z-index:99;
  transition:right .3s ease;
  display:flex;flex-direction:column;gap:10px;
}
#sandbox-panel.open{right:0}

/* 面板区块 */
.sandbox-section{
  background:rgba(201,160,80,.06);border:1px solid rgba(201,160,80,.15);
  border-radius:6px;padding:8px;
}
.sandbox-section-title{
  font-size:13px;font-weight:bold;color:#f1c40f;
  margin-bottom:6px;border-bottom:1px solid rgba(241,196,15,.15);
  padding-bottom:3px;
}

/* 面板按钮 */
.sandbox-btn{
  padding:4px 10px;font-size:11px;font-weight:bold;
  background:rgba(201,160,80,.15);color:#d4c8a0;
  border:1px solid rgba(201,160,80,.3);border-radius:4px;
  cursor:pointer;transition:all .15s;
  white-space:nowrap;
}
.sandbox-btn:hover{background:rgba(201,160,80,.3);color:#fff}
.sandbox-btn.danger{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.3);color:#e8a090}
.sandbox-btn.danger:hover{background:rgba(231,76,60,.3);color:#fff}

/* 下拉框和输入框 */
#sandbox-panel select,#sandbox-panel input{
  background:rgba(10,8,4,.8);color:#d4c8a0;
  border:1px solid rgba(201,160,80,.3);border-radius:4px;
  padding:4px 6px;font-size:11px;outline:none;
}
#sandbox-panel select:focus,#sandbox-panel input:focus{border-color:#c9a050}
#sandbox-panel select option{background:#1a160e;color:#d4c8a0}

/* ── 召唤目标切换按钮 ── */
.sandbox-owner-btn{
  flex:1;padding:4px 10px;font-size:11px;font-weight:bold;
  background:rgba(201,160,80,.08);color:#8a7a50;
  border:1px solid rgba(201,160,80,.2);border-radius:4px;
  cursor:pointer;transition:all .2s;
}
.sandbox-owner-btn.active{
  background:rgba(201,160,80,.25);color:#ffd700;
  border-color:#c9a050;box-shadow:0 0 6px rgba(201,160,80,.3);
}
.sandbox-owner-btn:hover{background:rgba(201,160,80,.18);color:#d4c8a0}

/* ── 分类区块折叠 ── */
.sandbox-cat .sandbox-section-title{
  cursor:pointer;-webkit-user-select:none;user-select:none;
  display:flex;align-items:center;gap:4px;
}
.sandbox-cat .sandbox-section-title::after{
  content:'▾';margin-left:auto;font-size:10px;transition:transform .2s;
}
.sandbox-cat.collapsed .sandbox-section-title::after{
  transform:rotate(-90deg);
}
.sandbox-cat.collapsed .sandbox-card-grid{display:none}
.sandbox-cat-count{
  font-size:10px;color:#8a7a50;background:rgba(201,160,80,.1);
  padding:1px 6px;border-radius:8px;margin-left:4px;
}

/* ── 卡牌按钮网格 ── */
.sandbox-card-grid{
  display:flex;flex-wrap:wrap;gap:3px;
  max-height:300px;overflow-y:auto;padding:2px 0;
}
.sandbox-card-btn{
  display:flex;align-items:center;gap:4px;
  padding:2px 6px;font-size:10px;
  background:rgba(20,16,8,.8);color:#c0b080;
  border:1px solid rgba(201,160,80,.2);border-radius:3px;
  cursor:pointer;transition:all .15s;
  white-space:nowrap;line-height:1.5;
}
.sandbox-card-btn:hover{
  background:rgba(201,160,80,.2);color:#ffd700;
  border-color:#c9a050;
}
.sandbox-card-cost{
  font-size:9px;color:#8a7a50;
  background:rgba(10,8,4,.6);padding:0 4px;border-radius:2px;
}
.sandbox-card-btn:hover .sandbox-card-cost{color:#c9a050}

/* 网格滚动条 */
.sandbox-card-grid::-webkit-scrollbar{width:4px}
.sandbox-card-grid::-webkit-scrollbar-track{background:rgba(10,8,4,.4)}
.sandbox-card-grid::-webkit-scrollbar-thumb{background:rgba(201,160,80,.3);border-radius:2px}

/* === 辎重区（卡牌化：80×112 卡片 + 可购时金框脉冲）=== */
.supply-stack{
  position:relative;
  width:80px;height:112px;
  cursor:pointer;
  transition:transform 0.2s,filter 0.2s,box-shadow 0.3s;
}
.supply-stack:hover{
  transform:scale(1.08);
  filter:brightness(1.15);
}
/* 可购买状态：金色光晕脉冲 */
.supply-stack.purchasable{
  animation:supply-golden-pulse 0.8s ease-in-out infinite;
  border-radius:5px;
}
@keyframes supply-golden-pulse{
  0%,100%{box-shadow:0 0 6px rgba(255,215,0,0.4),0 0 12px rgba(255,215,0,0.2);}
  50%{box-shadow:0 0 14px rgba(255,215,0,0.8),0 0 28px rgba(255,215,0,0.5);}
}
.supply-card-face{
  position:absolute;inset:0;
  background-image:url('../assets/card-frame.png');
  background-size:cover;background-position:center;
  border:2px solid #3a2a1a;border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
}
.supply-card-icon{
  font-size:32px;
  text-shadow:0 0 8px rgba(255,215,0,0.5);
  pointer-events:none;
}
/* 张数徽章——右下角覆盖（与卡组徽章同款） */
.supply-count-badge{
  position:absolute;
  bottom:-6px;right:-6px;
  min-width:24px;height:24px;line-height:24px;
  background:linear-gradient(135deg,#2a1a0a,#1a0a00);
  border:2px solid #7a6a4a;border-radius:12px;
  color:#d4b87a;font-size:13px;font-weight:bold;
  text-align:center;padding:0 5px;
  z-index:2;
  box-shadow:0 2px 4px rgba(0,0,0,0.6);
}

/* === 物品装备徽章（P5）=== */
.item-badge{
  display:inline-block;background:#2ecc71;color:#000;
  padding:1px 5px;border-radius:3px;font-size:9px;font-weight:bold;
  margin:1px 2px;white-space:nowrap;
}
.item-badge.destroyed{background:#555;color:#999;text-decoration:line-through}

/* === 装备卡叠放（物品卡挂在人物卡下方，绝对定位阶梯叠放）=== */
.field-card-wrapper{
  position:relative;display:inline-flex;
  --ffcs:calc(var(--battle-s, 1) * var(--ffcs-f, 1));
}
.equip-card-stack{
  position:absolute;
  top:var(--equip-top, 0);
  left:var(--equip-left, 0);
  transform:var(--equip-transform, translate(calc(80px * var(--battle-s,1)), calc(50px * var(--battle-s,1))));
  width:calc(140px * var(--ffcs));height:calc(128px * var(--ffcs));
  border-radius:5px;overflow:hidden;
  background-size:cover;background-position:top center;
  border:2px solid #2ecc71;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  cursor:pointer;transition:transform .15s,top .15s,left .15s;
  z-index:0;
}
/* 多张装备阶梯向下错开——位置/旋转均由 CSS 变量控制 */
.equip-card-stack:nth-child(1){
  top:var(--equip-top-1, var(--equip-top, 0));
  left:var(--equip-left-1, var(--equip-left, 0));
  transform:var(--equip-transform-1, var(--equip-transform, translate(calc(80px * var(--battle-s,1)), calc(50px * var(--battle-s,1)))));
}
.equip-card-stack:nth-child(2){
  top:var(--equip-top-2, calc(25px * var(--battle-s, 1)));
  left:var(--equip-left-2, var(--equip-left, 0));
  transform:var(--equip-transform-2, var(--equip-transform, translate(calc(80px * var(--battle-s,1)), calc(50px * var(--battle-s,1)))));
}
.equip-card-stack:nth-child(3){
  top:var(--equip-top-3, calc(45px * var(--battle-s, 1)));
  left:var(--equip-left-3, var(--equip-left, 0));
  transform:var(--equip-transform-3, var(--equip-transform, translate(calc(80px * var(--battle-s,1)), calc(50px * var(--battle-s,1)))));
}
.equip-card-stack.destroyed{filter:grayscale(1) opacity(0.5);border-color:#555}
.equip-card-stack:hover{
  transform:var(--equip-hover-transform, translate(calc(80px * var(--battle-s,1)), calc(46px * var(--battle-s,1))));z-index:6;
}
/* wrapper 内 field-card 置于装备上方 */
.field-card-wrapper>.field-card{
  position:relative;z-index:2;
}

/* === 九鼎进度跟踪器（P5）=== */
#ding-tracker{
  margin:4px 0;padding:6px 8px;background:rgba(231,76,60,.1);
  border:1px solid rgba(231,76,60,.3);border-radius:4px;
}
.ding-progress{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px}
.ding-dot{width:18px;height:18px;border-radius:3px;text-align:center;line-height:18px;font-size:10px}
.ding-dot.collected{background:#e74c3c;color:#fff}
.ding-dot.missing{background:#333;color:#555}

/* === 辎重区弹窗（P5·修订版——选卡购买）=== */
#supply-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:transparent;z-index:1000;
  display:none;align-items:center;justify-content:center;
}
#supply-popup{
  background:linear-gradient(135deg,#1a2a1a,#0d1520);
  border-radius:10px;padding:16px;
  max-width:750px;width:92%;max-height:85vh;overflow-y:auto;
  border:2px solid #2ecc71;
}
#supply-popup-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;color:#2ecc71;font-weight:bold;font-size:16px;
  border-bottom:1px solid #2ecc7140;padding-bottom:8px;
}
#supply-popup-close{cursor:pointer;font-size:20px;color:#aaa}
#supply-popup-close:hover{color:#fff}
#supply-popup-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.supply-card-item{
  background:#16213e;border:2px solid #2ecc7180;border-radius:8px;
  padding:10px;cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;gap:6px;
}
.supply-card-item:hover{border-color:#2ecc71;background:#1a2a4a;transform:translateY(-2px)}
.supply-card-item .sc-name{color:#2ecc71;font-weight:bold;font-size:14px;text-align:center}
.supply-card-item .sc-stats{
  display:flex;justify-content:center;gap:10px;color:#b0b0b0;font-size:10px;
}
.supply-card-item .sc-desc{
  color:#c9a050;font-size:10px;line-height:1.4;text-align:center;
  border-top:1px solid #2ecc7120;border-bottom:1px solid #2ecc7120;
  padding:4px 0;margin:2px 0;
}
.supply-card-item .sc-effects{
  flex:1;text-align:left;font-size:10px;color:#ccc;line-height:1.5;
  min-height:30px;
}
.supply-card-item .sc-eff{
  padding:2px 0;border-bottom:1px solid #ffffff08;
}
.supply-card-item .sc-eff b{color:#ffd700;margin-right:2px}
.supply-card-item .sc-buy-btn{
  display:block;padding:5px 0;background:#2ecc71;color:#000;
  border:none;border-radius:4px;font-weight:bold;cursor:pointer;font-size:12px;
  margin-top:auto;width:100%;
}
.supply-card-item .sc-buy-btn:disabled{background:#555;color:#999;cursor:not-allowed}
.supply-card-item .sc-buy-btn:not(:disabled):hover{background:#27ae60}

/* === 掠夺物品弹窗（P5）=== */
#loot-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:transparent;z-index:1000;
  display:none;align-items:center;justify-content:center;
}
.loot-popup{
  background:#1a1a2e;border-radius:8px;padding:16px;
  max-width:420px;width:90%;border:2px solid #c9a050;
}
.loot-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;color:#f1c40f;font-weight:bold;font-size:16px;
}
#loot-close{cursor:pointer;font-size:20px;color:#aaa}
#loot-close:hover{color:#fff}
#loot-subtitle{color:#888;font-size:12px;margin-bottom:10px}
#loot-items{display:flex;flex-direction:column;gap:6px}
.loot-item{
  background:#16213e;padding:10px;border-radius:6px;
  cursor:pointer;border:2px solid #2ecc71;
  transition:all .15s;
}
.loot-item:hover{border-color:#f1c40f;background:#1e2d4a}
.loot-item .loot-item-name{color:#2ecc71;font-weight:bold;font-size:14px}
.loot-item .loot-item-dur{color:#f1c40f;font-size:11px}
.loot-footer{text-align:center;color:#666;margin-top:10px;font-size:11px}

/* ═══ 布局编辑器（Ctrl+E 切换）═══════════════════════════════════════ */

/* 编辑模式——所有可编辑区域 */
.layout-editing .layout-zone{
  outline:2px dashed rgba(255,215,0,.35);
  outline-offset:-2px;
  transition:outline .2s;
}
.layout-editing .layout-zone:hover{outline-color:rgba(255,215,0,.8)}

/* 覆盖层——显示区域名+位置 */
.layout-zone-overlay{
  pointer-events:none;
  transition:all .08s linear;
}
.layout-zone-overlay .layout-zone-label{
  pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.9);
}
.layout-drag-handle{
  transition:background .15s;
}
.layout-drag-handle:hover{background:rgba(255,255,255,.04)!important}
.layout-resize-handle:hover{background:rgba(255,215,0,.95)!important;box-shadow:0 0 8px rgba(255,215,0,.6)}

/* 编辑模式底部提示条 */
#layout-hint-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(0,0,0,.85);border-top:1px solid #f1c40f;
  padding:6px 12px;text-align:center;font-size:12px;color:#ccc;
}
#layout-hint-bar.active{display:block}
#layout-hint-bar kbd{
  background:rgba(255,255,255,.15);color:#ffd700;padding:1px 6px;
  border-radius:3px;font-family:monospace;margin:0 2px;
}

/* ═══ v4：模型区占位符 + Zone 默认布局（ply- 前缀）══════════════════════ */

/* —— 模型区（共用 class，己方 + 对手）—— */
.model-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);
  border-radius:8px;overflow:hidden;
  text-align:center;gap:4px;-webkit-user-select:none;user-select:none;
}
/* 模型区虚线边框仅在编辑模式下显示，打牌时隐藏 */
.layout-editing .model-zone{
  border:1px dashed rgba(255,255,255,.08);
}
/* ═══ C7：兵力模型精灵图 ──────────────────────────────────────────── */
/* 默认用 CSS Art 画春秋士兵剪影，装备 TroopModel 装饰品后替换为图片。 */

/* 精灵图容器——居中于模型区 */
.model-placeholder{
  position:relative;
  width:60px; height:88px;
  opacity:.35; transition:opacity .4s;
  margin:0 auto;
  /* 身体——青铜铠甲梯形（上宽下窄）+ 肩甲横条 */
  background:
    /* 躯干——倒梯形，上宽下窄的铠甲 */
    linear-gradient(to bottom, #b8935a 0%, #9b7b4a 40%, #7a5c35 100%)
      no-repeat center 24px / 18px 30px,
    /* 肩甲横条 */
    linear-gradient(to right, #8B7355, #c9a85c 30%, #c9a85c 70%, #8B7355)
      no-repeat center 19px / 30px 7px,
    /* 裙甲横条 */
    linear-gradient(to right, #7a5c35, #9b7b4a 50%, #7a5c35)
      no-repeat center 52px / 22px 5px;
  border-radius:3px;
}
/* 头部——圆形头盔 */
.model-placeholder::before{
  content:'';
  position:absolute;
  top:2px; left:50%; transform:translateX(-50%);
  width:18px; height:18px;
  background:radial-gradient(circle at 40% 35%, #DAA520 0%, #c9a85c 50%, #8B7355 100%);
  border-radius:50%;
  /* 头盔顶饰（羽缨） */
  box-shadow:
    0 -8px 0 0 #8B7355,     /* 盔顶柱 */
    -3px -12px 0 2px #c04040, /* 左羽缨 */
    3px -12px 0 2px #c04040;  /* 右羽缨 */
}
/* 底座光晕——脉冲动画 */
.model-placeholder::after{
  content:'';
  position:absolute;
  bottom:-4px; left:50%; transform:translateX(-50%);
  width:50px; height:12px;
  background:radial-gradient(ellipse at center, rgba(201,168,92,.5) 0%, rgba(139,115,85,.15) 50%, transparent 75%);
  border-radius:50%;
  animation:troop-glow 2s ease-in-out infinite;
}

/* 精灵图装备装饰品后——隐藏 CSS Art，显示背景图 */
.model-placeholder.has-cosmetic{
  background:var(--cosmetic-troop-model) center/contain no-repeat;
  opacity:.85;
  width:72px; height:96px;
}
.model-placeholder.has-cosmetic::before,
.model-placeholder.has-cosmetic::after{display:none}

/* ── 动画 ── */
/* 浮动——上下 4px，3s ease-in-out alternate 循环 */
.model-zone .model-placeholder{
  animation:troop-float 3s ease-in-out infinite alternate;
}
.model-placeholder.has-cosmetic{
  animation:troop-float 3.5s ease-in-out infinite alternate; /* 装备图稍慢，更有重量感 */
}
@keyframes troop-float{
  from{transform:translateY(0)}
  to{transform:translateY(-4px)}
}
/* 光晕脉冲 */
@keyframes troop-glow{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
/* C8: 头像框脉冲——光晕呼吸效果 */
@keyframes avatarframe-pulse{
  0%,100%{box-shadow:0 0 6px rgba(255,215,0,.3)}
  50%{box-shadow:0 0 16px rgba(255,215,0,.6)}
}

.model-label{font-size:10px;color:rgba(255,255,255,.2);font-weight:bold;letter-spacing:1px}
.model-zone:hover .model-placeholder{opacity:.5}
.model-zone:hover .model-label{color:rgba(255,255,255,.35)}

/* —— 对手区"区分敌我"半透明已整体废弃（2026-08-16 用户拍板）——
   2026-06-15 布局重构给全部对手区加 opacity:0.75 区分敌我；用户先后拍板
   对方场卡（Bug #126）、卡组/辎重/手牌/建造/大营/陷阱均不应透明，并拍板
   "对战时候的组件都不要透明"。根因修复：删除 0.75 与敌我淡红标签色——
   全部对手区恢复不透明、与己方完全同渲染；其余 opacity 均为双方对称设计
   （.model-placeholder .35 剪影 / .model-label 淡色小字）或功能性状态
   （拖拽 .4 / 空牌库 .45 / 动画与 hover），保持不动 */
/* 原规则（已废弃，留档）：
   .opp-zone{opacity:0.75}
   .opp-zone .model-label{color:rgba(200,100,100,.25)}
   #opp-character-zone{opacity:1} */

/* —— 卡牌召唤对战区 —— */
/* 人物召唤区（独立可拖拽布局区） */
#ply-character-zone{
  display:flex;flex-direction:column;justify-content:center;
  min-height:120px;
}
/* 陷阱计谋区（独立可拖拽布局区） */
#ply-trap-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;
}

/* —— 手卡区 —— */
#ply-hand-zone{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:120px;
}

/* —— 卡组区 —— */
#ply-deck-zone{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:50px;
}

/* —— 辎重区（#supply-zone 元素样式已在上面定义，此处是容器 zone）—— */
#ply-supply-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:30px;
}

/* —— 大营区容器 —— */
#ply-camp-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:24px;
}

/* —— 共享区：结束按键（双方共用，不镜像）—— */
#end-button-zone{
  display:flex;align-items:center;gap:6px;
  min-height:40px;justify-content:center;
}

/* —— 共享区：战场分隔线（双方共用）—— */
#battle-divider-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:6px;
}
#battle-divider-zone #battle-divider{width:100%}

/* —— 共享区：回合提示（双方共用）—— */
#turn-indicator-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:40px;
}

/* —— Phase 10：城械区（3 己方 + 3 敌方，每区 1 槽 · 3D 建模）—— */
.siege-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:80px; /* ★ 3D 建模需足够高度显示模型 */
}
.siege-row{
  display:flex;align-items:center;justify-content:center;
  min-height:80px; /* ★ 与 zone 同高，模型 canvas 填充整行 */
  width:100%;
}

/* —— 对手手卡区 —— */
#opp-hand-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;
}


/* —— 对手卡组区 —— */
#opp-deck-zone{
  display:flex;align-items:center;justify-content:center;
  min-width:50px;min-height:60px;
}

/* ═══════════════════════════════════════════════════════════════════
   阶段9：陷阱卡样式
   ═══════════════════════════════════════════════════════════════════ */

/* 反击陷阱角标 */
.hand-card-counter-trap::after {
  content: "↩️";
  position: absolute;
  top: 0;
  right: 0;
  background: #FF4500;
  color: #FFD700;
  font-size: 0.7em;
  padding: 1px 4px;
  border-radius: 0 0 0 6px;
  z-index: 2;
}

/* 通常陷阱角标 */
.hand-card-trap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.7em;
  padding: 1px 3px;
  z-index: 2;
}

/* 陷阱触发脉冲动画 */
@keyframes trap-pulse {
  0%, 100% { box-shadow: 0 0 4px #8B0000; }
  50%      { box-shadow: 0 0 16px #ff0000, 0 0 24px #8B0000; }
}

.trap-triggering {
  animation: trap-pulse 0.3s ease-in-out 3;
}

/* 翻面动画 */
@keyframes card-flip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

.trap-flipping {
  animation: card-flip 0.4s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 10：城械建造面板（🔒 + 建造按钮 + 建造弹窗）
   ═══════════════════════════════════════════════════════════════════ */

/* 空槽位——仅显示建造按钮 */
.siege-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 109px;
  height: 109px;
}

/* 建造按钮 */
.siege-build-btn {
  width: 109px; height: 109px;
  font-size: 26px;
  writing-mode: vertical-rl;
  padding: 2px 10px;
  background: #7d6b3f;
  color: #f0e6c5;
  border: 1px solid #a09060;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s;
}
.siege-build-btn:hover {
  background: #9a8552;
  color: #fff;
}
/* 置灰态——对方回合/非主战斗阶段/已满（2026-08-17：按钮常驻，不可建造时置灰不可点） */
.siege-build-btn:disabled,
.siege-build-btn:disabled:hover {
  background: #4a4435;
  color: #8a8270;
  border-color: #5c5648;
  cursor: not-allowed;
}

/* 已建城械卡牌 */
.siege-built-card {
  border-color: #7d6b3f !important;
  box-shadow: 0 0 6px rgba(125,107,63,0.3);
}
.siege-built-card:hover {
  box-shadow: 0 0 10px rgba(125,107,63,0.5);
}

/* 建造弹窗覆盖层 */
#siege-build-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2100;
  align-items: center;
  justify-content: center;
}
#siege-build-overlay.active {
  display: flex;
}

/* 建造弹窗卡片 */
.siege-build-popup {
  background: #1a1a2e;
  border: 2px solid #7d6b3f;
  border-radius: 10px;
  padding: 16px;
  min-width: 320px;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
}

.siege-build-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #f0e6c5;
  font-size: 16px;
  font-weight: bold;
}
.siege-build-header span:last-child {
  cursor: pointer;
  color: #aaa;
  font-size: 18px;
}
.siege-build-header span:last-child:hover { color: #e74c3c; }

#siege-build-subtitle {
  color: #888;
  font-size: 12px;
  margin-bottom: 10px;
}

/* 单个城械选项 */
.siege-build-option {
  background: #222240;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
  transition: border-color .2s;
}
.siege-build-option:hover {
  border-color: #7d6b3f;
}

/* 建造选项按钮 */
.siege-build-option-btn {
  font-size: 11px;
  padding: 3px 14px;
  background: #7d6b3f;
  color: #f0e6c5;
  border: 1px solid #a09060;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .2s;
}
.siege-build-option-btn:hover {
  background: #9a8552;
  color: #fff;
}
.siege-build-option-btn:disabled {
  background: #444;
  color: #888;
  border-color: #555;
  cursor: not-allowed;
}

.siege-build-footer {
  color: #666;
  font-size: 10px;
  margin-top: 10px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   加手牌动画（2026-06-20）
   ═══════════════════════════════════════════════════════════════════ */

/* —— 指名动画：全屏蒙板 —— */
.card-reveal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:background .25s ease;
}
.card-reveal-overlay.active{background:rgba(0,0,0,0.7);}
.card-reveal-overlay.fading{background:rgba(0,0,0,0);}

/* —— 指名动画：中央大卡面 —— */
.card-reveal-large{
  position:fixed;z-index:2001;
  width:200px;height:280px;
  background-size:cover;background-position:center;
  border-radius:10px;
  box-shadow:0 0 30px rgba(255,215,0,0.6),0 0 60px rgba(255,215,0,0.3);
  pointer-events:none;
  transform:scale(0.7);opacity:0;
}
.card-reveal-large.pop-in{
  animation:card-reveal-pop .25s ease-out forwards;
}
.card-reveal-large.fly-to-hand{
  transition:all .25s ease-in;
}

/* —— 盲抽/指名共用：飞行 clone —— */
.card-fly-hand{
  position:fixed;z-index:1000;
  background-size:cover;background-position:center;
  border-radius:6px;
  pointer-events:none;
  transition:all .3s ease-in-out;
}
.card-fly-hand.blind{
  animation:blind-bounce .18s ease-out;
}
.card-fly-hand.arriving{
  opacity:0;transform:scale(0.3);
}


/* —— Keyframes —— */
@keyframes card-reveal-pop{
  0%{transform:scale(0.7);opacity:0}
  60%{transform:scale(1.1);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes blind-bounce{
  0%{transform:scale(1)}
  50%{transform:scale(1.15)}
  100%{transform:scale(1)}
}
@keyframes card-reveal-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ═══════════════════════════════════════════════════════════════════
   #54：召唤位置指示箭头（Hearthstone 式插入定位）
   ═══════════════════════════════════════════════════════════════════ */
.summon-pos-arrow{
  position:fixed;z-index:1000;pointer-events:none;
  color:#ffd700;font-size:20px;line-height:1;
  text-shadow:0 0 12px rgba(255,215,0,0.9),0 0 24px rgba(255,215,0,0.5);
  transform:translateX(-50%);display:none;
  animation:summon-arrow-bounce .4s ease-in-out infinite alternate;
}
@keyframes summon-arrow-bounce{
  from{margin-top:0}
  to{margin-top:-4px}
}

/* === 特招选位（对标 MD：◆ 已选标记 + 顶部横幅）=== */
.summon-pos-marker{
  position:fixed;z-index:95;
  color:#ffd54f;font-size:20px;pointer-events:auto;cursor:pointer;
  text-shadow:0 0 6px rgba(0,0,0,.8);transform:translateX(-50%);
}
#summon-place-banner{
  display:none;position:fixed;top:16%;left:50%;transform:translateX(-50%);z-index:120;
  background:linear-gradient(135deg,#12201a,#1a302a);border:2px solid #60c0a0;
  border-radius:10px;padding:7px 20px;text-align:center;
  font-size:13px;color:#c0f0e0;white-space:nowrap;pointer-events:none;
}
#summon-place-banner.active{display:block}
#summon-place-banner span{color:#ffd700;font-weight:bold}
/* 对手选位中提示条（Bug #129）：同 banner 样式族，中性等待文案，pointer-events:none 不挡操作 */
#summon-place-opp-tip{
  display:none;position:fixed;top:16%;left:50%;transform:translateX(-50%);z-index:120;
  background:linear-gradient(135deg,#1a2030,#242e44);border:2px solid #8098c8;
  border-radius:10px;padding:7px 20px;text-align:center;
  font-size:13px;color:#c0d0f0;white-space:nowrap;pointer-events:none;
}
#summon-place-opp-tip.active{display:block}

/* ═══════════════════════════════════════════════════════════════════
   Phase C9：对战结算动画覆盖层（胜利/败北）
   ═══════════════════════════════════════════════════════════════════ */

/*
   ═══════════════════════════════════════════════════════════════════
   对战结算弹窗 — Hearthstone 风格：舞台聚光 + 无缝融合
   全部尺寸用 calc(基准px * var(--battle-s,1)) 随容器等比缩放
   视觉层级：遮罩 → 聚光 → 图片 → 标题 → 详情 → 按钮
   ═══════════════════════════════════════════════════════════════════
*/

/* —— 全屏暗色遮罩 —— */
#battle-result-overlay{
  position:absolute;inset:0;z-index:100;
  background:rgba(0,0,0,0);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  gap:calc(28px * var(--battle-s, 1));
  transition:background .5s ease-out;
}
#battle-result-overlay.active{display:flex}
#battle-result-overlay.victory.active,
#battle-result-overlay.defeat.active{
  background:rgba(0,0,0,0.90);
}

/* —— 舞台区：聚光 + 图片 + 标题 + 详情 —— */
#battle-result-stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(48px * var(--battle-s, 1)) calc(56px * var(--battle-s, 1)) calc(36px * var(--battle-s, 1));
}

/* —— 径向聚光灯（舞台核心——桥接暗色遮罩与图片）—— */
#battle-result-glow{
  position:absolute;
  inset:calc(-40px * var(--battle-s, 1));
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  transition:opacity .6s ease-out .15s;
}
#battle-result-overlay.active #battle-result-glow{opacity:1}
/* 胜利 = 暖金聚光 */
#battle-result-overlay.victory #battle-result-glow{
  background:radial-gradient(ellipse 70% 65% at 50% 48%,
    rgba(255,185,40,.22) 0%,
    rgba(255,150,20,.10) 35%,
    rgba(180,100,10,.04) 60%,
    transparent 100%);
}
/* 败北 = 冷灰紫聚光（克制，不抢戏） */
#battle-result-overlay.defeat #battle-result-glow{
  background:radial-gradient(ellipse 70% 65% at 50% 48%,
    rgba(140,120,160,.16) 0%,
    rgba(100,80,130,.08) 35%,
    rgba(60,40,80,.03) 60%,
    transparent 100%);
}

/* —— 胜负标题（图上，设定情绪基调）—— */
#battle-result-title{
  position:relative;z-index:1;
  font-size:calc(36px * var(--battle-s, 1));
  font-weight:700;
  letter-spacing:calc(14px * var(--battle-s, 1));
  margin-bottom:calc(14px * var(--battle-s, 1));
  opacity:0;
  transform:translateY(calc(-8px * var(--battle-s, 1)));
  transition:opacity .5s ease-out .2s,transform .5s ease-out .2s;
}
#battle-result-overlay.active #battle-result-title{opacity:1;transform:translateY(0)}
#battle-result-overlay.victory #battle-result-title{
  color:#f5c842;
  text-shadow:0 0 calc(40px * var(--battle-s, 1)) rgba(245,200,66,.5),
              0 calc(2px * var(--battle-s, 1)) calc(4px * var(--battle-s, 1)) rgba(0,0,0,.9);
}
#battle-result-overlay.defeat #battle-result-title{
  color:#a0a0b0;
  text-shadow:0 0 calc(30px * var(--battle-s, 1)) rgba(160,160,176,.3),
              0 calc(2px * var(--battle-s, 1)) calc(4px * var(--battle-s, 1)) rgba(0,0,0,.9);
}

/* —— Splash 图：主角 —— */
.battle-result-splash{
  display:block;
  position:relative;z-index:1;
  width:100%;
  max-width:calc(660px * var(--battle-s, 1));
  height:auto;
  border-radius:calc(4px * var(--battle-s, 1));
  opacity:0;
  transform:scale(.92);
  transition:opacity .55s ease-out .25s,transform .55s ease-out .25s;
}
#battle-result-overlay.active .battle-result-splash{opacity:1;transform:scale(1)}
/* 图片自备戏剧光影，仅加极淡外发光增强存在感 */
#battle-result-overlay.victory .battle-result-splash{
  filter:drop-shadow(0 0 calc(50px * var(--battle-s, 1)) rgba(255,180,20,.25))
         drop-shadow(0 calc(16px * var(--battle-s, 1)) calc(40px * var(--battle-s, 1)) rgba(0,0,0,.7));
}
#battle-result-overlay.defeat .battle-result-splash{
  filter:drop-shadow(0 0 calc(40px * var(--battle-s, 1)) rgba(120,110,160,.18))
         drop-shadow(0 calc(16px * var(--battle-s, 1)) calc(40px * var(--battle-s, 1)) rgba(0,0,0,.7));
}

/* —— 详情区：兵力 + 原因（图下，克制低调）—— */
#battle-result-details{
  position:relative;z-index:1;
  margin-top:calc(16px * var(--battle-s, 1));
  font-size:calc(13px * var(--battle-s, 1));
  opacity:0;
  transition:opacity .5s ease-out .45s;
}
#battle-result-overlay.active #battle-result-details{opacity:1}
.result-detail-row{
  margin:calc(3px * var(--battle-s, 1)) 0;
  line-height:1.7;
  color:rgba(200,180,150,.7);
}
#result-reason{
  color:rgba(200,180,150,.55);
  font-size:calc(12px * var(--battle-s, 1));
  margin-top:calc(6px * var(--battle-s, 1));
  padding-top:calc(6px * var(--battle-s, 1));
  border-top:calc(1px * var(--battle-s, 1)) solid rgba(200,180,150,.12);
}

/* —— 按钮区：底部独立，稳重视觉锚点 —— */
#battle-result-actions{
  display:flex;
  gap:calc(16px * var(--battle-s, 1));
  justify-content:center;
  opacity:0;
  transition:opacity .5s ease-out .6s;
}
#battle-result-overlay.active #battle-result-actions{opacity:1}
#battle-result-actions .game-btn{
  padding:calc(11px * var(--battle-s, 1)) calc(32px * var(--battle-s, 1));
  font-size:calc(15px * var(--battle-s, 1));
  border-radius:calc(6px * var(--battle-s, 1));
  border:calc(1px * var(--battle-s, 1)) solid rgba(200,180,150,.25);
  background:rgba(255,255,255,.04);
  color:rgba(220,210,190,.85);cursor:pointer;
  letter-spacing:calc(2px * var(--battle-s, 1));
  transition:background .2s,transform .15s,border-color .2s,color .2s;
}
#battle-result-actions .game-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(200,180,150,.45);
  color:#fff;
  transform:scale(1.04);
}
#battle-result-actions .game-btn.primary{
  background:rgba(255,200,80,.10);
  border-color:rgba(255,200,80,.40);
  color:#f0d060;
}
#battle-result-actions .game-btn.primary:hover{
  background:rgba(255,200,80,.20);
  border-color:rgba(255,200,80,.60);
  color:#ffe680;
}

/* —— 粒子层（绝对定位，pointer-events:none，不阻挡按钮）—— */
#battle-result-particle-layer{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.battle-result-particle{
  position:absolute;pointer-events:none;border-radius:50%;
}

/* 胜利粒子——金色光点升空（等比缩放） */
.battle-result-particle.victory-particle{
  width:calc(3px * var(--battle-s, 1));height:calc(3px * var(--battle-s, 1));
  background:#ffd700;
  box-shadow:0 0 calc(6px * var(--battle-s, 1)) #ffd700,
             0 0 calc(12px * var(--battle-s, 1)) rgba(255,215,0,.5);
  animation:victory-particle-float var(--dur,2s) ease-out var(--delay,0s) forwards;
}
/* 败北粒子——暗红碎片坠落（等比缩放） */
.battle-result-particle.defeat-particle{
  width:calc(5px * var(--battle-s, 1));height:calc(2px * var(--battle-s, 1));
  background:#e74c3c;
  box-shadow:0 0 calc(4px * var(--battle-s, 1)) #a00;
  animation:defeat-particle-fall var(--dur,1.5s) ease-in var(--delay,0s) forwards;
}

/* —— 败北屏幕震动 —— */
#game.shake-defeat{
  animation:screen-shake .5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase C9 @keyframes
   ═══════════════════════════════════════════════════════════════════ */

/* 胜利金框脉冲 */
@keyframes victory-glow-box{
  0%,100%{box-shadow:0 0 40px rgba(255,215,0,.25),0 8px 40px rgba(0,0,0,.7)}
  50%{box-shadow:0 0 80px rgba(255,215,0,.45),0 16px 60px rgba(0,0,0,.7)}
}

/* 图标弹性弹入 */
@keyframes result-icon-bounce{
  from{transform:scale(0);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  to{transform:scale(1);opacity:1}
}

/* 标题下滑淡入 */
@keyframes result-title-in{
  from{transform:translateY(-20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* 详情淡入 */
@keyframes result-details-fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* 按钮淡入 */
@keyframes result-btns-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* splash 图缩放淡入（替代原 icon-bounce + title-in） */
@keyframes result-splash-in{
  from{transform:scale(.85);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* 胜利粒子升空（translate 跟随 --battle-s 缩放） */
@keyframes victory-particle-float{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:1}
  50%{opacity:.8}
  100%{transform:translateY(calc(-180px * var(--battle-s, 1))) translateX(var(--drift,20px)) scale(0);opacity:0}
}

/* 败北粒子坠落（translate 跟随 --battle-s 缩放） */
@keyframes defeat-particle-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(calc(160px * var(--battle-s, 1))) rotate(var(--rot,90deg));opacity:0}
}

/* 屏幕震动 */
@keyframes screen-shake{
  0%,100%{transform:translateX(0)}
  10%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}
  50%{transform:translateX(-4px)}
  70%{transform:translateX(4px)}
  90%{transform:translateX(-2px)}
}

/* ═══════════════════════════════════════════════════════════════════
   Phase C9 VictoryEffect 风格变体（通过叠加 class 触发）
   ═══════════════════════════════════════════════════════════════════ */

/* —— 金龙咆哮（紫金粒子混合）—— */
#battle-result-overlay.effect-dragon-roar .battle-result-particle.victory-particle{
  background:#d4a0ff;
  box-shadow:0 0 calc(8px * var(--battle-s, 1)) #c080f0,
             0 0 calc(16px * var(--battle-s, 1)) rgba(200,128,240,.5);
}

/* —— 水墨丹青（灰白边框 + 黑色不规则粒子）—— */
#battle-result-overlay.effect-ink-wash .battle-result-particle.victory-particle{
  width:calc(6px * var(--battle-s, 1));height:calc(3px * var(--battle-s, 1));border-radius:calc(1px * var(--battle-s, 1));
  background:#d0c8b8;
  box-shadow:0 0 calc(6px * var(--battle-s, 1)) rgba(200,190,170,.5);
}
#battle-result-overlay.effect-ink-wash .battle-result-particle.defeat-particle{
  width:calc(8px * var(--battle-s, 1));height:calc(3px * var(--battle-s, 1));border-radius:0;
  background:#3a3028;
  box-shadow:0 0 calc(2px * var(--battle-s, 1)) #1a1008;
}

/* ═══════════════════════════════════════════════════════════════════
   竞技奖励宝箱覆盖层（对标炉石竞技场）
   ═══════════════════════════════════════════════════════════════════ */

#arena-reward-overlay{
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.85);
  flex-direction:column; align-items:center; justify-content:center;
}
#arena-reward-overlay.active{display:flex}

#arena-reward-box{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:560px; max-width:90vw;
}

/* ── 宝箱 ── */
#arena-chest{
  position:relative; width:160px; height:140px;
  display:flex; align-items:center; justify-content:center;
}
#arena-chest-icon{
  font-size:100px; transition:transform 0.6s cubic-bezier(0.68,-0.55,0.27,1.55);
  filter:drop-shadow(0 0 30px rgba(255,215,0,0.6));
}
/* 宝箱抖动 → 打开 */
#arena-chest.shaking #arena-chest-icon{
  animation:chestShake 0.6s ease-in-out;
}
#arena-chest.opened #arena-chest-icon{
  transform:scale(1.3);
  filter:drop-shadow(0 0 60px rgba(255,215,0,1));
}
#arena-chest-light{
  display:none; position:absolute; top:50%; left:50%;
  width:200px; height:200px; margin:-100px 0 0 -100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,0,0.8),rgba(255,200,0,0.3),transparent 70%);
}
#arena-chest.opened #arena-chest-light{display:block; animation:lightBurst 1s ease-out forwards}

@keyframes chestShake{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-8px) rotate(-3deg)}
  30%{transform:translateX(8px) rotate(3deg)}
  45%{transform:translateX(-6px) rotate(-2deg)}
  60%{transform:translateX(6px) rotate(2deg)}
  75%{transform:translateX(-3px) rotate(-1deg)}
  90%{transform:translateX(3px) rotate(1deg)}
}
@keyframes lightBurst{
  0%{opacity:0; transform:scale(0.2)}
  40%{opacity:1; transform:scale(1.5)}
  100%{opacity:0; transform:scale(3)}
}

/* ── 标题 ── */
#arena-reward-title{
  font-size:32px; font-weight:bold; color:#ffd700; text-shadow:0 0 20px rgba(255,215,0,0.5);
  opacity:0; transform:translateY(20px);
  transition:opacity 0.5s, transform 0.5s;
}
#arena-reward-title.show{opacity:1; transform:translateY(0)}

#arena-reward-record{
  font-size:18px; color:#aaa;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
#arena-reward-record.show{opacity:1; transform:translateY(0)}

/* ── 奖励列表 ── */
#arena-reward-list{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  min-height:80px; padding:10px 0;
}
.arena-reward-item{
  width:100px; height:130px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; transform:scale(0.3) rotateY(90deg);
  transition:opacity 0.4s, transform 0.5s cubic-bezier(0.68,-0.55,0.27,1.55);
  cursor:default;
}
.arena-reward-item.show{
  opacity:1; transform:scale(1) rotateY(0);
}
.arena-reward-item.gold{
  background:linear-gradient(135deg,#3a2a0a,#5a4a1a); border:2px solid #c9a030;
  box-shadow:0 0 15px rgba(201,160,48,0.4);
}
.arena-reward-item.jade{
  background:linear-gradient(135deg,#0a2a1a,#1a4a2a); border:2px solid #30c960;
  box-shadow:0 0 15px rgba(48,201,96,0.4);
}
.arena-reward-item.pack{
  background:linear-gradient(135deg,#1a1a3a,#2a2a5a); border:2px solid #6a6aff;
  box-shadow:0 0 15px rgba(106,106,255,0.4);
}
.arena-reward-item.card-R{
  background:linear-gradient(135deg,#2a2a2a,#3a3a3a); border:2px solid #aaa;
  box-shadow:0 0 12px rgba(170,170,170,0.4);
}
.arena-reward-item.card-SR{
  background:linear-gradient(135deg,#1a1a2a,#2a2a4a); border:2px solid #6688ff;
  box-shadow:0 0 15px rgba(102,136,255,0.5);
}
.arena-reward-item.card-SSR{
  background:linear-gradient(135deg,#2a1a0a,#4a3a1a); border:2px solid #ffaa00;
  box-shadow:0 0 18px rgba(255,170,0,0.5);
}
.arena-reward-item.card-UR{
  background:linear-gradient(135deg,#2a0a2a,#4a1a4a); border:2px solid #ff44ff;
  box-shadow:0 0 22px rgba(255,68,255,0.6); animation:urGlow 1.5s ease-in-out infinite;
}
@keyframes urGlow{
  0%,100%{box-shadow:0 0 22px rgba(255,68,255,0.6)}
  50%{box-shadow:0 0 40px rgba(255,150,255,0.9)}
}

.arena-reward-icon{font-size:42px}
.arena-reward-amount{font-size:20px; font-weight:bold; color:#ffd700}
.arena-reward-name{font-size:11px; color:#ccc; text-align:center; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.arena-reward-rarity{font-size:10px; color:#888}

/* ── 按钮 ── */
#arena-reward-actions{margin-top:10px; opacity:0; transition:opacity 0.5s 1s}
#arena-reward-actions.show{opacity:1}
#arena-reward-actions .game-btn{padding:12px 40px; font-size:18px}

/* ── 粒子 ── */
#arena-reward-particles{
  position:fixed; inset:0; pointer-events:none; z-index:1;
}
.arena-reward-particle{
  position:absolute; pointer-events:none;
  animation:rewardParticleFall 2s ease-out forwards;
}
@keyframes rewardParticleFall{
  0%{opacity:1; transform:translate(0,0) scale(1)}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(0.3)}
}

/* ═══════════════════════════════════════════════════════════════════
   竞技排行榜覆盖层
   ═══════════════════════════════════════════════════════════════════ */

#arena-leaderboard-overlay{
  display:none; position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,0.85);
  flex-direction:column; align-items:center; justify-content:center;
}
#arena-leaderboard-overlay.active{display:flex}

#arena-leaderboard-box{
  position:relative; z-index:2;
  width:600px; max-width:90vw; max-height:80vh;
  background:linear-gradient(160deg,#1a1410,#2a1a10);
  border:2px solid #c9a050; border-radius:16px;
  padding:32px 28px 24px;
  display:flex; flex-direction:column;
  box-shadow:0 0 40px rgba(201,160,50,0.3);
}

#arena-leaderboard-close{
  position:absolute; top:12px; right:16px;
  font-size:24px; color:#888; cursor:pointer;
  transition:color 0.2s;
}
#arena-leaderboard-close:hover{color:#ffd700}

#arena-leaderboard-title{
  font-size:28px; font-weight:bold; color:#ffd700;
  text-align:center; margin-bottom:20px;
  text-shadow:0 0 16px rgba(255,215,0,0.4);
}

#arena-leaderboard-list{
  overflow-y:auto; max-height:55vh;
  display:flex; flex-direction:column; gap:6px;
}

.arena-leaderboard-row{
  display:flex; align-items:center; padding:10px 16px;
  border-radius:8px; gap:12px;
  background:rgba(255,255,255,0.03);
  transition:background 0.2s;
}
.arena-leaderboard-row:hover{background:rgba(255,255,255,0.06)}

.arena-leaderboard-row.top1{
  background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.3);
}
.arena-leaderboard-row.top2{
  background:rgba(192,192,192,0.1); border:1px solid rgba(192,192,192,0.25);
}
.arena-leaderboard-row.top3{
  background:rgba(205,127,50,0.1); border:1px solid rgba(205,127,50,0.25);
}

.arena-leaderboard-rank{
  width:36px; text-align:center; font-size:20px; font-weight:bold;
  color:#888; flex-shrink:0;
}
.arena-leaderboard-row.top1 .arena-leaderboard-rank{color:#ffd700; font-size:24px}
.arena-leaderboard-row.top2 .arena-leaderboard-rank{color:#c0c0c0; font-size:24px}
.arena-leaderboard-row.top3 .arena-leaderboard-rank{color:#cd7f32; font-size:24px}

.arena-leaderboard-name{
  flex:1; font-size:16px; color:#ddd;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.arena-leaderboard-record{
  font-size:15px; color:#c9a050; font-weight:bold; flex-shrink:0;
  min-width:80px; text-align:right;
}

.arena-leaderboard-date{
  font-size:11px; color:#666; flex-shrink:0;
  min-width:90px; text-align:right;
}

.arena-leaderboard-empty{
  text-align:center; color:#666; padding:40px; font-size:15px;
}

/* ═══════════════════════════════════════════════════════════════════
   负面扣兵闪红动画（饥荒/士气压制/负面效果等）
   ═══════════════════════════════════════════════════════════════════ */

@keyframes troops-flash-red{
  0%  {color:#e74c3c; text-shadow:0 0 8px rgba(231,76,60,0.8)}
  50% {color:#ff4444; text-shadow:0 0 16px rgba(255,68,68,1)}
  100%{color:inherit; text-shadow:none}
}

.troops-flash-red{
  animation:troops-flash-red 0.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   战场阶段兵力牌互攻动画 + 兵力变化浮字（2026-08-20）
   —— 旧中央 VS 盒子已删除；兵力牌冲锋用 transform 简写 keyframes
      （.card.troops-card 基础 transform:none 无布局偏移，全浏览器安全，
       避开独立 translate 属性的 Chrome 104+ 兼容坑——教训 4/9）
   ═══════════════════════════════════════════════════════════════════ */

/* 攻方兵力牌冲锋：--lunge-x/--lunge-y 由 JS 按两卡中心连线 55% 距离注入 */
@keyframes troops-lunge{
  0%  {transform:translate(0,0)}
  45% {transform:translate(var(--lunge-x,0),var(--lunge-y,0))}
  100%{transform:translate(0,0)}
}
.card.troops-card.troops-lunge{
  animation:troops-lunge 0.55s ease-out;
}

/* 兵力浮字：卡上端中央浮现原因+数字，1s 上浮淡出自删（animationend 移除 DOM） */
@keyframes troops-float-rise{
  0%  {opacity:0; transform:translate(-50%,8px)}
  15% {opacity:1; transform:translate(-50%,0)}
  70% {opacity:1; transform:translate(-50%,-8px)}
  100%{opacity:0; transform:translate(-50%,-14px)}
}
.troops-float{
  position:fixed; z-index:550; pointer-events:none;
  font-size:18px; font-weight:bold; text-shadow:0 2px 6px #000;
  animation:troops-float-rise 1s ease-out forwards;
}
.troops-float.damage{color:#ff6b5e}
.troops-float.heal{color:#7dff8a}
.troops-float.neutral{color:#f5f5f5}

/* ═══════════════════════════════════════════════════════════════════
   Phase B: PvP 联网对战 UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── 匹配等待覆盖层 ── */
#matchmaking-overlay{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.75); z-index:9998;
  display:flex; align-items:center; justify-content:center;
}
#matchmaking-box{
  text-align:center; color:#d4c8a0;
  background:rgba(20,16,8,.95);
  border:2px solid rgba(201,160,80,.3);
  border-radius:12px; padding:32px 48px;
  max-width:340px;
}
#matchmaking-spinner{
  width:48px; height:48px; margin:0 auto 16px;
  border:3px solid rgba(201,160,80,.2);
  border-top-color:#c9a050; border-radius:50%;
  animation:mm-spin .8s linear infinite;
}
@keyframes mm-spin{ to{transform:rotate(360deg)} }
#matchmaking-text{ font-size:18px; margin-bottom:8px; }
#matchmaking-timer{ font-size:13px; color:#8a7a50; margin-bottom:16px; }
#btn-matchmaking-cancel{
  background:rgba(200,80,80,.15); border:1px solid rgba(200,80,80,.3);
  color:#d88; padding:6px 24px; border-radius:6px; cursor:pointer;
  font-size:14px;
}
#btn-matchmaking-cancel:hover{ background:rgba(200,80,80,.3); }

/* ── 先后手选择覆盖层 ── */
#order-selection-overlay{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.8); z-index:9997;
  display:flex; align-items:center; justify-content:center;
}
#order-selection-box{
  text-align:center; color:#d4c8a0;
  background:rgba(20,16,8,.95);
  border:2px solid rgba(201,160,80,.3);
  border-radius:12px; padding:32px 48px;
  min-width:360px;
}
#order-selection-title{ font-size:22px; font-weight:bold; color:#ffd700; margin-bottom:20px; }
#order-selection-cards{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; }
.order-card{
  background:rgba(201,160,80,.08); border:1px solid rgba(201,160,80,.2);
  border-radius:8px; padding:12px 20px; min-width:120px;
}
.order-card-label{ font-size:11px; color:#8a7a50; margin-bottom:4px; }
.order-card-name{ font-size:16px; color:#ffd700; font-weight:bold; }
.order-card-cost{ font-size:13px; color:#c9a050; }
.order-vs{ font-size:20px; color:#c9a050; font-weight:bold; }
#order-selection-hint{ margin-top:12px; }
#order-selection-hint span{ display:block; margin-bottom:10px; font-size:16px; color:#ffd700; }
#order-selection-hint .game-btn{ margin:0 8px; }
#order-selection-waiting{ margin-top:12px; }
.order-waiting-text{ font-size:14px; color:#8a7a50; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── 断线重连 Banner ── */
#reconnect-banner{
  position:fixed; top:0; left:0; width:100%; z-index:9999;
  background:rgba(180,120,20,.9); color:#fff;
  padding:8px 16px; display:flex; align-items:center; justify-content:center;
  gap:10px; font-size:14px; font-weight:bold;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
#reconnect-banner-spinner{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:mm-spin .6s linear infinite;
}

/* ── PvP 回合计时器（YGO MD 式——暗底胶囊 + 数字时钟，场地中场左侧。全部 px 乘 --battle-s 等比缩放）── */
.pvp-timer{
  position:absolute; top:48%; left: calc(6px * var(--battle-s,1)); z-index:500; pointer-events:none;
  transform:translateY(-50%);
  /* 暗底胶囊 */
  background:rgba(0,0,0,.72);
  border:calc(2px * var(--battle-s,1)) solid rgba(255,255,255,.12);
  border-radius:calc(14px * var(--battle-s,1));
  padding:calc(6px * var(--battle-s,1)) calc(28px * var(--battle-s,1));
  /* 数字时钟字体 */
  font-size:calc(44px * var(--battle-s,1)); font-weight:700; font-family:'Consolas','Courier New',monospace;
  letter-spacing:calc(4px * var(--battle-s,1));
  color:#4eff4e;
  /* 外发光 + 内辉 */
  box-shadow:0 0 calc(28px * var(--battle-s,1)) rgba(78,255,78,.12), 0 0 calc(8px * var(--battle-s,1)) rgba(0,0,0,.5), inset 0 0 calc(10px * var(--battle-s,1)) rgba(78,255,78,.04);
  transition:color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
/* 金段：≤120s */
.pvp-timer.pvp-timer-gold{
  color:#ffd700;
  border-color:rgba(255,215,0,.25);
  box-shadow:0 0 calc(32px * var(--battle-s,1)) rgba(255,215,0,.18), 0 0 calc(8px * var(--battle-s,1)) rgba(0,0,0,.5), inset 0 0 calc(12px * var(--battle-s,1)) rgba(255,215,0,.06);
}
/* 红灯脉冲：≤30s——边框+辉光闪烁，数字不消失 */
.pvp-timer.pvp-timer-danger{
  color:#ff3b3b;
  border-color:rgba(255,59,59,.45);
  box-shadow:0 0 calc(36px * var(--battle-s,1)) rgba(255,59,59,.25), 0 0 calc(8px * var(--battle-s,1)) rgba(0,0,0,.5), inset 0 0 calc(14px * var(--battle-s,1)) rgba(255,59,59,.08);
  animation:pvp-timer-flash 1s ease-in-out infinite;
}
@keyframes pvp-timer-flash{
  0%,100%{ border-color:rgba(255,59,59,.45); box-shadow:0 0 calc(36px * var(--battle-s,1)) rgba(255,59,59,.25), 0 0 calc(8px * var(--battle-s,1)) rgba(0,0,0,.5), inset 0 0 calc(14px * var(--battle-s,1)) rgba(255,59,59,.08); }
  50%     { border-color:rgba(255,59,59,.85); box-shadow:0 0 calc(52px * var(--battle-s,1)) rgba(255,59,59,.50), 0 0 calc(12px * var(--battle-s,1)) rgba(0,0,0,.6), inset 0 0 calc(22px * var(--battle-s,1)) rgba(255,59,59,.18); }
}

/* ── 聊天气泡 ── */
/* ★ 2026-08-16 用户拍板：短语按钮移出 #game → fixed 视口锚定左下角，
   固定 40px 不随 --battle-s 缩放（与右上角齿轮同尺寸） */
.pvp-chat-bar{
  position:fixed; bottom:12px; left:12px;
  z-index:700; /* ★ 2026-08-23 590→700：大图 overlay 600 不盖短语按钮（与四角其余组件一致）。
     2026-08-16 默认隐藏——只在对局中显示（body.in-game），
     bar 挂 body 上，此前 PvP 结束后残留到主界面/大厅（用户报"窜界面"） */
  display:none; align-items:center; gap:4px;
}
body.in-game .pvp-chat-bar{ display:flex; }
.pvp-chat-input{
  background:rgba(0,0,0,.7); border:1px solid rgba(201,160,80,.3);
  color:#d4c8a0; padding:4px 8px; border-radius:4px;
  font-size:12px; width:180px; outline:none;
  font-family:inherit;
}
.pvp-chat-input:focus{ border-color:rgba(201,160,80,.7); }
.pvp-chat-toggle{
  /* ★ 2026-08-23 用户拍板：蒙板实色不透明（原 rgba 半透明 + hover 20% 透明金
     被用户报「点击变透明」——手机按住即 hover） */
  background:#000; border:1px solid #4a4a4a;
  color:#d4c8a0; font-size:14px; width:40px; height:40px; /* ★ 40px 固定（用户拍板，与齿轮同尺寸） */
  border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}
.pvp-chat-toggle:hover{ background:#1a1a1a; border-color:#ffd700; }
/* ★ 2026-08-23 #8 用户拍板：气泡按发言方分栏——我方贴下方（己方席）、
   对方贴上方（对方席），"我说我的他说他的"不再混在一处。
   容器铺满 #game 上下，mine-group 用 margin-top:auto 钉底（单方发言也不漂中）。 */
.pvp-chat-bubbles{
  position:absolute; top:48px; bottom:48px; right:8px; width:200px;
  z-index:500; display:flex; flex-direction:column; justify-content:space-between;
  gap:8px; pointer-events:none;
}
.pvp-chat-group{
  display:flex; flex-direction:column; gap:4px;
  max-height:45%; overflow:hidden;
}
.pvp-chat-group.mine-group{ margin-top:auto; }
.pvp-chat-bubble{
  background:rgba(0,0,0,.75); border:1px solid rgba(201,160,80,.2);
  border-radius:6px; padding:4px 8px; font-size:11px;
  color:#c9a050; opacity:1; transition:opacity .5s ease;
}
.pvp-chat-bubble.mine{ border-color:rgba(46,204,113,.3); text-align:right; }
.pvp-chat-bubble.fading{ opacity:0; }
.pvp-chat-sender{ font-weight:bold; margin-right:4px; font-size:10px; color:#8a7a50; }
.pvp-chat-text{ color:#d4c8a0; }

/* ═══════════════════════════════════════════════════════════════════
   PvP 重做·阶段3 — 标准布局：手牌扇形 + 立体牌库 + 头像面板 + 等比缩放
   仅 #game.layout-standard 生效，不影响 legacy 自由布局
   ═══════════════════════════════════════════════════════════════════ */

/* —— 手牌扇形（对标炉石：弧形 + hover 抬升放大）—— */
/* —— 己方手牌：平铺 + 拖拽横向滑动（2026-07-18，替代扇形弧排）——
      布局：flex-start + JS 动态均匀间距（render.js applyHandRowSpacing，≤5 居中/>5 左对齐溢出）；
      滑动：JS 虚拟滚动写 --hand-scroll-x（同场行方案，非原生滚动）；
      间距/滑动钳制读 battle-layout.js HAND_ROW 配置（单一数据源）。 */
#game.layout-standard #hand-row{
  display:flex;justify-content:flex-start;align-items:flex-end;
  gap:0;width:100%;height:100%;overflow:visible;padding-bottom:calc(6px * var(--battle-s,1));
  transform:translateX(var(--hand-scroll-x, 0px));
}
#game.layout-standard #hand-row .card.hand-card{
  width:calc(109px * var(--battle-s,1));
  height:calc(153px * var(--battle-s,1));
  flex-shrink:0;
  margin-left:0;
  transform-origin:bottom center;
  transform:translateY(calc(50px * var(--battle-s,1)));
  /* margin-right 过渡：展开时从叠卡负边距平滑回 0（ease-out 无回弹），叠卡方向由 .hand-collapsed 的 spring easing 接管 */
  transition:margin-right .35s ease-out, transform .16s ease-out, box-shadow .16s ease-out;
  will-change:transform;
}
/* hover 抬升放大预览——上移 + 放大，盖过相邻卡 */
#game.layout-standard #hand-row .card.hand-card:hover{
  transform:translateY(calc(-26px * var(--battle-s,1))) scale(1.35);
  z-index:99 !important;
  box-shadow:0 calc(10px*var(--battle-s,1)) calc(24px*var(--battle-s,1)) rgba(0,0,0,.6),
             0 0 calc(14px*var(--battle-s,1)) rgba(255,215,0,.4);
}

/* —— 手牌折叠堆叠（默认状态，点击手牌区域展开）—— */
/* 折叠态：整行靠右（近卡组），卡片堆叠仅露边缘 */
#game.layout-standard #hand-row.hand-collapsed{
  justify-content:flex-end;
  padding-left:0 !important;
  padding-right:calc(8px * var(--battle-s,1)) !important;
  gap:0 !important;
  cursor:pointer;
}
#game.layout-standard #hand-row.hand-collapsed .card.hand-card{
  /* 负边距叠卡——仅露 ~18px 边缘（109-91=18），像手捏一叠牌 */
  margin-right:calc(-91px * var(--battle-s,1));
  transition:margin-right .35s cubic-bezier(.34,1.56,.64,1),
             transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none; /* 折叠态禁用卡片级 hover/click——点击只由 zone 捕获层处理展开 */
}
#game.layout-standard #hand-row.hand-collapsed .card.hand-card:last-child{
  margin-right:0;
}

/* —— 对手手牌：平铺 + 拖拽横向滑动（牌背小卡）—— */
#game.layout-standard #opp-hand-row{
  display:flex;justify-content:flex-start;align-items:flex-start;
  gap:0;width:100%;height:100%;overflow:visible;
  /* flex 容器内防内容撑宽：行宽必须锁定 = zone 宽，clientWidth 才是可视宽（间距计算依据） */
  flex:0 0 100%;
  transform:translateX(var(--hand-scroll-x, 0px));
}
#game.layout-standard #opp-hand-row .opp-hand-card{
  /* 与己方手牌同尺寸（2026-07-12 用户对战界面图：镜像手牌不缩小；2026-07-18 统一为 109×153） */
  width:calc(109px * var(--battle-s,1));
  height:calc(153px * var(--battle-s,1));
  flex-shrink:0;
  margin-left:0;
  transform-origin:top center;
  transform:none;
}

/* 手牌 zone：显式 block 覆写旧版 flex 容器（旧版 #ply-hand-zone display:flex +
   flex-direction:column + justify-content:flex-end / #opp-hand-zone display:flex +
   align-items:center + justify-content:center）。标准布局下 zone 是绝对定位锚框，
   内 #hand-row / #opp-hand-row 自身是 flex 行——zone 不需要 flex 容器（2026-08-09） */
#game.layout-standard #ply-hand-zone,
#game.layout-standard #opp-hand-zone{
  display:block;
  overflow-x:clip;
  overflow-y:visible;
}

/* —— 陷阱/计谋卡（等比缩放，与手牌一致，避免小屏幕下陷阱过大）—— */
#game.layout-standard .card.plot-card{
  width:calc(62px * var(--battle-s,1));
  height:calc(88px * var(--battle-s,1));
}

/* —— 立体牌库（实体卡堆放在场地上：多层错位 + 倾斜 + 接地投影）—— */
#game.layout-standard .deck-stack{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
#game.layout-standard .deck3d{
  position:relative;
  width:calc(74px * var(--battle-s,1));
  height:calc(104px * var(--battle-s,1));
  transform:perspective(500px) rotateX(20deg);
  transform-style:preserve-3d;
}
/* 接地椭圆投影——把卡堆"压"进地面，消除漂浮感 */
#game.layout-standard .deck3d::after{
  content:'';position:absolute;left:50%;bottom:calc(-8px * var(--battle-s,1));
  width:82%;height:calc(14px * var(--battle-s,1));
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 70%);
  pointer-events:none;
}
#game.layout-standard .deck3d-layer{
  position:absolute;inset:0;border-radius:calc(5px * var(--battle-s,1));
  /* 逐层向上错位——形成实体厚度（--deck-li = 层序号 0..5） */
  transform:translateY(calc(var(--deck-li) * -2.5px * var(--battle-s,1)))
            translateX(calc(var(--deck-li) * 1px * var(--battle-s,1)));
  background:#2a2018;
  border:1px solid rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.4) inset;
}
/* 顶层——玩家装备的卡背图 */
#game.layout-standard .deck3d-layer.deck3d-top{
  background-image:var(--cosmetic-cardback, url('../assets/card-back.png'));
  background-size:cover;background-position:center;
  border:1px solid #3a2a1a;
  box-shadow:0 calc(3px*var(--battle-s,1)) calc(6px*var(--battle-s,1)) rgba(0,0,0,.5);
}
/* 张数徽章浮在牌堆右下（脱离 3D 变换，始终正面朝上） */
#game.layout-standard .deck-stack .deck-count-badge{
  position:absolute;bottom:calc(2px*var(--battle-s,1));right:calc(4px*var(--battle-s,1));
  z-index:10;
}
#game.layout-standard .deck-stack .deck-card-face{display:none}

/* —— 大营（墓地卡堆）——立体感同牌库，顶张显暗红调 —— */
#game.layout-standard #ply-camp-zone,
#game.layout-standard #opp-camp-zone{
  display:flex;align-items:center;justify-content:center;
}

/* —— 模型区占位/标签隐藏（城械区等 model-zone 用）—— */
#game.layout-standard .model-zone .model-placeholder,
#game.layout-standard .model-zone .model-label{display:none}

/* —— 城械区紧凑化（左侧纵列小格）—— */
#game.layout-standard .siege-zone .model-placeholder,
#game.layout-standard .siege-zone .model-label{
  font-size:calc(11px*var(--battle-s,1));
}

/* —— 结束回合按钮（右侧中线）—— */
#game.layout-standard #end-button-zone{
  display:flex;align-items:center;justify-content:center;
}
#game.layout-standard #end-button-zone .game-btn{
  font-size:calc(14px*var(--battle-s,1));padding:calc(6px*var(--battle-s,1)) calc(10px*var(--battle-s,1));
}

/* —— 中线分隔 + 回合指示 —— */
#game.layout-standard #battle-divider{
  margin:0;height:calc(2px*var(--battle-s,1));
  background:linear-gradient(to right,transparent,rgba(255,215,0,.35),rgba(120,180,255,.35),transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   PvP 重做·阶段4 — 换牌界面 / VS过场 / 段位结算 / 快捷短语轮盘
   ═══════════════════════════════════════════════════════════════════ */

/* —— 起手换牌覆盖层 —— */
#mulligan-overlay{
  position:fixed;inset:0;z-index:9996;display:none;
  align-items:center;justify-content:center;
  background:rgba(8,6,4,.82);backdrop-filter:blur(3px);
}
.mulligan-box{
  background:linear-gradient(160deg,#1a1510,#0d0a06);
  border:2px solid #6a5a3a;border-radius:14px;
  padding:28px 34px;text-align:center;max-width:90vw;
  box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 40px rgba(201,160,80,.15);
}
.mulligan-title{font-size:26px;font-weight:bold;color:#ffd700;letter-spacing:4px;margin-bottom:6px;
  font-family:'KaiTi','楷体',serif;text-shadow:0 0 16px rgba(255,215,0,.4)}
.mulligan-hint{font-size:13px;color:#a89870;margin-bottom:20px}
.mulligan-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.mulligan-card-wrap{position:relative;cursor:pointer;transition:transform .15s;transform-origin:bottom center}
.mulligan-card-wrap:hover{transform:translateY(-8px) scale(1.05)}
.mulligan-card-wrap .mulligan-card{width:112px !important;height:157px !important;pointer-events:none}
.mulligan-mark{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(180,30,30,.55);border-radius:8px;
  font-size:52px;color:#fff;text-shadow:0 2px 8px #000;font-weight:bold;
}
.mulligan-card-wrap.selected .mulligan-mark{display:flex}
.mulligan-card-wrap.selected{transform:translateY(4px)}
.mulligan-footer{display:flex;align-items:center;justify-content:center;gap:22px}
.mulligan-countdown{font-size:16px;color:#e0b040;font-weight:bold;min-width:60px}
.mulligan-waiting{margin-top:16px;font-size:15px;color:#c9a050;letter-spacing:1px}

/* —— VS 匹配过场 —— */
#vs-transition-overlay{
  position:fixed;inset:0;z-index:9998;display:none;
  align-items:center;justify-content:center;gap:0;
  background:radial-gradient(ellipse at center,#1a1008 0%,#050303 100%);
  transition:opacity .6s ease-out;
}
#vs-transition-overlay.fading{opacity:0}
#vs-transition-overlay .vs-side{
  display:flex;flex-direction:column;align-items:center;gap:14px;width:32%;
  animation:vs-slide-in .5s cubic-bezier(.2,.8,.3,1.2) both;
}
#vs-transition-overlay .vs-mine{animation-name:vs-slide-left}
#vs-transition-overlay .vs-theirs{animation-name:vs-slide-right}
@keyframes vs-slide-left{from{transform:translateX(-120px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes vs-slide-right{from{transform:translateX(120px);opacity:0}to{transform:translateX(0);opacity:1}}
#vs-transition-overlay .vs-avatar{
  width:110px;height:110px;border-radius:50%;font-size:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:3px solid #c9a050;
  box-shadow:0 0 28px rgba(201,160,80,.4);
}
#vs-transition-overlay .vs-mine .vs-avatar{border-color:#5af;box-shadow:0 0 28px rgba(80,170,255,.4)}
#vs-transition-overlay .vs-theirs .vs-avatar{border-color:#e55;box-shadow:0 0 28px rgba(230,80,80,.4)}
#vs-transition-overlay .vs-name{font-size:20px;color:#e8dcc0;font-weight:bold;letter-spacing:1px}
#vs-transition-overlay .vs-flash{
  font-size:72px;font-weight:900;color:#ffd700;font-style:italic;
  text-shadow:0 0 30px rgba(255,80,40,.7),0 4px 12px #000;
  animation:vs-flash-pulse 1s ease-in-out infinite;padding:0 20px;
}
@keyframes vs-flash-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* —— 段位变化面板（结算覆盖层内，等比缩放）—— */
.pvp-rank-panel{
  margin:calc(14px * var(--battle-s, 1)) auto;
  padding:calc(12px * var(--battle-s, 1)) calc(22px * var(--battle-s, 1));
  border-radius:calc(10px * var(--battle-s, 1));
  background:rgba(0,0,0,.4);
  border:calc(1px * var(--battle-s, 1)) solid rgba(201,160,80,.3);
  min-width:calc(220px * var(--battle-s, 1));
}
.pvp-rank-panel.promoted{
  border-color:#f1c40f;
  box-shadow:0 0 calc(22px * var(--battle-s, 1)) rgba(241,196,15,.35);
}
.pvp-rank-panel.demoted{border-color:#8a5a5a}
.pvp-rank-tier{
  font-size:calc(18px * var(--battle-s, 1));color:#e8dcc0;font-weight:bold;
  margin-bottom:calc(6px * var(--battle-s, 1));
  font-family:'KaiTi','楷体',serif;
}
.pvp-rank-tier .tier-new{color:#ffd700}
.pvp-rank-points{font-size:calc(15px * var(--battle-s, 1));color:#c9a050}
.pvp-rank-delta{color:#7ec8a0;font-weight:bold;margin-left:calc(4px * var(--battle-s, 1))}

/* —— 快捷短语轮盘 —— */
/* ★ 2026-08-16 按钮 fixed 左下后，轮盘同 fixed：按钮正上方（12+40+8=60px），固定尺寸 */
.pvp-chat-wheel{
  position:fixed;left:12px;bottom:60px;
  z-index:9990;display:none;flex-direction:column;gap:6px;
  background:rgba(12,10,6,.92);border:1px solid #5a4a2a;border-radius:10px;
  padding:10px;max-height:60%;overflow-y:auto;
  box-shadow:0 8px 28px rgba(0,0,0,.6);
}
.pvp-phrase-btn{
  background:rgba(40,32,18,.9);border:1px solid #6a5a3a;border-radius:6px;
  color:#e0d0a0;font-size:13px;padding:6px 14px;cursor:pointer;
  white-space:nowrap;text-align:left;transition:all .15s;font-family:inherit;
}
.pvp-phrase-btn:hover{background:rgba(80,64,36,.95);border-color:#c9a050;color:#fff}

/* ═══════════════════════════════════════════════════════════════════
   2026-07-15 — 对战界面等比缩放收口（Bug #82：手机端变形根修复）
   取证：scripts/battle-scale-forensic.js —— 真机等效视口（800×360）下
   固定 px 元素相对尺寸放大 2.51×；zone 固定 min 尺寸压过 % 高度
   （min-height:120px = 手机 33% 高 → 手牌区下溢 115.8%，手牌整排出屏）。
   本章节把 standard 布局内漏网的固定 px 统一乘 --battle-s；
   仅作用于 #game.layout-standard（2 个 ID 特异性，压过 legacy 基础规则与
   @media 旧响应式），?layout=legacy 不受影响。
   注意：居中模态弹窗（战场动画框/第二准备/换牌等）**故意不等比**——
   纯等比会把弹窗文字缩到不可读（Bug #78 同类教训），对标炉石手机端弹窗
   相对更大属正常体验（2026-07-15 用户拍板）。
   ═══════════════════════════════════════════════════════════════════ */

/* —— ① zone 固定 min 尺寸全部中和（standard 下 zone 尺寸完全由 % 定，
      min-* 在手机小视口会反超 % 值把 zone 撑爆）—— */
#game.layout-standard #ply-character-zone,
#game.layout-standard #ply-trap-zone,
#game.layout-standard #ply-hand-zone,
#game.layout-standard #ply-deck-zone,
#game.layout-standard #ply-supply-zone,
#game.layout-standard #ply-camp-zone,
#game.layout-standard #opp-hand-zone,
#game.layout-standard #opp-deck-zone,
#game.layout-standard #end-button-zone,
#game.layout-standard #turn-indicator-zone,
#game.layout-standard #battle-divider-zone,
#game.layout-standard .siege-zone,
#game.layout-standard .siege-row,
#game.layout-standard .plot-row{
  min-width:0;min-height:0;
}

/* —— ② 建造区（空槽 + 建造按钮）—— */
#game.layout-standard .siege-slot-empty{
  width:calc(109px * var(--battle-s,1));
  height:calc(109px * var(--battle-s,1));
  gap:calc(4px * var(--battle-s,1));
}
#game.layout-standard .siege-build-btn{
  width:calc(109px * var(--battle-s,1));
  height:calc(109px * var(--battle-s,1));
  font-size:calc(26px * var(--battle-s,1));
  padding:calc(2px * var(--battle-s,1)) calc(10px * var(--battle-s,1));
  border-radius:calc(4px * var(--battle-s,1));
  border-width:calc(1px * var(--battle-s,1));
}

/* —— ③ 大营徽章 —— */
#game.layout-standard #camp-zone,
#game.layout-standard #opp-camp-inner{
  width:calc(109px * var(--battle-s,1));
  height:calc(109px * var(--battle-s,1));
  font-size:calc(26px * var(--battle-s,1));
  padding:calc(4px * var(--battle-s,1)) calc(12px * var(--battle-s,1));
  gap:calc(4px * var(--battle-s,1));
  border-radius:calc(6px * var(--battle-s,1));
}
#game.layout-standard #camp-zone .camp-count{font-size:calc(12px * var(--battle-s,1));writing-mode:horizontal-tb}

/* —— ④ 张数徽章（牌库 + 辎重同款）—— */
#game.layout-standard .deck-count-badge,
#game.layout-standard .supply-count-badge{
  min-width:calc(24px * var(--battle-s,1));
  height:calc(24px * var(--battle-s,1));
  line-height:calc(24px * var(--battle-s,1));
  font-size:calc(13px * var(--battle-s,1));
  padding:0 calc(5px * var(--battle-s,1));
  border-radius:calc(12px * var(--battle-s,1));
  border-width:calc(2px * var(--battle-s,1));
}
/* 辎重徽章位置（牌库徽章位置已由上方 .deck-stack 规则等比化）*/
#game.layout-standard .supply-count-badge{
  bottom:calc(-6px * var(--battle-s,1));right:calc(-6px * var(--battle-s,1));
}

/* —— ⑤ 辎重卡堆（与牌库同尺寸基准 80×112）—— */
#game.layout-standard .supply-stack{
  width:calc(80px * var(--battle-s,1));
  height:calc(112px * var(--battle-s,1));
}
#game.layout-standard .supply-card-icon{font-size:calc(32px * var(--battle-s,1))}

/* —— ⑥ 粮草圆盘 —— */
#game.layout-standard #provisions-display{
  width:calc(36px * var(--battle-s,1));
  height:calc(36px * var(--battle-s,1));
  font-size:calc(14px * var(--battle-s,1));
  margin:calc(2px * var(--battle-s,1));
  border-width:calc(2px * var(--battle-s,1));
}

/* —— ⑦ 阶段按钮（YGO 相位钮 min-width:140px 是手机右溢根因）—— */
#game.layout-standard .game-btn.phase-battle,
#game.layout-standard .game-btn.phase-end,
#game.layout-standard .game-btn.phase-wait{
  font-size:calc(14px * var(--battle-s,1));
  padding:calc(8px * var(--battle-s,1)) calc(20px * var(--battle-s,1));
  min-width:calc(140px * var(--battle-s,1));
}

/* —— ⑧ 连锁栏（对局中常驻场中，必须随场缩放）—— */
#game.layout-standard #chain-title{font-size:calc(18px * var(--battle-s,1))}
#game.layout-standard #chain-priority-text{font-size:calc(14px * var(--battle-s,1))}
#game.layout-standard #chain-actions-bar{gap:calc(8px * var(--battle-s,1))}
#game.layout-standard .game-btn.chain-btn{
  min-width:calc(80px * var(--battle-s,1));
  font-size:calc(12px * var(--battle-s,1));
  padding:calc(6px * var(--battle-s,1)) calc(12px * var(--battle-s,1));
}

/* —— ⑨ 回合提示 —— */
#game.layout-standard #turn-indicator{font-size:calc(22px * var(--battle-s,1))}

/* —— ⑩ 手牌平铺 + 拖拽滑动（2026-07-18 替代扇形，间距/滑动由 render.js 管理）——
      扇形覆写块已删除：布局改由 #hand-row / #opp-hand-row 主规则（2684 起）统一管理，
      间距 padding/gap 与 --hand-scroll-x 偏移由 render.js applyHandRowSpacing 写入。 */

/* —— ⑪ 场上行间距等比 —— */
#game.layout-standard #player-field-row,
#game.layout-standard #opp-field-row{
  gap:calc(var(--field-gap, 10px) * var(--battle-s,1));
  padding:calc(4px * var(--battle-s,1)) calc(8px * var(--battle-s,1));
}
#game.layout-standard .plot-row{
  gap:calc(var(--trap-gap, 9px) * var(--battle-s,1));
  padding:calc(2px * var(--battle-s,1)) calc(8px * var(--battle-s,1));
}

/* —— ⑫ 对方人物区右移一张卡（2026-08-16 用户拍板）——
      原 180° 旋转对称自动算得 left:8.6%（右缘 79.5%）；己方框已左缘右移
      一张卡（7.4→20.5），对方整体右移同样一张卡宽 13.1% → left:21.7%
      （右缘 92.6%），与己方视觉对齐。宽 70.9% 不变，行内排布逻辑不动。
      （对方侧无 summon-drop-zone 元素——对手手牌不可拖拽召唤，仅己方有） */
#game.layout-standard #opp-character-zone{
  left:21.7% !important;
  /* 2026-08-16 用户拍板：人物区+兵力卡整体下移 40px（两次 20px，设计；
     第三次 20px 用户看过眼后过头，回退）——
     镜像自动算得 top 会随己方下移而反向（上移），此处手动下移 2×2.02% 抵消 */
  top:38.54% !important;
}
/* 对方兵力卡（2026-08-16 用户拍板）——不随 180° 对称（对称在右上方），
   手动移到对方人物区左侧空位（人物区左缘 21.7 前，卡宽 210px 设计居中）。
   top 对齐对方人物卡（对方卡 -85px 上移，实测比镜像值再高约 29.5px 设计 → 23.7；
   2026-08-16 随人物区整组下移两次 20px：23.7→25.72→27.74；第三次回退）。
   left 5.85：与己方兵力卡垂直方向对齐 + 右移 10px 后再右移 20px（用户 2026-08-16） */
#game.layout-standard #opp-troops-card{
  top:27.74% !important; left:5.85% !important;
}
/* —— ⑫ 对方陷阱区手动定位（2026-07-18；2026-08-17 用户拍板重定位）——
      原 180° 旋转自动算得 top:21% 过于靠上被手牌区遮挡，手动移到对方场地中部。
      2026-08-17 陷阱盖放合并 1 图标后拍板：移到对方卡组下方、再右移 20px
      （20px=1.25%@1600 基准）。
      X：图标中心=卡组中心 16.6%（13.35+6.5/2）右移 1.25%→17.85%，
        zone 宽 34% 居中 → left=17.85-17=0.85；
      Y：zone 顶边贴卡组底边（卡组 top 0.83+高 14.5=15.33）→ top=15.33
        （图标顶与卡组底约 15px 设计间隙，与己方"卡组上方"对称）。
      2026-08-17 第二轮：再下移 10px（10px=1.01%——垂直 % 相对 game 实际高 990.3，
        0.101%/px）→ 15.33+1.01=16.34；再右移 20px（1.25%）→ 0.85+1.25=2.1
        （图标中心=卡组中心右移共 40px）。
      2026-08-17 第三轮：再上移 15px（15px=1.515%）→ 16.34-1.515=14.83；
        再右移 20px（1.25%）→ 2.1+1.25=3.35（图标中心=卡组中心右移共 60px） */
#game.layout-standard #opp-trap-zone{
  top:14.83% !important; left:3.35% !important;
}
/* 对方手牌区上移（2026-07-18）——原 180° 旋转得 top:0.8%，累计上移 60px ≈ 6.6% → -5.8% */
#game.layout-standard #opp-hand-zone{
  top:-5.8% !important;
}
/* 对方卡组区（2026-07-18）——原 180° 旋转得 top:-0.5%，上移 15px ≈ 1.7% → -2.2%。
   2026-08-16 用户拍板：向左移动 30px（30px=1.875%@1600 基准）——
   镜像自动算得 left:17.1%，左移 1.875% → 15.225。
   2026-08-16 第二轮：再左移 30px（15.225-1.875=13.35）、与辎重一起下移 30px
   （纵 30px=3.03%——垂直 % 相对 game 实际高 990.3（1889:1169 锁定），0.101%/px：
   -2.2+3.03=0.83） */
#game.layout-standard #opp-deck-zone{
  top:0.83% !important; left:13.35% !important;
}
/* 对方辎重区（2026-07-18）——原 180° 旋转得 left:3%，屏幕右移共 150px ≈ 12.4%，top 与卡组齐平。
   2026-08-16 用户拍板：向左移动 50px（50px=3.125%@1600 基准）——12.4-3.125=9.275。
   2026-08-16 第二轮：再左移 30px（9.275-1.875=7.4）、与卡组一起下移 30px → top 0.83 */
#game.layout-standard #opp-supply-zone{
  top:0.83% !important; left:7.4% !important;
}
/* 对方大营+建造区（2026-07-18）——对齐同一水平线 + 上移20px(≈2.2%) + 左移20px(≈1.25%)
   2026-08-16 用户拍板：整体向右移动 30px 设计（30px=1.875%@1600 基准）——
   大营 left 71.8→73.675、建造 left 83.7→85.575。
   2026-08-17 用户拍板：再向右移动 20px（20px=1.25%@1600 基准）——
   大营 left 73.675→74.925、建造 left 85.575→86.825（top 不动）。
   2026-08-17 第二轮：又再右移 20px——大营 74.925→76.175、建造 86.825→88.075（累计 40px，top 不动） */
#game.layout-standard #opp-camp-zone{
  top:-2.9% !important; left:76.175% !important;
}
#game.layout-standard #opp-farm-model-zone{
  top:-0.7% !important; left:88.075% !important;
}

/* —— ⑬ 对手场上卡偏移（2026-07-17 X 归零）——
      原 ±80px X 偏移是居中布局时代的手调硬码；场上无上限后横向位置
      改由 applyFieldRowSpacing 动态均匀间距统一管理（见 ⑱），X 不再偏移，
      否则横向裁剪（zone overflow-x:clip）会把首/末卡切掉。Y 分量原值保留 —— */
#game.layout-standard #opp-field-row .card.field-card.field-card-framed{
  transform:translate(0, calc(-85px * var(--battle-s,1)));
}
#game.layout-standard #opp-field-row .card.field-card.field-card-framed:hover{
  transform:translate(0, calc(-82px * var(--battle-s,1)));
}

/* —— ⑬ 装备物品小卡/盖放计谋卡内部名字条（容器已等比，文字跟上）—— */
#game.layout-standard .equip-card-stack .card-inner,
#game.layout-standard .plot-card .card-inner{
  padding:calc(4px * var(--battle-s,1));
  border-radius:calc(6px * var(--battle-s,1));
}
#game.layout-standard .equip-card-stack .card-name,
#game.layout-standard .plot-card .card-name{
  font-size:calc(10px * var(--battle-s,1));
}

/* —— ⑯ 双方场上人物卡放大 1.5×（2026-07-15 用户拍板：己方先行，2026-07-18 对方同步）——
      --ffcs-f 是 .field-card-framed 的每侧放大系数（见 628 行 --ffcs 定义），
      卡框/卡图/槽位字号全部随动；translate 偏移故意不乘（位置锚点不变，只放大卡体） */
#game.layout-standard #player-field-row,
#game.layout-standard #opp-field-row{
  --ffcs-f:1.5;
}

/* —— ⑯b 兵力显示卡（2026-08-16 用户拍板，替代兵力模型区）——
      战场模式兵力的具现化：与场上人物卡同尺寸（--ffcs-f 1.5）、同卡框素材，
      纯展示不可交互；攻位=士气、血位=粮草、中央大数字=兵力当前值。
      覆盖场卡的位移/悬停（位置全权由 PLY 表绝对定位，transform 必须清零） */
.card.troops-card{
  --ffcs-f:1.5;
  pointer-events:none;cursor:default;
  transform:none;
  box-shadow:0 calc(3px * var(--ffcs)) calc(8px * var(--ffcs)) rgba(0,0,0,.45);
}
.card.troops-card:hover{
  transform:none;
  box-shadow:0 calc(3px * var(--ffcs)) calc(8px * var(--ffcs)) rgba(0,0,0,.45);
}
/* 空白卡面（羊皮纸色，素材待换）——压过阵营渐变底色与深灰图窗 */
.troops-card .ffc-art{background:#f2ead6 !important}
/* 中央大数字——兵力当前值（深色，羊皮纸底上可读） */
.troops-card .tpc-troops{
  position:absolute;left:6%;top:26%;width:88%;height:34%;z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(30px * var(--ffcs));font-weight:bold;color:#3a2a10;
  font-family:'KaiTi','楷体','STKaiti',serif;
  pointer-events:none;
}
/* ★ 2026-08-23 #0：名字条「兵力」恢复默认浅色——名字条落在卡框底部不透明黑色墨条上
   （非羊皮纸底），深色 #3a2a10 压在黑条上不可见（像素采样实锤）。 */

/* —— ⑰ 城械 buff 图标化（2026-07-15 用户拍板：三建造区合一 + 图标堆叠计数）——
      机制零改动（服务端仍 3 槽），纯表现层：唯一建造框放「建造」按钮（自动选空槽），
      已建城械 = 纯图标 chip 贴在框靠中线一侧，同类型 ×N 计数，点击弹详情说明含义
      （render.js renderSiegeIconZone，图标 assets/icons/siege/{城械名}.png） */
/* 建造区②③在 standard 布局隐藏（合并进①）；?layout=legacy 三区照旧 */
#game.layout-standard #ply-medical-tent-zone,
#game.layout-standard #ply-barracks-model-zone,
#game.layout-standard #opp-medical-tent-zone,
#game.layout-standard #opp-barracks-model-zone{display:none}
/* 图标行——绝对定位贴建造框：己方=框上方，对手=框下方（180° 对称，均朝中线）。
   2026-08-17 用户拍板：己方图标上移 20px、对方图标下移 20px（原 4px 间距→24px，均远离框）。
   2026-08-17 第二轮：再各移 15px（24px→39px，均更远离框） */
#game.layout-standard .siege-icon-row{
  position:absolute;left:0;
  display:flex;flex-wrap:wrap;gap:calc(4px * var(--battle-s,1));
  width:max-content;max-width:calc(474px * var(--battle-s,1));
  z-index:11;
}
#game.layout-standard .siege-icon-row.own{bottom:calc(100% + 39px * var(--battle-s,1))}
#game.layout-standard .siege-icon-row.opp{top:calc(100% + 39px * var(--battle-s,1))}
/* ★ 城械 zone 放开裁剪——.model-zone 基础规则 overflow:hidden（1481 行）会把贴在
   框外侧的图标行整体裁掉（真实建造后"看不到图标"的根因，Bug 取证 2026-07-15） */
#game.layout-standard #ply-farm-model-zone,
#game.layout-standard #opp-farm-model-zone{overflow:visible}
/* 城械图标 chip——buff 徽章风：纯图标（assets/icons/siege/ lorc 黑底白绘 PNG）+
   右下角 ×N 计数角标；点击弹详情说明含义（用户拍板：场上不带文字） */
#game.layout-standard .siege-icon-chip{
  /* 2026-07-15 用户拍板：图标等比放大 2.5×——独立系数 --sic-s 便于后续微调 */
  --sic-s:calc(var(--battle-s,1) * 2.5);
  position:relative;
  width:calc(30px * var(--sic-s));height:calc(30px * var(--sic-s));
  border:calc(1px * var(--sic-s)) solid rgba(255,215,0,.65);
  border-radius:calc(6px * var(--sic-s));
  overflow:hidden;cursor:pointer;
  background:rgba(20,16,12,.88);
  box-shadow:0 calc(1px * var(--sic-s)) calc(4px * var(--sic-s)) rgba(0,0,0,.5);
}
#game.layout-standard .siege-icon-chip:hover{border-color:#ffd700}
#game.layout-standard .siege-icon-chip .sic-img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* ×N 计数角标——压在图标右下角（随 --sic-s 同比例缩放） */
#game.layout-standard .siege-icon-chip .sic-count{
  position:absolute;right:0;bottom:0;
  padding:0 calc(3px * var(--sic-s));
  background:rgba(0,0,0,.82);
  border-top-left-radius:calc(5px * var(--sic-s));
  color:#ffd24a;font-weight:bold;
  font-size:calc(11px * var(--sic-s));line-height:1.35;
}
/* 图标缺图兜底——退回文字名 chip（新城械类型没配图时仍可见可点） */
#game.layout-standard .siege-icon-chip.no-icon{
  width:auto;height:auto;display:flex;align-items:center;
  padding:calc(2px * var(--battle-s,1)) calc(8px * var(--battle-s,1));
}
#game.layout-standard .siege-icon-chip .sic-name{
  color:#f0e6c5;font-family:'KaiTi','楷体','STKaiti',serif;
  font-size:calc(13px * var(--battle-s,1));line-height:1.2;white-space:nowrap;
}

/* —— ⑰b 陷阱盖放合并图标（2026-08-17 用户拍板：场上不再 8 卡位——盖放卡统一 1 张牌背 + ×N，
      对标 ⑰ siege 图标化先例；表侧卡仍逐槽渲染）。
      图标尺寸同标准布局陷阱卡（62×88）；倾斜复用原盖放卡角度（Ctrl+E 陷阱面板变量）；
      ×N 角标风格同 siege 计数；点击己方图标弹盖放清单面板（render.js showTrapListOverlay）—— */
#game.layout-standard .trap-stack-icon{
  position:relative;
  width:calc(62px * var(--battle-s,1));
  height:calc(88px * var(--battle-s,1));
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
  border-radius:calc(5px * var(--battle-s,1));
  cursor:pointer;
  box-shadow:0 calc(2px * var(--battle-s,1)) calc(6px * var(--battle-s,1)) rgba(0,0,0,.5);
}
/* 倾斜质感（同原盖放卡：己方左倾、对方右倾） */
#game.layout-standard #player-plot-row .trap-stack-icon{
  transform:rotate(var(--trap-face-down-rotate, -12deg));
}
#game.layout-standard #opp-plot-row .trap-stack-icon{
  transform:rotate(calc(-1 * var(--trap-face-down-rotate, -12deg)));
}
/* ×N 角标——压在牌背右下角 */
#game.layout-standard .trap-stack-icon .trap-stack-count{
  position:absolute;right:calc(-5px * var(--battle-s,1));bottom:calc(-5px * var(--battle-s,1));
  padding:0 calc(6px * var(--battle-s,1));
  background:rgba(0,0,0,.85);color:#ffd24a;font-weight:bold;
  border:calc(1px * var(--battle-s,1)) solid rgba(255,215,0,.6);
  border-radius:calc(4px * var(--battle-s,1));
  font-size:calc(14px * var(--battle-s,1));line-height:1.6;
  pointer-events:none; /* 角标不拦截点击 */
}
/* 盖放清单面板（点击己方陷阱图标弹出；动态创建挂 body）——功能弹窗层 z:1000 */
#trap-list-overlay{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);
}
#trap-list-overlay.active{display:flex}
#trap-list-panel{
  background:#2a2620;border:1px solid #8a7a55;border-radius:8px;
  padding:16px;min-width:min(280px,80vw);max-width:70vw;max-height:70vh;
  display:flex;flex-direction:column;gap:10px;
}
#trap-list-panel .tl-title{
  font-size:17px;font-weight:bold;color:#ffd24a;text-align:center;
}
#trap-list-panel .tl-list{
  overflow-y:auto;display:flex;flex-direction:column;gap:6px;
}
#trap-list-panel .tl-row{
  padding:8px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,215,0,.25);
  border-radius:6px;color:#eee;cursor:pointer;font-size:14px;
}
#trap-list-panel .tl-row:hover{background:rgba(255,215,0,.12);border-color:#ffd700}
#trap-list-panel #trap-list-close{
  padding:8px;background:#4a4435;color:#eee;border:1px solid #5c5648;
  border-radius:6px;cursor:pointer;font-size:14px;
}
#trap-list-panel #trap-list-close:hover{background:#5a5445}
/* legacy（?layout=legacy）合并图标基础尺寸——同 legacy 陷阱卡 47×66（standard 上面已覆盖） */
.trap-stack-icon{
  width:var(--trap-card-w, 47px);height:var(--trap-card-h, 66px);
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
  border-radius:4px;cursor:pointer;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.trap-stack-icon .trap-stack-count{
  position:absolute;right:-5px;bottom:-5px;padding:0 5px;
  background:rgba(0,0,0,.85);color:#ffd24a;font-weight:bold;
  border:1px solid rgba(255,215,0,.6);border-radius:4px;
  font-size:13px;line-height:1.5;pointer-events:none;
}

/* —— ⑱ 场行 6 张可见 + 拖拽滑动（2026-07-17，场上无上限配套）——
      布局：flex-start + JS 动态均匀间距（render.js applyFieldRowSpacing，
      张数上限/间距下限读 battle-layout.js FIELD_ROW 配置——单一数据源）；
      滑动：JS 虚拟滚动写 --field-scroll-x（不用原生 overflow 滚动——
      前两轮失败教训：translate 偏移不参与溢出计算 + 滚动条违和）；
      裁剪：zone 只裁横向（clip 双值），竖向保持 visible——场卡本来就高出 zone —— */
#game.layout-standard #ply-character-zone,
#game.layout-standard #opp-character-zone{
  overflow-x:clip;
  overflow-y:visible;
}
#game.layout-standard #player-field-row,
#game.layout-standard #opp-field-row{
  justify-content:flex-start;
  /* 行偏移追加滑动位移：基础 transform（170 行）只有 --field-offset 变量，此处整体覆写 */
  transform:translate(calc(var(--field-offset-x-ply, 0px) + var(--field-scroll-x, 0px)), var(--field-offset-y-ply, 0px));
}
#game.layout-standard #opp-field-row{
  transform:translate(calc(var(--field-offset-x-opp, 0px) + var(--field-scroll-x, 0px)), var(--field-offset-y-opp, 0px));
}
/* 己方卡 X 归零（同 ⑫ 注释：横向位置由动态间距统一管理，Y=+10px 原值不动） */
#game.layout-standard #player-field-row .card.field-card.field-card-framed{
  transform:translate(0, calc(10px * var(--battle-s,1)));
}
#game.layout-standard #player-field-row .card.field-card.field-card-framed:hover{
  transform:translate(0, calc(7px * var(--battle-s,1)));
}
/* 装备卡叠放跟随人物卡 X 归零（原 +80px 与人物卡同源，人物归零装备必须同步）。
   Y=30px：对齐人物卡 Y=10px + 下移 20px，露出物品卡名字 */
#game.layout-standard .equip-card-stack,
#game.layout-standard .equip-card-stack:nth-child(1),
#game.layout-standard .equip-card-stack:nth-child(2),
#game.layout-standard .equip-card-stack:nth-child(3){
  transform:translate(0, calc(40px * var(--battle-s,1)));
}
#game.layout-standard .equip-card-stack:hover{
  transform:translate(0, calc(36px * var(--battle-s,1)));
}
/* 对方装备卡——复刻我方间距：人物卡 Y=-85px，装备在下方 30px → Y=-55px（2026-07-18） */
#game.layout-standard #opp-field-row .equip-card-stack,
#game.layout-standard #opp-field-row .equip-card-stack:nth-child(1),
#game.layout-standard #opp-field-row .equip-card-stack:nth-child(2),
#game.layout-standard #opp-field-row .equip-card-stack:nth-child(3){
  transform:translate(0, calc(-55px * var(--battle-s,1)));
}
#game.layout-standard #opp-field-row .equip-card-stack:hover{
  transform:translate(0, calc(-59px * var(--battle-s,1)));
}

/* —— 召唤投放捕获层（2026-07-17）——
      平时完全穿透（pointer-events:none），绝不遮挡场上卡点击/攻击拖拽/建造按钮；
      手卡拖拽期间由 actions.js 加 .drop-active → 开启捕获。
      ★ 2026-08-24 Bug B7（用户拍板）：区域框/填充高亮全部移除——玩家自己拖，
      拖拽期间不做任何视觉提示（区域框违和）；只保留 pointer-events 捕获开关。 */
#ply-summon-drop-zone{
  pointer-events:none;   /* 视觉声明已随 Bug B7 移除——无背景/边框时 background/border-radius 是死声明 */
}
#ply-summon-drop-zone.drop-active{
  pointer-events:auto;
}