/* ═══ css/battle.css ══════════════════════════════════════════════════════════════════════════════════════════════════
   Интерфейс боя - вид наброска 064 (задача 075): поле на весь экран, поверх - стекло сланца с золотом (css/ui.css:
   .glass, .btn, .plate, .bar, .card); данные - BattleHud.dat и PlayerInfoHud.dat игры, шевроны очков - свой значок
   data/textures/interface/cp_chevrons.svg (в виде Battle_Button.tga игры). Раскладка - data/interface/Battle.dat, код -
   js/battle/hud.js. --b - ширина карты войск,
   --pf - крупность колонок сторон на низком экране (hud.js fitHud). Отступы - от вырезов телефона (safe-area); колонки
   сторон и войска - ближе к краю (102).

   Разделы файла:
     1. Экран боя
     2. Стороны
     3. Эмоции
     4. Часы, подсказки, выход
     5. Войска
     6. Лента соперника
     7. Карточка юнита
     8. Окна боя
     9. Поле: цифры, номера башен
     10. Конец боя
     11. Стили сторон
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Экран боя ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* крупность и отступы: --sl / --sr - вырез телефона слева и справа, --st / --sb - сверху и снизу. Колонки сторон -
   на половине прежнего зазора до края (--el / --er; было - вырез + 8, на iPhone боком ~56 точек, стало ~28), войска -
   в 3 точках от низа экрана, поверх полоски «домой» (--eb) (замечание владельца 17.10: «панель с войсками можно
   вообще опустить вниз почти к самой рамке, оставив тонюсенький зазорчик, а героев раздвинуть по сторонам ещё на
   половину от оставшегося свободного места», задача 102) */
#battle {
  --b: 60px;
  --pf: 1;
  --sl: var(--safe-l);
  --sr: var(--safe-r);
  --st: var(--safe-t);
  --sb: var(--safe-b);
  --el: calc((var(--sl) + 8px) / 2);
  --er: calc((var(--sr) + 8px) / 2);
  --eb: 3px;
}
#fps {
  position: absolute;
  z-index: 4;
  left: calc(var(--sl) + 8px);
  font: 12px/1.3 var(--body);
  text-shadow: 0 1px 2px #000;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ─── 2. Стороны ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* колонка стороны (набросок 074, Т57, Т71, Т72): портрет с уровнем, под ним прочность лагеря - полоса с сердцем
   (сколько осталось) и крупное число, кубки, герб ордена размером с портрет; пелены на портрете нет. Нажатие на свой
   - эмоции, на противника - окно «всё о нём» */
#battle .pcol {
  position: absolute;
  z-index: 3;
  top: calc(var(--st) + 6px);
  display: grid;
  justify-items: center;
  zoom: var(--pf);
}
#battle .pcol.l {
  left: var(--el);
}
#battle .pcol.r {
  right: var(--er);
}
#battle .pcol:active {
  transform: scale(0.97);
}
#battle .pcol .ava {
  overflow: visible;
  --ring: var(--blue-hi);
}
#battle .pcol .ava.foe {
  --ring: var(--red-hi);
}
#battle .pcol .ava > .lv {
  z-index: 1;
}
/* прочность лагеря: красная заливка - сколько осталось (у противника - от правого края), сердце и число поверх */
.hpb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #120709, #25100f);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 110, 90, 0.45);
  overflow: hidden;
}
.hpb > i:first-child {
  position: absolute;
  background: linear-gradient(180deg, #e0463a, #8e1b14);
  box-shadow: inset 0 1px 0 rgba(255, 190, 170, 0.5);
  transition: width 0.25s;
}
.pcol.r .hpb > i:first-child {
}
.hpb > .hpi {
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd4cc' d='M12 21.4S2.6 15.6 2.6 8.9C2.6 5.8 5 3.6 7.8 3.6c1.8 0 3.3.9 4.2 2.3.9-1.4 2.4-2.3 4.2-2.3 2.8 0 5.2 2.2 5.2 5.3 0 6.7-9.4 12.5-9.4 12.5z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 1px 1px #000);
}
.hpb > b {
  position: relative;
  font: 700 15px/1 var(--body);
  text-shadow:
    0 1px 1px #000,
    0 0 4px #000;
  font-variant-numeric: tabular-nums;
}
.hpb > b.low {
}
.ptro {
  display: flex;
  align-items: center;
}
.ptro > .ico {
}
#battle .pcol .emb {
  filter: drop-shadow(0 2px 3px #000);
}
/* плашка стороны: кубок лиги и ник, под ником - достижения витрины (Т57); ник не доходит до часов (узкий телефон):
   между стеклом часов и плашкой - 7 точек (257: было 15 - на 640 имена ботов в 16 знаков не влезали) */
.pnm {
  position: absolute;
  z-index: 3;
  top: calc(var(--st) + 6px);
  display: grid;
  zoom: var(--pf);
  pointer-events: none;
}
.pnm.l {
  left: calc(var(--el) + 84px);
}
.pnm.r {
  right: calc(var(--er) + 84px);
}
.pnm > b {
  display: flex;
  align-items: center;
  max-width: min(190px, calc(50vw / var(--uiz, 1) - 207px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ник - своей рамкой: длинный сжимается многоточием, кубок лиги рядом - всегда целиком (257: на 640 ник без своей
   рамки не сжимался и выталкивал кубок за плашку) */
.pnm > b > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnm > b > .ico {
  flex: none;
}
/* достижения на табличке - на три места по ширине таблички (319, владелец 31.10: «Если один - по центру под ником,
   если 2 - один с левой стороны, второй по центру, ну а если 3 - третий с правой стороны. Равномерное
   распределение»): слева, по центру, справа; одно - по центру; у противника так же */
.pach {
  display: grid;
  grid-template-columns: repeat(3, minmax(32px, 1fr));
  justify-items: center;
}
.pach > :only-child {
  grid-column: 2;
}
.pach:empty {
  display: none;
}
.shild {
  filter: drop-shadow(0 1px 1px #000);
}

/* ─── 3. Эмоции ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* выбор эмоции (набросок 074, окно 8): ряд рожиц игры с подписью на стекле рядом со своим портретом */
.emopick {
  position: absolute;
  z-index: 6;
  left: calc(var(--el) + 84px);
  top: calc(var(--st) + 104px);
  display: flex;
  zoom: var(--pf);
}
.emopick[hidden] {
  display: none;
}
.emob {
  display: grid;
  justify-items: center;
  align-content: center;
  background: linear-gradient(180deg, #2a3343, #1a212c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
.emob:active {
  transform: scale(0.95);
}
.emob > .ico {
}
.emob > small {
  font: inherit;
}
/* эмоция - рожица эффекта игры (FX/<имя>_FX) «облачком» под плашкой стороны: вылетает, держится, гаснет; подпись -
   строка игры («<<NICK>> очень рад») */
.emo {
  position: absolute;
  z-index: 4;
  top: calc(var(--st) + 84px);
  left: calc(var(--el) + 92px);
  display: grid;
  justify-items: center;
  pointer-events: none;
  transform-origin: 0 50%;
  animation: emo 3.2s ease-out forwards;
  zoom: var(--pf);
}
.emo.foe {
  right: calc(var(--er) + 92px);
  transform-origin: 100% 50%;
}
.emo > .ico {
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.emo > small {
  background: rgba(14, 19, 28, 0.85);
  box-shadow: 0 0 0 1px rgba(233, 192, 106, 0.35);
}
@keyframes emo {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  12% {
    opacity: 1;
    transform: scale(1.12);
  }
  20% {
    transform: scale(1);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .emo {
    animation: none;
  }
}

/* ─── 4. Часы, подсказки, выход ──────────────────────────────────────────────────────────────────────────────────── */
/* верх посередине - одна стеклянная плашка (139): подсказки | часы | выход (значок игры Exit_Icon); у всех трёх общий
   верх и низ, скругления - по краям плашки, между частями - золотая черта (Battle.dat TopCenter) */
.topc {
  position: absolute;
  z-index: 3;
  top: calc(var(--st) + 6px);
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
}
/* часть плашки - кнопка: стекло плашки насквозь, сверху чуть светлее (нажимается), под пальцем - светлее, нажатая -
   темнее */
.tkey {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.12), rgba(255, 236, 190, 0) 70%);
  cursor: pointer;
}
.tkey:hover {
  background-color: rgba(255, 236, 190, 0.08);
}
.tkey:active {
  background: rgba(0, 0, 0, 0.28);
}
.topc > .tkey {
}
.topc > .tkey:first-child {
}
.topc > .tkey:last-child {
}
.topc > .tkey > .ico {
}
.clock {
  display: grid;
  justify-items: center;
}
.clock > .timer {
  font: 700 19px/1.1 var(--display);
  font-variant-numeric: tabular-nums;
}
.clock > small {
  white-space: nowrap;
}
/* кнопка подсказок (Т78-Т80): схема классов «Осады» (Five_Icon) - центром пятиугольника медальонов в центр кнопки (на
   картинке он на 5,4 точки из 128 ниже середины). Включено - по кромке бежит светлый хвост (2,6 с на круг; угол хвоста
   - своё свойство --hr, кромка - маской «кромка без середины»); выключено - серая кнопка */
@property --hr {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.topc > .tkey.hint > .ico {
  transform: translateY(-4.2%);
}
.tkey.hint > .run {
  position: absolute;
  pointer-events: none;
  background: conic-gradient(
    from var(--hr),
    transparent 0deg 220deg,
    rgba(255, 240, 200, 0.18) 280deg,
    rgba(255, 252, 235, 1) 359deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: hintRun 2.6s linear infinite;
}
@keyframes hintRun {
  to {
    --hr: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tkey.hint > .run {
    animation: none;
  }
}
.tkey.hint:not(.on) > .ico {
  filter: grayscale(1) brightness(0.8);
}
.tkey.hint:not(.on) > .run {
  display: none;
}
/* подсказка боя под часами (Т81): подложка чуть больше текста; появляется за --hin, уходит вверх на --rise за --hout
   (числа - BattleView.dat BattleHints) */
.hintbar {
  position: absolute;
  z-index: 3;
  top: calc(var(--st) + 56px);
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  transform: translate(-50%, 0);
  transition: opacity var(--hin, 0.25s);
}
.hintbar[hidden] {
  display: none;
}
.hintbar.in {
  opacity: 1;
}
.hintbar.out {
  transform: translate(-50%, var(--rise, -16px));
  transition:
    opacity var(--hout, 0.5s),
    transform var(--hout, 0.5s) ease-out;
}
/* значок совета - схема классов, как на кнопке подсказок (137) */
.hintbar > .ico {
  flex: none;
  filter: drop-shadow(0 1px 1px #000);
}

/* финал боя (149): окно-уведомление в золотой рамке с уголками (.panel) и лентой - под часами, поверх совета; приходит
   сверху с лёгким увеличением, держится BattleView.dat BattleFinal NoticeTime, уходит вверх; касаний не ловит */
.finwin {
  position: absolute;
  z-index: 6;
  top: calc(var(--st) + 62px);
  max-width: calc(100vw / var(--uiz, 1) - 24px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -14px) scale(0.92);
  transition:
    opacity var(--fin, 0.35s) ease-out,
    transform var(--fin, 0.35s) cubic-bezier(0.2, 1.4, 0.4, 1);
}
.finwin.in {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.finwin.out {
  opacity: 0;
  transform: translate(-50%, -18px) scale(1);
  transition:
    opacity var(--fout, 0.5s),
    transform var(--fout, 0.5s) ease-in;
}
.finbody {
  display: flex;
  align-items: center;
}
/* «×2» - золото с бликом и тёмной обводкой, мягкое свечение */
.finmul {
  flex: none;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(233, 192, 106, 0.55));
}
.fintext {
  display: grid;
  text-align: left;
}
/* узор: золотая вязь (волна между двумя нитями, ромбики) - маской по золотому градиенту, к краям гаснет */
.finorn {
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-lo) 8%,
    var(--gold-hi) 50%,
    var(--gold-lo) 92%,
    transparent
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M0 6C4 1 9 1 9 6S14 11 18 6S23 1 27 6S32 11 36 6'/%3E%3Cpath d='M0 .6H36M0 11.4H36' stroke-width='.8'/%3E%3C/g%3E%3Cpath d='M18 3.6L20.4 6L18 8.4L15.6 6ZM0 3.6L2.4 6L0 8.4ZM36 3.6V8.4L33.6 6Z'/%3E%3C/svg%3E")
    center / 30px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M0 6C4 1 9 1 9 6S14 11 18 6S23 1 27 6S32 11 36 6'/%3E%3Cpath d='M0 .6H36M0 11.4H36' stroke-width='.8'/%3E%3C/g%3E%3Cpath d='M18 3.6L20.4 6L18 8.4L15.6 6ZM0 3.6L2.4 6L0 8.4ZM36 3.6V8.4L33.6 6Z'/%3E%3C/svg%3E")
    center / 30px 10px repeat-x;
}
/* «×2» при появлении дважды вспыхивает крупнее */
.finwin.in .finmul {
  animation: finpulse 0.9s ease-in-out 0.3s 2;
}
@keyframes finpulse {
  50% {
    transform: scale(1.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .finwin.in .finmul {
    animation: none;
  }
}

/* ─── 5. Войска ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* войска на стекле внизу посередине (замечание владельца 27.09: «кнопки с юнитами крупнее, под ними полупрозрачная
   подложка»): очки командования и башни колоды одним рядом при любом их числе (--b - hud.js fitHud) */
.troops {
  position: absolute;
  z-index: 3;
  bottom: var(--eb);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
}
#cards {
  display: flex;
  align-items: flex-end;
}
/* очки командования - как в игре (Combat.dat: запас 100; цена выхода - Squads.dat RemoveCommandPoints): шевроны
   заполняются снизу вверх, число 0-100; касание - подсказка «что это и прирост сейчас» (104); шевроны - свой чистый
   значок в виде шевронов BattleHud игры (data/textures/interface/cp_chevrons.svg, 137: «текстура размазанная») */
.cp {
  /* столбик вровень с картой войск (139): шевроны - высота карты без числа, ширина - по картинке 27×48 */
  --cpg: calc(var(--b) * 1.2 - 20px);
  display: grid;
  justify-items: center;
  cursor: pointer;
}
.cp > .gauge {
  position: relative;
  width: calc(var(--cpg) * 27 / 48);
  height: var(--cpg);
}
.cp > .gauge > i {
  position: absolute;
  background: no-repeat;
}
.cp > .gauge > .gb {
  background-position: 0 0;
  background-size: 100% 100%;
  filter: grayscale(1);
}
/* заливка - нижняя часть той же картинки: высота - доля очков (hud.js), картинка во всю высоту столбика от низа */
.cp > .gauge > .gf {
  background-position: 0 100%;
  background-size: 100% var(--cpg);
}
.cp > b {
  font: 700 18px/18px var(--body);
  text-shadow: 0 1px 1px #000;
  font-variant-numeric: tabular-nums;
}
/* башня: карта отряда (рамка цвета лиги, фигура, в углу цена выхода - золотая птичка очков командования над числом
   (077, вместо полоски над картой и номера башни), +уровень, сколько осталось); номер башни - крупно поверх карты в
   начале боя (hud.js towerNumbers) */
.slot {
  display: grid;
  justify-items: stretch;
  width: var(--b);
  /* удержание карты - характеристики отряда (104): без меню и лупы телефона; 170 - без выделения и перетаскивания
     картинки телефоном (на долгом касании он гасил указатель, отпускание выпускало юнита) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}
.slot * {
  -webkit-user-drag: none;
}
/* части цифр карточки юнита (170, hud.js partsHtml): уровень - золото, свои навыки - зелёный, баффы - голубой, дебаффы
   - красный */
.sp-l {
  color: var(--gold-hi);
}
.sp-s {
  color: var(--green-hi);
}
.sp-b {
  color: var(--blue-hi);
}
.sp-d {
  color: var(--red-hi);
}
/* точка касания сферы артефакта у башни (170): к ней - хвостик подсказки артефакта (hud.js towerArt) */
.tapdot {
  position: fixed;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.slot .ccost {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.ccost > .chev {
  display: block;
  /* птичка вершиной вверх, как шевроны очков командования слева */
  clip-path: polygon(0 62%, 50% 0, 100% 62%, 100% 100%, 50% 38%, 0 100%);
  background: linear-gradient(180deg, #fff1b8, var(--gold) 55%, #9a6a1c);
  filter: drop-shadow(0 1px 0 #000);
}
.ccost > b {
  text-shadow:
    0 0 2px #000,
    0 1px 1px #000,
    0 0 3px #000;
  font-variant-numeric: tabular-nums;
}
.slot .tflash {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  text-shadow:
    0 0 3px #000,
    0 2px 2px #000,
    0 0 8px #000;
  pointer-events: none;
  opacity: 0;
}
.slot > .card {
  width: var(--b);
  height: calc(var(--b) * 1.2);
  transition:
    filter 0.15s,
    transform 0.1s;
}
/* можно выпустить - зелёный свет внутри рамки; нельзя (мало очков, пачка кончилась) - тусклая */
.slot[data-st='ok'] > .card {
  box-shadow:
    inset 0 0 0 2px var(--lg),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 0 1.5px #000,
    inset 0 0 12px 2px rgba(143, 229, 138, 0.8);
}
.slot[data-st='off'] > .card,
.slot[data-st='cool'] > .card {
  filter: grayscale(0.8) brightness(0.6);
}
.slot[data-st='press'] > .card {
  filter: brightness(1.7);
  transform: scale(0.94);
}
/* зелье: значок поверх тёмной карты (картинка - фоном) */
.slot > .card.elx > .fig {
  background: center / contain no-repeat;
}
/* класс отряда на карте (105): виден, пока включены подсказки боя (#battle.hints - hud.js hintReset); совет боя
   подсвечивает карты классов, которые бьют вышедший класс врага ([data-hl] - hud.js hintTick) */
.slot .scls {
  position: absolute;
  z-index: 2;
  display: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 11, 16, 0), rgba(8, 11, 16, 0.85) 35%, rgba(8, 11, 16, 0.85));
  text-shadow: 0 1px 1px #000;
}
#battle.hints .slot .scls {
  display: block;
}
/* подсветка - рамкой поверх карты (::after башни): тусклая карта (мало очков) её не гасит */
.slot[data-hl] {
  position: relative;
}
.slot[data-hl]::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -3px;
  border-radius: 9px;
  pointer-events: none;
  animation: slothl 0.7s ease-in-out infinite alternate;
}
@keyframes slothl {
  from {
    box-shadow:
      0 0 0 2px var(--gold),
      0 0 6px 2px rgba(233, 192, 106, 0.5);
  }
  to {
    box-shadow:
      0 0 0 2px #fff1b8,
      0 0 14px 5px rgba(233, 192, 106, 0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot[data-hl]::after {
    animation: none;
    box-shadow:
      0 0 0 2px #fff1b8,
      0 0 12px 4px rgba(233, 192, 106, 0.85);
  }
}
/* ожидание ворот: тень сверху вниз - сколько осталось ждать */
.slot .cool {
  position: absolute;
  background: rgba(5, 8, 12, 0.6);
  pointer-events: none;
}

/* ─── 6. Лента соперника ─────────────────────────────────────────────────────────────────────────────────────────── */
/* лента соперника (Т74-Т75): строкой над войсками, ровно по ширине лотка; ячейки вплотную, слева - новая; сдвиг -
   --fmove, уход - --fout (BattleView.dat EnemyFeed; hud.js feedPush); касаний не ловит */
.feed2 {
  position: absolute;
  bottom: calc(100% + 4px);
  overflow: hidden;
  pointer-events: none;
}
.frow {
  position: absolute;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(14, 19, 28, 0.88), rgba(14, 19, 28, 0.72));
  box-shadow:
    inset -3px 0 0 var(--red-hi),
    0 0 0 1px rgba(233, 192, 106, 0.3);
  transition:
    transform var(--fmove, 0.25s) cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity var(--fmove, 0.25s);
}
.frow.in {
  opacity: 1;
}
.frow.out {
  transition:
    transform var(--fout, 0.35s) ease-in,
    opacity var(--fout, 0.35s);
}
.frow > .fic {
  background: #1b2230 center / contain no-repeat;
  box-shadow: 0 0 0 1px #000;
}
.frow > .fplus {
}
/* серия - золотые «×N» снаружи слева от ячейки, высотой в ячейку (v18.10) */
.frow > .fcnt {
  position: absolute;
  right: calc(100% + 5px);
  text-shadow:
    0 0 2px #000,
    0 1px 0 #000,
    0 0 5px #000;
  transform-origin: right center;
}
.frow > .fcnt[hidden] {
  display: none;
}
.frow.bump > .fcnt {
  animation: fcntBump 0.4s ease-out;
}
@keyframes fcntBump {
  from {
    transform: scale(1.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frow,
  .frow.out {
    transition: none;
  }
  .frow.bump > .fcnt {
    animation: none;
  }
}

/* ─── 7. Карточка юнита ──────────────────────────────────────────────────────────────────────────────────────────── */
/* карточка юнита по касанию (набросок 074, окно 6): над лентой соперника, ни на что не ложится (Т74); шесть цифр -
   число без навыков, под ним зелёным прибавка навыков его стороны (М8) */
.ucard {
  position: absolute;
  z-index: 4;
  bottom: calc(var(--eb) + var(--b) * 1.2 + 64px);
  transform: translateX(-50%);
  width: min(452px, calc(100vw / var(--uiz, 1) - 200px));
  display: grid;
}
.ucard[hidden] {
  display: none;
}
.ucard .uh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ucard .uh > b {
}
.ucard .uh > small {
}
.ucard > .bar {
}
.ucard > .bar > b {
}
.ustats {
  display: grid;
  /* восемь цифр (104: и цена выхода, и потребление в бою) - двумя рядами */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ustats > div {
  display: grid;
  justify-items: center;
  align-content: start;
}
.ustats small {
  white-space: nowrap;
}
.ustats b {
  display: grid;
  justify-items: center;
  white-space: nowrap;
}
.ustats .skb {
}
.ustats .skb:empty {
  display: none;
}
.utgt {
}
.utgt b {
}
.usk {
}
.usk:empty {
  display: none;
}
.usk b {
}

/* ─── 8. Окна боя ────────────────────────────────────────────────────────────────────────────────────────────────── */
/* окно противника (набросок 074, окно 7): слева портрет и герб ордена почти с портрет, имя, орден, лига и уровень,
   кубки, «Закрыть»; справа - навыки с делениями очков, эликсиры с уровнем, достижения */
.win.foewin {
  width: min(620px, calc(100vw / var(--uiz, 1) - 24px));
}
.foewin .cols {
  grid-template-columns: 190px minmax(0, 1fr);
}
.foewin .col {
  display: grid;
  align-content: start;
}
.foewin .fright {
}
.who2 {
  display: grid;
  justify-items: center;
}
.who2 > .pair {
  display: flex;
  align-items: center;
}
.who2 .ava {
  --ring: var(--red-hi);
}
.who2 .pair > .emb {
  filter: drop-shadow(0 3px 4px #000);
}
.who2 > b {
}
.ordn {
}
.ordn > small {
  display: block;
}
.ln {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ln > .ico {
}
.fsec {
  display: grid;
  align-content: start;
}
.fchips {
  display: flex;
  flex-wrap: wrap;
}
.fchip {
  position: relative;
  display: inline-block;
  background: #1b2230;
  box-shadow:
    0 0 0 1.5px var(--gold-lo),
    0 0 0 3px #0a0d12,
    0 3px 6px rgba(0, 0, 0, 0.5);
}
.fchip > :first-child {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.fchip > .pips {
  position: absolute;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(5, 8, 12, 0.92), rgba(5, 8, 12, 0.6));
}
.fshild > .ico {
  filter: drop-shadow(0 3px 3px #000);
}
/* сдаться? (окно 9): паузы в бою нет - бой за окном идёт; кнопки - прямо в окне (Т60) */
.win.pausewin {
  width: min(360px, calc(100vw / var(--uiz, 1) - 24px));
  padding: 32px 18px 18px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.pausewin > .ask {
  font: 700 16px/1.3 var(--body);
  color: var(--text);
}
.pausewin > .note {
  font-size: 11.5px;
}
.pausewin > .btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

/* ─── 9. Поле: цифры, номера башен ───────────────────────────────────────────────────────────────────────────────── */
/* всплывающие цифры урона и надписи над юнитами (battle/views.js floatText) */
.fx {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-shadow:
    0 1px 2px #000,
    0 0 3px #000;
}
/* номера над своими башнями - первые секунды боя (v18.30, BattleView.dat GateNumbers) */
.gate {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -100%);
  text-shadow: var(--stroke);
  background: linear-gradient(180deg, rgba(53, 114, 196, 0.95), rgba(24, 58, 110, 0.95));
  box-shadow: 0 0 0 1px var(--blue-hi);
}

/* ─── 10. Конец боя ──────────────────────────────────────────────────────────────────────────────────────────────── */
/* бой кончился (замечание владельца 27.09): поле застыло, интерфейс боя неактивен и приглушён, поверх - окно итога */
#battle.over .pcol,
#battle.over .troops,
#battle.over .topc,
#battle.over .emo,
#battle.over .ucard {
  pointer-events: none;
}
#battle.over .troops,
#battle.over .topc,
#battle.over .hintbar {
  filter: grayscale(0.7) brightness(0.75);
  transition: filter 0.6s;
}

/* ─── 11. Стили сторон ───────────────────────────────────────────────────────────────────────────────────────────── */
/* сторона боя в стиле босса (317, ui/frames.js sideStyle; облик стиля - interface/BossStyles.dat): колонка - картинкой
   колонки стиля (--col) вместо стекла, углы и кромки не тянутся (9 частей), середина тянется - колонка без ордена ниже,
   украшения те же; табличка ника - картинкой таблички (--tag) так же; герб ордена - без кольца (владелец 31.10: «Круги
   вот эти вокруг ордена наверное нахуй не нужны»); ник, цифры - тон и шрифт стиля (--st-*). Владелец 31.10: «рамки в
   бою... по каждому стилю в дате должен быть блок настроек для подгонки» */
#battle .glass[data-style] {
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-image: var(--col) 6% 15% fill / 12px / 0 stretch;
}
#battle .glass[data-style]::before {
  display: none;
}
/* зоны колонки стиля (ui/frames.js colZones; BossStyle ColPlate, ColHp, ColTrophies, ColEmblem): рамка портрета - во
   всю ширину колонки, портрет - по её окну; прочность, кубки, герб ордена - внутри кромки колонки; места - отступами,
   размерами и сдвигом от середины колонки */
#battle .pcol[data-style] {
  padding-top: var(--zpt);
  padding-bottom: var(--zpb);
}
#battle .pcol[data-style] > .ava {
  width: var(--zas);
  height: var(--zas);
  margin: 0 0 var(--zam);
  translate: var(--zax) 0;
}
/* полоса прочности со стилем (319; ui/frames.js colZones, BossStyle HpFx, HpColor, HpPower): своей рамки нет - внутри
   материал колонки стиля (--col) в тени, заливка - цветом стиля (--hp1 сверху, --hp2 снизу) с объёмом, поверх -
   эффект стиля силой --hfp: Sheen - блик бежит по заливке, Ember - жар течёт и мерцает, Arcane - пульс света и блик.
   Анимации - только transform и opacity (телефон не перерисовывает полосу каждый кадр) */
#battle .pcol[data-style] > .hpb {
  width: var(--zhw);
  height: var(--zhh);
  margin-top: 0;
  translate: var(--zhx) 0;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.4)),
    var(--col) 50% 45% / 220% auto;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
#battle .pcol[data-style] > .hpb > i:first-child {
  overflow: hidden;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(0, 0, 0, 0.28) calc(20% - 1px) 20%),
    var(--col) 50% 45% / 220% auto,
    linear-gradient(180deg, rgb(var(--hp1)) 0%, rgb(var(--hp1)) 30%, rgb(var(--hp2)) 100%);
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.45),
    inset 0 -3px 4px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#battle .pcol[data-style] > .hpb > i:first-child::before,
#battle .pcol[data-style] > .hpb > i:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Sheen, Arcane: блик - яркая косая полоса бежит слева направо, раз в 3 с */
#battle .pcol[data-hpfx='Sheen'] > .hpb > i:first-child::after,
#battle .pcol[data-hpfx='Arcane'] > .hpb > i:first-child::after {
  left: -45%;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 10%,
    rgba(255, 246, 226, 0.35) 40%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 246, 226, 0.35) 60%,
    transparent 90%
  );
  opacity: var(--hfp);
  animation: hpSheen 3s ease-in-out infinite;
}
#battle .pcol[data-hpfx='Arcane'] > .hpb > i:first-child::after {
  background: linear-gradient(
    105deg,
    transparent 10%,
    rgba(236, 196, 255, 0.4) 40%,
    rgba(255, 240, 255, 0.9) 50%,
    rgba(236, 196, 255, 0.4) 60%,
    transparent 90%
  );
}
/* Ember: жар течёт по заливке (светлые прожилки уезжают влево), снизу вверх поднимаются искры */
#battle .pcol[data-hpfx='Ember'] > .hpb > i:first-child::after {
  right: auto;
  width: 200%;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 12px,
    rgba(255, 214, 120, 0.55) 16px,
    transparent 21px 30px,
    rgba(255, 160, 64, 0.4) 34px,
    transparent 40px 52px
  );
  mix-blend-mode: screen;
  opacity: var(--hfp);
  animation: hpFlow 4s linear infinite;
}
#battle .pcol[data-hpfx='Ember'] > .hpb > i:first-child::before {
  top: 0;
  bottom: auto;
  height: 200%;
  background:
    radial-gradient(circle at 12% 30%, #ffe2a0 0 1px, transparent 2px),
    radial-gradient(circle at 34% 72%, #ffcf7a 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 57% 18%, #fff0c8 0 1px, transparent 2px),
    radial-gradient(circle at 78% 58%, #ffd88c 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 92% 88%, #ffe9b8 0 1px, transparent 2px),
    radial-gradient(circle at 46% 44%, #ffc062 0 0.8px, transparent 1.8px);
  background-size: 100% 50%;
  opacity: var(--hfp);
  animation: hpRise 2.4s linear infinite;
}
/* Arcane: свет изнутри пульсирует */
#battle .pcol[data-hpfx='Arcane'] > .hpb > i:first-child::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(236, 170, 255, 0.75), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hpGlow 2s ease-in-out infinite alternate;
  --hg: var(--hfp);
}
#battle .pcol[data-style] > .hpb > .hpi {
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(var(--hp1), 0.9));
}
#battle .pcol[data-style] > .hpb > b {
  color: var(--st-text, inherit);
}
@keyframes hpSheen {
  0%,
  45% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(330%);
  }
}
@keyframes hpFlow {
  to {
    transform: translateX(-50%);
  }
}
@keyframes hpRise {
  to {
    transform: translateY(-50%);
  }
}
@keyframes hpGlow {
  to {
    opacity: var(--hg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #battle .pcol[data-style] > .hpb > i:first-child::before,
  #battle .pcol[data-style] > .hpb > i:first-child::after {
    animation: none;
  }
}
#battle .pcol[data-style] > .ptro {
  height: var(--zth);
  margin-top: var(--ztm);
  translate: var(--ztx) 0;
}
#battle .pcol[data-style] > .emb {
  width: var(--zes);
  height: var(--zes);
  margin-top: var(--zem);
  translate: var(--zex) 0;
}
/* табличка ника: кромка стиля (--tsl - доли картинки, --tbw - точки; BossStyle TagPad, TagScale) не тянется, ник и
   достижения - внутри неё */
#battle .glass[data-style]:is(#nameL, #nameR) {
  padding: var(--tbw);
  border-image-source: var(--tag);
  border-image-slice: var(--tsl) fill;
  border-image-width: var(--tbw);
  color: var(--st-text, inherit);
}
#battle .glass[data-style]:is(#nameL, #nameR) [id$='Name'] {
  color: var(--st-text, inherit);
  font-family: var(--st-font, inherit);
  translate: var(--st-nx, 0) var(--st-ny, 0);
}
#battle .glass[data-style] [id$='Tr'],
#battle .glass[data-style] [id$='Num'],
#battle .glass[data-style] .lv {
  color: var(--st-num, inherit);
}