.battle-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, #2a241b 0%, #14120f 55%),
    #14120f;
}

.battle-preview-note {
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid #3c362c;
  background: #1d1a15;
  color: #cfc2ab;
  font-size: 0.75rem;
  text-align: center;
}

.battle-root {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.battle-loading {
  margin: auto;
  padding: 2rem;
  color: #cfc2ab;
}

.battle {
  box-sizing: border-box;
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: clamp(0.25rem, 0.9vh, 0.5rem);
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.3rem, 1vw, 0.6rem);
  overflow-y: auto;
}

.battle *,
.battle *::before,
.battle *::after {
  box-sizing: border-box;
}

/* 状态条 */

.battle-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid #4a4337;
  border-radius: 10px;
  background: #1d1a15;
  font-size: 0.85rem;
}

.battle-status__turn {
  color: #f7e7b8;
  font-weight: 700;
}

.battle-status__active,
.battle-status__phase {
  color: #d9cdb8;
}

.battle-status__result {
  margin-left: auto;
  color: #f0c26b;
  font-weight: 700;
}

/* §17.1 战场：以共用前线为轴的镜像纵向栈。
   DOM 顺序即区域顺序（对手 CP → 反制 → 牌堆 → 支援线 → 前线 →
   我方支援线 → 牌堆 → 反制 → CP）。九条带一律 max-content：
   用 1fr/auto 时短视口会把轨道压到内容高度以下，条目溢出轨道互相重叠
   （US-026 战线重叠的同一成因），空间不足只让 arena 内部滚动。 */
.battle__arena {
  display: grid;
  grid-template-rows: repeat(9, max-content);
  gap: clamp(0.15rem, 0.5vh, 0.35rem);
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* §17.5 横屏：中部三带（对手支援线 / 共用前线 / 我方支援线），
   每方的 CP → 反制 → 牌堆压成上下外缘窄带、不改变相对次序，
   双方 CP 落在各自一行的最外端。竖屏沿用 §17.1 的九行纯堆叠。 */
.battle[data-layout="landscape"] .battle__arena {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, max-content);
}

.battle[data-layout="landscape"] .battle-cp[data-allegiance="enemy"] {
  grid-area: 1 / 1;
}

.battle[data-layout="landscape"] .battle-counters[data-allegiance="enemy"] {
  grid-area: 1 / 2;
}

.battle[data-layout="landscape"] .battle-logistics[data-allegiance="enemy"] {
  grid-area: 1 / 3;
}

.battle[data-layout="landscape"] .battle-line--support[data-allegiance="enemy"] {
  grid-area: 2 / 1 / 3 / 4;
}

.battle[data-layout="landscape"] .battle-line--front {
  grid-area: 3 / 1 / 4 / 4;
}

.battle[data-layout="landscape"] .battle-line--support[data-allegiance="own"] {
  grid-area: 4 / 1 / 5 / 4;
}

.battle[data-layout="landscape"] .battle-logistics[data-allegiance="own"] {
  grid-area: 5 / 1;
}

.battle[data-layout="landscape"] .battle-counters[data-allegiance="own"] {
  grid-area: 5 / 2;
}

.battle[data-layout="landscape"] .battle-cp[data-allegiance="own"] {
  grid-area: 5 / 3;
}

/* §17.5 横屏：选中单位后抽屉会多出盖放警告行、原因行与按钮行，
   它是 .battle 的 max-content 行、战场是 1fr —— 抽屉每长 1px 战场就少 1px，
   1440×900 下抽屉从 40px 长到 133px 时九段（348px）放不下，主战场开始滚动。
   横屏横向空间充裕，把抽屉里原本 flex-basis:100% 的整行块放开为同排流动，
   选中态与 idle 态高度几乎一致。 */
.battle[data-layout="landscape"] .battle-drawer {
  gap: 0.4rem 0.6rem;
  padding: 0.3rem 0.6rem;
}

.battle[data-layout="landscape"] .battle-drawer__main {
  gap: 0.2rem 0.6rem;
  /* 1440×900 下战场可视区比九段内容多 82px 余量，抽屉总高超过 117px
     就会把九段挤出滚动。长卡面的详情文字行数不可控，这里给上限并内部滚动，
     保证任何文案长度都不重现阶段滚动 */
  max-height: 6rem;
  overflow-y: auto;
}

.battle[data-layout="landscape"] .battle-drawer__counter-warning,
.battle[data-layout="landscape"] .battle-drawer__reason,
.battle[data-layout="landscape"] .battle-drawer__mode {
  flex-basis: auto;
}

/* 单位详情与盖放面板同样是抽屉里的整行块：横屏让它们并入同一流动，
   否则「详情」态抽屉长到 126px，战场被压到 339px < 内容 348px 又出现滚动 */
.battle[data-layout="landscape"] .battle-drawer__detail {
  flex-basis: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}

.battle[data-layout="landscape"] .battle-counter-place {
  flex-basis: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
}

/* 支援阵线一行排完：标签 + 4 个单位槽 + HQ（HQ 独占一格，不占 4 个槽）。
   九条横带要在一屏内排下，标签与 HQ 都并入同一行而不是各占一行 */
.battle-line__row {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}

.battle-line__row > .battle-line__label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 0.68rem;
}

.battle-line__row > .battle-line__slots {
  flex: 1 1 auto;
  min-width: 0;
}

.battle-line__row > .battle-hq {
  flex: 0 0 auto;
  width: clamp(7rem, 16vw, 10rem);
}

.battle-line {
  position: relative;
  display: grid;
  gap: 0.2rem;
  min-height: 0;
  /* 纵向内边距随视口高度收缩：短视口下每条带省 2–4px，九条带就是几十 px */
  padding: clamp(0.16rem, 0.45vh, 0.3rem) 0.4rem;
  border: 1px solid #3c362c;
  border-radius: 10px;
  background: rgba(34, 30, 24, 0.65);
}

/* 分区材质：敌方支援线为冷灰钢板战壕，我方支援线为木板补给站 */
.battle-line--support[data-allegiance="enemy"] {
  border-color: #4d545f;
  background:
    repeating-linear-gradient(90deg, rgba(150, 168, 190, 0.09) 0 1px, transparent 1px 0.85rem),
    linear-gradient(180deg, rgba(48, 56, 66, 0.72), rgba(24, 27, 32, 0.85));
}

.battle-line--support[data-allegiance="own"] {
  border-color: #7d6038;
  background:
    repeating-linear-gradient(0deg, rgba(196, 150, 92, 0.09) 0 1px, transparent 1px 0.7rem),
    linear-gradient(180deg, rgba(62, 47, 30, 0.72), rgba(30, 25, 18, 0.85));
}

.battle-line--front {
  grid-template-rows: auto max-content;
  min-height: min-content;
  padding-top: clamp(0.34rem, 0.85vh, 0.55rem);
  padding-bottom: clamp(0.3rem, 0.8vh, 0.52rem);
  border-color: #6b5a3a;
  background: rgba(60, 48, 30, 0.45);
}

/* 前线意象：顶部铁丝网（横线 + 交错倒刺），底部沙袋胸墙；纯装饰，不参与命中 */
.battle-line--front::before,
.battle-line--front::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.battle-line--front::before {
  top: 0;
  height: 0.6rem;
  background-image:
    repeating-linear-gradient(58deg, transparent 0 0.32rem, rgba(198, 190, 170, 0.3) 0.32rem calc(0.32rem + 1px), transparent calc(0.32rem + 1px) 0.64rem),
    repeating-linear-gradient(-58deg, transparent 0 0.32rem, rgba(198, 190, 170, 0.3) 0.32rem calc(0.32rem + 1px), transparent calc(0.32rem + 1px) 0.64rem),
    linear-gradient(90deg, rgba(198, 190, 170, 0.42), rgba(198, 190, 170, 0.42));
  background-size: 0.64rem 0.6rem, 0.64rem 0.6rem, 100% 1px;
  background-position: 0 0, 0 0, 0 0.34rem;
  background-repeat: repeat-x, repeat-x, no-repeat;
}

.battle-line--front::after {
  bottom: 0;
  height: 0.55rem;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(138, 113, 72, 0.5) 0 0.4rem, rgba(138, 113, 72, 0) 0.42rem),
    radial-gradient(circle at 50% 100%, rgba(96, 78, 50, 0.42) 0 0.4rem, rgba(96, 78, 50, 0) 0.42rem);
  background-size: 0.9rem 0.55rem, 0.9rem 0.55rem;
  background-position: 0 0, 0.45rem 0;
  background-repeat: repeat-x, repeat-x;
}

.battle-line--front > * {
  position: relative;
  z-index: 1;
}

/* 前线归属染色：颜色之外还有「我方控制 / 敌方控制 / 无主」文字标签 */
.battle-line--front[data-owner="own"] {
  border-color: #5f8fbf;
  background: linear-gradient(180deg, rgba(58, 96, 138, 0.42), rgba(34, 30, 24, 0.6));
}

.battle-line--front[data-owner="enemy"] {
  border-color: #b06a5a;
  background: linear-gradient(180deg, rgba(128, 58, 48, 0.36), rgba(34, 30, 24, 0.6));
}

.battle-line__owner {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  color: #e8dcc6;
  background: rgba(0, 0, 0, 0.34);
  font-size: 0.65rem;
  font-weight: 700;
}

.battle-line--front[data-owner="own"] .battle-line__owner {
  color: #d6ecff;
}

.battle-line--front[data-owner="enemy"] .battle-line__owner {
  color: #ffd6c8;
}

.battle-line__label {
  margin: 0;
  color: #cfc2ab;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.battle-line__slots {
  display: flex;
  gap: 0.3rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.battle-line--front .battle-line__slots {
  min-height: clamp(2.3rem, 5.6vh, 2.8rem);
}

.battle-slot {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  /* §17.1 的九条横带全部纵向排布，槽位高度直接决定战场能否在一屏内放下。
     用 vh 钳制：100% 缩放的短视口下自动收缩，高视口仍保持原 2.8rem。 */
  min-height: clamp(2.3rem, 5.6vh, 2.8rem);
  border: 1px dashed #443d31;
  border-radius: 8px;
  background: rgba(20, 18, 15, 0.45);
  place-items: stretch;
}

.battle-slot[data-occupied="true"] {
  border-style: solid;
  border-color: #5a5140;
}

.battle-slot__index {
  align-self: center;
  justify-self: center;
  color: #9c917e;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.battle-unit {
  /* 单位卡自身作为尺寸容器：槽位宽从 52px（手机）到 408px（2K）变 8 倍，
     原来内部字号写死 0.75rem/0.72rem，窄槽位里字会顶满、宽槽位里字又太小。
     改成 cqi 后字号随卡宽自动收放（1cqi = 单位卡宽度 1%）。 */
  container-type: inline-size;
  container-name: unitcard;
  display: grid;
  align-content: start;
  gap: 0.12rem;
  min-width: 0;
  padding: clamp(0.16rem, 3cqi, 0.28rem) clamp(0.18rem, 3.4cqi, 0.32rem);
  border: 1px solid #6b6252;
  border-radius: 8px;
  background: linear-gradient(160deg, #2a241b, #1b1813);
  overflow: hidden;
}

.battle-unit--own {
  border-color: #7d6b45;
  background: linear-gradient(160deg, #322a1d, #1d1913);
}

.battle-unit--hidden {
  border-style: dashed;
  color: #cfc2ab;
}

.battle-unit__name {
  margin: 0;
  font-size: clamp(0.56rem, 7.6cqi, 0.75rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.battle-unit__stats {
  display: flex;
  gap: clamp(0.2rem, 2cqi, 0.5rem);
  color: #e7dcc7;
  font-size: clamp(0.54rem, 7.2cqi, 0.72rem);
  font-variant-numeric: tabular-nums;
}

.battle-unit__status {
  margin: 0;
  color: #cfc2ab;
  font-size: clamp(0.5rem, 6.6cqi, 0.66rem);
  line-height: 1.3;
}

.battle-unit .keyword-list {
  gap: 0.12rem;
}

.battle-unit .keyword-badge {
  padding: 0.03rem 0.3rem 0.03rem 0.12rem;
  font-size: clamp(0.48rem, 6.2cqi, 0.62rem);
}

.battle-unit .keyword-badge__icon {
  width: 13px;
  height: 13px;
}

/* 总部 / CP 侧栏 */

.battle-hq,
.battle-cp {
  display: grid;
  align-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid #4a4337;
  border-radius: 10px;
  background: linear-gradient(160deg, #221e18, #181510);
}

/* 指挥点：木箱弹药箱 + 黄铜弹壳，数字仍是唯一权威读数。
   §17.1 第 1/9 项：整幅最外侧窄条，读数—刻度—对手手牌张数一行排完 */
.battle-cp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.75rem;
  position: relative;
  padding: 0.3rem 0.55rem;
  border-color: #7a5f2e;
  background-color: #33281a;
  background-image:
    radial-gradient(circle at 5px 5px, rgba(240, 215, 154, 0.45) 0 1px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 0.5rem),
    linear-gradient(180deg, #4a3a23, #2a2116);
  background-size: 0.5rem 0.5rem, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.battle-cp__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.battle-cp__enemy-hand {
  margin-left: auto;
  color: #cfc2ab;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.battle-cp__over {
  color: #ffb26b;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.battle-cp__pips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  margin-top: 0;
}

.cp-pip {
  position: relative;
  width: 0.34rem;
  height: 0.62rem;
  border: 1px solid rgba(201, 163, 90, 0.45);
  border-radius: 45% 45% 2px 2px / 55% 55% 2px 2px;
  background: linear-gradient(180deg, rgba(70, 60, 40, 0.9), rgba(28, 24, 16, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cp-pip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: rgba(201, 163, 90, 0.25);
}

.cp-pip.is-filled {
  border-color: #e8ca86;
  background: linear-gradient(180deg, #f7e4ad 0%, #d3ac60 45%, #9b7436 100%);
  box-shadow:
    0 0 7px rgba(201, 163, 90, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.cp-pip.is-filled::after {
  background: #6d5226;
}

/* 总部工事质感：混凝土基底 + 底部沙袋胸墙 + 四角加固钢板，正文层级高于装饰 */
.battle-hq {
  --hq-corner: color-mix(in srgb, var(--faction-accent, #c9a45a) 55%, #efe6d5);
  /* 总部是两位数值（20），窄屏时栏宽可能只有 60px 左右，
     原写死 1.1rem 会撑出边界。按容器宽缩放，保持单行不出框。 */
  container-type: inline-size;
  container-name: hqbar;
  position: relative;
  padding-bottom: 0.68rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0.05) 2px 5px),
    linear-gradient(160deg, #221e18, #181510);
}

.battle-hq::before,
.battle-hq::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.battle-hq::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5rem;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(138, 113, 72, 0.45) 0 0.36rem, rgba(138, 113, 72, 0) 0.38rem),
    radial-gradient(circle at 50% 100%, rgba(96, 78, 50, 0.38) 0 0.36rem, rgba(96, 78, 50, 0) 0.38rem);
  background-size: 0.8rem 0.5rem, 0.8rem 0.5rem;
  background-position: 0 0, 0.4rem 0;
  background-repeat: repeat-x, repeat-x;
}

.battle-hq::after {
  inset: 0;
  background-image:
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner)),
    linear-gradient(var(--hq-corner), var(--hq-corner));
  background-size: 0.55rem 2px, 2px 0.55rem, 0.55rem 2px, 2px 0.55rem, 0.55rem 2px, 2px 0.55rem, 0.55rem 2px, 2px 0.55rem;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.battle-hq > * {
  position: relative;
  z-index: 1;
}

.battle-hq__title,
.battle-cp__title {
  margin: 0;
  color: #cfc2ab;
  font-size: 0.72rem;
  font-weight: 600;
}

.battle-hq__hp {
  margin: 0;
  color: #f7e7b8;
  font-size: clamp(0.78rem, 6.4cqi, 1.1rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.battle-hq__logistics,
.battle-cp__value {
  margin: 0;
  color: #d9cdb8;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.battle-hq__warning {
  margin: 0;
  color: #ffb26b;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 五国皮肤：底板用我方阵营主题图，主色/强调色只做装饰，正文保持原有高对比 */
.battle[data-faction] {
  background-color: #14120f;
  background-image:
    linear-gradient(
      180deg,
      rgba(20, 18, 15, 0.55) 0%,
      rgba(20, 18, 15, 0.82) 55%,
      rgba(20, 18, 15, 0.93) 100%
    ),
    var(--battle-art, none);
  background-position: center;
  background-size: cover;
}

.battle[data-faction] .battle-status {
  border-color: color-mix(in srgb, var(--faction-primary) 45%, #efe6d5);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--faction-accent) 50%, #efe6d5);
}

.battle[data-faction] .battle-line {
  border-color: color-mix(in srgb, var(--faction-primary) 35%, #4a4337);
}

/* 弹药箱与战报纸保持暖色金属/纸边，只叠一层阵营强调色 */
.battle[data-faction] .battle-cp {
  border-color: color-mix(in srgb, var(--faction-accent) 40%, #7a5f2e);
}

.battle[data-faction] .battle-drawer {
  border-color: color-mix(in srgb, var(--faction-accent) 40%, #8a7550);
}

.battle-hq[data-faction] {
  border-color: color-mix(in srgb, var(--faction-primary) 45%, #efe6d5);
  background-color: #1a1712;
  background-image:
    linear-gradient(180deg, rgba(20, 18, 15, 0.62), rgba(20, 18, 15, 0.82)),
    var(--hq-art, none);
  background-position: center;
  background-size: cover;
}

.battle-hq[data-faction] .battle-hq__title {
  padding-left: 0.4rem;
  border-left: 3px solid color-mix(in srgb, var(--faction-accent) 50%, #efe6d5);
}

.battle-hq__logistics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
}

.battle-hq__deck {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.battle-hq__back {
  width: 1.1rem;
  height: 1.55rem;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #c9a45a) 50%, #efe6d5);
  border-radius: 2px;
}

.battle-hq__back.asset-missing {
  background: linear-gradient(160deg, #3a2e1e, #241c12);
}

/* 反制区：整幅窄条（§17.1 第 2/8 项），标题—槽位—数量徽章一行排完；
   槽位始终占位，有无盖放都不改变战场总高度 */
.battle-counters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #454f3f;
  border-radius: 8px;
  background: linear-gradient(160deg, #1f241d, #141712);
}

.battle-counters[data-allegiance="own"] {
  border-color: #6a7650;
  background: linear-gradient(160deg, #252c1e, #171a12);
}

.battle-counters__title {
  margin: 0;
  color: #c8d0bb;
  font-size: 0.64rem;
  font-weight: 600;
}

.battle-counters__badge {
  color: #a9b39c;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}

.battle-counters__slots {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: clamp(1.1rem, 2.8vh, 1.4rem);
}

.battle-counter {
  position: relative;
  flex: 0 0 auto;
  width: 2.4rem;
  min-height: clamp(1.1rem, 2.8vh, 1.4rem);
  border: 1px dashed #4a5544;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
}

.battle-counter--occupied {
  border-style: solid;
  border-color: #7d8a6a;
}

/* 选中反制卡后的空槽：可直接点击盖放 */
.battle-counter--target {
  border: 1px solid #f0c26b;
  background: rgba(240, 194, 107, 0.16);
  cursor: pointer;
}

.battle-counter--target:hover {
  background: rgba(240, 194, 107, 0.28);
}

.battle-counter[data-allegiance="own"].battle-counter--occupied {
  border-color: #a98d55;
  cursor: pointer;
}

.battle-counter__back {
  display: grid;
  place-items: center;
  min-height: clamp(1.1rem, 2.8vh, 1.4rem);
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(80, 92, 70, 0.55) 0 3px, rgba(40, 48, 36, 0.55) 3px 6px),
    #2b3327;
  color: #d7d0b5;
  font-size: 0.55rem;
  font-weight: 700;
  user-select: none;
}

.battle-counter[data-allegiance="enemy"] .battle-counter__back {
  background:
    repeating-linear-gradient(-45deg, rgba(70, 76, 84, 0.55) 0 3px, rgba(34, 38, 44, 0.55) 3px 6px),
    #262b31;
}

.battle-counter:focus-visible {
  outline: 2px solid #f0c26b;
  outline-offset: 1px;
}

/* 己方盖放详情：绝对定位，展开不撑高；隐藏态用 display:none */
.battle-counter__detail {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 6;
  width: min(13rem, 60vw);
  padding: 0.4rem 0.5rem;
  border: 1px solid #8a7550;
  border-radius: 8px;
  background: #221e18;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  text-align: left;
  pointer-events: none;
}

.battle-counter[data-allegiance="own"]:hover .battle-counter__detail,
.battle-counter[data-allegiance="own"]:focus .battle-counter__detail,
.battle-counter[data-allegiance="own"].battle-counter--open .battle-counter__detail {
  display: block;
}

.battle-counter__name {
  margin: 0;
  color: #f7e7b8;
  font-size: 0.72rem;
  font-weight: 700;
}

.battle-counter__meta {
  margin: 0.1rem 0 0;
  color: #c9bda6;
  font-size: 0.62rem;
}

.battle-counter__text {
  margin: 0.15rem 0 0;
  color: #d9cdb8;
  font-size: 0.62rem;
  line-height: 1.35;
}

/* 盖放面板：反制卡选中后在抽屉里选空槽 */
.battle-counter-place {
  flex-basis: 100%;
  display: grid;
  gap: 0.2rem;
}

.battle-counter-place__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* 对手盖放提示：只报数量，不报内容 */
.battle-drawer__counter-warning {
  flex-basis: 100%;
  margin: 0;
  padding: 0.15rem 0.4rem;
  border: 1px solid #8a5a2b;
  border-radius: 6px;
  background: rgba(138, 90, 43, 0.18);
  color: #7a2f22;
  font-size: 0.7rem;
  font-weight: 600;
}

/* 战报：默认收起只显示最近一行，展开后限高内部滚动 */
.battle-log {
  display: grid;
  gap: 0.12rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #6a5a3a;
  border-radius: 10px;
  background: rgba(29, 26, 21, 0.85);
}

.battle-log__toggle {
  justify-self: start;
  /* 原高约 20px，补到 24px 触控下限 */
  min-height: 24px;
  padding: 0.12rem 0.6rem;
  border: 1px solid #7d6b45;
  border-radius: 8px;
  background: #2a241b;
  color: #f7e7b8;
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.battle-log__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.1rem;
  max-height: 8.5rem;
  overflow-y: auto;
  color: #d9cdb8;
  font-size: 0.66rem;
  line-height: 1.35;
}

.battle-log__list--collapsed {
  max-height: 1.5em;
  overflow: hidden;
}

.battle-log__line {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}

.battle-log__turn {
  flex: 0 0 auto;
  color: #a9b39c;
  font-variant-numeric: tabular-nums;
}

.battle-log__text {
  min-width: 0;
}

/* 反制翻开明示：居中卡面短暂对双方公开，不参与结算 */
.battle-counter-reveal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 1rem;
  background: rgba(10, 10, 8, 0.72);
  color: #f7e7b8;
  text-align: center;
  /* 明示期间不拦截操作：结算已完成，回放只是视觉 */
  pointer-events: none;
}

.battle-counter-reveal__frame {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.battle-counter-reveal__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f0c26b;
}

.battle-counter-reveal__meta,
.battle-counter-reveal__target {
  margin: 0;
  max-width: min(28rem, 90vw);
  font-size: 0.78rem;
  line-height: 1.4;
}

.battle-counter-reveal .card-face {
  width: min(15rem, 80vw);
}

/* 牌堆带：抽牌堆与弃牌堆并排成整幅窄条（§17.1 第 3/7 项） */
.battle-logistics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.1rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid #4a4337;
  border-radius: 8px;
  background: linear-gradient(160deg, #201d17, #161310);
  color: #d9cdb8;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

.battle-logistics__deck {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.battle-logistics__back {
  width: 0.9rem;
  height: 1.25rem;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--faction-accent, #c9a45a) 50%, #efe6d5);
  border-radius: 2px;
}

.battle-logistics__back.asset-missing {
  background: linear-gradient(160deg, #3a2e1e, #241c12);
}

/* 弃牌堆是公开信息，做成可点按钮；抽牌堆是隐藏信息，只是计数 */
.battle-logistics__grave {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  /* 原高约 18px，低于 24px 的触控最小可点高度。
     加 min-height 让鼠标/手指都好点，视觉不变（只多几像素内边距）。 */
  min-height: 24px;
  padding: 0.05rem 0.5rem;
  border: 1px solid #6a5c44;
  border-radius: 999px;
  background: rgba(255, 236, 200, 0.07);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.battle-logistics__grave:hover {
  border-color: #c9a45a;
  background: rgba(255, 236, 200, 0.16);
}

.battle-logistics__grave:focus-visible {
  outline: 2px solid #c9a45a;
  outline-offset: 2px;
}

.battle-logistics__grave::after {
  content: ' ▸';
  color: #b8a684;
}

.battle-cp__pending {
  color: #f0c26b;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* 手牌：木料制图桌，桌面垫在卡面之下，卡面信息不被遮挡 */

.battle-handbar {
  position: relative;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.25rem 0.5rem 0.16rem;
  border: 1px solid rgba(201, 163, 90, 0.38);
  border-radius: 10px;
  background-color: #2a1e12;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0 2px, transparent 2px 11rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #3f2c1a 0%, #2a1d11 58%, #1b130c 100%);
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(240, 215, 154, 0.1);
}

.battle-handbar::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 90, 0.55), transparent);
}

.battle-handbar > * {
  position: relative;
  z-index: 1;
}

.battle-handbar__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #cfc2ab;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.battle-handbar__own--over {
  color: #ff9a8a;
  font-weight: 700;
}

.battle-handbar__overflow {
  margin: 0;
  color: #ff9a8a;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.battle-hand {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0.06rem 0 0.2rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.battle-hand__item {
  position: relative;
  /* 手牌卡宽随视口弹性缩放：窄屏最小 6.4rem（约 102px，仍可读），
     宽屏最大 9.5rem（152px，与原值一致）。
     原来写死 0 0 9.5rem —— 手牌宽恒为 152px，手机与 4K 屏完全一样大，
     而同一行的槽位宽却从 52px 变到 408px，两者比例失真。
     用 clamp(6.4rem, 11vw, 9.5rem) 让手牌跟槽位同步收放。 */
  flex: 0 0 clamp(6.4rem, 11vw, 9.5rem);
  scroll-snap-align: start;
}

.battle-hand__item .card-face {
  /* 手牌卡自身作为尺寸容器，内部字号按「卡宽」缩放 ——
     原来写死 1.7rem/0.8rem 等，卡缩到 102px 时字仍按 152px 的比例，
     会挤成一团。改成 cqi 后，卡变小字也同步变小，比例始终一致。 */
  container-type: inline-size;
  container-name: handcard;
  --cost-size: clamp(1.2rem, 18cqi, 1.7rem);
  height: 100%;
  gap: clamp(0.1rem, 2cqi, 0.2rem);
  padding: clamp(0.22rem, 4cqi, 0.35rem);
}

/* §17.1 的九条横带比旧「左右侧栏」高出一截，手牌是最大的一块固定开销：
   插画压扁、说明文字收到 2 行，把高度让给战场（卡面信息仍完整可读，
   全文走关键词抽屉与详情浮层） */
.battle-hand__item .card-face__art {
  aspect-ratio: 3 / 1.05;
}

.battle-hand__item .card-face__cost {
  top: 0.3rem;
  left: 0.3rem;
  border-width: 1px;
  font-size: calc(var(--cost-size) * 0.53);
}

.battle-hand__item .card-face__header {
  padding: 0.15rem 0.35rem 0.15rem calc(var(--cost-size) + 0.35rem);
}

.battle-hand__item .card-face__action-cost {
  padding: 0.02rem 0.3rem;
  font-size: 0.62rem;
}

.battle-hand__item .card-face__name {
  font-size: clamp(0.66rem, 9cqi, 0.8rem);
  overflow-wrap: anywhere;
}

.battle-hand__item .card-face__stats {
  gap: 0.35rem;
}

.battle-hand__item .card-face__stat {
  padding: 0.02rem 0.4rem;
  font-size: clamp(0.58rem, 7cqi, 0.66rem);
}

.battle-hand__item .card-face__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.6rem, 7.4cqi, 0.68rem);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.battle-hand__item .card-face__detail {
  padding: 0.02rem 0.35rem;
  font-size: 0.6rem;
}

.battle-hand__item .keyword-badge {
  padding: 0.03rem 0.3rem 0.03rem 0.12rem;
  font-size: 0.62rem;
}

.battle-hand__item .keyword-badge__icon {
  width: 13px;
  height: 13px;
}

/* 战报抽屉：打字机稿纸与电报格式，浅色纸面配深色墨字保证可读 */

.battle-drawer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #8a7550;
  border-radius: 10px;
  background-color: #ddd0b2;
  background-image:
    linear-gradient(90deg, transparent 0 10px, rgba(150, 60, 42, 0.28) 10px 11px, transparent 11px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(86, 69, 40, 0.16) 27px 28px),
    linear-gradient(180deg, #e3d7ba 0%, #d6c8a6 55%, #c9b993 100%);
  color: #231f14;
  color-scheme: light;
  box-shadow:
    inset 0 0 30px rgba(120, 95, 50, 0.16),
    0 -4px 14px rgba(0, 0, 0, 0.28);
}

.battle-drawer__title {
  margin: 0;
  color: #3b3020;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.battle-drawer__hint {
  margin: 0;
  color: #3b3020;
  font-size: 0.75rem;
}

.battle-drawer__cp {
  margin-left: auto;
  color: #7a2f22;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.battle-drawer .battle-action {
  border-color: rgba(90, 72, 40, 0.6);
  background: rgba(255, 255, 255, 0.3);
  color: #3b3020;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.battle-drawer .battle-action:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(52, 42, 24, 0.14);
}

/* 战线按内容高度排布，空间不足时只让战场区内部滚动，
   手牌与行动抽屉始终贴在屏幕底部；战线之间不会互相重叠 */
/* §17.5 竖屏：中部仍是三条主带纵向堆叠（对手支援线 / 共用前线 / 我方支援线），
   每方的 CP → 反制区 → 牌堆压成**该带右侧的小仪表**。DOM 顺序保持 §17.1 的九段不变，
   只用 grid-area 换摆放 —— 旋转/缩放时 applyBattleViewport 只切 data-layout，
   不重建 DOM，选中态与对局状态都不会丢。
   仪表列与主带各占独立行，主带跨三行；前线是共用的，横跨整幅不挂仪表。 */
.battle[data-layout="portrait"] {
  grid-template-rows:
    max-content minmax(0, 1fr) max-content max-content max-content;
}

.battle[data-layout="portrait"] .battle__arena {
  grid-template-columns: minmax(0, 1fr) clamp(6.6rem, 26vw, 8.6rem);
  grid-template-rows: repeat(7, max-content);
}

.battle[data-layout="portrait"] .battle-line--support[data-allegiance="enemy"] {
  grid-area: 1 / 1 / 4 / 2;
}

.battle[data-layout="portrait"] .battle-cp[data-allegiance="enemy"] {
  grid-area: 1 / 2;
}

.battle[data-layout="portrait"] .battle-counters[data-allegiance="enemy"] {
  grid-area: 2 / 2;
}

.battle[data-layout="portrait"] .battle-logistics[data-allegiance="enemy"] {
  grid-area: 3 / 2;
}

.battle[data-layout="portrait"] .battle-line--front {
  grid-area: 4 / 1 / 5 / 3;
}

.battle[data-layout="portrait"] .battle-line--support[data-allegiance="own"] {
  grid-area: 5 / 1 / 8 / 2;
}

.battle[data-layout="portrait"] .battle-logistics[data-allegiance="own"] {
  grid-area: 5 / 2;
}

.battle[data-layout="portrait"] .battle-counters[data-allegiance="own"] {
  grid-area: 6 / 2;
}

.battle[data-layout="portrait"] .battle-cp[data-allegiance="own"] {
  grid-area: 7 / 2;
}

/* 右侧小仪表：竖排只留读数，窄到不吃掉战线宽度，且不增加战线高度。
   三条仪表叠起来的高度就是主带的高度（主带跨这三行），所以这里每省 1px
   战场就少 1px —— 读数与刻度各占一行，行高压到最小。 */
.battle[data-layout="portrait"] .battle-cp,
.battle[data-layout="portrait"] .battle-counters,
.battle[data-layout="portrait"] .battle-logistics {
  flex-direction: column;
  align-items: stretch;
  gap: 0.04rem;
  min-width: 0;
  padding: 0.1rem 0.24rem;
  font-size: 0.58rem;
  line-height: 1.15;
}

.battle[data-layout="portrait"] .battle-cp__readout {
  align-items: baseline;
  gap: 0.15rem;
}

.battle[data-layout="portrait"] .battle-cp__title,
.battle[data-layout="portrait"] .battle-counters__title {
  font-size: 0.56rem;
}

.battle[data-layout="portrait"] .battle-cp__value {
  font-size: 0.7rem;
}

.battle[data-layout="portrait"] .battle-cp__enemy-hand {
  margin-left: 0;
  font-size: 0.56rem;
}

.battle[data-layout="portrait"] .battle-cp__pips {
  align-self: flex-start;
  flex-wrap: nowrap;
  gap: 1px;
}

.battle[data-layout="portrait"] .cp-pip {
  width: 0.22rem;
  height: 0.4rem;
}

/* 反制区仪表：标题与数量徽章同一行、槽位独占第二行。
   三条仪表纵向叠起来的高度就是支援带的高度（支援带跨这三行），
   这里省 14px 等于整个战场少 28px */
.battle[data-layout="portrait"] .battle-counters {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

.battle[data-layout="portrait"] .battle-counters__badge {
  margin-left: auto;
  font-size: 0.56rem;
}

.battle[data-layout="portrait"] .battle-counters__slots {
  flex: 0 0 100%;
  gap: 0.16rem;
  min-height: clamp(1.05rem, 2.6vh, 1.25rem);
}

.battle[data-layout="portrait"] .battle-counter,
.battle[data-layout="portrait"] .battle-counter__back {
  width: 1.6rem;
  min-height: clamp(1.05rem, 2.6vh, 1.25rem);
}

.battle[data-layout="portrait"] .battle-counter__back {
  font-size: 0.5rem;
}

.battle[data-layout="portrait"] .battle-logistics {
  gap: 0.04rem;
}

.battle[data-layout="portrait"] .battle-logistics__deck {
  gap: 0.16rem;
}

.battle[data-layout="portrait"] .battle-logistics__back {
  width: 0.55rem;
  height: 0.8rem;
}

.battle[data-layout="portrait"] .battle-logistics__grave {
  align-self: flex-start;
  padding: 0.02rem 0.3rem;
}

/* 主带：标签与 HQ 同一行，单位槽独占整幅宽度 —— 窄屏下 4 槽若与标签抢行，
   每槽只剩 ~40px，卡名折成 3–4 行会把战线撑到 120px 以上 */
.battle[data-layout="portrait"] .battle-line__row {
  flex-wrap: wrap;
}

.battle[data-layout="portrait"] .battle-line__row > .battle-line__label {
  order: 1;
  flex: 0 0 auto;
}

.battle[data-layout="portrait"] .battle-line__row > .battle-hq {
  order: 2;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.battle[data-layout="portrait"] .battle-line__row > .battle-line__slots {
  order: 3;
  flex: 0 0 100%;
  min-width: 0;
}

.battle[data-layout="portrait"] .battle-line--front {
  grid-template-rows: auto max-content;
}

.battle[data-layout="portrait"] .battle-line {
  padding: 0.18rem 0.26rem;
}

.battle[data-layout="portrait"] .battle-line__label {
  font-size: 0.66rem;
  white-space: nowrap;
}

.battle[data-layout="portrait"] .battle-line__owner {
  margin-left: 0.25rem;
  font-size: 0.58rem;
}

/* HQ 与标签同行：标题压一行，血量读数与牌库警告各占一行 */
.battle[data-layout="portrait"] .battle-hq__title {
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.battle[data-layout="portrait"] .battle-line__slots {
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.battle[data-layout="portrait"] .battle-slot {
  flex: 1 1 3.6rem;
  min-height: clamp(2.4rem, 5.6vh, 2.9rem);
}

.battle[data-layout="portrait"] .battle-line--front .battle-line__slots {
  min-height: clamp(2.2rem, 5.2vh, 2.6rem);
}

.battle[data-layout="portrait"] .battle-line--front .battle-slot {
  flex-basis: 3.1rem;
}

/* 紧凑单位卡：竖屏只留名称、攻血与关键词，状态行压到一行 */
.battle[data-layout="portrait"] .battle-unit {
  gap: 0.05rem;
  padding: 0.14rem 0.16rem;
}

.battle[data-layout="portrait"] .battle-unit__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.6rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.battle[data-layout="portrait"] .battle-unit__stats {
  gap: 0.2rem;
  font-size: 0.58rem;
}

.battle[data-layout="portrait"] .battle-unit__status {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.55rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.battle[data-layout="portrait"] .battle-unit .keyword-list {
  gap: 0.06rem;
}

.battle[data-layout="portrait"] .battle-unit .keyword-badge {
  padding: 0.02rem 0.16rem 0.02rem 0.06rem;
  font-size: 0.55rem;
}

.battle[data-layout="portrait"] .battle-unit .keyword-badge__icon {
  width: 10px;
  height: 10px;
}

/* HQ 与标签同行：标题与血量读数排一行，牌库警告换到下一行 ——
   竖屏主带高度由「标签行 + 槽位行」两段决定，HQ 若竖排会多占一行 */
.battle[data-layout="portrait"] .battle-hq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.05rem 0.35rem;
  padding: 0.14rem 0.35rem 0.34rem;
}

.battle[data-layout="portrait"] .battle-hq__hp {
  font-size: 0.8rem;
}

.battle[data-layout="portrait"] .battle-hq__warning,
.battle[data-layout="portrait"] .battle-hq .battle-unit__preview {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.2;
}

.battle[data-layout="portrait"] .battle-line--front {
  padding-top: 0.5rem;
  padding-bottom: 0.45rem;
}

.battle[data-layout="portrait"] .battle-line--front::before {
  height: 0.4rem;
}

.battle[data-layout="portrait"] .battle-line--front::after {
  height: 0.35rem;
}

/* 手牌：底部固定高度 + 横滑，超过 5 张不撑高、也不遮挡前线。
   竖屏卡面走紧凑档（插画更扁、说明 1 行），全文仍可从抽屉与详情浮层读到 */
.battle[data-layout="portrait"] .battle-hand {
  /* 原来固定 7.4rem，短屏（如 375x667）会占掉过多纵向空间。
     改为随视口高度弹性，矮屏收窄、高屏放宽。 */
  height: clamp(6.2rem, 13vh, 7.4rem);
}

.battle[data-layout="portrait"] .battle-hand__item {
  /* 竖屏原来写死 7.2rem（115px），手机与平板竖屏一样宽。
     改为随视口弹性：窄屏 6.4rem、宽屏到 8rem，让手牌跟棋盘一起收放。 */
  flex-basis: clamp(6.4rem, 17vw, 8rem);
}

.battle[data-layout="portrait"] .battle-hand__item .card-face__art {
  aspect-ratio: 3 / 0.5;
}

.battle[data-layout="portrait"] .battle-hand__item .card-face__text {
  -webkit-line-clamp: 1;
}

/* 行动抽屉与战报：竖屏压到最小高度 —— 选中单位后抽屉会多出按钮行与原因行，
   它每长 1px，1fr 的战场就少 1px，长过头主战场就开始滚动 */
.battle[data-layout="portrait"] .battle-drawer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  gap: 0.2rem 0.4rem;
  padding: 0.22rem 0.45rem;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.35);
}

.battle[data-layout="portrait"] .battle-drawer__main {
  gap: 0.15rem 0.4rem;
  /* 「详情」态会在抽屉里追加整块单位详情，竖屏窄、文字折行多，
     抽屉长到 184px 时 1fr 战场只剩 253px < 内容 317px 又出现滚动。
     给 main 设上限并内部滚动，抽屉总高有界，任何态都不再吃战场高度 */
  max-height: 6.5rem;
  overflow-y: auto;
}

.battle[data-layout="portrait"] .battle-drawer__title {
  font-size: 0.7rem;
}

.battle[data-layout="portrait"] .battle-drawer__hint,
.battle[data-layout="portrait"] .battle-drawer__mode,
.battle[data-layout="portrait"] .battle-drawer__reason,
.battle[data-layout="portrait"] .battle-drawer__counter-warning {
  font-size: 0.62rem;
  line-height: 1.25;
}

.battle[data-layout="portrait"] .battle-drawer__cp {
  font-size: 0.7rem;
}

.battle[data-layout="portrait"] .battle-action {
  padding: 0.14rem 0.4rem;
  font-size: 0.68rem;
}

.battle[data-layout="portrait"] .battle-log {
  padding: 0.14rem 0.45rem;
}

.battle[data-layout="portrait"] .battle-log__list:not(.battle-log__list--collapsed) {
  max-height: 4.5rem;
  font-size: 0.6rem;
}

/* 短视口横屏：手牌压缩为矮卡面，避免把战场挤到只剩一条缝，
   保证总部警告、行动提示与结束回合按钮始终可见且不被手牌遮挡 */
.battle[data-compact="true"] {
  gap: clamp(0.2rem, 0.7vh, 0.45rem);
  padding: clamp(0.3rem, 1.2vh, 0.5rem);
}

.battle[data-compact="true"] .battle-status {
  padding: 0.24rem 0.6rem;
  font-size: 0.78rem;
}

.battle[data-compact="true"] .battle-handbar {
  padding: 0.2rem 0.4rem 0.14rem;
}

.battle[data-compact="true"] .battle-handbar__meta {
  font-size: 0.7rem;
}

.battle[data-compact="true"] .battle-handbar__overflow {
  font-size: 0.68rem;
}

.battle[data-compact="true"] .battle-hand {
  gap: 0.3rem;
  padding: 0.08rem 0 0.14rem;
}

.battle[data-compact="true"] .battle-hand__item {
  flex-basis: clamp(6.6rem, 13vw, 8rem);
}

.battle[data-compact="true"] .battle-hand__item .card-face {
  --cost-size: 1.35rem;
  gap: 0.12rem;
  padding: 0.26rem;
}

.battle[data-compact="true"] .battle-hand__item .card-face__art {
  display: none;
}

.battle[data-compact="true"] .battle-hand__item .card-face__cost {
  top: 0.16rem;
  left: 0.16rem;
  font-size: 0.74rem;
}

.battle[data-compact="true"] .battle-hand__item .card-face__header {
  min-height: 0;
  padding: 0.06rem 0.26rem 0.06rem calc(var(--cost-size) + 0.2rem);
}

.battle[data-compact="true"] .battle-hand__item .card-face__name {
  font-size: 0.7rem;
}

.battle[data-compact="true"] .battle-hand__item .card-face__stats {
  gap: 0.2rem;
}

.battle[data-compact="true"] .battle-hand__item .card-face__stat {
  padding: 0 0.26rem;
  font-size: 0.58rem;
}

.battle[data-compact="true"] .battle-hand__item .card-face__text {
  font-size: 0.6rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
}

.battle[data-compact="true"] .battle-hand__item .card-face__detail {
  padding: 0 0.3rem;
  font-size: 0.54rem;
}

.battle[data-compact="true"] .battle-drawer {
  padding: 0.3rem 0.6rem;
}

.battle[data-compact="true"] .battle-hq,
.battle[data-compact="true"] .battle-cp {
  gap: 0.08rem;
  padding: 0.24rem 0.38rem;
}

.battle[data-compact="true"] .battle-hq__title {
  font-size: 0.64rem;
}

.battle[data-compact="true"] .battle-hq__hp {
  font-size: 0.82rem;
}

.battle[data-compact="true"] .battle-hq__logistics,
.battle[data-compact="true"] .battle-cp__value {
  gap: 0.1rem 0.3rem;
  font-size: 0.6rem;
}

.battle[data-compact="true"] .battle-hq__warning {
  font-size: 0.6rem;
  line-height: 1.2;
}

.battle[data-compact="true"] .battle-hq__back {
  width: 0.85rem;
  height: 1.15rem;
}

.battle[data-compact="true"] .battle-counters,
.battle[data-compact="true"] .battle-logistics {
  padding: 0.12rem 0.26rem;
  font-size: 0.58rem;
}

.battle[data-compact="true"] .battle-counters__slots,
.battle[data-compact="true"] .battle-counter,
.battle[data-compact="true"] .battle-counter__back {
  min-height: clamp(1rem, 2.4vh, 1.1rem);
}


.battle[data-compact="true"] .battle-line {
  padding: 0.16rem 0.26rem;
}

.battle[data-compact="true"] .battle__arena {
  gap: 0.25rem;
}

.battle[data-compact="true"] .battle-line--front {
  padding-top: clamp(0.26rem, 0.65vh, 0.4rem);
  padding-bottom: clamp(0.24rem, 0.6vh, 0.4rem);
}

.battle[data-compact="true"] .battle-line--front::before {
  height: 0.32rem;
}

.battle[data-compact="true"] .battle-line--front::after {
  height: 0.3rem;
}

.battle[data-compact="true"] .battle-line__label {
  font-size: 0.62rem;
}

.battle[data-compact="true"] .battle-slot {
  min-height: clamp(1.9rem, 4.8vh, 2.4rem);
}

.battle[data-compact="true"] .battle-unit {
  padding: 0.18rem 0.22rem;
}

.battle[data-compact="true"] .battle-unit__name {
  font-size: 0.64rem;
}

.battle[data-compact="true"] .battle-drawer__hint {
  font-size: 0.68rem;
}

.battle[data-compact="true"] .battle-drawer__detail-text {
  font-size: 0.64rem;
}

.battle[data-compact="true"] .battle-log {
  padding: 0.18rem 0.45rem;
}

/* 收起态由 .battle-log__list--collapsed 自己限高；这里再写一次会盖掉它，
   把 6rem 的战报硬塞进短视口、吃掉战场高度 */
.battle[data-compact="true"] .battle-log__list:not(.battle-log__list--collapsed) {
  max-height: 6rem;
  font-size: 0.58rem;
}

/* 交互状态：选择、合法目标、禁用与提示 */

.battle-unit[role="button"],
.battle-slot[role="button"],
.battle-hq[role="button"],
.battle-hand__item[role="button"] {
  cursor: pointer;
}

.battle-unit[role="button"]:focus-visible,
.battle-slot[role="button"]:focus-visible,
.battle-hq[role="button"]:focus-visible,
.battle-hand__item[role="button"]:focus-visible,
.battle-action:focus-visible {
  outline: 2px solid #f0c26b;
  outline-offset: 2px;
}

.battle-unit--selected {
  border-color: #f0c26b;
  box-shadow: 0 0 0 2px rgba(240, 194, 107, 0.55);
}

.battle-unit--target,
.battle-slot--target,
.battle-hq--target {
  border-color: #f0c26b;
  background: rgba(240, 194, 107, 0.16);
  box-shadow: inset 0 0 0 1px #f0c26b;
}

.battle-unit--muted,
.battle-slot--muted,
.battle-hq--muted {
  opacity: 0.45;
}

/* 可攻击/可指定时压暗工事装饰，保证金色目标高亮清晰可辨 */
.battle-hq--target::before,
.battle-hq--target::after {
  opacity: 0.15;
}

.battle-unit__preview {
  margin-top: 0.1rem;
  color: #ffd98a;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
}

.battle-hand__item--disabled {
  opacity: 0.52;
}

.battle-hand__item--selected {
  border-radius: 10px;
  outline: 2px solid #f0c26b;
  outline-offset: 2px;
}

/* 禁用原因压在卡面底部：手牌容器 overflow-y:hidden，把提示放在常规流里会被裁掉 */
.battle-hand__reason {
  position: absolute;
  right: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  z-index: 2;
  margin: 0;
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  background: rgba(45, 22, 16, 0.94);
  color: #ffb59c;
  font-size: 0.62rem;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.battle-drawer {
  flex-wrap: wrap;
}

.battle-drawer__main {
  display: flex;
  flex: 1 1 14rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  min-width: 0;
}

.battle-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.battle-action {
  padding: 0.2rem 0.55rem;
  border: 1px solid #7d6b45;
  border-radius: 8px;
  background: #2a241b;
  color: #f7e7b8;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.battle-action:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #3a3123;
}

.battle-action:disabled,
.battle-action[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.battle-drawer__reason {
  flex-basis: 100%;
  margin: 0;
  color: #8a2b1d;
  font-size: 0.7rem;
}

.battle-drawer__mode {
  flex-basis: 100%;
  margin: 0;
  color: #4f452f;
  font-size: 0.72rem;
}

.battle-drawer__detail {
  display: grid;
  flex-basis: 100%;
  gap: 0.15rem;
}

.battle-drawer__detail-line {
  margin: 0;
  color: #231f14;
  font-size: 0.72rem;
}

.battle-drawer__detail-text {
  margin: 0;
  color: #4f452f;
  font-size: 0.7rem;
  line-height: 1.35;
}

.battle-drawer .keyword-list {
  gap: 0.15rem;
}

.battle-toast {
  position: fixed;
  bottom: 6.5rem;
  left: 50%;
  z-index: 20;
  max-width: min(90vw, 28rem);
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid #a8563f;
  border-radius: 10px;
  background: rgba(58, 30, 22, 0.96);
  color: #ffd9c9;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.battle-toast[hidden] {
  display: none;
}

.battle-hint {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(92vw, 34rem);
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid #c9a227;
  border-radius: 10px;
  background: rgba(40, 32, 18, 0.97);
  color: #f6e7c1;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: left;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.battle-hint[hidden] {
  display: none;
}

.battle-hint__text {
  margin: 0;
}

.battle-hint__close {
  flex: none;
  padding: 0.25rem 0.55rem;
  border: 1px solid #c9a227;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.16);
  color: #f6e7c1;
  font-size: 0.76rem;
  cursor: pointer;
}

.battle-hint__close:hover,
.battle-hint__close:focus-visible {
  background: rgba(201, 162, 39, 0.32);
}

.battle.battle--busy {
  cursor: progress;
}

.battle.battle--busy .battle__arena {
  opacity: 0.72;
  transition: opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .battle.battle--busy .battle__arena {
    transition: none;
  }
}

/* 应用内「减少动态效果」开关（html[data-motion]）与系统偏好同口径 */
[data-motion="reduced"] .battle.battle--busy .battle__arena {
  transition: none;
}

/* 战斗动画反馈：覆盖层固定在视口，不参与布局与命中测试 */

.battle-fx {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.battle-fx__ghost {
  position: fixed;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.battle-fx__ghost--death {
  animation: battle-death 720ms cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
}

@keyframes battle-death {
  0% {
    filter: grayscale(0.1) brightness(1);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  35% {
    filter: grayscale(1) brightness(0.75);
    opacity: 0.95;
    transform: translateY(6px) scale(0.99);
  }
  100% {
    filter: grayscale(1) brightness(0.4);
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
}

.battle-fx__smoke {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 206, 190, 0.6), rgba(120, 112, 100, 0));
  pointer-events: none;
  animation: battle-smoke 700ms ease-out forwards;
}

@keyframes battle-smoke {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--smoke-x, 0px)), calc(-50% - 38px)) scale(1.6);
  }
}

.battle-fx__damage {
  position: fixed;
  z-index: 2;
  color: #ff6b57;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  will-change: transform, opacity;
}

/* 占领前线：旗帜色带扫过整条战线 */
.battle-fx__flag {
  position: fixed;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
}

.battle-fx__flag-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  border-radius: 8px;
  will-change: transform, opacity;
}

.battle-fx__flag-band--own {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(86, 146, 206, 0.85) 35%,
    rgba(216, 238, 255, 0.9) 50%,
    rgba(86, 146, 206, 0.85) 65%,
    transparent
  );
}

.battle-fx__flag-band--enemy {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(196, 74, 56, 0.85) 35%,
    rgba(255, 220, 210, 0.9) 50%,
    rgba(196, 74, 56, 0.85) 65%,
    transparent
  );
}

.battle-line--front.battle-line--swept {
  animation: battle-frontline-pulse 720ms ease-out;
}

@keyframes battle-frontline-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 194, 107, 0);
  }
  35% {
    box-shadow: 0 0 0 2px rgba(240, 194, 107, 0.85), 0 0 26px rgba(240, 194, 107, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(240, 194, 107, 0);
  }
}

/* 总部受击：屏幕边缘红光，己方总部受击时更强 */
.battle-fx__hq-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 clamp(48px, 9vw, 140px) clamp(12px, 2.4vw, 34px) rgba(214, 52, 38, 0.72);
}

.battle-fx__hq-vignette--own {
  box-shadow: inset 0 0 clamp(64px, 12vw, 180px) clamp(16px, 3vw, 44px) rgba(232, 44, 30, 0.82);
}

/* 胜负结算横幅 */
.battle-result-fx {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(12, 10, 8, 0.6),
    rgba(12, 10, 8, 0.15) 62%,
    transparent 82%
  );
}

.battle-result-fx__title {
  padding: 0.5rem 2.6rem;
  border-radius: 16px;
  color: #f5e9d2;
  background: rgba(24, 20, 16, 0.55);
  box-shadow: inset 0 0 0 2px rgba(240, 194, 107, 0.45);
  font-size: clamp(2.2rem, 9vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
}

.battle-result-fx--win .battle-result-fx__title {
  color: #ffe8ab;
  box-shadow: inset 0 0 0 2px rgba(240, 194, 107, 0.9), 0 0 34px rgba(240, 194, 107, 0.4);
}

.battle-result-fx--lose .battle-result-fx__title {
  color: #ffc4b8;
  box-shadow: inset 0 0 0 2px rgba(206, 72, 54, 0.9), 0 0 34px rgba(206, 72, 54, 0.35);
}

.battle-result-fx--draw .battle-result-fx__title {
  color: #ded6c8;
  box-shadow: inset 0 0 0 2px rgba(176, 166, 148, 0.8);
}

.battle-unit.battle-fx-hit,
.battle-hq.battle-fx-hit {
  animation: battle-hit 300ms ease-out;
}

@keyframes battle-hit {
  0% {
    filter: brightness(1.7) saturate(1.4);
    box-shadow: 0 0 0 2px rgba(255, 120, 90, 0.95), 0 0 22px rgba(255, 120, 90, 0.75);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: 0 0 0 0 rgba(255, 120, 90, 0);
  }
}

.battle-slot.battle-slot--landed {
  border-color: #f0c26b;
  animation: battle-landed 520ms ease-out;
}

@keyframes battle-landed {
  0% {
    background: rgba(240, 194, 107, 0.4);
    box-shadow: 0 0 0 2px rgba(240, 194, 107, 0.95), 0 0 26px rgba(240, 194, 107, 0.7);
  }
  100% {
    background: rgba(20, 18, 15, 0.45);
    box-shadow: 0 0 0 0 rgba(240, 194, 107, 0);
  }
}

.battle.battle--shake {
  animation: battle-shake 320ms ease-in-out;
}

@keyframes battle-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3px, 1px);
  }
  40% {
    transform: translate(3px, -1px);
  }
  60% {
    transform: translate(-2px, 1px);
  }
  80% {
    transform: translate(2px, -1px);
  }
}

/* 系统级减少动态效果：不震屏、不播粒子与伤害数字，只保留淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .battle.battle--shake,
  .battle-unit.battle-fx-hit,
  .battle-hq.battle-fx-hit,
  .battle-line--front.battle-line--swept,
  .battle-fx__ghost--death,
  .battle-fx__smoke,
  .battle-fx__damage {
    animation: none;
  }
}

[data-motion="reduced"] .battle.battle--shake,
[data-motion="reduced"] .battle-unit.battle-fx-hit,
[data-motion="reduced"] .battle-hq.battle-fx-hit,
[data-motion="reduced"] .battle-line--front.battle-line--swept,
[data-motion="reduced"] .battle-fx__ghost--death,
[data-motion="reduced"] .battle-fx__smoke,
[data-motion="reduced"] .battle-fx__damage {
  animation: none;
}

/* 弃牌堆列表（§17.4 公开信息）：电报稿纸质感，挂在 body 上不受战斗重渲染影响 */
.battle-discard-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(10, 8, 6, 0.72);
}

.battle-discard-overlay[hidden] {
  display: none;
}

.battle-discard {
  position: relative;
  box-sizing: border-box;
  width: min(56rem, 100%);
  max-height: min(85vh, 42rem);
  overflow-y: auto;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1px solid #6b5a3c;
  border-radius: 12px;
  color: #3b3021;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 251, 235, 0.55), transparent 55%),
    linear-gradient(150deg, #f0e4c8, #e2d1ae 55%, #d5c198);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.battle-discard__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #8a6d3c;
  border-radius: 50%;
  background: rgba(255, 252, 240, 0.5);
  color: #3b3021;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.battle-discard__close:hover {
  background: rgba(255, 252, 240, 0.85);
}

.battle-discard__close:focus-visible {
  outline: 2px solid #6b4a17;
  outline-offset: 2px;
}

.battle-discard__title {
  margin: 0;
  padding-right: 2.2rem;
  font-size: 1.15rem;
}

.battle-discard__summary {
  margin: 0.35rem 0 0;
  color: #5a4626;
  font-size: 0.85rem;
  line-height: 1.5;
}

.battle-discard__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.battle-discard__item {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.battle-discard__item .card-face {
  width: 100%;
}

.battle-discard__item-meta {
  margin: 0;
  color: #5a4626;
  font-size: 0.72rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* 中等短视口（1366x768@80%、1280x720@100% 等）：只压缩固定开销，
   手牌栏设上限并内部滚动，把高度让给战场；文字仍保持紧凑档字号。 */
@media (max-height: 800px) {
  .battle[data-compact="true"] .battle-handbar {
    box-sizing: border-box;
    max-height: 8.5rem;
    overflow-y: auto;
  }

  .battle[data-compact="true"] .battle__arena {
    gap: 0.16rem;
  }
}

/* 超短视口（110% 缩放的 1366x768、系统缩放叠加等）：在紧凑档基础上继续压缩
   纯高度开销（内边距、行距、槽位与徽章最小高度、手牌文字行数），
   只让战场、手牌、战报在一屏内放得下，不改结构、配色与交互。 */
@media (max-height: 640px) {
  .battle[data-compact="true"] {
    gap: 0.12rem;
    padding: 0.16rem;
  }

  .battle[data-compact="true"] .battle-status {
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
  }

  .battle[data-compact="true"] .battle-cp,
  .battle[data-compact="true"] .battle-counters,
  .battle[data-compact="true"] .battle-logistics {
    padding: 0.06rem 0.2rem;
  }

  .battle[data-compact="true"] .battle-hq,
  .battle[data-compact="true"] .battle-cp {
    gap: 0.04rem;
    padding: 0.1rem 0.28rem;
  }

  .battle[data-compact="true"] .battle-hq__title {
    font-size: 0.58rem;
  }

  .battle[data-compact="true"] .battle-hq__hp {
    font-size: 0.72rem;
  }

  .battle[data-compact="true"] .battle-hq__logistics,
  .battle[data-compact="true"] .battle-cp__value {
    gap: 0.04rem 0.2rem;
    font-size: 0.54rem;
  }

  .battle[data-compact="true"] .battle-hq__warning {
    font-size: 0.54rem;
    line-height: 1.1;
  }

  .battle[data-compact="true"] .battle-counters__slots,
  .battle[data-compact="true"] .battle-counter,
  .battle[data-compact="true"] .battle-counter__back {
    min-height: 0.95rem;
  }

  .battle[data-compact="true"] .battle__arena {
    gap: 0.12rem;
  }

  .battle[data-compact="true"] .battle-line {
    padding: 0.08rem 0.2rem;
  }

  .battle[data-compact="true"] .battle-line--front {
    padding-top: 0.14rem;
    padding-bottom: 0.12rem;
  }

  .battle[data-compact="true"] .battle-line--front::before {
    height: 0.22rem;
  }

  .battle[data-compact="true"] .battle-line--front::after {
    height: 0.2rem;
  }

  .battle[data-compact="true"] .battle-slot,
  .battle[data-compact="true"] .battle-line--front .battle-line__slots {
    min-height: 1.55rem;
  }

  .battle[data-compact="true"] .battle-handbar {
    box-sizing: border-box;
    max-height: 7rem;
    overflow-y: auto;
    padding: 0.1rem 0.35rem 0.08rem;
  }

  .battle[data-compact="true"] .battle-handbar__meta {
    font-size: 0.66rem;
  }

  .battle[data-compact="true"] .battle-hand {
    gap: 0.22rem;
    padding: 0.04rem 0 0.06rem;
  }

  .battle[data-compact="true"] .battle-hand__item .card-face {
    padding: 0.18rem;
    gap: 0.06rem;
  }

  .battle[data-compact="true"] .battle-hand__item .card-face__name {
    font-size: 0.64rem;
  }

  .battle[data-compact="true"] .battle-hand__item .card-face__text {
    font-size: 0.54rem;
    line-height: 1.15;
    -webkit-line-clamp: 1;
  }

  .battle[data-compact="true"] .battle-hand__item .card-face__detail {
    font-size: 0.5rem;
  }

  .battle[data-compact="true"] .battle-drawer {
    padding: 0.12rem 0.45rem;
  }

  .battle[data-compact="true"] .battle-log {
    gap: 0.06rem;
    padding: 0.08rem 0.35rem;
  }

  .battle[data-compact="true"] .battle-log__toggle {
    min-height: 18px;
    padding: 0.04rem 0.45rem;
    font-size: 0.62rem;
  }

  .battle[data-compact="true"] .battle-log__list--collapsed {
    max-height: 1.2em;
  }
}

/* 极短视口（110% 缩放叠加书签栏等，内容高不足 540px）：进一步收窄固定开销，
   手牌栏与战报仍在各自区域内滚动，战场尽量保持完整可见。 */
@media (max-height: 540px) {
  .battle[data-compact="true"] {
    gap: 0.06rem;
    padding: 0.06rem;
  }

  .battle[data-compact="true"] .battle-status {
    padding: 0.05rem 0.4rem;
  }

  .battle[data-compact="true"] .battle__arena {
    gap: 0.03rem;
  }

  .battle[data-compact="true"] .battle-line {
    gap: 0.1rem;
    padding: 0.04rem 0.18rem;
  }

  .battle[data-compact="true"] .battle-line--front {
    padding-top: 0.08rem;
    padding-bottom: 0.08rem;
  }

  .battle[data-compact="true"] .battle-slot,
  .battle[data-compact="true"] .battle-line--front .battle-line__slots {
    min-height: 1.35rem;
  }

  .battle[data-compact="true"] .battle-handbar {
    max-height: 6rem;
  }

  .battle[data-compact="true"] .battle-drawer {
    padding: 0.06rem 0.4rem;
  }

  .battle[data-compact="true"] .battle-log {
    gap: 0.03rem;
    padding: 0.05rem 0.3rem;
  }

  .battle[data-compact="true"] .battle-log__toggle {
    min-height: 16px;
    padding: 0.02rem 0.4rem;
  }

  .battle[data-compact="true"] .battle-log__list--collapsed {
    max-height: 1.1em;
  }
}