/* Артиллерия: поле боя — канвас (artillery.js), карточки бойцов — HTML.
   Полёт снаряда, взрыв и крест рисует сам канвас; CSS-анимаций поля больше
   нет — их нечем было спасать от пересборки innerHTML раз в секунду.
   Цвета канвас снимает с этих же переменных через getComputedStyle:
   var() внутри 2d-контекста не резолвится. */

.ar-stage{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;--ar-h:190px;}
.ar-stage.big{--ar-h:clamp(200px,34vh,340px);}

/* Слот, куда artillery.js после рендера переносит ПЕРСИСТЕНТНЫЙ канвас:
   сам канвас в строку не попадает, иначе умирал бы на каждом тике экрана. */
.ar-slot{width:100%;display:flex;justify-content:center;}

/* канвас поля: битмап 800×280 (сетка 40×14), растягивается как прежний SVG */
.ar-field{
  width:100%;max-width:calc(var(--ar-h) * 2.85);height:var(--ar-h);display:block;
  border-radius:12px;border:1px solid var(--line);
  /* небо: тот же тёмный градиент, что у сцены, — поле не выглядит вставкой.
     Канвас прозрачный и рисует только землю с танками — небо живёт здесь,
     и тема меняет его без перерисовки. */
  background:linear-gradient(180deg, var(--ink-soft), var(--ink-deep));
}

.ar-wind{
  font-size:calc(var(--ar-h) * .075);font-weight:800;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;
}

.ar-cards{display:flex;gap:clamp(18px,5vw,72px);justify-content:center;flex-wrap:wrap;}
.ar-who{display:flex;flex-direction:column;align-items:center;gap:4px;}
.ar-name{font-weight:900;font-size:calc(var(--ar-h) * .085);}
.ar-who.s0 .ar-name{color:var(--accent);}
.ar-who.s1 .ar-name{color:var(--blue);}
/* Здоровье — шкала из 100, не деления: сто ячеек с десяти метров не читаются.
   Число рядом — то же здоровье цифрой, для тех, кто не меряет полоски. */
.ar-hp{display:flex;align-items:center;gap:8px;}
.ar-hp-track{
  width:calc(var(--ar-h) * .6);height:calc(var(--ar-h) * .045);
  border-radius:4px;background:var(--card-hi);overflow:hidden;display:block;
}
.ar-hp-track i{display:block;height:100%;border-radius:4px;}
.ar-hp-track .s0{background:var(--tug-a);}
.ar-hp-track .s1{background:var(--tug-b);}
.ar-hp-num{font-size:calc(var(--ar-h) * .07);}
.ar-who.s0 .ar-hp-num{color:var(--accent);}
.ar-who.s1 .ar-hp-num{color:var(--blue);}

/* Чей ход. Строка есть у ОБЕИХ карточек и у молчащей просто пуста — иначе
   появление «целится» на секунду сдвигало бы всю колонку вниз. Пульс мягкий:
   мигание на проекторе через час начинает раздражать зал. */
.ar-move{
  min-height:calc(var(--ar-h) * .07);font-size:calc(var(--ar-h) * .055);
  font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
}
.ar-who.turn .ar-move{animation:ar-aim 2s ease-in-out infinite;}
.ar-who.turn.s0 .ar-move{color:var(--accent);}
.ar-who.turn.s1 .ar-move{color:var(--blue);}
@keyframes ar-aim{0%,100%{opacity:1}50%{opacity:.45}}