/* 战斗界面的左下角战况面板 #battleBoard（缩成小牌子 #battleBoardChip）、战后战报 #battleReport：三处同一份（S4 M3，docs/agent/GMTOOL.md 8.0）。
   游戏（index.html，挂在 html[data-ui="v2"] 下）、资源库「原版战斗」「技能实验室」（res/index.html，挂在 .sgBattleHost 下）都引这一份，
   逻辑在 battle-ui.js（BATTLEFX.md 16.5 / 16.7）。2026-10-27 从 ui-v2.css 原样搬来，只把作用域从 html[data-ui="v2"] 放宽成
   :is(html[data-ui="v2"], .sgBattleHost)；:is() 取里面最高的那个，权重和搬家前一样（一个属性），游戏里谁盖谁不变。
   右上角打击数字是战斗画布上画的（battle-fx.js drawTally，跟数字主题走），不在这里。
   面板贴在战斗层左下角（左 12u、战斗层下沿往上 12u），宽 348u，半透明深色底透出场地，标题行木纹金线（和顶栏同一套）。
   一行一个座位（人 + 宠）：整行是一根按名次第一算满的彩条（自己金色、宠物那段同色浅一些、别人各一色），上面写名次、名字、数、占比。
   行按 --i 摆（名次变了滑过去），行高 --bbRow、行数 --n 由 battle-ui.js 量了写：指令盘在上面时压矮行，压到最矮也放不下、
   或者菜单盖过来就先缩成小牌子；点目标时整块抬到左下「返回」上面（transform）、变淡、点得穿（.aim）。聊天展开时藏起来。
   改左、下、宽、标题行高、行高、留白时，battle-ui.js 开头的 EDGE / BOARD_W / HEAD_H / ROW_H / PAD 一起改。
   @keyframes brIn 也在这里（ui-v2.css 里 GM 面板 #gm .gvRow 借它，两处同一个页面都载这一份）。
   S4 M4（2026-10-28，老板 10-27 21:3x「注意下ui和字体颜色的搭配，防止文字无法看见」）：只改颜色 / 透明度，三处一起变，尺寸一格没动——
   面板底不透明度 .56/.62 → .76/.8（亮场地上白字也看得清）；标题行木纹换深一档（只这块，不动 --wood-bar）；「1回合」不再 .85；
   选中的页签金底改成淡金透色、字改浅金（金底圆角外露出深底，一种字色两头都配不上）；彩条上压一层 .62 黑（自己金条 / 宠物浅色条
   上的白字、金字原来 1.1～1.6），宠物那段 .7；没数的行 .55 → .8；自己那行的金框 .9 → .12。判据 node web/tools/contrast_check.js --target res。 */

/* 资源库两个战斗页没有游戏的壳（#shell 定 --u 和颜色、字号）：舞台框挂 .sgBattleHost，在这里补上面板用到的那几样。
   值和 ui-v2.css 开头 html[data-ui="v2"] / #shell 那两段一样（改那边的颜色、字号时这里一起改）；--u 按舞台框宽 ÷ 720，
   最小 0.9px、最大 1.4px（舞台宽 650～1000 时和游戏同一个比例，再大再小也不至于面板挡住半个场地）。--botH 是 0：舞台下面没有游戏的底栏。 */
.sgBattleHost {
  position: relative;
  container-type: inline-size;
  --u: clamp(0.9px, calc(100cqw / 720), 1.4px);
  --botH: 0px;
  --sg-paper-hi: #fbe8bd;
  --sg-paper-lo: #e9c88c;
  --sg-wood: #7a4a1e;
  --sg-wood-dk: #3a220c;
  --sg-ink: #4a2c12;
  --sg-ink-soft: #7a5a3a;
  --sg-gold-hi: #ffd977;
  --sg-gold: #e6a817;
  --sg-gold-line: #e0a640;
  --sg-font: "Noto Sans SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --fs-xs: max(10px, calc(19 * var(--u)));
  --fs-s: max(11px, calc(22 * var(--u)));
  --fs-m: max(12px, calc(25 * var(--u)));
  --fs-l: max(14px, calc(30 * var(--u)));
  --fs-xl: max(17px, calc(38 * var(--u)));
  --wood-bar:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(13 * var(--u))),
    linear-gradient(180deg, #a06c38 0%, #7d4f24 48%, #5e3a18 100%);
  --paper-bg: linear-gradient(var(--sg-paper-hi), var(--sg-paper-lo));
}
.sgBattleHost #battleBoard button,
.sgBattleHost #battleBoardChip { cursor: pointer; }

:is(html[data-ui="v2"], .sgBattleHost) #battleBoard,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip {
  position: absolute; z-index: 3;
  left: calc(12 * var(--u)); bottom: calc(var(--botH) + 12 * var(--u));
  box-sizing: border-box;
  pointer-events: auto;
  transform-origin: 0 100%;
  transition: transform 200ms ease-out, opacity 160ms linear;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard.aim,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip.aim { opacity: 0.38; pointer-events: none; }
html[data-ui="v2"] #playHud:has(#hudBot.chatOpen) #battleBoard,
html[data-ui="v2"] #playHud:has(#hudBot.chatOpen) #battleBoardChip { display: none; }
@keyframes bbIn { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard {
  --bbRow: 27;
  --n: 1;
  width: calc(348 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(30, 18, 7, 0.76), rgba(12, 7, 2, 0.8));
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.8), 0 0 0 calc(4 * var(--u)) rgba(58, 34, 12, 0.55), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.35);
  color: #f6e8cb;
  overflow: hidden;
  animation: bbIn 200ms cubic-bezier(.2, .9, .3, 1.15);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbHead {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(36 * var(--u)); padding: 0 calc(5 * var(--u));
  box-sizing: border-box;
  /* 木纹同顶栏一套的纹路，颜色深一档（--wood-bar 亮的那端 #a06c38 上「1回合」只有 2.7）。 */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 calc(3 * var(--u)), transparent calc(3 * var(--u)) calc(13 * var(--u))),
    linear-gradient(180deg, #6a4420 0%, #553519 48%, #3e260f 100%);
  box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--sg-gold-line);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbTabs {
  flex: none; display: flex; padding: calc(2 * var(--u));
  border-radius: 999px; background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(0, 0, 0, 0.5);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbTab {
  height: calc(26 * var(--u)); padding: 0 calc(7 * var(--u));
  border: 0; border-radius: 999px; background: none;
  color: #e6cf9f; font: 800 var(--fs-xs)/1 var(--sg-font); white-space: nowrap;
}
/* 选中：淡金透色底 + 浅金字（实心金底配深字时，圆角外那一圈深底上深字看不见）。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbTab.on { background: rgba(255, 217, 119, 0.28); color: #ffe9a8; box-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, 0.4); }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbSum {
  flex: 1; min-width: 0; overflow: hidden; text-align: right; white-space: nowrap;
  color: #ffd76a; font: 900 var(--fs-s)/1 var(--sg-font); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRound { flex: none; color: #f0dcb4; font: 700 var(--fs-xs)/1 var(--sg-font); white-space: nowrap; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbMin {
  flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: calc(2 * var(--u));
  box-sizing: border-box;
  border: calc(2 * var(--u)) solid var(--sg-wood-dk); border-radius: calc(8 * var(--u));
  background: linear-gradient(#5a3d22, #2c1a0a); color: #f6e2bd;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbMin svg { display: block; width: 100%; height: 100%; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRows {
  position: relative;
  height: calc(var(--n) * var(--bbRow) * var(--u));
  margin: calc(5 * var(--u)) 0;
  transition: height 200ms ease-out;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow {
  --i: 0;
  position: absolute; left: calc(5 * var(--u)); right: calc(5 * var(--u)); top: 0;
  height: calc((var(--bbRow) - 2) * var(--u));
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: 0 calc(6 * var(--u));
  box-sizing: border-box;
  border-radius: calc(5 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(calc(var(--i) * var(--bbRow) * var(--u)));
  transition: transform 340ms cubic-bezier(.22, .8, .2, 1);
  overflow: hidden;
  color: #fff;
  font: 800 var(--fs-xs)/1 var(--sg-font);
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
}
/* 自己那一行的金框：名次变了行带着 340ms 的 translateY 滑过去，字会扫过金框（也会扫过行缝），金框上的浅色字要看得见——金框 .9 时只有 1.19
   （S4 M4 contrast，三轮都是同一个金 #edce77），.22 时还差一点（4.33 / 4.44），降到 .12（深底上还看得出一圈暖边）。画在行外也不行：落在行缝里。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.me { box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 222, 128, 0.12); }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbFill { position: absolute; inset: 0; display: flex; pointer-events: none; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbFill i { display: block; flex: none; height: 100%; width: 0; transition: width 380ms cubic-bezier(.2, .8, .2, 1); }
/* 彩条：座位色（battle-ui.js 写的 --c1 / --c2）原色，上面一层高光、下面一点暗（S4 M4 以前的样子）。
   问题 4（2026-10-30，老板「输出能量柱的颜色怎么变暗了，之前的版本的颜色显示非常的清晰」）：S4 M4（766025a4）为了条上的字看得清，
   给整根条压了 .62 / .7 的黑，条亮度掉到原来的六分之一（自己金条 0.394 → 0.059）。现在条不压黑，改成字自己垫底（下面 .bbRank～.bbPct 那一段）。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbSelf { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.28)), var(--c1); opacity: 0.86; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbPet { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.2)), var(--c2); opacity: 0.8; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.up .bbFill { animation: bbUp 420ms ease-out; }
@keyframes bbUp { from { filter: brightness(1.8); } to { filter: none; } }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRank,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbName,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbNum,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbPct { position: relative; }
/* 字垫底（问题 4）：名次、名字、数、占比各垫一块面板同色的深底 .65，条照原色亮着，字落在哪种条上都够 4.5
   （最差是宠物浅金条 #ffe08a 高光那端上的金字 #ffe27a：不垫 1.29，垫 .65 是 6.77；.xj-cursor 里 q345-bar-contrast.js 算的）。
   底只包住字（名字不再撑满中间那一格，margin-right: auto 把数和占比推到右边），字之间的条露在外面。尺寸不变：内边距用 box-shadow 往外撑，不占位。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRank,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbName,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbNum,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbPct {
  background: rgba(12, 7, 2, 0.65);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(12, 7, 2, 0.65);
  border-radius: calc(3 * var(--u));
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRank { flex: none; width: calc(18 * var(--u)); text-align: center; color: #fff3d6; font-weight: 900; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.first .bbRank { color: #ffe27a; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbName { flex: 0 1 auto; margin-right: auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.me .bbName { color: #fff6cf; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbNum { flex: none; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbPct { flex: none; width: calc(42 * var(--u)); text-align: right; color: #f3e2bf; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.zero .bbNum,
:is(html[data-ui="v2"], .sgBattleHost) #battleBoard .bbRow.zero .bbPct { opacity: 0.8; }
/* 小牌子：左下角一颗，写这一页的合计（剑 / 盾 / 十字跟着页走），点了再展开。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(46 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(10 * var(--u));
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 18, 7, 0.72), rgba(12, 7, 2, 0.78));
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(224, 166, 64, 0.85), 0 0 0 calc(4 * var(--u)) rgba(58, 34, 12, 0.55), 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.35);
  color: #ffd76a;
  animation: bbIn 180ms ease-out;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip .bbIcon { display: block; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: #f6e2bd; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip .bbIcon svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip b { font: 900 var(--fs-s)/1 var(--sg-font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
:is(html[data-ui="v2"], .sgBattleHost) #battleBoardChip.auto { opacity: 0.85; }

/* 战报：最后一盘放完落一张米纸牌：MVP（皇冠、名字、徽章、数字从 0 滚、占比、人 / 宠两段的条），其余人一行行滑进来
   （名次、名字和徽章、条从 0 长、数、占比），底下一行全队合计 · 回合 · 最高一击，再下面「点一下继续」和 3 秒倒计时。 */
:is(html[data-ui="v2"], .sgBattleHost) #battleReport {
  position: absolute; z-index: 4; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(40, 24, 8, 0.55), rgba(4, 2, 1, 0.82));
  pointer-events: auto;
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport[hidden] { display: none; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brCard {
  width: calc(560 * var(--u));
  max-height: 84%;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--paper-bg);
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--sg-wood), 0 0 0 calc(7 * var(--u)) var(--sg-gold-line), 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
  color: var(--sg-ink);
  animation: brDrop 260ms cubic-bezier(.2,.9,.25,1.1);
}
@keyframes brDrop {
  from { transform: translateY(calc(-30 * var(--u))) scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brHead { display: flex; align-items: baseline; gap: calc(12 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brHead b { flex: 1; color: #a4611a; font: 900 var(--fs-xl)/1.1 var(--sg-font); letter-spacing: calc(4 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brHead b.lose { color: #7d5a3a; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brHead span { color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brMvp {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(12 * var(--u)) 0;
  margin-bottom: calc(8 * var(--u));
  border-bottom: calc(2 * var(--u)) dashed rgba(122, 74, 30, 0.35);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brCrown {
  flex: none; color: #e0a32c; font: 900 calc(56 * var(--u))/1 var(--sg-font); font-style: normal;
  text-shadow: 0 calc(3 * var(--u)) 0 #7a4a1e;
  animation: brCrown 700ms cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes brCrown { from { transform: translateY(calc(-26 * var(--u))) rotate(-18deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brWho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brLine { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTag { padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: #e0a32c; color: #3a1f06; font: 900 var(--fs-xs)/1.4 var(--sg-font); font-style: normal; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brLine b { min-width: 0; max-width: calc(280 * var(--u)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 900 var(--fs-l)/1.2 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport b.me { color: #8a4a08; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brLine2 { display: flex; align-items: baseline; gap: calc(12 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brBig { color: #a4611a; font: 900 calc(52 * var(--u))/1 var(--sg-font); font-variant-numeric: tabular-nums; text-shadow: 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.55); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brShare { color: var(--sg-ink-soft); font: 800 var(--fs-m)/1 var(--sg-font); font-style: normal; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brBadges { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brBadges:empty { display: none; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brBadges i {
  padding: calc(1 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: linear-gradient(#8a5a2a, #5a3812); color: #fff3d6;
  font: 800 var(--fs-xs)/1.35 var(--sg-font); font-style: normal; white-space: nowrap;
  box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--sg-gold-line);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRows { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRow {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  opacity: 0; animation: brIn 220ms ease-out forwards;
}
@keyframes brIn { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRank { flex: none; width: calc(24 * var(--u)); text-align: center; color: var(--sg-ink-soft); font: 900 var(--fs-s)/1 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brName { flex: none; width: calc(150 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brName b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 var(--fs-s)/1.15 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRow.me { margin: 0 calc(-6 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(240, 176, 48, 0.16); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(201, 138, 36, 0.55); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRow.me .brName b { color: #8a4a08; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRow em { flex: none; width: calc(84 * var(--u)); text-align: right; font: 900 var(--fs-s)/1 var(--sg-font); font-style: normal; font-variant-numeric: tabular-nums; }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brRow small { flex: none; width: calc(44 * var(--u)); text-align: right; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTrack {
  flex: 1; min-width: calc(40 * var(--u)); height: calc(14 * var(--u));
  display: flex; border-radius: 999px; overflow: hidden;
  background: rgba(90, 60, 24, 0.16);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(90, 60, 24, 0.25);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTrack.big { flex: none; height: calc(12 * var(--u)); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTrack i { display: block; flex: none; height: 100%; width: 0; transition: width 560ms cubic-bezier(.2, .8, .2, 1); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTrack i.self { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2)), var(--c1, #c98a24); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTrack i.pet { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15)), var(--c2, #f0c061); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brSum { margin: calc(10 * var(--u)) 0 0; text-align: center; color: var(--sg-ink); font: 700 var(--fs-xs)/1.45 var(--sg-font); }
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brFoot {
  position: relative; margin-top: calc(8 * var(--u)); padding-top: calc(8 * var(--u));
  border-top: calc(1 * var(--u)) solid rgba(122, 74, 30, 0.25);
  text-align: center; color: var(--sg-ink-soft); font: 700 var(--fs-xs)/1.2 var(--sg-font);
}
:is(html[data-ui="v2"], .sgBattleHost) #battleReport .brTime { display: block; height: calc(4 * var(--u)); margin-top: calc(6 * var(--u)); width: 100%; border-radius: 999px; background: #c98a24; transition: width 80ms linear; }