/* ===== 三国志大战 TCG —— P2P 对战页（设计同步版） =====
   布局：左栏(敌/自 资源+信息+奥义) · 中央战场 · 右栏(回合/聊天/日志) · 底部手牌。
   视觉重心在中央战场，信息收拢到两侧。卡牌由 board.js 动态渲染为 .gcard。
   ============================================================ */

body.battle-redesign {
  --bg: #0b1626;
  --bg-2: #111f35;
  --panel: rgba(18, 34, 54, 0.78);
  --panel-2: rgba(28, 50, 78, 0.72);
  --border: #2c4a72;
  --border-2: #3a6ea0;
  --text: #e8f0fc;
  --text-dim: #8aa8c8;
  --accent: #c8442b;
  --accent-2: #e0a13c;
  --cyan: #7dcfee;
  --cyan-2: #5fb5e5;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);

  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(78, 168, 222, 0.12), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(78, 168, 222, 0.08), transparent 50%),
    linear-gradient(180deg, #162b45 0%, #0f1f35 50%, #0a1424 100%);
  color: var(--text);
}

/* —— 顶栏 —— */
.battle-redesign .topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(10, 22, 38, 0.95), rgba(8, 18, 34, 0.9));
  border-bottom: 1px solid var(--border-2);
  backdrop-filter: blur(8px);
}
.battle-redesign .topbar .brand-logo {
  height: 34px; width: auto; border-radius: 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.battle-redesign .topbar .brand-title {
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  color: var(--cyan); margin-right: 10px;
}
.battle-redesign .topbar .spacer { flex: 1; }
.battle-redesign .topbar select,
.battle-redesign .topbar input {
  background: rgba(12, 26, 46, 0.8);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 6px 10px; font-size: 13px;
}
.battle-redesign .topbar button {
  background: rgba(28, 50, 78, 0.8);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 6px 14px; font-size: 13px;
  cursor: pointer; transition: all 0.12s;
}
.battle-redesign .topbar button:hover {
  border-color: var(--cyan-2); background: rgba(40, 72, 112, 0.8);
}
.battle-redesign .topbar button.primary {
  background: linear-gradient(180deg, var(--accent), #a5341f);
  border-color: #a5341f; color: #fff; font-weight: 600;
}
.battle-redesign .topbar button.primary:hover {
  background: linear-gradient(180deg, #d84e35, var(--accent));
}
.net-status {
  font-size: 12px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(12, 26, 46, 0.8);
  color: var(--text-dim); white-space: nowrap;
}
.net-status.ok   { border-color: var(--cyan); color: var(--cyan); background: rgba(78, 168, 222, 0.12); }
.net-status.wait { border-color: var(--accent-2); color: var(--accent-2); background: rgba(224, 161, 60, 0.12); }

/* —— 主舞台 —— */
.arena {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 246px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  height: calc(100vh - 58px);
  padding: 14px;
}
.left-panel  { grid-column: 1; grid-row: 1; min-width: 0; overflow-y: auto; }
.battlefield { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.right-panel { grid-column: 3; grid-row: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.hand-area   { grid-column: 1 / -1; grid-row: 2; }

/* —— 侧边面板通用 —— */
.side-panel { display: flex; flex-direction: column; gap: 12px; }
.side-panel .panel-block {
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.side-panel .panel-title {
  font-size: 11px; letter-spacing: 1px; color: var(--cyan);
  margin-bottom: 10px; text-transform: uppercase;
}

/* 玩家信息 */
.player-info {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 10px 6px;
}
.player-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, #2c4a72, #1a3050);
  border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--cyan);
  box-shadow: 0 0 14px rgba(78, 168, 222, 0.15);
}
.player-avatar.enemy {
  background: linear-gradient(180deg, #8a2e22, #521a13);
  border-color: rgba(255, 100, 80, 0.6); color: #ff9e7d;
  box-shadow: 0 0 14px rgba(200, 68, 43, 0.25);
}
.player-name { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.player-stats { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
.stat-pill {
  background: rgba(8, 18, 34, 0.6); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; font-size: 10px; color: var(--text-dim); width: 100%;
}
.stat-pill strong { color: var(--text); margin-left: 2px; }

/* 资源区（左栏 山札/除外/捨札 三连） */
.res-grid { display: flex; gap: 6px; }
.res-grid .zone { flex: 1; min-height: 0; }

/* —— 通用区域（落点 + 渲染容器） —— */
.zone {
  position: relative; min-height: 92px;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 40, 68, 0.55), rgba(10, 24, 46, 0.55));
  padding: 22px 10px 10px;
  display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start;
  transition: border-color .12s, background .12s;
}
.zone:hover { border-color: var(--cyan-2); }
.zone.dz-over { border-color: var(--cyan); background: rgba(78,168,222,.15); box-shadow: inset 0 0 0 1px var(--cyan); }
/* 公开区（捨札 / 除外 / 奥义 / 城壁）：可点击/右键查看，给出指针与轻微高亮提示 */
[data-zone="grave"], [data-zone="exile"], [data-zone="ougi"], [data-zone="wall"] { cursor: pointer; }
[data-zone="grave"]:hover, [data-zone="exile"]:hover, [data-zone="ougi"]:hover, [data-zone="wall"]:hover { border-color: var(--gold-2, #d8b15a); }
[data-zone="grave"] .gcard, [data-zone="exile"] .gcard, [data-zone="ougi"] .gcard, [data-zone="wall"] .gcard { cursor: pointer; }
.zone-label {
  position: absolute; top: 5px; left: 10px;
  font-size: 11px; color: var(--cyan); letter-spacing: .5px; pointer-events: none;
}
.zone-count {
  position: absolute; top: 5px; right: 10px;
  font-size: 11px; color: var(--cyan); font-weight: 700;
  background: rgba(8, 18, 34, .7); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 7px; pointer-events: none;
}

/* 左栏 zone 紧凑化 */
.left-panel .zone { min-height: 58px; padding: 16px 6px 6px; }
.left-panel .zone.pile .zone-label { font-size: 9px; top: 3px; left: 5px; }
.left-panel .zone.pile .zone-count { font-size: 10px; top: 3px; right: 5px; }
/* 奥义区与城壁区：堆成一张牌 + 数量，居中显示（类似山札 pile） */
.left-panel .zone.ougi-zone,
.left-panel .zone[data-zone="wall"] {
  display: flex; align-items: center; justify-content: center;
  min-height: 78px; padding: 18px 6px 6px;
}
.left-panel .zone[data-zone="wall"] {
  background: linear-gradient(180deg, rgba(224, 161, 60, .12), rgba(150, 90, 40, .04));
  border-color: rgba(224, 161, 60, .4);
}

/* —— 中央战场 —— */
.player-board {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 10px;
}
/* 敌人卡牌正向显示（朝我方正立），不再 rotate(180deg) 对坐视角 */
.player-board.enemy .zone-label,
.player-board.enemy .zone-count { transform: rotate(0deg); }
/* 敌城内移到敌阵上方（屏幕顶），使敌阵紧贴战线、消除敌阵与自阵之间的「城内」模块间隙。
   交换 grid 行：城内→row1(0.8fr, 顶部)、阵→row2(1.2fr, 紧贴战线)，阵的尺寸与自方阵保持一致。 */
.player-board.enemy {
  grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.player-board.enemy .zone-castle { grid-row: 1; }
.player-board.enemy .zone-field { grid-row: 2; }

/* 自阵：卡牌在区域内居中、几乎与区域等高（按 70:98 比例自动缩放） */
.zone-field {
  min-height: 0;                 /* 覆盖 .zone 默认 92px，让 grid fr 真正分配高度 */
  display: flex;
  align-items: center;           /* 垂直居中 */
  justify-content: center;       /* 水平居中 */
  flex-wrap: nowrap;             /* 卡牌过多时不换行，改为相互重叠挤一挤 */
  gap: 0;
  overflow: visible;             /* 极端数量时自然溢出（中心对齐，两端略裁切） */
  padding: 18px 6px 0;           /* 顶 18 给 label 留位、底 0 让卡牌几乎贴满高度 */
  align-content: center;
}
/* 自阵卡牌以「卡组单元」(field-card) 为单位相互重叠：每个单元 = 武将 + 援军(下) + 防栅(上) */
.field-card { position: relative; height: 100%; }
.zone-field .field-card + .field-card { margin-left: -42px; }
/* 悬停时轻微抬起并置顶，方便在重叠中选中/拖拽某张 */
.zone-field .gcard:hover { z-index: 20; }
.zone-field .gcard:hover:not(.tapped) { transform: translateY(-6px); }
.zone-field .gcard.tapped:hover { transform: rotate(90deg) translateY(-6px); }
.zone-castle {
  min-height: 0;
  display: flex;
  align-items: center;           /* 容器内整体垂直居中 */
  justify-content: center;
}
.zone-field { grid-column: 1 / 3; grid-row: 1; background: rgba(30, 55, 90, 0.45); }
.zone-castle { grid-column: 1 / 3; grid-row: 2; }
.zone-field .gcard {
  --gcard-w: auto;
  --gcard-h: calc(100% - 2px);   /* 上下各留 1px 呼吸，几乎贴满区域 */
  aspect-ratio: 70 / 98;
  flex: 0 0 auto;
}
.zone-field .gcard.tapped { transform: rotate(90deg); }

/* 援军：贴在武将卡「下方」的小条 + 武力徽标（pointer-events:none，点击穿透到武将本体） */
.zone-field .gcard.reinforce {
  --gcard-w: 60px; --gcard-h: 30px;
  width: 60px; height: 30px; aspect-ratio: auto; flex: 0 0 auto;
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.6);
}
.zone-field .reinforce-badge {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #ffe9a8; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 9px; white-space: nowrap; z-index: 4;
  pointer-events: none; border: 1px solid rgba(216,177,90,.6);
}
/* 防栅：牌堆顶翻面朝上的卡，盖在武将卡「上方」（pointer-events:none，点击穿透到武将本体） */
.zone-field .gcard.fence {
  --gcard-w: auto; --gcard-h: calc(100% - 2px);
  width: auto; height: calc(100% - 2px); aspect-ratio: 70 / 98; flex: 0 0 auto;
  position: absolute; left: 0; top: -8px; z-index: 6;
}
.zone-field .gcard.fence::after {
  content: "防栅"; position: absolute; bottom: 2px; left: 2px;
  font-size: 9px; color: #fff; background: rgba(0,0,0,.6);
  padding: 0 3px; border-radius: 3px; pointer-events: none;
}
/* 特技マーカー：武将カ下方の小チップ群（静的技能 + 付与技能をリアルタイム表示） */
.zone-field .skill-markers {
  position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 8;
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: flex-end;
  pointer-events: none;
}
.zone-field .skill-chip {
  font-size: 9px; line-height: 1.25; padding: 0 4px; border-radius: 7px;
  background: rgba(18, 28, 48, .88); color: #ffe9a8; white-space: nowrap; font-weight: 700;
  border: 1px solid rgba(216, 177, 90, .7); box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* 城内：左=表(正面) / 右=裏(背面) —— 卡牌保持原始尺寸、在半区内居中 */
.castle-splits { display: flex; gap: 18px; margin-top: 14px; flex: 1; min-height: 0; }
.castle-half {
  flex: 1; min-height: 0;
  border: 1px dashed var(--border-2); border-radius: 5px;
  padding: 16px 6px 2px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  position: relative;
}
.castle-half .gcard.tapped { transform: rotate(90deg); }
.castle-half .ch-l { position: absolute; top: 2px; left: 6px; font-size: 10px; color: var(--text-dim); pointer-events: none; }
.castle-up   { background: rgba(40, 72, 112, .35); }
.castle-down {
  flex: 0 0 32%; background: rgba(18, 34, 58, .45);
  border: 1px solid rgba(125, 207, 238, .35); border-left: 3px solid var(--cyan);
}
.castle-half.dz-over { border-color: var(--cyan); background: rgba(78, 168, 222, .15); box-shadow: inset 0 0 0 1px var(--cyan); }

.midline {
  text-align: center; color: var(--cyan); font-size: 11px; letter-spacing: 8px;
  padding: 2px 0;
  border-top: 1px dashed var(--border-2); border-bottom: 1px dashed var(--border-2);
  background: linear-gradient(180deg, transparent, rgba(78, 168, 222, .08), transparent);
}

/* —— 右栏：回合 / 聊天 / 日志 —— */
.turn-card .turn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.turn-phase { font-size: 10px; color: var(--text-dim); }
.turn-number { font-size: 26px; font-weight: 800; color: var(--text); text-align: center; margin: 2px 0 8px; }
.turn-actions { display: flex; flex-direction: column; gap: 6px; }
.turn-actions button {
  background: rgba(28, 50, 78, 0.8); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 0; font-size: 13px; cursor: pointer; transition: all .12s;
}
.turn-actions button:hover { border-color: var(--cyan-2); }
.turn-actions button.primary { background: linear-gradient(180deg, var(--accent), #a5341f); border-color: #a5341f; color: #fff; font-weight: 600; }
.turn-actions button.primary:hover { background: linear-gradient(180deg, #d84e35, var(--accent)); }

/* 顶栏：载入后提示 */
.battle-redesign .topbar .deck-info { font-size: 12px; color: var(--text-dim); }

/* 攻击目标高亮 */
.gcard.sel-attacker { box-shadow: 0 0 0 3px var(--accent-2), 0 0 12px rgba(224,161,60,.6); z-index: 6; }
.gcard.tgt { box-shadow: 0 0 0 2px var(--cyan), 0 0 10px rgba(125,207,238,.5); cursor: crosshair; z-index: 6; }
.gcard.tgt:hover { box-shadow: 0 0 0 3px var(--cyan), 0 0 16px rgba(125,207,238,.8); }
.zone.tgt { outline: 2px dashed var(--cyan); outline-offset: -3px; }

/* 操作提示条 */
.action-hint {
  position: fixed; left: 50%; bottom: 188px; transform: translateX(-50%) translateY(12px);
  background: rgba(8, 18, 34, 0.95); border: 1px solid var(--cyan-2); color: var(--text);
  padding: 8px 16px; border-radius: 20px; font-size: 13px; z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.action-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 迎撃选择浮层 —— 非遮蔽型（戦階ポップアップと同様：画面下中央のバナー、全面暗幕なし、背面の盤面を操作可能） */
.intercept-overlay {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 945;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.intercept-box {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--cyan-2); border-radius: 12px; padding: 14px 18px; min-width: 320px;
  max-width: min(680px, 92vw); box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.intercept-title { font-size: 14px; font-weight: 700; color: var(--cyan); margin-bottom: 12px; }
.intercept-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.intercept-opt {
  background: rgba(28, 50, 78, 0.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.intercept-opt:hover { border-color: var(--cyan); background: rgba(40, 72, 112, 0.9); }
.intercept-skip {
  width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 8px 0; font-size: 13px; cursor: pointer;
}
.intercept-skip:hover { border-color: var(--accent); color: var(--text); }

/* 手調(マリガン)設定浮層 */
.setup-overlay {
  position: fixed; inset: 0; z-index: 970; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 20, 0.6); backdrop-filter: blur(2px);
}
.setup-box {
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--cyan-2); border-radius: 12px; padding: 20px 22px; min-width: 380px; max-width: 640px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.setup-title { font-size: 15px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; }
.setup-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; }
.setup-hand { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; max-height: 240px; overflow-y: auto; }
.setup-card {
  background: rgba(28, 50, 78, 0.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.setup-card:hover { border-color: var(--cyan); }
.setup-card.selected { border-color: var(--accent); background: rgba(60, 36, 36, 0.9); box-shadow: 0 0 0 2px rgba(220,160,90,.4) inset; }
.setup-card.disabled { opacity: .5; cursor: default; }
/* #2 开局手调：手牌以卡图瓦片(flex-wrap)排列，沿用 .discard-opt 的卡图样式 */
#setupHand { display: flex; flex-wrap: wrap; gap: 8px; }
#setupHand .discard-opt.setup-card { min-width: 0; }
.setup-acts { display: flex; gap: 10px; justify-content: flex-end; }
.setup-act {
  background: rgba(28, 50, 78, 0.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.setup-act:hover { border-color: var(--cyan); }
.setup-start { background: var(--cyan-2); color: #06121f; font-weight: 700; border-color: var(--cyan); }
.setup-skip { color: var(--text-dim); }

/* 手札上限棄牌選択浮層 */
.discard-overlay {
  position: fixed; inset: 0; z-index: 975; display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 12px 12px; box-sizing: border-box;
  background: rgba(4, 10, 20, 0.6); backdrop-filter: blur(2px);
}
.discard-box {
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--accent); border-radius: 12px; padding: 20px 22px; min-width: 380px; max-width: 640px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.discard-title { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.discard-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; max-height: 260px; overflow-y: auto; }
.discard-opt {
  background: rgba(28, 50, 78, 0.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 6px; font-size: 12px; cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px;
}
.discard-opt:hover { border-color: var(--accent); }
.discard-opt.selected { border-color: var(--accent); background: rgba(60, 36, 36, 0.9); box-shadow: 0 0 0 2px rgba(220,160,90,.4) inset; }
.discard-opt .opt-img { width: 88px; height: auto; border-radius: 6px; background: #0c0f16; display: block; }
.discard-opt .opt-label { font-size: 12px; text-align: center; line-height: 1.25; }
.discard-acts { display: flex; gap: 10px; justify-content: flex-end; }
.discard-confirm {
  background: var(--accent); color: #1a0e06; font-weight: 700; border: 1px solid var(--accent);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.discard-confirm:disabled { opacity: .45; cursor: default; }
.discard-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.discard-cancel:hover { border-color: var(--accent); color: var(--text); }

/* 連弩発動窓（攻撃勝利時・任意発動・敵将選択）— 誘発型戦闘の一部 */
.renju-overlay {
  position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 6, 6, 0.55); backdrop-filter: blur(2px);
}
.renju-box {
  background: linear-gradient(180deg, rgba(54, 20, 20, .98), rgba(34, 10, 10, .98));
  border: 1px solid #c0584f; border-radius: 12px; padding: 18px 20px; min-width: 340px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.renju-title { font-size: 14px; font-weight: 700; color: #ff8a7a; margin-bottom: 8px; }
.renju-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
.renju-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.renju-opt {
  background: rgba(78, 28, 28, 0.9); border: 1px solid #7a342f; color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.renju-opt:hover { border-color: #ff8a7a; background: rgba(112, 40, 40, 0.9); }
.renju-skip {
  width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 8px 0; font-size: 13px; cursor: pointer;
}
.renju-skip:hover { border-color: var(--accent); color: var(--text); }

/* 伏兵ステップ：手札の【伏兵】武将を選択して疲弊配備 */
.fuhin-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; max-width: 420px; }
.fuhin-opt {
  background: rgba(40, 60, 78, 0.9); border: 1px solid #3f6f8a; color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.fuhin-opt:hover { border-color: #7fc8ff; background: rgba(50, 90, 120, 0.95); }
.fuhin-opt.disabled { opacity: 0.45; cursor: not-allowed; border-color: #555; background: rgba(40, 40, 40, 0.6); color: #999; }
.fuhin-opt.disabled:hover { border-color: #555; background: rgba(40, 40, 40, 0.6); }

/* ため計略同時発動：解決順序選択窓（統一カードタイル） */
#tameChoiceList { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; justify-content: center; }
.tame-opt { background: rgba(40, 40, 70, 0.9); }
.tame-opt:hover { border-color: #b39cff; background: rgba(60, 56, 96, 0.95); }

/* 戦闘フェイズ 宣言待ち窓（伏兵ステップ / 戦闘ステップ）— 誘発型戦闘の可視化 */
.battlestep-overlay {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 940;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.battlestep-box {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(54, 36, 10, .98), rgba(34, 22, 6, .98));
  border: 1px solid #d99b3c; border-radius: 12px; padding: 14px 18px; min-width: 360px; max-width: 560px;
  box-shadow: 0 14px 44px rgba(0,0,0,.6);
}
.battlestep-title { font-size: 14px; font-weight: 700; color: #f4c069; margin-bottom: 8px; }
.battlestep-hint { font-size: 12.5px; color: #e9d8b8; line-height: 1.5; margin-bottom: 12px; }
.battlestep-continue {
  width: 100%; background: transparent; border: 1px solid #d99b3c; color: #f4c069;
  border-radius: 8px; padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.battlestep-continue:hover { background: rgba(217, 155, 60, .18); color: #ffe1a8; }

/* 城壁放置选择浮层（拖卡入城壁时询问 最上面/最下面） */
.wallplace-overlay {
  position: fixed; inset: 0; z-index: 955; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 20, 0.55); backdrop-filter: blur(2px);
}
.wallplace-box {
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--accent-2); border-radius: 12px; padding: 18px 20px; min-width: 300px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6); text-align: center;
}
.wallplace-title { font-size: 14px; font-weight: 700; color: var(--accent-2); margin-bottom: 14px; }
.wallplace-acts { display: flex; gap: 10px; justify-content: center; }
.wp-act {
  background: linear-gradient(180deg, rgba(40,72,112,.95), rgba(28,50,78,.95));
  border: 1px solid var(--cyan-2); color: var(--text); font-weight: 600;
  border-radius: 8px; padding: 9px 18px; font-size: 13px; cursor: pointer; transition: all .12s;
}
.wp-act:hover { border-color: var(--cyan); background: rgba(40, 72, 112, 1); }
.wp-cancel {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 9px 16px; font-size: 13px; cursor: pointer;
}
.wp-cancel:hover { border-color: var(--accent); color: var(--text); }

/* 卡牌右键操作菜单 */
.cardctx-overlay {
  position: fixed; inset: 0; z-index: 956;
  background: transparent;
  /* pointer-events:none 让菜单不会拦截页面其他元素的鼠标事件（关闭靠 document mousedown 判定） */
  pointer-events: none;
}
.cardctx-menu {
  position: absolute; min-width: 180px;
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--accent-2); border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 4px;
  pointer-events: auto;
}
.ctx-act {
  background: transparent; border: 1px solid transparent; color: var(--text);
  border-radius: 6px; padding: 8px 12px; font-size: 13px; text-align: left; cursor: pointer; transition: all .12s;
}
.ctx-act:hover:not(:disabled) { background: rgba(40,72,112,.9); border-color: var(--cyan-2); }
.ctx-act:disabled { color: var(--text-dim); opacity: .5; cursor: not-allowed; }
.ctx-act:last-child { border-top: 1px solid var(--border); margin-top: 2px; color: var(--text-dim); }

/* 右键菜单卡片预览头部：卡图 + 文本（含中文技能翻译） */
.ctx-cardhead { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ctx-cardimg { width: 56px; height: 78px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); background: #0c1a30; flex: 0 0 auto; }
.ctx-cardinfo { min-width: 0; flex: 1 1 auto; }
.ctx-cardname { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 3px; }
.ctx-cardtext { font-size: 11px; line-height: 1.45; color: var(--text-dim); max-height: 96px; overflow: auto; white-space: pre-wrap; }

/* 胜负横幅 */
.winner-banner {
  position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 900; letter-spacing: 4px; color: #fff;
  background: radial-gradient(ellipse at center, rgba(200,68,43,.35), rgba(4,10,20,.85));
  text-shadow: 0 4px 18px rgba(0,0,0,.7);
}

/* 查看卡组浮层 */
.deckview-overlay {
  position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 20, 0.62); backdrop-filter: blur(2px);
}
.deckview-box {
  width: min(720px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--cyan-2); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.deckview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.deckview-title { font-size: 15px; font-weight: 700; color: var(--cyan); }
.deckview-close {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.deckview-close:hover { border-color: var(--accent); color: var(--text); }
.deckview-reveal {
  font-size: 12px; color: var(--text-dim); padding: 6px 10px; margin-bottom: 10px;
  background: rgba(28,50,78,.5); border: 1px solid var(--border); border-radius: 8px;
}
.deckview-reveal input { vertical-align: middle; margin-right: 6px; }
.deckview-list {
  overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding-right: 6px;
}
.dv-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  background: rgba(20, 38, 62, 0.7); border: 1px solid var(--border); border-radius: 8px;
}
.dv-row.readonly { background: rgba(40, 30, 20, 0.5); border-color: var(--accent-2); }
.dv-idx { width: 30px; text-align: center; color: var(--text-dim); font-size: 12px; flex: none; }
.dv-img {
  width: 54px; height: 76px; object-fit: cover; border-radius: 4px; flex: none;
  border: 1px solid var(--border-2); background: #0a1424;
}
.dv-no {
  width: 54px; height: 76px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-dim); background: #0a1424; border: 1px solid var(--border); border-radius: 4px;
  text-align: center; padding: 2px;
}
.dv-name { flex: 1; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ro-tag { font-size: 10px; color: var(--accent-2); flex: none; }
.dv-acts { display: flex; gap: 5px; flex: none; }
.dv-act {
  background: rgba(28, 50, 78, 0.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 6px; padding: 5px 8px; font-size: 11px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.dv-act:hover:not(:disabled) { border-color: var(--cyan); background: rgba(40, 72, 112, 0.9); }
.dv-act:disabled { opacity: .45; cursor: not-allowed; }
.dv-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px 0; }
.deckview-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border); flex: none;
}
.deckview-foot .dv-act {
  background: linear-gradient(180deg, rgba(40,72,112,.95), rgba(28,50,78,.95));
  border: 1px solid var(--cyan-2); color: var(--text); font-weight: 600;
  border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer;
}
.deckview-foot .dv-act:hover { border-color: var(--cyan); background: rgba(40, 72, 112, 1); }
#deckViewShuffleWrap { font-size: 12px; color: var(--text-dim); }
#deckViewShuffleWrap input { vertical-align: middle; margin-right: 5px; }

.chat-zone { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; }
.chat-log {
  display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0;
  overflow-y: auto; padding: 4px; font-size: 11px; line-height: 1.5;
  background: rgba(8, 18, 34, 0.4); border: 1px solid var(--border); border-radius: 8px;
}
.chat-msg {
  background: rgba(28, 50, 78, 0.6); border-radius: 8px 8px 8px 2px;
  padding: 5px 9px; color: var(--text-dim); align-self: flex-start; max-width: 90%;
}
.chat-msg.me {
  background: rgba(78, 168, 222, 0.18); border: 1px solid rgba(78, 168, 222, 0.4);
  border-radius: 8px 8px 2px 8px; align-self: flex-end; color: var(--text);
}
.chat-who { display: block; font-size: 9px; color: var(--cyan); margin-bottom: 2px; }
.chat-msg.me .chat-who { color: var(--accent-2); }
.chat-input-row { display: flex; gap: 6px; }
.chat-input {
  flex: 1; min-width: 0; background: rgba(12, 26, 46, 0.8);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 6px 8px; font-size: 12px;
}
.chat-input:focus { outline: none; border-color: var(--cyan-2); }
.chat-send {
  background: linear-gradient(180deg, var(--accent), #a5341f); border: 1px solid #a5341f; color: #fff;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.chat-send:hover { background: linear-gradient(180deg, #d84e35, var(--accent)); }

.log-list { flex: 1; min-height: 0; overflow-y: auto; font-size: 11px; line-height: 1.55; color: var(--text-dim); }
.log-list .log-item { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.log-list .log-time { color: var(--cyan); margin-right: 6px; }

/* —— 底部手牌 —— */
.hand-area { position: relative; height: 168px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.hand-label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-dim); letter-spacing: 2px; }
.hand-zone { display: flex; justify-content: center; align-items: flex-end; padding: 0 40px; height: 100%; }
.hand-zone .gcard { margin-left: -32px; transition: transform .15s, margin .15s, box-shadow .15s; }
.hand-zone .gcard:first-child { margin-left: 0; }
.hand-zone .gcard:hover { transform: translateY(-26px) scale(1.08) !important; box-shadow: 0 0 0 2px var(--cyan), 0 12px 30px rgba(0,0,0,.6); z-index: 10; }

/* —— 卡牌（board.js 渲染为 .gcard） —— */
.gcard {
  width: var(--gcard-w, 70px);
  height: var(--gcard-h, 98px);
  border-radius: 5px; overflow: hidden;
  background: #0a1626; border: 1px solid #06101e; cursor: grab; flex: 0 0 auto;
  transition: transform .12s, box-shadow .12s; position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .cno { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; color: var(--text-dim); padding: 4px; }
.gcard:hover { box-shadow: 0 0 0 2px var(--cyan), 0 0 12px rgba(125,207,238,.4); z-index: 5; }
.gcard.tapped { transform: rotate(90deg); }
.gcard.dragging { opacity: .4; }

/* 武力バッジ（有効武力：元武力＋援軍＋バフ、リアルタイム表示） */
.gcard .power-badge {
  position: absolute; top: 2px; left: 2px; z-index: 7;
  background: rgba(18, 28, 48, 0.86); color: #ffffff;
  font-size: 12px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
/* ダメージバッジ（受けているダメージ）：武力バッジ（左上）の直下に配置。
   右上に置くと隣のカードに被されていたため、武力UIの下へ移動。 */
.gcard .dmg-badge {
  position: absolute; top: 22px; left: 2px; z-index: 7;
  background: rgba(150, 22, 22, 0.92); color: #ffffff;
  font-size: 12px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid rgba(255, 180, 180, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
/* 攻城力バッジ（実時攻城力：元攻城力＋援軍＋バフ。左下・赤小数字） */
.gcard .siege-badge {
  position: absolute; left: 2px; bottom: 20px; z-index: 7;
  background: rgba(18, 28, 48, 0.86); color: #ff6b6b;
  font-size: 12px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid rgba(255, 107, 107, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
/* 手牌悬停「自动支付国力并打出」小按钮（不影响直接拖出） */
.gcard .play-btn {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 9; display: none;
  background: linear-gradient(180deg, var(--accent), #a5341f);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 4px 11px; border: 1px solid #a5341f; border-radius: 12px;
  cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.gcard:hover .play-btn { display: block; }
.gcard .play-btn:hover { filter: brightness(1.12); }

/* ── 攻撃宣言：自陣武将の ⚔ 拉线柄 ──
   .gcard は overflow:hidden なのでカード外にはみ出す配置は不可。
   右辺の中央・カード内側に完全表示（左上=power-badge、その下=dmg-badge を回避）。 */
.gcard .atk-btn {
  position: absolute; top: 50%; right: 2px; margin-top: -13px;
  z-index: 10; display: none;
  width: 26px; height: 26px; padding: 0;
  background: radial-gradient(circle at 32% 28%, #ff8a6a, #c62b17 62%, #7c1b0d);
  color: #fff; font-size: 14px; line-height: 24px; text-align: center;
  border: 1px solid #ffd3c4; border-radius: 50%;
  cursor: crosshair; touch-action: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 10px rgba(255,90,78,.75);
}
.gcard:hover .atk-btn { display: block; }
.gcard .atk-btn:hover { filter: brightness(1.15); transform: scale(1.12); }
/* 登場酔い（当回合登场・无奇襲）：灰色禁用标记 */
.gcard .atk-btn.sick {
  background: radial-gradient(circle at 32% 28%, #b9bcc2, #6b6f76 62%, #3f4248);
  color: #eceef0; border: 1px solid #d7dade;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 8px rgba(120,124,132,.55);
  cursor: not-allowed;
}
.gcard .atk-btn.sick:hover { filter: none; transform: none; }

/* 照準ライン（body 直下の全画面 SVG） */
#aimLayer {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 3000; display: none;
}
#aimLayer .aim-line {
  fill: none; stroke: #ff5a4e; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 10 7; animation: aimDash .6s linear infinite;
}
#aimLayer .aim-glow {
  fill: none; stroke: rgba(255,90,78,.28); stroke-width: 11; stroke-linecap: round;
}
#aimLayer.locked .aim-line { stroke: #ffd257; stroke-dasharray: none; stroke-width: 4.5; }
#aimLayer.locked .aim-glow { stroke: rgba(255,210,87,.4); stroke-width: 14; }
@keyframes aimDash { to { stroke-dashoffset: -17; } }

/* 照準中の合法目標：常時は淡く点滅、カーソルが乗ったら確定色 */
.tgt { animation: tgtPulse 1.1s ease-in-out infinite; }
@keyframes tgtPulse { 0%,100% { filter: none; } 50% { filter: brightness(1.16); } }
.gcard.tgt-hot { box-shadow: 0 0 0 3px #ffd257, 0 0 20px rgba(255,210,87,.9) !important; z-index: 8; }
[data-zone="wall"].tgt-hot { outline: 3px solid #ffd257; outline-offset: -3px; box-shadow: inset 0 0 26px rgba(255,210,87,.45); }
[data-zone="wall"].tgt { outline: 2px dashed var(--cyan); outline-offset: -2px; }
.gcard.stacked { cursor: default; --gcard-w: 50px; --gcard-h: 70px; }

/* 手札内卡牌更大 */
.hand-zone .gcard { --gcard-w: 104px; --gcard-h: 146px; }

/* 卡背：优先用卡背图片，否则 CSS "三" 字徽 */
.gcard .back-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .back-face {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    radial-gradient(circle at center, #4ea8de 0%, #2c6fa3 45%, #0e3358 100%);
  position: relative;
}
.gcard .back-face::before {
  content: "三";
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: 26px; font-weight: 900; color: #fff;
  width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 2px rgba(0,30,60,.7);
  box-shadow: 0 0 6px rgba(125,207,238,.5), inset 0 0 4px rgba(255,255,255,.15);
  background: rgba(10, 30, 60, .35);
}
/* 势力色カード裏（自動：デッキ内最多勢力）。デフォルト back-face の斜纹＋「三」印スタイルを維持し、配色のみ勢力色へ。
   魏紅 / 蜀緑 / 呉青 / 群黒 / 漢紫。data-fac で切替（board.js が "fac:魏" 等を付与）。 */
.gcard .back-face[data-fac="魏"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), radial-gradient(circle at center, #e0584f 0%, #a8281f 45%, #5c0f0a 100%); }
.gcard .back-face[data-fac="蜀"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), radial-gradient(circle at center, #7fd17f 0%, #3f8f3f 45%, #16401a 100%); }
.gcard .back-face[data-fac="吴"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), radial-gradient(circle at center, #4ea8de 0%, #2c6fa3 45%, #0e3358 100%); }
.gcard .back-face[data-fac="群"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), radial-gradient(circle at center, #6b6f76 0%, #3a3d42 45%, #121316 100%); }
.gcard .back-face[data-fac="汉"] { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px), radial-gradient(circle at center, #b07fd8 0%, #7b3fb0 45%, #3a1456 100%); }

/* —— 卡牌悬停信息浮层 —— */
.card-tip {
  position: fixed; z-index: 1000; display: none;
  max-width: 290px; padding: 9px 11px;
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--cyan-2); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  color: var(--text); font-size: 12px; line-height: 1.55;
  pointer-events: none; white-space: normal;
}
.card-tip .tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-tip .tip-name { font-weight: 800; font-size: 15px; color: var(--cyan); }
.card-tip .tip-rar { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 6px; padding: 0 5px; }
.card-tip .tip-meta { color: var(--text-dim); margin-bottom: 5px; }
/* 势力色：魏=赤(红) / 蜀=緑(绿) / 呉・吴=青(蓝) / 群=黒(黑,以灰代) / 漢・汉=紫。
   与 common.css 的 --wei/--shu/--wu/--qun/--han 保持一致（单一真源）。 */
.card-tip .tip-meta .f-魏 { color: var(--wei); }
.card-tip .tip-meta .f-蜀 { color: var(--shu); }
.card-tip .tip-meta .f-吴, .card-tip .tip-meta .f-呉 { color: var(--wu); }
.card-tip .tip-meta .f-群 { color: var(--qun); }
.card-tip .tip-meta .f-汉, .card-tip .tip-meta .f-漢 { color: var(--han); }
.card-tip .tip-meta .f-他 { color: var(--ta); }
.card-tip .tip-text { white-space: pre-wrap; }
.card-tip .tip-text-cn { margin-top: 5px; padding: 6px 8px; border-left: 3px solid var(--accent-2); background: rgba(224,161,60,.10); border-radius: 4px; white-space: pre-wrap; color: #ffe9b0; font-size: 12.5px; line-height: 1.6; }
.card-tip .tip-text-cn .cn-tag { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: var(--accent-2); color: #2a1c08; font-size: 11px; font-weight: 700; vertical-align: middle; }
.card-tip .tip-reiki { margin-top: 5px; padding: 5px 7px; border-left: 3px solid var(--cyan); background: rgba(78,168,222,.13); border-radius: 4px; white-space: pre-wrap; }
.card-tip .tip-flavor { margin-top: 5px; font-style: italic; color: var(--text-dim); white-space: pre-wrap; }
.card-tip .tip-flavor + .tip-text-cn, .card-tip .tip-reiki + .tip-text-cn { margin-top: 5px; }
.card-tip .tip-reiki-cn { margin-top: 4px; padding: 6px 8px; border-left: 3px solid var(--accent-2); background: rgba(224,161,60,.10); border-radius: 4px; white-space: pre-wrap; color: #ffe9b0; font-size: 12.5px; line-height: 1.6; }
.card-tip .tip-reiki-cn .cn-tag, .card-tip .tip-flavor-cn .cn-tag { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: var(--accent-2); color: #2a1c08; font-size: 11px; font-weight: 700; vertical-align: middle; }
.card-tip .tip-flavor-cn { margin-top: 4px; font-style: italic; color: #ffe9b0; white-space: pre-wrap; font-size: 12.5px; }

/* —— 窄屏降级 —— */
@media (max-width: 1100px) {
  .arena { grid-template-columns: 168px minmax(0,1fr) 200px; gap: 10px; padding: 10px; }
  .gcard { width: 56px; height: 80px; }
  .hand-zone .gcard { width: 84px; height: 118px; margin-left: -24px; }
  .player-avatar { width: 36px; height: 36px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   反馈层（feedback.js）：战斗揭示 / 伤害飘字 / 相位横幅 / 可打出高亮 / 战斗步骤分步演绎
   设计意图：把「刚才发生了什么 / 哪张卡挨打 / 现在到哪步 / 能打哪张」
   从纯文本 toast 升级为可见可听的即时反馈。
   （注：原 battle.css 为未链接的旧文件，反馈样式统一迁移至此生效样式表。）
   ════════════════════════════════════════════════════════════ */

/* 战斗揭示：居中 VS 卡（瞬时、不挡操作） */
.combat-reveal {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.85);
  z-index: 60; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(20,26,38,.97), rgba(12,16,24,.97));
  border: 1px solid var(--accent); border-radius: 14px; padding: 16px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); min-width: 320px; max-width: 90vw; text-align: center;
  color: #eef; font-family: inherit;
}
.combat-reveal.show { opacity: 1; animation: crPop .28s ease-out; }
@keyframes crPop {
  0%   { transform: translate(-50%, -50%) scale(.8); opacity: .2; }
  100% { transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
.cr-head { font-size: 13px; letter-spacing: 4px; color: var(--accent-2); margin-bottom: 10px; }
.cr-row { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.cr-side { flex: 1; padding: 10px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.cr-side.win  { background: rgba(95,181,229,.16); border: 1px solid var(--accent-2); }
.cr-side.lose { background: rgba(200,68,43,.14); border: 1px solid var(--accent); }
.cr-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.cr-power { font-size: 13px; color: var(--text-dim); }
.cr-dmg  { font-size: 13px; color: #ffce6b; }
.cr-vs { align-self: center; font-weight: 800; color: var(--accent); font-size: 18px; }
.cr-result { margin-top: 12px; font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.cr-result.win  { color: #6ee7a8; }
.cr-result.lose { color: #ff7a6b; }
.cr-result.draw { color: var(--text-dim); }
.cr-siege { display: flex; flex-direction: column; gap: 6px; }
.cr-atk { font-weight: 700; font-size: 16px; }
.cr-siege-info { color: var(--text-dim); font-size: 13px; }
.cr-wall-left { color: #ffce6b; font-size: 13px; }

/* 伤害飘字层 */
.dmg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
.dmg-popup {
  position: fixed; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 26px; color: #ff5a4e;
  text-shadow: 0 2px 6px rgba(0,0,0,.7); animation: dmgFloat .9s ease-out forwards;
}
.dmg-popup.special { color: #c77dff; }
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate(-50%, -10%); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160%); }
}

/* 相位 / 战斗步骤切换横幅 */
.phase-banner {
  position: fixed; left: 50%; top: 13%; transform: translateX(-50%);
  z-index: 65; pointer-events: none; opacity: 0;
  background: rgba(12,16,24,.92); border: 1px solid var(--accent-2); color: #eef;
  padding: 8px 22px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.phase-banner.show { animation: bannerIn 1.4s ease-out; }
@keyframes bannerIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* 可打出高亮（兼轻量引导） */
.gcard.playable {
  outline: 2px solid #6ee7a8; outline-offset: 1px;
  animation: playablePulse 1.4s ease-in-out infinite;
}
@keyframes playablePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(110,231,168,.4), 0 0 10px rgba(110,231,168,.3); }
  50%      { box-shadow: 0 0 0 2px rgba(110,231,168,.7), 0 0 18px rgba(110,231,168,.55); }
}

/* 受击抖动 + 红闪 */
.gcard.combat-hit { animation: hitShake .42s; }
@keyframes hitShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); filter: brightness(1.4) drop-shadow(0 0 6px #ff5a4e); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); filter: brightness(1.2) drop-shadow(0 0 4px #ff5a4e); }
  80% { transform: translateX(3px); }
}

#muteBtn { font-size: 16px; padding: 4px 9px; line-height: 1; }

/* 战斗步骤分步演绎面板（#combatSteps）— 逐拍滑入，当前拍高亮，伤害/结果拍强调 */
.combat-steps {
  position: fixed; left: 14px; bottom: 14px; z-index: 58;
  width: 272px; max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 12px;
  background: rgba(12,16,24,.82); border: 1px solid var(--border-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.combat-steps.show { opacity: 1; transform: translateY(0); }
.cs-beat-wrap { opacity: .45; transition: opacity .2s ease; }
.cs-beat-wrap.current { opacity: 1; }
.cs-beat {
  border-left: 3px solid var(--border-2);
  background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0;
  padding: 5px 9px; animation: csIn .3s ease-out;
}
.cs-beat.current { background: rgba(78,168,222,.13); box-shadow: 0 0 0 1px var(--accent-2) inset; }
.cs-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--accent-2); }
.cs-detail { font-size: 11px; color: #dfe6f0; margin-top: 2px; line-height: 1.35; }
@keyframes csIn {
  0%   { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* step 别强调色（左 border） */
.cs-attack   { border-left-color: #ffce6b; }
.cs-intercept{ border-left-color: #ff7a6b; }
.cs-prefix   { border-left-color: #b48cff; }
.cs-fixed    { border-left-color: #6ee7a8; }
.cs-combat   { border-left-color: #5bb8ff; }
.cs-damage   { border-left-color: #ff5a4e; }
.cs-result   { border-left-color: #6ee7a8; }
.cs-renju    { border-left-color: #c77dff; }

/* ── 手动部署面板（测试沙盒）── */
.deploy-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 980; width: 360px; max-height: 76vh;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, rgba(14,30,54,.98), rgba(8,18,34,.98));
  border: 1px solid var(--accent); border-radius: 12px; padding: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.deploy-head { display: flex; align-items: center; justify-content: space-between; }
.deploy-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.deploy-close { background: transparent; border: none; color: var(--text); font-size: 16px; cursor: pointer; line-height: 1; }
.deploy-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.deploy-search {
  flex: 1 1 100%; background: rgba(8,16,30,.9); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.deploy-seat { display: flex; gap: 12px; font-size: 13px; }
.deploy-seat label { cursor: pointer; }
.deploy-std { background: rgba(28,50,78,.9); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.deploy-std:hover { border-color: var(--accent); }
.deploy-results { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; max-height: 46vh; padding: 4px; background: rgba(4,10,20,.4); border-radius: 8px; }
.deploy-results .discard-opt { min-width: 80px; }
.deploy-results .discard-opt .opt-img { width: 72px; }
.deploy-empty { color: #9fb0c4; font-size: 12px; padding: 12px; text-align: center; width: 100%; }
.deploy-foot { font-size: 11px; color: #9fb0c4; line-height: 1.4; }

/* 01-038 法正等：誘発（自动发动）発火時にカードを光らせる */
@keyframes autoFireFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 214, 0, 0); }
  30%  { box-shadow: 0 0 18px 6px rgba(255, 214, 0, 0.95); }
  70%  { box-shadow: 0 0 18px 6px rgba(255, 214, 0, 0.95); }
  100% { box-shadow: 0 0 0 0 rgba(255, 214, 0, 0); }
}
.gcard.auto-fire {
  animation: autoFireFlash 1.25s ease;
  outline: 2px solid #ffd600;
}