/* ============================================================================
   БОЕВОЙ ЭКРАН — ОДНА РАСКЛАДКА ПО УТВЕРЖДЁННОМУ МАКЕТУ (arena-180)
   ----------------------------------------------------------------------------
   До этого файл рос слоями: arena-173 отвязал экран от макета, а 174–179
   по очереди возвращали то фон, то рамки, то доли. Каждый слой перебивал
   предыдущий, и раскладка «ехала» — приёмы вылезали из панели, полоса выбора
   соперника легла на них сверху, тактики схлопнулись в 7 пикселей.

   Здесь один слой. Геометрия — из утверждённого макета 1366×496 (те же числа,
   что раздавал JS в режиме v146):

     уровень   96×89   (30,2)      раунд     77×77   (651,2)
     полосы    171×25  (126,10)    имя       39 высоты над полосами
     шкаф      156×312 (30,113)    боец      227×341 (269,91)
     пульт     291×126 (539,88)    приёмы    294×220 (543,229)
     соперники 501×34  (439,432)

   КАК ЭТО ТЯНЕТСЯ. Арена всегда во всю ширину — карточка не вписывается в
   пропорцию и не оставляет пустых полей по бокам. Тянется сама композиция:

     --s = min(ширина/1366, высота/496)      1 пиксель макета

   Размеры пишутся как N * var(--s) — ничего не искажается. Якоря по
   горизонтали: уровни, полосы и шкафы отсчитываются от своего края карточки,
   пульт с приёмами — от центра, бойцы стоят посередине между шкафом и пультом
   (25% - 72 * var(--s)). По вертикали всё от центра: 50% + (Y - 248) * var(--s).
   При точной пропорции макета формулы дают ровно его координаты; когда чат
   забирает высоту, композиция уменьшается, но расходится по всей ширине —
   пустых полей по краям не остаётся.

   Высоту делит нижний док: чат тянется своей ручкой (--sf-dock-h), но не
   меньше остатка от арены в пропорции макета — см. правило .sf-dock.

   Включается классом body.battle-v2 — переключатель BATTLE_V2 в assets/app.js.
   ВАЖНО: блок @media (телефон) должен оставаться последним в файле.
   ========================================================================== */

/* ── Каркас в бою ────────────────────────────────────────────────────────── */
body.battle-v2 .topbar{display:none}
body.battle-v2 .sf-side{display:none}

/* Каркас в бою: арена забирает ширину, чат — остаток высоты.
   В обычном режиме строки грида .app-shell идут «шапка → сцена (1fr) → док»,
   и высоту делит между ними пользовательская ручка чата. В бою это давало
   обратное макету: чат забирал две трети экрана, а арена сжималась в полоску
   с пустыми полями по бокам.
   Здесь сцена — auto-строка по высоте самой арены, док — оставшийся 1fr.
   Скрытая шапка вдобавок выпадает из грида и сдвигает строки, поэтому строки
   закреплены явно. */
body.battle-v2 .app-shell{grid-template-rows:0 minmax(0,1fr) auto}
body.battle-v2 .sf-stage{grid-row:2;height:auto;min-height:0}
/* Док берёт большее из двух: высоту, выставленную ручкой чата, и остаток от
   арены в пропорции макета. Первое даёт «чат побольше» по требованию, второе —
   отдаёт чату всю высоту, которая арене уже не нужна. */
body.battle-v2 .sf-dock{
  grid-row:3;min-height:0;
  height:max(
    clamp(150px,var(--sf-dock-h,150px),60dvh),
    calc(100dvh - 34px - (100vw - 26px) / 2.754)
  );
}
body.battle-v2 .sf-stage{padding:0;--sf-corner:0px;overflow:hidden}
body.battle-v2 .sf-stage::before,
body.battle-v2 .sf-stage::after{content:none}
body.battle-v2 .sf-stage > .view-stack{padding:0;overflow:hidden;height:100%;min-height:0}
body.battle-v2 .view[data-view-panel="arena"]{height:100%;max-width:none;margin:0}

body.battle-v2 .battle-session{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-content:stretch;
  gap:0;
  width:100%;height:100%;min-height:0;
}

/* ── Сцена: арена во всю ширину, композиция тянется коэффициентом --s ────── */
body.battle-v2 .battle-card{
  position:relative;
  width:100%;height:100%;
  min-height:0;max-height:none;margin:0;
  display:block;padding:0;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  background:
    linear-gradient(180deg,rgba(9,7,22,.45) 0%,rgba(9,7,22,.04) 30%,rgba(9,7,22,.34) 100%),
    url('/assets/battle/arena-bg.png') center 53%/cover no-repeat;
  container-type:size;
  --s:min(.0732cqw,.2016cqh);            /* 1 px макета 1366×496 */
}

/* Слои сцены: HUD, поле, бойцы и центральная колонка занимают всю карточку,
   а их содержимое расставлено долями. Так каждый элемент считает координаты
   от одной и той же коробки, где бы он ни лежал в разметке. */
body.battle-v2 .battle-top-hud,
body.battle-v2 .battlefield,
body.battle-v2 .fighter,
body.battle-v2 .battle-center-stack{
  position:absolute;inset:0;
  width:auto;height:auto;max-width:none;max-height:none;min-height:0;
  display:block;
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  overflow:visible;pointer-events:none;
  transform:none;
  /* place-self от прежней сетки центрировал абсолютный слой по «своему
     размеру» — а он нулевой, потому что внутри тоже всё абсолютное. */
  place-self:stretch;
}
body.battle-v2 .battlefield{z-index:1}
/* Старая шапка рисовала две вертикальные линии по краям колонки раунда
   (::before/::after, 1×412 px) — на сцене они читались как полоски поперёк
   боя. Гасим их вместе с декором поля. */
body.battle-v2 .battlefield::before,
body.battle-v2 .battlefield::after,
body.battle-v2 .battle-top-hud::before,
body.battle-v2 .battle-top-hud::after{content:none}
body.battle-v2 .fighter{z-index:2}
body.battle-v2 .battle-center-stack{z-index:6}
body.battle-v2 .battle-top-hud{z-index:12}

/* ── Верхний HUD: уровни, полосы, раунд ──────────────────────────────────── */
body.battle-v2 .battle-top-hud > *{position:absolute;pointer-events:auto}

/* Координаты — от центра карточки: 50% + (X - 683) * --s по горизонтали,
   50% + (Y - 248) * --s по вертикали. Зеркальные элементы взяты отражением
   макета, чтобы левый и правый край были одинаковыми. */
/* В макете рамки стоят на Y = 2 — верхний луч ложился ровно на край сцены и
   срезался рамкой карточки. Опускаем на 12 px макета: рисунок виден целиком. */
body.battle-v2 .battle-level-frame{
  top:calc(50% - 236 * var(--s));                    /* Y = 12 */
  width:calc(96 * var(--s));height:calc(89 * var(--s));
  display:grid;place-items:center;
  border:0;border-radius:0;background:none;
}
body.battle-v2 .battle-level-left{left:calc(30 * var(--s))}
body.battle-v2 .battle-level-right{right:calc(30 * var(--s));left:auto}
body.battle-v2 .battle-level-frame img{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;z-index:0;
}
/* Отверстие в рамке смещено относительно центра картинки: у level-left.png
   оно на 51.6/51.8 %, у level-right.png — на 50.6/51.9 %. Цифру ставим в
   отверстие, иначе она заметно уходит вверх-влево. */
body.battle-v2 .battle-level-frame b{
  position:absolute;z-index:2;
  left:51.6%;top:51.8%;transform:translate(-50%,-50%);
  font:700 calc(30 * var(--s))/1 Georgia,serif;color:var(--sf-gold-lit);
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
body.battle-v2 .battle-level-right b{left:50.6%;top:51.9%}

body.battle-v2 .round-state{
  left:calc(50% - 38.5 * var(--s));                  /* по центру, W = 77 */
  top:calc(50% - 236 * var(--s));                    /* Y = 12 */
  width:calc(77 * var(--s));height:calc(77 * var(--s));
  display:grid;place-items:center;
  border:0;border-radius:0;background:none;
}
body.battle-v2 .round-state img{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;z-index:0;
}
/* Подпись «РАУНД» в рамке 77×77 набиралась бы шрифтом в 5 px и уезжала за
   верхний край карточки — оставляем только цифру, ровно в центре рамки. */
body.battle-v2 .round-state small{display:none}
body.battle-v2 .round-state b{
  position:absolute;z-index:2;
  left:50.2%;top:50.9%;transform:translate(-50%,-50%);   /* центр линзы рамки */
  font:700 calc(26 * var(--s))/1 Georgia,serif;color:var(--sf-gold-lit);
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}

body.battle-v2 .fighter-hud{
  top:calc(50% - 238 * var(--s));                    /* Y = 10 */
  width:calc(171 * var(--s));height:auto;
  display:flex;flex-direction:column;gap:calc(2 * var(--s));
  margin:0;padding:0;border:0;background:none;
}
body.battle-v2 .fighter-hud-left{left:calc(126 * var(--s))}
body.battle-v2 .fighter-hud-right{
  right:calc(126 * var(--s));left:auto;
  align-items:flex-end;text-align:right;
}
body.battle-v2 .hud-title{
  height:calc(39 * var(--s));
  display:flex;align-items:flex-end;
  font-size:calc(15 * var(--s));line-height:1;
  color:var(--sf-gold-lit);white-space:nowrap;overflow:visible;
}
body.battle-v2 .fighter-hud-right .hud-title{justify-content:flex-end}
body.battle-v2 .hud-title a{color:inherit;text-decoration:none}

/* Полосы: рамка — картинка, желоб внутри неё в тех же долях, что и раньше. */
body.battle-v2 .bar{
  position:relative;
  width:100%;height:auto;max-width:none;
  aspect-ratio:722 / 104;
  border:0;background:none;overflow:visible;
}
body.battle-v2 .bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
body.battle-v2 .bar.hp::after{background-image:url('/assets/battle/hp-frame.png')}
body.battle-v2 .bar.mana::after{background-image:url('/assets/battle/mana-frame.png')}
body.battle-v2 .bar i{
  position:absolute;left:15.5%;top:34%;width:78%;height:31%;
  border-radius:999px;
  transform:scaleX(var(--meter-scale,1));transform-origin:left center;
  transition:transform .3s ease;z-index:1;
}
body.battle-v2 .bar.hp i{background:linear-gradient(90deg,#7a1420,#c9323c 60%,#f0705f)}
body.battle-v2 .bar.mana i{background:linear-gradient(90deg,#132f6b,#2f6fd0 60%,#7ec8ff)}
body.battle-v2 .bar i.chip{background:rgba(247,228,198,.5);z-index:0}
body.battle-v2 .bar span{
  position:absolute;left:17%;right:5%;top:0;bottom:0;
  display:grid;place-items:center;
  font-size:calc(11 * var(--s));color:#fff;text-shadow:0 1px 2px #000;z-index:4;
}
body.battle-v2 .effect-strip{
  height:calc(14 * var(--s));min-height:0;
  display:flex;align-items:center;gap:calc(2 * var(--s));overflow:hidden;
}
body.battle-v2 .fighter-hud-right .effect-strip{justify-content:flex-end}

/* ── Шкафы экипировки: крайние колонки поля ──────────────────────────────── */
body.battle-v2 #playerEquipment,
body.battle-v2 #enemyEquipment{
  position:absolute;top:calc(50% - 135 * var(--s));            /* Y = 113 */
  width:calc(156 * var(--s));height:calc(312 * var(--s));
  max-width:none;max-height:none;
  margin:0;padding:calc(3 * var(--s));
  border:1px solid rgba(201,164,76,.3);border-radius:calc(5 * var(--s));
  background:linear-gradient(180deg,rgba(18,13,46,.72),rgba(8,6,20,.8));
  backdrop-filter:none;transform:none;
  display:block;pointer-events:auto;z-index:4;
}
body.battle-v2 #playerEquipment{left:calc(30 * var(--s));right:auto}
body.battle-v2 #enemyEquipment{right:calc(30 * var(--s));left:auto;direction:ltr}
body.battle-v2 .battle-equipment .wardrobe-art{
  width:100%;height:100%;border:0;background:none;
}

/* ── Бойцы ───────────────────────────────────────────────────────────────── */
body.battle-v2 .fighter > img{
  position:absolute;inset:auto;top:calc(50% - 157 * var(--s));  /* Y = 91 */
  width:calc(227 * var(--s));height:calc(341 * var(--s));
  max-width:none;max-height:none;
  object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgba(0,0,0,.55));
}
/* Боец стоит посередине между своим шкафом и пультом: при нехватке высоты
   свободная ширина уходит в пол между ними, а не в пустые поля по краям.
   При точной пропорции макета формула даёт его X = 269. */
body.battle-v2 .fighter-left > img{left:calc(25% - 72 * var(--s));right:auto}
body.battle-v2 .fighter-right > img{right:calc(25% - 72 * var(--s));left:auto;transform:scaleX(-1)}
body.battle-v2 .fighter-shadow{display:none}

body.battle-v2 .arena-glow{
  display:block;position:absolute;top:calc(50% + 170 * var(--s));
  width:calc(340 * var(--s));height:calc(70 * var(--s));border-radius:50%;
  filter:blur(calc(20 * var(--s)));opacity:.42;pointer-events:none;z-index:0;
}
body.battle-v2 .arena-glow-left{left:calc(25% - 129 * var(--s));background:radial-gradient(circle,rgba(124,77,219,.7),transparent 70%)}
body.battle-v2 .arena-glow-right{right:calc(25% - 129 * var(--s));background:radial-gradient(circle,rgba(190,60,70,.6),transparent 70%)}

body.battle-v2 .damage-float{
  top:26%;font-size:calc(38 * var(--s));z-index:14;
}
body.battle-v2 .fighter-left .damage-float{left:calc(25% + 41 * var(--s))}
body.battle-v2 .fighter-right .damage-float{left:auto;right:calc(25% + 41 * var(--s))}
body.battle-v2 .damage-float.blocked{font-size:calc(24 * var(--s))}
body.battle-v2 .impact-fx{
  width:12.4%;height:34%;top:52%;z-index:8;
}

/* ── Пульт боя ───────────────────────────────────────────────────────────── */
body.battle-v2 .combat-console{
  position:absolute;transform:none;
  left:calc(50% - 145.5 * var(--s));                  /* по центру, W = 291 */
  top:calc(50% - 160 * var(--s));                     /* Y = 88 */
  width:calc(291 * var(--s));height:calc(126 * var(--s));
  display:block;margin:0;padding:0;
  border:0;border-radius:0;box-shadow:none;
  background:url('/assets/battle/combat-panel.png') center/100% 100% no-repeat;
  pointer-events:auto;
}
body.battle-v2 .combat-console::before,
body.battle-v2 .combat-console::after{content:none}

body.battle-v2 .zone-stack{
  position:absolute;inset:0;
  display:block;height:auto;gap:0;pointer-events:none;
}
body.battle-v2 .zone-glyph{display:none}
body.battle-v2 .zone-btn{
  position:absolute;
  width:12.15%;height:28.4%;min-height:0;
  margin:0;padding:0;
  border:1px solid transparent;border-radius:calc(15 * var(--s));
  background:transparent;box-shadow:none;
  pointer-events:auto;cursor:pointer;
  transition:background .16s ease,box-shadow .16s ease,filter .12s ease;
}
/* Координаты сняты с combat-panel.png (1394×603) по золотым рамкам слотов:
   вертикали 15.06 / 28.84 / 58.68 / 72.45 %, горизонтали 18.08 / 52.90 %. */
body.battle-v2 .block-stack .zone-btn:nth-child(1){left:15.06%;top:18.08%}
body.battle-v2 .block-stack .zone-btn:nth-child(2){left:28.84%;top:18.08%}
body.battle-v2 .block-stack .zone-btn:nth-child(3){left:15.06%;top:52.9%}
body.battle-v2 .block-stack .zone-btn:nth-child(4){left:28.84%;top:52.9%}
body.battle-v2 .attack-stack .zone-btn:nth-child(1){left:58.68%;top:18.08%}
body.battle-v2 .attack-stack .zone-btn:nth-child(2){left:72.45%;top:18.08%}
body.battle-v2 .attack-stack .zone-btn:nth-child(3){left:58.68%;top:52.9%}
body.battle-v2 .attack-stack .zone-btn:nth-child(4){left:72.45%;top:52.9%}
body.battle-v2 .block-stack .zone-btn:hover{background:rgba(52,148,230,.12);box-shadow:inset 0 0 calc(14 * var(--s)) rgba(70,175,255,.3)}
body.battle-v2 .attack-stack .zone-btn:hover{background:rgba(187,68,255,.11);box-shadow:inset 0 0 calc(14 * var(--s)) rgba(207,73,255,.28)}
body.battle-v2 .block-stack .zone-btn.selected{
  background:radial-gradient(circle,rgba(90,192,255,.3),rgba(32,115,199,.11) 62%,transparent 76%);
  border-color:rgba(115,205,255,.9);
  box-shadow:0 0 calc(16 * var(--s)) rgba(54,161,255,.7),inset 0 0 calc(14 * var(--s)) rgba(106,211,255,.42);
}
body.battle-v2 .attack-stack .zone-btn.selected{
  background:radial-gradient(circle,rgba(221,91,255,.28),rgba(138,31,213,.12) 62%,transparent 76%);
  border-color:rgba(229,119,255,.92);
  box-shadow:0 0 calc(16 * var(--s)) rgba(186,63,255,.7),inset 0 0 calc(14 * var(--s)) rgba(226,124,255,.4);
}

body.battle-v2 .console-core{
  position:absolute;inset:0;
  display:block;gap:0;pointer-events:none;
}
body.battle-v2 .turn-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:15.2%;height:auto;aspect-ratio:1;min-width:0;
  margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(16,19,34,.16);color:#f3d78f;
  font:800 calc(9 * var(--s))/1 Georgia,serif;letter-spacing:.06em;
  text-shadow:0 1px 3px #000;box-shadow:none;
  pointer-events:auto;cursor:pointer;
}
body.battle-v2 .turn-btn:not(:disabled):hover{background:rgba(129,82,169,.2);filter:brightness(1.12)}
body.battle-v2 .turn-btn:disabled{opacity:.55;cursor:default}
/* Подсказка хода висела голым текстом в просвете между пультом и приёмами —
   кладём её на подложку, чтобы читалась как элемент интерфейса. */
body.battle-v2 .turn-orb{
  position:absolute;left:50%;top:calc(100% + 2 * var(--s));transform:translateX(-50%);
  height:calc(15 * var(--s));white-space:nowrap;
  display:grid;place-items:center;
  padding:0 calc(8 * var(--s));
  border:1px solid rgba(201,164,76,.28);border-radius:calc(7 * var(--s));
  background:rgba(9,7,22,.82);
  font-size:calc(9 * var(--s));line-height:1;color:#e0d3b0;text-shadow:0 1px 2px #000;
}
body.battle-v2 .micro-action{
  position:absolute;top:4%;
  width:calc(40 * var(--s));height:calc(15 * var(--s));min-width:0;
  padding:0;
  border:1px solid rgba(193,154,74,.42);border-radius:calc(7 * var(--s));
  background:rgba(4,9,16,.9);color:#d8bd77;
  font:700 calc(7 * var(--s))/1 Georgia,serif;
  display:grid;place-items:center;
  pointer-events:auto;cursor:pointer;z-index:4;
}
body.battle-v2 #switchEnemy{left:4%}
body.battle-v2 #autoBattle{right:4%}
body.battle-v2 .micro-action.active{background:rgba(53,39,16,.86);box-shadow:0 0 calc(9 * var(--s)) rgba(225,183,84,.5)}
body.battle-v2 .micro-action:disabled{opacity:.2}

/* ── Панель приёмов ──────────────────────────────────────────────────────── */
body.battle-v2 .battle-bottom{
  position:absolute;transform:none;
  left:calc(50% - 147 * var(--s));                    /* по центру, W = 294 */
  top:calc(50% - 19 * var(--s));                      /* Y = 229 */
  width:calc(294 * var(--s));height:calc(220 * var(--s));
  max-height:none;min-height:0;
  display:block;margin:0;padding:0;gap:0;
  border:0;border-radius:0;box-shadow:none;
  background:url('/assets/battle/skills-panel.png') center/100% 100% no-repeat;
  pointer-events:auto;
}
body.battle-v2 .battle-bottom::before,
body.battle-v2 .battle-bottom::after{content:none}
body.battle-v2 .skills-panel-art{display:none}
body.battle-v2 .skills-head{display:none}
body.battle-v2 .skills-wrap{
  position:absolute;inset:0;width:auto;height:auto;
  background:none;filter:none;
}

/* Тактики стоят у приёмов: именно от них зависит, какой приём можно
   применить. Кладём их строкой на верхнюю ленту дока — без рамок и подложек,
   чтобы читались как часть панели, а не как отдельный прямоугольник. */
body.battle-v2 .battle-bottom .tactics-panel{
  position:absolute;left:8.48%;top:1.5%;width:82.85%;height:10%;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  align-content:stretch;
}
body.battle-v2 .battle-bottom .tactics-panel span{
  height:100%;min-height:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:calc(2 * var(--s));
  border:0;border-radius:0;background:none;
}
body.battle-v2 .battle-bottom .tactics-panel i{font-size:calc(11 * var(--s));color:#d8b86a}
body.battle-v2 .battle-bottom .tactics-panel b{
  font:700 calc(11 * var(--s))/1 Georgia,serif;margin:0;color:#f4e8c6;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* Сетка 5×4 вписана в нарисованный док: те же доли, что в утверждённом виде. */
body.battle-v2 .battle-bottom .skill-grid{
  position:absolute;left:8.48%;top:13.5%;width:82.85%;height:78.7%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:calc(3 * var(--s));
  max-width:none;
}
body.battle-v2 .battle-bottom .skill-slot,
body.battle-v2 .battle-bottom .empty-skill-slot{
  position:relative;
  width:auto;height:auto;min-height:0;
  display:block;padding:0;
  border-radius:calc(7 * var(--s));
  overflow:hidden;
}
/* Иконки приёмов разного формата: 256×256 у книжных и 40×25 у базовых.
   cover резал широкие по краям — вписываем целиком. */
body.battle-v2 .battle-bottom .skill-slot img{
  position:absolute;inset:6%;
  width:88%;height:88%;object-fit:contain;
  border-radius:calc(4 * var(--s));
}
body.battle-v2 .battle-bottom .skill-slot .skill-name,
body.battle-v2 .battle-bottom .skill-slot .cost{display:none}
body.battle-v2 .battle-bottom .skill-slot .slot-number{
  position:absolute;top:calc(1 * var(--s));left:calc(1 * var(--s));z-index:3;
  min-width:calc(9 * var(--s));height:calc(8 * var(--s));padding:0 calc(2 * var(--s));
  border-radius:calc(3 * var(--s));background:rgba(0,0,0,.8);
  font:700 calc(5.5 * var(--s))/1 Arial,sans-serif;color:#d8bd80;
  display:grid;place-items:center;
}
body.battle-v2 .battle-bottom .basic-technique-icon{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:calc(16 * var(--s));color:#e2c98a;
}
body.battle-v2 .battle-bottom .empty-skill-mark{
  position:absolute;inset:22%;
  width:auto;height:auto;
  display:grid;place-items:center;
  border:1px dashed rgba(201,164,76,.3);border-radius:calc(4 * var(--s));
  font-size:calc(11 * var(--s));color:#5b6273;
}
body.battle-v2 .battle-bottom .skill-slot.cooldown::after{
  font:800 calc(12 * var(--s)) Arial,sans-serif;
}

/* ── Полоса выбора соперника и автобоя ───────────────────────────────────── */
body.battle-v2 .opponent-strip{
  position:absolute;transform:none;
  left:calc(50% - 250.5 * var(--s));                  /* по центру, W = 501 */
  top:calc(50% + 205 * var(--s));                     /* под панелью приёмов */
  width:calc(501 * var(--s));height:calc(34 * var(--s));
  min-height:0;max-height:none;
  margin:0;padding:0 calc(8 * var(--s));
  display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--s));
  border:1px solid rgba(201,164,76,.3);border-radius:calc(8 * var(--s));
  background:rgba(9,7,22,.78);
  overflow-x:auto;overflow-y:hidden;
  pointer-events:auto;z-index:8;
}
body.battle-v2 .opponent-chip{
  flex:0 0 auto;min-width:0;height:auto;
  display:grid;grid-template-columns:calc(20 * var(--s)) minmax(0,1fr);
  align-items:center;gap:calc(4 * var(--s));
  padding:calc(2 * var(--s)) calc(5 * var(--s));
  border-radius:calc(5 * var(--s));
}
body.battle-v2 .opponent-chip img{width:calc(20 * var(--s));height:calc(21 * var(--s))}
body.battle-v2 .opponent-chip b{font-size:calc(6.7 * var(--s))}
body.battle-v2 .opponent-chip small{font-size:calc(5.7 * var(--s))}

/* ── Служебное поверх сцены ──────────────────────────────────────────────── */
body.battle-v2 .battle-exit{
  position:absolute;left:calc(14 * var(--s));bottom:calc(10 * var(--s));
  top:auto;right:auto;z-index:20;
  min-width:0;padding:calc(5 * var(--s)) calc(10 * var(--s));
  border:1px solid var(--sf-gold-dim);border-radius:calc(4 * var(--s));
  background:rgba(10,8,26,.85);color:var(--sf-gold-lit);
  font-size:calc(9 * var(--s));cursor:pointer;
}
body.battle-v2 .battle-mode-badge{
  position:absolute;right:calc(14 * var(--s));bottom:calc(14 * var(--s));
  left:auto;top:auto;z-index:20;
  font-size:calc(8 * var(--s));letter-spacing:.14em;color:var(--sf-muted);opacity:.6;
}
/* Итоги боя лежат внутри поля, а поле — слой без событий мыши: без явного
   pointer-events кнопки «Повторить» и «На Арену» не нажимались. */
body.battle-v2 .battle-result{
  position:absolute;inset:0;z-index:40;
  display:grid;place-items:center;
  pointer-events:auto;
}
body.battle-v2 .battle-result.hidden{display:none}
body.battle-v2 .battle-result .result-card{pointer-events:auto}
body.battle-v2 .battle-size-control{display:none}

/* ── Нижний док: чат и расходники ────────────────────────────────────────── */
body.battle-v2 .battle-utility-dock,
body.battle-v2 .battle-utility-window{
  position:relative;right:auto;bottom:auto;
  width:auto;height:100%;min-height:0;max-height:none;
  display:flex;flex-direction:column;
  border:1px solid var(--sf-gold-dim);border-radius:4px;
  background:linear-gradient(180deg,rgba(21,16,56,.9),rgba(10,8,26,.94));
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  overflow:hidden;
}
body.battle-v2 .battle-utility-tabs{
  flex:0 0 30px;height:30px;
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid rgba(201,164,76,.28);
}
body.battle-v2 .battle-utility-tabs button{
  border:0;background:transparent;color:var(--sf-muted);
  font:700 10px/1 Georgia,serif;letter-spacing:.08em;cursor:pointer;
}
body.battle-v2 .battle-utility-tabs button+button{border-left:1px solid rgba(201,164,76,.22)}
body.battle-v2 .battle-utility-tabs button.active{
  color:var(--sf-gold-lit);
  background:linear-gradient(180deg,rgba(63,47,22,.5),rgba(17,25,38,.16));
}
body.battle-v2 .battle-utility-grid{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:5px;padding:7px;
}
body.battle-v2 .battle-utility-slot{
  position:relative;min-width:0;min-height:0;
  display:grid;place-items:center;
  border:1px solid rgba(201,164,76,.3);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,21,68,.7),rgba(10,8,26,.85));
}
body.battle-v2 .battle-utility-slot img{width:76%;height:76%;object-fit:contain}
body.battle-v2 .global-chat .chat-tabs{
  grid-template-columns:repeat(2,minmax(0,150px));
  justify-content:start;
}

/* ── Узкий экран: каркас ────────────────────────────────────────────────────
   ВАЖНО: этот и следующий блок должны оставаться ПОСЛЕДНИМИ в файле.
   Медиазапрос не даёт прибавки к весу селектора, поэтому любое правило,
   дописанное ниже, его перебивает — на этом дважды ломалась вёрстка.

   Порог 900px взят у каркаса (.app-shell в theme.css): ниже него строки грида
   становятся auto и страница листается. Поэтому бой занимает ровно экран, а
   чат и расходники лежат под ним — до них домотать.
   В альбомной ориентации раскладка макета отлично помещается: композиция
   просто уменьшается коэффициентом --s. Перестроение нужно только в
   портретной — оно в следующем блоке. ────────────────────────────────────── */
@media (max-width:900px){
  body.battle-v2 .app-shell{grid-template-rows:0 auto auto}
  body.battle-v2 .sf-dock{height:auto}
  body.battle-v2 .battle-session{height:auto;min-height:0;place-content:start stretch}
  body.battle-v2 .battle-card{
    width:100%;height:calc(100dvh - 24px);
    aspect-ratio:auto;max-height:none;
    background-position:center 48%;
  }
}

/* ── Телефон стоймя: свой макет 390×830, тот же принцип ─────────────────────
   Проценты от высоты карточки здесь не годятся: на узком, но невысоком окне
   (например 503×639) пульт наезжал на приёмы, а бойцы — на шапку. Поэтому
   портретная раскладка описана как отдельный макет 390×830 и тянется одним
   коэффициентом, как основная сцена:

     --s = min(ширина/390, высота/830)

   Координаты — от центра карточки: left = 50% + (X - 195) * --s,
   top = 50% + (Y - 415) * --s. Блоки идут колонкой и не могут наехать друг
   на друга ни при какой форме экрана; лишняя ширина уходит в поля арены.
   Шкафы убраны — экипировка смотрится в «Инвентаре». ────────────────────── */
@media (max-width:900px) and (orientation:portrait){
  body.battle-v2 .battle-card{
    --s:min(.2564cqw,.1205cqh);
    background-position:center 46%;
  }

  body.battle-v2 #playerEquipment,
  body.battle-v2 #enemyEquipment{display:none}

  /* Шапка: уровни по углам, полосы под ними, раунд по центру. */
  body.battle-v2 .battle-level-frame{
    width:calc(46 * var(--s));height:calc(43 * var(--s));
    top:calc(50% - 407 * var(--s));right:auto;
  }
  body.battle-v2 .battle-level-left{left:calc(50% - 187 * var(--s))}
  body.battle-v2 .battle-level-right{left:calc(50% + 141 * var(--s))}
  body.battle-v2 .round-state{
    left:calc(50% - 23 * var(--s));top:calc(50% - 409 * var(--s));
    width:calc(46 * var(--s));height:calc(46 * var(--s));
  }
  body.battle-v2 .fighter-hud{
    width:calc(120 * var(--s));top:calc(50% - 401 * var(--s));right:auto;
  }
  body.battle-v2 .fighter-hud-left{left:calc(50% - 135 * var(--s))}
  body.battle-v2 .fighter-hud-right{left:calc(50% + 15 * var(--s))}
  body.battle-v2 .hud-title{height:calc(18 * var(--s));font-size:calc(13 * var(--s))}
  body.battle-v2 .bar span{font-size:calc(10 * var(--s))}

  /* Бойцы: по коробке на каждого, между шапкой и пультом. */
  body.battle-v2 .fighter > img{
    top:calc(50% - 320 * var(--s));right:auto;
    width:calc(160 * var(--s));height:calc(240 * var(--s));
  }
  body.battle-v2 .fighter-left > img{left:calc(50% - 187 * var(--s))}
  body.battle-v2 .fighter-right > img{left:calc(50% + 27 * var(--s))}
  body.battle-v2 .arena-glow{
    top:calc(50% - 100 * var(--s));
    width:calc(150 * var(--s));height:calc(26 * var(--s));right:auto;
  }
  body.battle-v2 .arena-glow-left{left:calc(50% - 182 * var(--s))}
  body.battle-v2 .arena-glow-right{left:calc(50% + 32 * var(--s))}
  body.battle-v2 .damage-float{top:calc(50% - 250 * var(--s));right:auto}
  body.battle-v2 .fighter-left .damage-float{left:calc(50% - 107 * var(--s))}
  body.battle-v2 .fighter-right .damage-float{left:calc(50% + 107 * var(--s))}

  /* Пульт, приёмы, цели и выход — колонкой под бойцами. */
  body.battle-v2 .combat-console{
    left:calc(50% - 175 * var(--s));top:calc(50% - 77 * var(--s));
    width:calc(350 * var(--s));height:calc(152 * var(--s));
  }
  body.battle-v2 .battle-bottom{
    left:calc(50% - 150 * var(--s));top:calc(50% + 100 * var(--s));bottom:auto;
    width:calc(300 * var(--s));height:calc(237 * var(--s));
  }
  body.battle-v2 .opponent-strip{
    left:calc(50% - 170 * var(--s));top:calc(50% + 345 * var(--s));bottom:auto;
    width:calc(340 * var(--s));height:calc(32 * var(--s));
  }
  body.battle-v2 .battle-exit{
    left:calc(50% - 52 * var(--s));top:calc(50% + 383 * var(--s));
    right:auto;bottom:auto;transform:none;
    width:calc(104 * var(--s));height:calc(26 * var(--s));
    display:grid;place-items:center;padding:0;
    font-size:calc(12 * var(--s));
  }
  body.battle-v2 .battle-mode-badge{display:none}
}

/* ── Тактики встают на место подсказки хода (arena-191) ──────────────────── */
/* «ВЫБЕРИ ЗОНЫ» занимала отдельную плашку над панелью приёмов и не несла
   информации: зоны и так подсвечены на пульте. На её место переезжают тактики —
   их надо видеть постоянно, потому что от них зависит, какой приём можно
   применить. Освободившаяся верхняя лента внутри панели уходит сетке приёмов,
   поэтому клетки и картинки в них становятся крупнее. */
body.battle-v2 .turn-orb{display:none}

body.battle-v2 .battle-bottom .tactics-panel{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(-19 * var(--s));
  width:auto;height:calc(16 * var(--s));
  display:flex;align-items:center;justify-content:center;
  gap:calc(7 * var(--s));
  padding:0 calc(9 * var(--s));
  border:1px solid rgba(201,164,76,.28);border-radius:calc(7 * var(--s));
  background:rgba(9,7,22,.86);
  z-index:5;
}
body.battle-v2 .battle-bottom .tactics-panel span{
  height:auto;gap:calc(3 * var(--s));
}

/* Сетка приёмов забирает ленту, которую освободили тактики. */
body.battle-v2 .battle-bottom .skill-grid{top:5.5%;height:87%}