/* Раскладка стола: пропорции, размеры и подгонка под высоту экрана.

   Дуэль должна помещаться целиком: прокручивать стол во время хода неудобно,
   а на телефоне прокрутка ещё и срезает портреты. Поэтому в бою прячется шапка
   меню, размеры заданы через clamp(), а высота делится между рядами долями —
   иначе пустая доска забирала две трети экрана, а рука упиралась в нижний край.

   Подключается после styles.css и переопределяет базовые размеры. */

body.in-battle .app-header { display: none; }
body.in-battle { overflow: hidden; }

.screen-battle {
  padding: 4px 8px 6px;
  height: 100dvh;
  overflow: hidden;
}

/* Стол — растягивающийся flex-элемент экрана: height:100% для flex-потомка
   ненадёжен, а flex:1 честно отдаёт ему всю оставшуюся высоту. */
body.in-battle .battle {
  min-height: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 2px;
}

/* ---------------- доли высоты ----------------

   Ряды делят экран пропорциями, а не минимальными высотами: доска соперницы и
   своя получают одинаковую долю, рука — чуть больше, портреты — фиксированную
   полосу. Так пустой стол не растягивается на весь экран. */

body.in-battle .side-enemy { flex: 0 0 auto; }
body.in-battle .board {
  flex: 1 1 0;
  min-height: clamp(70px, 11vh, 104px);
  padding: 2px 4px;
}
body.in-battle .table-line { flex: 0 0 auto; }
/* Ряд игрока прижат к нижней кромке, свободная высота уходит доскам. */
body.in-battle .side-player { flex: 0 0 auto; margin-top: auto; }

/* Рука: высота ровно под карту плюс запас на подъём выбранной.
   Раньше здесь была прокрутка по горизонтали — она создавала контекст
   обрезки, и низ карт со статами уезжал под край. */
body.in-battle .hand-player {
  overflow: visible;
  flex: 0 0 auto;
  min-height: 0;
  height: calc(var(--card-h) + 18px);
  padding: 14px 2px 0;
  align-items: flex-start;
  gap: 0;   /* расстояние задаёт margin ниже: он же уводит карты внахлёст */
}
body.in-battle .hand-player .card {
  width: var(--card-w);
  height: var(--card-h);
}

/* Много карт в руке — сдвигаем их внахлёст, а не режем и не прокручиваем. */
body.in-battle .hand-player .card:not(:first-child) {
  /* Процент считается от ширины самой руки, а не окна: у экрана есть поля,
     и по 100vw карты вылезали за край на пару пикселей. */
  margin-left: min(6px, calc((100% - var(--card-w) * var(--n, 1)) / max(var(--n, 1) - 1, 1)));
}

body.in-battle {
  --card-w: clamp(62px, 8.6vh, 92px);
  --card-h: clamp(86px, 11.8vh, 126px);
}

body.in-battle .minion {
  width: clamp(52px, 7vh, 70px);
  height: clamp(64px, 8.6vh, 86px);
}
body.in-battle .hero {
  width: clamp(62px, 9vh, 92px);
  height: clamp(62px, 9vh, 92px);
}
body.in-battle .hero-power {
  width: clamp(58px, 8.4vh, 82px);
  height: clamp(58px, 8.4vh, 82px);
  font-size: clamp(7.5px, 1vh, 9px);
}
body.in-battle .hand-enemy .card-back {
  width: clamp(24px, 3.4vh, 32px);
  height: clamp(34px, 4.8vh, 46px);
}
body.in-battle .deck-stack {
  width: clamp(26px, 3.6vh, 34px);
  height: clamp(36px, 5vh, 48px);
}

/* ---------------- читаемость стола ----------------

   Столешница из арта яркая в середине: мандала спорит с картами и существами.
   Гасим центр прямо в фоне стола, а не отдельным слоем поверх: слой пришлось бы
   класть под содержимое через position, и это ломало абсолютные подсказки —
   они вставали в поток и съедали высоту. */
body.in-battle .battle {
  background:
    radial-gradient(70% 45% at 50% 50%, rgba(6, 4, 2, 0.66), transparent 78%),
    linear-gradient(180deg, rgba(6, 4, 2, 0.55) 0%, transparent 20%, transparent 72%, rgba(6, 4, 2, 0.6) 100%),
    linear-gradient(180deg, rgba(12, 7, 3, 0.55) 0%, rgba(12, 7, 3, 0.3) 45%, rgba(40, 22, 8, 0.45) 100%),
    url('art/bg_board.webp') center / cover no-repeat;
}

/* Половины стола различимы: у своей — тёплая полка под рукой. */
body.in-battle .side-player {
  border-radius: 14px 14px 0 0;
  background: linear-gradient(0deg, rgba(30, 18, 8, 0.75), transparent 78%);
  padding: 0 2px 2px;
}
body.in-battle .board-player {
  border-radius: 14px;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(240, 194, 96, 0.1), transparent 70%);
}
body.in-battle .board-enemy {
  border-radius: 14px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(120, 60, 200, 0.08), transparent 70%);
}

/* Подсказка «пусто» на своей половине: объясняет, куда класть карту. */
body.in-battle .board-player.empty::after {
  content: 'Коснитесь карты, затем этой области';
  font-size: 11px;
  color: rgba(240, 226, 198, 0.35);
  letter-spacing: 0.02em;
}
body.in-battle .board-player.placing::after { content: 'Отпустите здесь'; color: rgba(140, 255, 190, 0.7); }

/* ---------------- низкие экраны ---------------- */

@media (max-height: 740px) {
  body.in-battle .hand-count,
  body.in-battle .hero-name { display: none; }
  body.in-battle .table-line { height: 14px; }
  body.in-battle .card-text { display: none; }
  body.in-battle .board-player.empty::after { display: none; }
  body.in-battle .battle-hint { bottom: calc(var(--card-h) + 76px); }
}

/* Широкий экран: стол не растягиваем на всю ширину монитора. */
@media (min-width: 900px) {
  .screen-battle { width: min(100%, 760px); }
}