/*
 * css/battle.css — 横向战斗回放视觉层
 *
 * 核心逻辑：移动视窗裁切 5760×1080 三段战场，Canvas 军阵和 DOM 将领覆盖静态原画。
 * 关键决策：美术缺失时用完整的赛璐璐色块、地标轮廓和职业剪影降级；绝不显示裂图。
 *           天气 / 昼夜由 replay 键驱动；必杀停点只冻结播放，不参与战斗裁决。
 * 风格：成年比例、日韩二次元西幻；禁止拟真、3D、像素和幼齿 Q 版。
 * 本次改动：S23 扩大页面和全屏舞台；裁去烘焙前景并从原图采样干净地面，
 *           避免人物覆盖木桩／石墙。宫殿保留无遮挡地面，不新增美术文件。
 */

.battle-page { --battle-blue: #6fa6d9; --battle-gold: #d4aa4d; }

.battle-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}
.battle-intro h3 { margin: 3px 0 4px; font-size: 22px; font-weight: 500; letter-spacing: .12em; }
.battle-intro p { margin: 0; color: var(--ink-3); font-family: var(--sans); font-size: 11px; letter-spacing: .08em; }
.battle-kicker { color: var(--vermillion) !important; letter-spacing: .22em !important; }
.battle-intro .battle-condition { margin-top: 5px; color: var(--ink-4); font-size: 9px; letter-spacing: .14em; }
.battle-scenes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.battle-scenes button,
.battle-controls button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
  background: transparent;
  font: 400 11px/1 var(--sans);
  letter-spacing: .12em;
  cursor: pointer;
}
.battle-scenes button {
  border-color: var(--rule);
  color: var(--ink-3);
  background: rgba(251,249,244,.64);
  padding: 0 12px;
}
.battle-scenes button:hover,
.battle-scenes button.on { border-color: var(--vermillion); color: var(--vermillion); background: var(--paper-card); }
.battle-scenes button:focus-visible,
.battle-controls button:focus-visible { outline: 2px solid #f5cf78; outline-offset: 2px; }

.battle-shell {
  position: relative;
  color: #f2f0e9;
  background: #111a23;
  border: 1px solid #252d37;
  box-shadow: 0 18px 46px rgba(27,28,31,.18);
  overflow: hidden;
}
.battle-shell.is-loading::after {
  content: "正在调取回放";
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(13,19,27,.76);
  color: rgba(255,255,255,.7);
  font: 400 11px/1 var(--sans);
  letter-spacing: .24em;
}

/* 顶部 HUD：纸面外壳进入战斗后收紧成一条金属/羊皮混合信息带。 */
.battle-hud {
  display: grid;
  grid-template-columns: 1fr 170px 1fr;
  align-items: stretch;
  min-height: 72px;
  background:
    linear-gradient(90deg, rgba(62,107,147,.2), transparent 34%, transparent 66%, rgba(193,145,47,.2)),
    linear-gradient(180deg, #192431, #101820);
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.battle-side { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-width: 0; }
.battle-side--right { justify-content: flex-end; text-align: right; }
.battle-side b { display: block; font-size: 14px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-side small { display: block; margin-top: 1px; color: rgba(255,255,255,.42); font: 300 9px/1.4 var(--sans); letter-spacing: .18em; }
.battle-crest {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--side-color) 78%, white);
  color: #fff;
  background: color-mix(in srgb, var(--side-color) 72%, #111);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18);
}
.battle-total {
  --strength: 100%;
  position: relative;
  min-width: 84px;
  padding-bottom: 6px;
  color: rgba(255,255,255,.72);
  font: 500 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.battle-total::before,
.battle-total::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.13); }
.battle-total::after { right: auto; width: var(--strength); background: currentColor; transition: width .24s linear; }
.battle-phase { display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline: 1px solid rgba(255,255,255,.08); }
.battle-phase small { color: #c7a85d; font: 500 8px/1 var(--sans); letter-spacing: .26em; }
.battle-phase strong { margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: .18em; }
.battle-phase span { margin-top: 3px; color: rgba(255,255,255,.45); font: 400 10px/1 var(--sans); font-variant-numeric: tabular-nums; }

.battle-frontbar { position: relative; display: flex; height: 5px; overflow: visible; background: rgba(0,0,0,.32); }
.battle-frontbar > span { width: 50%; }
.battle-frontbar__left { background: linear-gradient(90deg, #3e6b93, rgba(111,166,217,.55)); }
.battle-frontbar__right { background: linear-gradient(90deg, rgba(212,170,77,.55), #c1912f); }
#front-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 9px;
  background: #fff6d5;
  box-shadow: 0 0 8px rgba(255,228,143,.8);
  transform: translateX(-50%);
  transition: left .18s linear;
  z-index: 3;
}
#front-marker span {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 4px;
  color: rgba(255,255,255,.58);
  background: rgba(10,15,21,.6);
  font: 400 8px/1 var(--sans);
  letter-spacing: .12em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 战场 */

.battle-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  background: #aab7c0;
}
.battle-world {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 300%;
  height: 100%;
  will-change: transform;
}
.battle-segment {
  position: relative;
  flex: 0 0 33.333333%;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248,232,205,.88) 0 41%, rgba(128,142,141,.72) 42% 57%, rgba(74,76,69,.96) 76%),
    linear-gradient(120deg, #b9c5cb, #d7c7aa);
}
.battle-segment::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(42,51,63,.03), rgba(16,23,31,.34)),
    repeating-linear-gradient(104deg, transparent 0 70px, rgba(255,255,255,.025) 72px 73px);
}
.battle-segment__art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.battle-segment__label {
  position: absolute;
  z-index: 7;
  left: 18px;
  top: 18px;
  color: rgba(255,255,255,.56);
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
  font: 400 9px/1 var(--sans);
  letter-spacing: .22em;
}
.battle-scenery { position: absolute; z-index: 3; display: block; pointer-events: none; }
.battle-scenery--far {
  left: -4%; right: -4%; bottom: 35%; height: 28%;
  opacity: .72;
  background: #59666a;
  clip-path: polygon(0 100%,0 66%,7% 42%,13% 62%,20% 22%,28% 53%,36% 31%,47% 68%,57% 35%,69% 58%,78% 25%,86% 52%,94% 38%,100% 61%,100% 100%);
}
.battle-scenery--near { left: 0; right: 0; bottom: 22%; height: 22%; opacity: .78; }
.battle-ground {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0; height: 34%;
  background:
    linear-gradient(175deg, transparent 0 10%, rgba(255,255,255,.08) 11% 12%, transparent 13%),
    repeating-linear-gradient(170deg, transparent 0 54px, rgba(21,25,24,.13) 56px 58px),
    linear-gradient(180deg, #756e5b, #3e433d);
}
.battle-segment.has-art .battle-scenery { opacity: .12; }
.battle-segment.has-art .battle-ground { opacity: .18; }

/* 雾湖岸 */
.battle-shell[data-scene="field"] .battle-segment {
  background: linear-gradient(180deg, #adc5d4 0 42%, #c9d5cd 43% 56%, #718677 57% 72%, #4b5549 100%);
}
.battle-shell[data-scene="field"] .battle-scenery--far { background: #667c82; opacity: .58; }
.battle-shell[data-scene="field"] .battle-scenery--near {
  background: repeating-linear-gradient(83deg, transparent 0 46px, rgba(46,72,61,.8) 47px 51px, transparent 52px 80px);
}
.battle-shell[data-scene="field"] .battle-ground { background: linear-gradient(180deg, rgba(153,181,169,.6), #56685b 44%, #34453c); }

/* 普通城池：中段是城门，两侧是连续屋脊。 */
.battle-shell[data-scene="city"] .battle-segment { background: linear-gradient(180deg, #b7c7d3 0 44%, #8f8d83 45% 67%, #555044 68%); }
.battle-shell[data-scene="city"] .battle-scenery--far {
  bottom: 32%; height: 36%; background: #646465;
  clip-path: polygon(0 100%,0 52%,7% 52%,7% 32%,11% 21%,15% 32%,15% 58%,24% 58%,24% 40%,30% 40%,30% 16%,35% 16%,35% 46%,43% 46%,43% 27%,48% 12%,53% 27%,53% 54%,62% 54%,62% 36%,70% 36%,70% 18%,77% 18%,77% 50%,86% 50%,86% 30%,92% 21%,96% 30%,96% 56%,100% 56%,100% 100%);
}
.battle-shell[data-scene="city"] .battle-segment--center .battle-scenery--near {
  left: 28%; right: 28%; bottom: 30%; height: 36%;
  background: #48484a;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,70% 100%,70% 48%,30% 48%,30% 100%);
}

/* 边境要塞：厚城墙与双塔，接战区留在中下方。 */
.battle-shell[data-scene="fortress"] .battle-segment { background: linear-gradient(180deg, #aebdca 0 45%, #777a78 46% 67%, #464642 68%); }
.battle-shell[data-scene="fortress"] .battle-scenery--far {
  bottom: 31%; height: 42%; background: #575b5e;
  clip-path: polygon(0 100%,0 28%,6% 28%,6% 17%,13% 17%,13% 28%,38% 28%,38% 6%,45% 6%,45% 0,55% 0,55% 6%,62% 6%,62% 28%,87% 28%,87% 17%,94% 17%,94% 28%,100% 28%,100% 100%);
}
.battle-shell[data-scene="fortress"] .battle-segment--center .battle-scenery--near {
  left: 34%; right: 34%; bottom: 30%; height: 32%; background: #303438;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,76% 100%,76% 44%,24% 44%,24% 100%);
}

/* 宫殿：高柱与帷幕，色温更暖，仍保持横向可行军地面。 */
.battle-shell[data-scene="palace"] .battle-segment { background: linear-gradient(180deg, #d1b982 0 13%, #7e5262 14% 46%, #806e5b 47% 70%, #423c39 71%); }
.battle-shell[data-scene="palace"] .battle-scenery--far {
  inset: 8% 6% 31%; height: auto; opacity: .72;
  background: repeating-linear-gradient(90deg, #b9a27a 0 7%, #6f5960 7.5% 17%, #b9a27a 17.5% 24%);
  clip-path: none;
}
.battle-shell[data-scene="palace"] .battle-scenery--near { left: 0; right: 0; bottom: 27%; height: 7%; background: #c4a665; }
.battle-shell[data-scene="palace"] .battle-ground { background: repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 1px, transparent 1px 74px), linear-gradient(180deg, #776657, #373233); }

.battle-vignette {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 86px rgba(8,12,17,.5);
  background: linear-gradient(180deg, rgba(5,9,13,.18), transparent 24%, transparent 70%, rgba(5,9,13,.22));
}

/* replay 给出离散气象键，CSS 只负责表现；完全没有美术时也能看出时段和天气。 */
.battle-atmosphere {
  position: absolute;
  z-index: 11;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: background .35s ease;
}
.battle-shell[data-time="dawn"] .battle-atmosphere { background: linear-gradient(180deg, rgba(245,174,120,.20), rgba(123,157,181,.05) 48%, transparent 72%); }
.battle-shell[data-time="dusk"] .battle-atmosphere { background: linear-gradient(180deg, rgba(111,72,107,.25), rgba(224,147,83,.12) 48%, rgba(26,31,44,.12)); }
.battle-shell[data-time="night"] .battle-atmosphere { background: linear-gradient(180deg, rgba(12,26,55,.55), rgba(15,27,49,.34) 55%, rgba(6,12,24,.40)); mix-blend-mode: multiply; }
.battle-shell[data-weather="overcast"] .battle-atmosphere { background-color: rgba(44,55,66,.20); }
.battle-shell[data-weather="mist"] .battle-atmosphere::before,
.battle-shell[data-weather="mist"] .battle-atmosphere::after {
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226,236,235,.34), rgba(207,222,222,.14) 48%, transparent 72%);
  filter: blur(12px);
  animation: battle-mist 13s ease-in-out infinite alternate;
}
.battle-shell[data-weather="mist"] .battle-atmosphere::before { top: 28%; }
.battle-shell[data-weather="mist"] .battle-atmosphere::after { top: 53%; animation-delay: -6s; animation-direction: alternate-reverse; }
.battle-shell[data-weather="rain"] .battle-atmosphere > i {
  position: absolute;
  inset: -35% 0 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='130'%3E%3Cpath d='m28 22-2 8m110 48-2 7m-54 31-2 8' stroke='%23e2eef4' stroke-width='1'/%3E%3C/svg%3E");
  animation: battle-rain .62s linear infinite;
}
.battle-shell[data-weather="rain"] .battle-atmosphere > i + i { left: 12%; opacity: .08; animation-duration: .83s; animation-delay: -.35s; }
@keyframes battle-mist { to { transform: translateX(7%) scale(1.06); opacity: .72; } }
@keyframes battle-rain { to { transform: translate(-5%,35%); } }

/* ---------------------------------------------------------------- 单位 */

.battle-squad {
  position: absolute;
  z-index: 9;
  width: 144px;
  height: 150px;
  transform: translate(-50%, -100%);
  color: #f6f2e9;
  filter: drop-shadow(0 7px 4px rgba(9,12,14,.35));
  will-change: left, top;
}
.battle-squad.side--right { z-index: 8; }
.battle-followers { position: absolute; inset: 42px 12px 28px; opacity: .7; }
.battle-followers i {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.3);
  background: color-mix(in srgb, var(--side-color) 74%, #1b1d21);
  clip-path: polygon(28% 0,72% 0,85% 22%,78% 100%,22% 100%,15% 22%);
}
.battle-followers i:nth-child(1) { left: 3px; transform: scale(.86); opacity: .68; }
.battle-followers i:nth-child(2) { right: 3px; transform: scale(.9); opacity: .78; }
.battle-followers i:nth-child(3) { left: 50%; margin-left: -13px; transform: translateY(-6px); }
.battle-sprite {
  --frame-x: 0%;
  --frame-y: 0%;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  width: 128px;
  height: 100px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: var(--frame-x) var(--frame-y);
  transform-origin: 50% 76.89%;
}
.battle-squad.side--right .battle-sprite.has-art { transform: translateX(-50%) scaleX(-1); }
.battle-sprite:not(.has-art)::before {
  content: "";
  position: absolute;
  left: 31%; top: 4%;
  width: 38%; height: 78%;
  border: 2px solid rgba(255,255,255,.4);
  background:
    linear-gradient(150deg, rgba(255,255,255,.32) 0 19%, transparent 20%),
    linear-gradient(180deg, color-mix(in srgb, var(--side-color) 84%, white), color-mix(in srgb, var(--side-color) 62%, #171a20));
  clip-path: polygon(34% 0,66% 0,78% 14%,72% 26%,91% 97%,58% 100%,50% 63%,42% 100%,9% 97%,28% 26%,22% 14%);
  box-shadow: 0 0 0 2px rgba(15,19,24,.16);
}
.battle-sprite:not(.has-art)::after {
  content: "";
  position: absolute;
  left: 42%; top: 0;
  width: 16%; aspect-ratio: 1;
  border-radius: 48% 48% 42% 42%;
  background: #f0d0b6;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--side-color) 70%, #222);
}
.battle-sprite__mark {
  position: absolute;
  z-index: 2;
  left: 50%; top: 41%;
  transform: translate(-50%,-50%);
  color: #fff;
  font: 700 20px/1 var(--serif);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.battle-sprite.has-art .battle-sprite__mark { display: none; }

.role--archer .battle-sprite:not(.has-art)::before { clip-path: polygon(34% 0,66% 0,79% 14%,70% 38%,86% 100%,14% 100%,30% 38%,21% 14%); }
.role--mage .battle-sprite:not(.has-art)::before { background: linear-gradient(180deg, #eadbff, color-mix(in srgb, var(--side-color) 58%, #33284b)); clip-path: polygon(24% 0,76% 0,66% 22%,94% 100%,6% 100%,34% 22%); }
.role--priest .battle-sprite:not(.has-art)::before { background: linear-gradient(180deg, #fff9dc, color-mix(in srgb, var(--side-color) 48%, #a99062)); }
.role--guard .battle-sprite:not(.has-art)::before { width: 46%; left: 27%; }
.role--cavalry .battle-followers { transform: scaleX(1.22); }

.battle-squad__label {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 15px;
  min-width: 128px;
  padding: 4px 7px 5px;
  transform: translateX(-50%);
  text-align: center;
  background: rgba(10,15,20,.76);
  border-left: 2px solid var(--side-color);
  backdrop-filter: blur(3px);
}
.battle-squad__label b { display: block; font-size: 10px; font-weight: 500; letter-spacing: .05em; white-space: nowrap; }
.battle-squad__label small { display: block; margin-top: 2px; color: rgba(255,255,255,.54); font: 400 8px/1 var(--sans); letter-spacing: .08em; }
.battle-squad.tier--s .battle-squad__label { border-left-color: #f0c65a; box-shadow: 0 0 0 1px rgba(240,198,90,.34), 0 0 18px rgba(240,198,90,.18); }
.battle-squad.tier--s .battle-sprite { filter: drop-shadow(0 0 9px rgba(255,216,111,.72)); }
.battle-squad.tier--s .battle-sprite__mark { color: #fff1af; }
.battle-squad__bars { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 6px; display: grid; gap: 2px; }
.battle-squad__bars span { display: block; height: 3px; background: rgba(4,8,11,.62); overflow: hidden; }
.battle-squad__bars i { display: block; height: 100%; transition: width .22s linear; }
.battle-squad__hp i { background: #c9d8bf; }
.battle-squad__energy i { background: #e5b953; box-shadow: 0 0 5px #e5b953; }

.battle-squad[data-action="move"] .battle-followers,
.battle-squad[data-action="move"] .battle-sprite:not(.has-art) { animation: battle-march .48s steps(2,end) infinite; }
.battle-squad[data-action="attack"] .battle-sprite:not(.has-art) { animation: battle-strike .42s ease-out both; }
.battle-squad.is-hit { animation: battle-hit .28s linear; }
.battle-squad.is-healed::after {
  content: "+";
  position: absolute;
  z-index: 7;
  left: 50%; top: 12%;
  color: #fff4a5;
  font: 700 28px/1 var(--sans);
  text-shadow: 0 0 10px #d9c45b;
  animation: battle-float .9s ease-out both;
}
.battle-squad.is-broken { filter: grayscale(.55) drop-shadow(0 7px 4px rgba(9,12,14,.35)); opacity: .78; }
.battle-squad.is-casting .battle-sprite { filter: drop-shadow(0 0 10px #fff0a2); }

@keyframes battle-march { 50% { transform: translateX(-50%) translateY(-3px); } }
@keyframes battle-strike { 55% { transform: translateX(-43%) rotate(3deg); } }
@keyframes battle-hit { 35% { transform: translate(-50%,-100%) translateX(-8px); filter: brightness(1.8); } }
@keyframes battle-float { to { transform: translateY(-30px); opacity: 0; } }

/* ---------------------------------------------------------------- 特效与结果 */

.battle-fx-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.battle-effect {
  position: absolute;
  display: grid;
  place-items: center;
  width: 180px;
  height: 90px;
  transform: translate(-50%,-50%);
  color: #fff;
  font: 500 12px/1 var(--serif);
  letter-spacing: .18em;
  text-shadow: 0 2px 7px rgba(0,0,0,.8);
  border-radius: 50%;
  animation: battle-burst .85s ease-out both;
}
.battle-effect--attack { background: radial-gradient(ellipse, rgba(255,245,222,.72), rgba(211,118,68,.28) 34%, transparent 70%); }
.battle-effect--ultimate { width: 270px; height: 170px; background: radial-gradient(ellipse, rgba(255,247,199,.88), rgba(104,165,222,.42) 32%, rgba(95,60,133,.26) 52%, transparent 72%); }
.battle-effect--heal { background: radial-gradient(ellipse, rgba(255,250,193,.72), rgba(231,204,100,.23) 45%, transparent 72%); }
.battle-shell.fx-off .battle-effect { display: none; }
@keyframes battle-burst { from { opacity: 0; transform: translate(-50%,-50%) scale(.28); } 32% { opacity: 1; } to { opacity: 0; transform: translate(-50%,-50%) scale(1.35); } }

.battle-announcement {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 15%;
  max-width: min(78%, 660px);
  padding: 8px 16px;
  transform: translateX(-50%);
  color: #fff9e8;
  background: linear-gradient(90deg, transparent, rgba(11,16,23,.8) 15% 85%, transparent);
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  text-shadow: 0 2px 6px #000;
}
.battle-ultimate {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: min(420px, 84%);
  padding: 24px 26px;
  transform: translate(-50%,-50%);
  text-align: center;
  background: linear-gradient(145deg, rgba(17,27,40,.96), rgba(38,31,48,.96));
  border: 1px solid rgba(241,210,137,.68);
  box-shadow: 0 0 0 100vmax rgba(7,11,17,.46), 0 18px 52px rgba(0,0,0,.45);
}
.battle-ultimate[hidden] { display: none; }
.battle-ultimate small { color: #d7b864; font: 500 8px/1 var(--sans); letter-spacing: .26em; }
.battle-ultimate strong { display: block; margin-top: 10px; font-size: 24px; font-weight: 500; letter-spacing: .16em; }
.battle-ultimate p { margin: 9px 0 16px; color: rgba(255,255,255,.64); font: 300 10px/1.7 var(--sans); }
.battle-ultimate button {
  min-height: 38px;
  padding: 0 20px;
  color: #171b22;
  background: #e6c46f;
  border: 1px solid #f5d98f;
  font: 500 11px/1 var(--sans);
  letter-spacing: .14em;
  cursor: pointer;
}
.battle-result {
  position: absolute;
  z-index: 18;
  inset: 26% 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  text-align: center;
  background: rgba(15,22,30,.88);
  border: 1px solid rgba(241,210,137,.52);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.battle-result[hidden] { display: none; }
.battle-result small { color: #d7b864; font: 500 8px/1 var(--sans); letter-spacing: .28em; }
.battle-result strong { margin-top: 10px; font-size: 24px; font-weight: 500; letter-spacing: .16em; }
.battle-result p { margin: 10px 0 0; color: rgba(255,255,255,.66); font: 300 11px/1.8 var(--sans); }
.battle-orient { display: none; }

/* ---------------------------------------------------------------- 总览与控制 */

.battle-minimap {
  position: relative;
  height: 28px;
  margin: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(62,107,147,.38), transparent 37% 63%, rgba(193,145,47,.38)),
    linear-gradient(180deg, #18232c, #121a21);
  overflow: hidden;
}
.battle-minimap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.12); }
.battle-minimap__landmark { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); color: rgba(255,255,255,.42); font: 400 8px/1 var(--sans); letter-spacing: .16em; }
.battle-minimap__camera { position: absolute; top: 2px; bottom: 2px; border: 1px solid rgba(255,255,255,.62); background: rgba(255,255,255,.04); }
.battle-minimap__front { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff0aa; transform: translateX(-50%); }
.battle-minimap__actor { position: absolute; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--side-color); transform: translate(-50%,-50%); box-shadow: 0 0 4px rgba(0,0,0,.5); }
.battle-minimap__actor.side--right { top: 10px; }

.battle-controls { display: flex; align-items: center; gap: 6px; padding: 10px 14px 13px; background: #101820; }
.battle-controls button { min-width: 72px; padding: 0 12px; }
.battle-controls button:hover,
.battle-controls button[aria-pressed="true"] { color: #f1d48a; border-color: rgba(241,212,138,.54); }
.battle-controls button:disabled { opacity: .46; cursor: wait; }
.battle-progress { flex: 1; height: 2px; margin-left: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.battle-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fa6d9, #f0d580); }

/* ---------------------------------------------------------------- 编成卡 */

.battle-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.battle-roster h4 { margin: 0 0 9px; color: var(--ink-3); font: 400 10px/1 var(--sans); letter-spacing: .18em; }
.battle-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--rule); background: var(--rule); gap: 1px; }
.battle-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; background: var(--paper-card); }
.battle-card.tier--s { border-color: #c79c35; box-shadow: inset 3px 0 #d8ad48, 0 0 0 1px rgba(199,156,53,.12); }
.battle-card__mark { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 32px; color: #fff; background: var(--side-color); font-size: 14px; }
.battle-card > div { min-width: 0; flex: 1; }
.battle-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.battle-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: var(--ink-3); font: 300 9px/1.4 var(--sans); }
.battle-card em { color: var(--ink-3); font: 500 11px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.battle-card.is-broken { opacity: .48; }

/* 战报数字由 replay.outcome.report 直接提供；前端不从动画事件倒推战果。 */
.battle-report { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 16px; }
.battle-report[hidden] { display: none; }
.battle-report__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.battle-report__head small { color: var(--vermillion); font: 500 8px/1 var(--sans); letter-spacing: .2em; }
.battle-report__head h4 { margin: 5px 0 0; font-size: 17px; font-weight: 500; letter-spacing: .12em; }
.battle-report__head p { margin: 0; color: var(--ink-3); font: 300 10px/1.6 var(--sans); }
.battle-report__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.battle-report-card { padding: 14px; background: var(--paper-card); border-top: 3px solid var(--side-color); }
.battle-report-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.battle-report-card__head b { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.battle-report-card__head span { color: var(--ink-4); font: 400 9px/1 var(--sans); letter-spacing: .16em; }
.battle-report-card__head span.is-winner { color: var(--vermillion); }
.battle-report-card__metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 8px; margin: 14px 0 0; }
.battle-report-card__metrics div { min-width: 0; }
.battle-report-card__metrics dt { color: var(--ink-4); font: 400 8px/1.3 var(--sans); letter-spacing: .08em; }
.battle-report-card__metrics dd { margin: 4px 0 0; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .battle-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .battle-scenes { justify-content: flex-start; }
  .battle-hud { grid-template-columns: 1fr 104px 1fr; min-height: 64px; }
  .battle-side { padding: 8px 9px; gap: 7px; }
  .battle-side b { font-size: 11px; }
  .battle-crest { width: 30px; height: 30px; font-size: 12px; }
  .battle-total { min-width: 58px; font-size: 9px; }
  .battle-viewport { min-height: 0; }
  .battle-squad { width: 108px; height: 118px; }
  .battle-sprite { width: 96px; height: 75px; }
  .battle-followers { inset: 34px 7px 25px; }
  .battle-followers i { width: 20px; height: 40px; }
  .battle-squad__label { min-width: 100px; padding: 3px 5px; }
  .battle-squad__label b { font-size: 8px; }
  .battle-squad__label small { display: none; }
  .battle-squad__bars { left: 8px; right: 8px; }
  .battle-controls { flex-wrap: wrap; }
  .battle-controls button { flex: 1 1 76px; min-height: 44px; }
  .battle-progress { flex-basis: 100%; order: -1; margin: 0 0 5px; }
  .battle-roster { grid-template-columns: 1fr; }
  .battle-report__head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .battle-report__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) and (orientation: portrait) {
  .battle-shell { margin-inline: -12px; }
  .battle-hud { grid-template-columns: 1fr 82px 1fr; }
  .battle-side > div { display: none; }
  .battle-side { justify-content: flex-start; }
  .battle-side--right { justify-content: flex-end; }
  .battle-total { min-width: 46px; font-size: 8px; }
  .battle-phase strong { font-size: 12px; }
  .battle-phase small { display: none; }
  .battle-viewport { aspect-ratio: 16 / 10; }
  .battle-orient {
    display: block;
    position: absolute;
    z-index: 17;
    right: 8px;
    bottom: 8px;
    color: rgba(255,255,255,.52);
    font: 400 8px/1 var(--sans);
    letter-spacing: .06em;
  }
  .battle-announcement { top: 9%; max-width: 90%; font-size: 10px; }
  .battle-result { inset: 22% 10%; }
  .battle-result strong { font-size: 18px; }
  .battle-ultimate { width: 88%; padding: 19px 16px; }
  .battle-ultimate strong { font-size: 18px; }
  .battle-card { min-width: 164px; }
  .battle-cards { display: flex; overflow-x: auto; }
  .battle-cards .battle-card { flex: 0 0 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-squad,
  .battle-sprite,
  .battle-followers,
  .battle-effect,
  .battle-squad.is-hit,
  .battle-squad.is-healed::after { animation: none !important; }
  .battle-atmosphere,
  .battle-atmosphere::before,
  .battle-atmosphere::after,
  .battle-atmosphere > i { animation: none !important; }
  #front-marker,
  .battle-squad__bars i { transition: none; }
}



/* S18: stage artwork stays static. Whole-army overview uses the central painted
   scene; close view moves over the three original scene panels. */
.battle-shell{background:#f7f4eb;color:#334b48;border-color:#bfcaba;box-shadow:0 12px 30px #53634218}
.battle-hud{background:linear-gradient(90deg,#dce7ed,transparent 40% 60%,#f0e5c6),#fffdf5;border-bottom-color:#cbd3c3}
.battle-side small,.battle-phase span{color:#63746d}.battle-phase{border-color:#d4d9cc}.battle-phase small{color:#8a692e}
.battle-total{color:#3c5a56}.battle-total:before{background:#c9d4c7}.battle-crest{box-shadow:none}
.battle-viewport{width:100%;min-width:0;aspect-ratio:16/10;min-height:440px;background-size:cover;background-position:center 60%}
.battle-world{width:100%}.battle-armies{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.is-overview .has-scene-art .battle-segment{visibility:visible}
.battle-segment.has-art .battle-scenery,.battle-segment.has-art .battle-ground,.battle-segment.has-art:before{display:none}
.battle-segment:before{background:linear-gradient(180deg,#ffffff0a,transparent)}
.battle-ground{background:linear-gradient(180deg,#b5b699,#8c9e77)}
.battle-vignette{box-shadow:inset 0 -28px 55px #203a2420;background:none}
.battle-shell[data-time="dusk"] .battle-atmosphere{background:linear-gradient(180deg,#efbe7a16,transparent 65%)}
.battle-shell[data-time="night"] .battle-atmosphere{background:linear-gradient(180deg,#20396635,#19354f12);mix-blend-mode:multiply}
.battle-shell[data-weather="overcast"] .battle-atmosphere{background-color:#5268770d}
.battle-squad{width:106px;height:104px;filter:drop-shadow(0 3px 2px #263b292b);pointer-events:none}
.battle-sprite{width:70px;height:72px;top:2px}
.battle-sprite svg{display:block;width:100%;height:100%}
.battle-squad.side--right .battle-sprite:not(.has-art){transform:translateX(-50%) scaleX(-1)}
.battle-sprite:not(.has-art):before,.battle-sprite:not(.has-art):after{display:none}
.battle-sprite.has-art svg{display:none}
.battle-squad__label{min-width:94px;bottom:12px;padding:3px 5px;background:#fffbeded;border:1px solid #b7c7bb;border-left:3px solid var(--side-color);color:#30483e;backdrop-filter:none}
.battle-squad__label b{font-size:9px}.battle-squad__label small{display:block;color:#526953;font:9px var(--sans);margin-top:0}
.battle-squad__bars{left:9px;right:9px;bottom:4px;gap:1px}.battle-squad__bars span{height:2px;background:#788c7180}
.battle-squad__hp i{background:#a7ca87}.battle-squad__energy i{background:#e6bd54;box-shadow:none}
.battle-squad.is-broken{filter:grayscale(.55);opacity:.65}
.battle-squad[data-action="move"] .battle-sprite:not(.has-art){animation:none}
.battle-squad[data-action="attack"] .battle-sprite:not(.has-art){animation:none}
.battle-announcement{top:8%;background:#fffaf0e8;color:#3e5241;text-shadow:none;border:1px solid #c5cbb5;border-radius:3px;font-size:12px}
.battle-minimap{background:linear-gradient(90deg,#b7cedb,transparent 40% 60%,#e9d39a),#edf0df;border-color:#cbd4be}
.battle-minimap:before{background:#85977a4d}.battle-minimap__landmark{color:#617259}.battle-minimap__camera{border-color:#4a644d;background:#ffffff18}.battle-minimap__front{background:#8b6627}
.battle-controls{background:#f6f5eb;border-top:1px solid #d6dec8}.battle-controls button{color:#52664f;border-color:#c2cdb3;background:#fffdf5;min-width:64px;letter-spacing:.02em}
.battle-controls button:hover,.battle-controls button[aria-pressed="true"]{color:#73551e;border-color:#baa166;background:#f2e8c9}
.battle-progress{background:#d6ddc8}.battle-shell.fx-off .battle-atmosphere>i{display:none}
.battle-shell.is-paused .battle-atmosphere,.battle-shell.is-paused .battle-atmosphere *{animation-play-state:paused}
.battle-shell.is-paused *{animation-play-state:paused!important}
.battle-total:after,#front-marker,.battle-squad__bars i{transition:none}
.battle-shell.is-overview .battle-viewport{aspect-ratio:2.5;min-height:360px}
.battle-minimap{cursor:pointer;touch-action:manipulation;height:36px}
.battle-minimap:focus-visible{outline:2px solid #94753f;outline-offset:-2px}
.battle-roster>div,.battle-cards,.battle-card{min-width:0}
.battle-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.battle-card>div{min-width:0}.battle-card b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-result,.battle-ultimate{background:#fffaf0f5;color:#344b43;border-color:#bba575;box-shadow:0 12px 35px #30423630}
.battle-result p,.battle-ultimate p{color:#65766a}.battle-result small,.battle-ultimate small{color:#97713c}
.battle-ultimate button{background:#e8d5a7;color:#5c4b26;border-color:#b69b62}
.battle-world,.battle-shell,.battle-roster{max-width:100%}
.battle-world{max-width:none}
/* Clean floor is a displayed crop of the original art, not a new bitmap.
   The foreground-containing bottom 28% is excluded; no soldier walks over it. */
.page-battle .wrap{max-width:1880px;padding-inline:24px}
.battle-segment.uses-open-ground .battle-segment__art{height:86.111%;object-fit:fill;clip-path:inset(0 0 28% 0)}
.battle-open-ground{position:absolute;inset:55% 0 0;z-index:2;background-size:100% 714.286%;background-position:center 67.442%;background-repeat:no-repeat;mask-image:linear-gradient(transparent,#000 12%);pointer-events:none}
.battle-segment.is-field-ground .battle-segment__art{height:100%;clip-path:inset(0 0 17% 0)}
.is-field-ground .battle-open-ground{inset:74% 0 0;background-size:100% 333.333%;background-position:center 70%;mask-image:linear-gradient(transparent,#000 18%)}
.has-expanded-battle{overflow:hidden}
.battle-shell.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100%;display:flex;flex-direction:column;background:#e6e4d7;border:0}
.battle-shell.is-expanded .battle-viewport{flex:1;min-height:0;aspect-ratio:auto}
.battle-shell.is-expanded .battle-hud,.battle-shell.is-expanded .battle-controls,.battle-shell.is-expanded .battle-minimap{flex-shrink:0}
@media(max-width:820px){.page-battle .wrap{padding-inline:12px}}
@media(max-width:820px){.battle-viewport{min-height:300px;aspect-ratio:1.9}.battle-squad{width:74px;height:79px}.battle-sprite{width:49px;height:51px}.battle-squad__label{min-width:66px;padding:1px 3px;bottom:10px}.battle-squad__label b{font-size:8px}.battle-squad__label small{font-size:8px}.battle-squad__bars{left:5px;right:5px}.battle-controls button{flex:1 1 75px;padding:0 8px}}
@media(max-width:520px){.battle-shell{margin-inline:0}.battle-viewport{min-height:260px;aspect-ratio:1.5}.battle-shell.is-overview .battle-viewport{min-height:260px;aspect-ratio:1.5}.battle-squad{width:55px;height:59px}.battle-sprite{width:35px;height:37px;top:0}.battle-squad__label{min-width:50px;max-width:66px;bottom:7px;padding:0 2px}.battle-squad__label b{font-size:7px;max-width:58px;overflow:hidden;text-overflow:ellipsis}.battle-squad__label small{font-size:7px;line-height:1.2}.battle-squad__bars{bottom:2px;left:3px;right:3px}.battle-orient{display:none}.battle-announcement{font-size:10px}.battle-intro h3{font-size:18px}.battle-cards{display:grid;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr))}.battle-cards .battle-card{min-width:0;padding:9px;gap:5px;grid-template-columns:25px minmax(0,1fr) auto}.battle-card__mark{width:25px;height:29px;font-size:11px}.battle-card b{font-size:10px}.battle-card small{font-size:8px}.battle-controls button{min-height:44px}.battle-roster{gap:16px}}