/* Экран боя «БИТВЫ DTF» (public/ui/fight.js). Устройство подчинено правилу владельца «зашёл, увидел и понял»: на ход тридцать секунд, значит всё, чем ходят, обязано стоять в одном экране и не двигаться. Сверху строка «я — против — он» с полосами Жизни и Запала, под ней стол выбора: слева зоны, под ними свёрнутые в строку-счётчик Серии и Напитки, справа сетка приёмов; внизу «Вперёд!», прилипший к краю экрана. Ещё ниже — лог боя. Четыре правила, которым тут подчинено всё оформление: 0. НИКАКОЙ СВОЕЙ ПРОКРУТКИ У СТОЛА ВЫБОРА. Прокрутка, спрятанная в рамку, — это та же прокрутка, только невидимая: до 11.08.2026 у .fg-tiles стоял предел высоты, и на 1280×800 в окне 290 точек лежало содержимое на 1440 (шесть плиток из тридцати четырёх целиком), а на 375×812 — 2609 в окне 252. Развёрнут теперь один набор из трёх, и потому всё помещается. Заодно исчезло выдуманное вычитаемое (`calc(100vh - 510px)`): любая новая строка над сеткой ломала этот расчёт молча. 1. ЧЕТЫРЕ КЕГЛЯ И НИ ОДНИМ БОЛЬШЕ — 12, 13, 15, 17. Столько же на всех прочих экранах игры. Раньше на одном этом экране их было девять (10, 10.5, 11, 11.5, 12, 12.5, 13, 15, 17), и из-за этого экран читался рыхлым: глазу не за что зацепиться, когда каждая вторая строка своего размера. 17 — заголовок окна (styles.css), 15 — кнопки (styles.css), 13 — имена и то, по чему выбирают, 12 — всё служебное. 2. ДВЕ ЗАЛИВКИ. Белое окно (.win) и одна серая плитка (--fg-tile). Плашки внутри плашки нет нигде: наборы плиток разделены не рамками, а заголовком и воздухом. До переделки заливок было четыре, и одна лежала в другой (.win → .fg-panel → .fg-item). 3. НИЧЕГО НЕ ПЛЯШЕТ. Высота плитки одна на всю сетку, поэтому уходящий в отсрочку приём не двигает соседей: причина отказа встаёт на место цены, в ту же строку, а порядок приёмов остаётся словарным и не пересортировывается каждый раунд. Строка бойца тоже держит высоту: эффекты в ней не переносятся. Двигается только то, что человек двинул сам, — раскрытое им же раскрытие. Контраст (формула WCAG, тема DTF — белое окно #fff на #f2f2f2): #111 на белом — 18,88:1; #111 на плитке #f5f5f5 — 17,32:1; #606060 на плитке — 5,77:1; #a42d32 на плитке — 6,42:1; #0b5dd7 на плитке — 5,41:1; #0b5dd7 на белом — 5,90:1; белый на синем #0b5dd7 — 5,90:1 (выбранная плитка, выбранная зона); рамка #8f9296 на белом — 3,13:1. Всё выше 4,5:1 для текста и 3:1 для органов управления. */ .fg-win { /* Одна серая заливка на весь экран боя: плитка выбора. Всё остальное — белое окно и волосяные линии. Заливка плитки нарочно почти незаметна (1,09:1 к белому) — кричать ей не о чем. Зато её РАМКА держит 3,13:1: плитка — орган управления, и правило контраста требует, чтобы её край был виден без напряжения. Тонкие линии между разделами (--fg-line) — чистое украшение, к ним это не относится. */ --fg-tile: #f5f5f5; --fg-tile-line: #8f9296; --fg-line: var(--line, #e6e8ec); } /* Кнопка хода липнет к низу экрана (см. .fg-go ниже), а прилипнуть она может только если НИ ОДИН предок не завёл собственную прокрутку. Два таких предка есть, и оба чужие: • public/dtf-theme.css — `.win { overflow: hidden }` (скругление углов); • public/styles.css на узком экране — `.win-body { overflow-x: auto }` (широкие таблицы Справки и Магазина прокручиваются внутри панели). `overflow: clip` режет ровно так же, как hidden, но прокруткой НЕ становится, поэтому скругление цело, а липкая полоса работает. У окна боя широких таблиц нет вовсе, так что и второе правило ему ни к чему. */ .win.fg-win { overflow: clip; } .win.fg-win > .win-body { overflow: visible; } /* ── Приписка ──────────────────────────────────────────────────────────────── */ /* Одна строка о том, чего человеку неоткуда узнать: вид боя, правило про банки, слепой счётчик. Подробности — в title, а не абзацем: посреди раунда абзацы не читают. Заливки у приписки нет нарочно — это вторая плашка, а их всего две. */ .fg-aside { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); border-left: 2px solid var(--fg-tile-line); padding-left: 8px; } .fg-aside[title] { cursor: help; } .fg-aside.is-stop { color: var(--blood-ink, var(--blood)); border-left-color: currentColor; } /* ── Арена ─────────────────────────────────────────────────────────────────── */ .fg-arena { display: flex; flex-direction: column; gap: 10px; } /* Уговор с public/dtf-theme.css (файл чужой и грузится ПОЗЖЕ этого). Там записано «.fg-side, .fg-choices — белая карточка с рамкой»: это и была плашка внутри плашки, из-за которой заливок на экране набиралось четыре. Строка бойца и зоны — не карточки, а части одного стола, поэтому здесь вес потяжелее снимает у них фон, рамку и поля. Цветная метка стороны (inset 3px у .fg-side--me и --foe) при этом остаётся: по ней видно, где свой, а где чужой. */ .fg-arena .fg-side, .fg-deck .fg-choices { background: none; border: 0; padding: 0; border-radius: 0; } /* Полоска сбоку — это метка стороны, а не рамка аватара: между ними нужен воздух. При отступе в 6 точек она почти касалась портрета и читалась как его обводка (замечание владельца 11.08.2026). 14 точек — полоска в 3 и 11 воздуха: сторона видна, а портрет стоит свободно. */ .fg-arena .fg-side--me { padding-left: 14px; box-shadow: inset 3px 0 0 var(--life); } .fg-arena .fg-side--foe { padding-right: 14px; box-shadow: inset -3px 0 0 var(--blood); } /* Второй уговор с public/adaptive.css. Там у бойцов проставлены имена клеток старой сетки (grid-area: me / foe / mid) — сетки, которой больше нет. Имён этих в новой сетке не существует, и браузер сваливал обе стороны в одну клетку: «проверяющий» печатался поверх соперника. Возвращаем им обычное размещение. Вес — два класса, поэтому порядок подключения файлов уже не важен и чинить чужой файл не приходится. */ .fg-versus .fg-side--me, .fg-versus .fg-side--foe { grid-area: auto; } /* ── Строка «я — против — он» ──────────────────────────────────────────────── */ /* Раньше это были два столбца по краям экрана с портретом в 96 точек: на телефоне одна своя карточка занимала 286 точек из 812, и соперник уезжал за 1400-ю. Теперь оба бойца в одной строке, портрет 40 точек, а место отдано тому, по чему и правда решают, — полосам Жизни и Запала. */ .fg-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--fg-line); } .fg-side { display: grid; grid-template-columns: auto minmax(0, 1fr); /* По ВЕРХУ, а не по центру. Содержимое сторон разной высоты (у соперника приписка длиннее, у своего бойца бывает строка эффектов), и центрирование разводило блоки по вертикали: полосы Жизни стояли на разных уровнях, и сравнить их одним взглядом было нельзя (жалоба владельца 11.08.2026 — «чтобы мои и врага на одном уровне были, а не эта кривизна»). */ align-items: start; gap: 8px; min-width: 0; } /* Одна сетка строк на обе стороны: имя, полосы, приписка, эффекты. Высоты заданы числами — тогда строки совпадают по вертикали независимо от того, чей ник длиннее и у кого какая приписка. */ .fg-side-body { display: grid; grid-template-rows: 20px auto 16px 17px; gap: 3px; } .fg-name { height: 20px; align-items: center; } /* Приписка — всегда одна строка: перенос сдвинул бы всё, что ниже, только у одной из сторон. Что не влезло — видно по наведению. */ .fg-meta { height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Свой боец слева, соперник справа — и зеркально: имя и полосы ближе к центру, чтобы сравнивать их одним взглядом, а не через весь экран. */ .fg-side--foe { grid-template-columns: minmax(0, 1fr) auto; } .fg-side--foe .fg-face { order: 2; } .fg-side--foe .fg-side-body { order: 1; text-align: right; } .fg-side--foe .fg-vital-name { text-align: right; } /* .fg-face — тело бойца для слоя эффектов (public/vfx/arena-vfx.js) и для встряски аватара (public/motion.css). Имя менять нельзя. */ .fg-face { line-height: 0; flex: 0 0 auto; } .fg-face .avatar { box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .fg-side-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* Уровень отделён от ника нарочно: длинный ник режется многоточием, а уровень не режется никогда. Иначе выходило «legenda_komm…» — а [8] пропадало, хотя для боя число уровня важнее последних букв ника. */ .fg-name { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: bold; color: var(--ink); /* Высота строки задана точками, а не долей кегля, и выравнивание — по середине, а не по базовой линии: доля кегля давала дробные 16,3, а базовая линия под двумя разными кеглями (ник 13, уровень 12) добавляла ещё полточки. Из этих мелочей и складывалось то самое «дышит». */ line-height: 17px; height: 17px; min-width: 0; } .fg-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fg-lvl { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); font-weight: normal; } .fg-side--foe .fg-name { justify-content: flex-end; } .fg-side--foe .fg-nick { order: 2; } .fg-side--foe .fg-lvl { order: 1; } /* Вторая строка: рейтинг, уровень экипировки и приписки вроде «за соперника ходит наказ». В бою по ним не решают, поэтому голос тихий, а на телефоне строка гаснет вовсе (см. тесный экран ниже). */ .fg-meta { font-size: 12px; line-height: 17px; height: 17px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Красным — только то, что и правда необычно: соперника нет в сети, за кого-то ходит автомат. Про тренировочного бота красный неверен: он не диковина. */ .fg-meta.is-alert { color: var(--blood-ink, var(--blood)); } /* Полосы короче и повёрнуты друг к другу: свои прижаты к середине справа, чужие — слева. Во всю ширину они были нечитаемо длинными, а сравнивать их приходилось через весь экран. РАСКЛАДКУ ПОЛОС ВЫБИРАЕТ ИХ СОБСТВЕННАЯ ШИРИНА, а не ширина окна, — потому и container-type. Ширина окна тут врёт: до 560 точек бойцы стоят в одной строке с общей строкой раунда над ними, а с 561 между ними встаёт столбец «ПРОТИВ», и каждому достаётся ВДВОЕ МЕНЬШЕ, чем было. По окну выходило, что при 561 полосе остаётся 32 точки, а при 375 — 114: чем шире окно, тем короче полоса. Спрашиваем теперь у самих полос. */ .fg-vitals { display: flex; flex-direction: column; container-type: inline-size; container-name: fgv; } /* Зазор между Жизнью и Запалом: 4, а не 8 из общей темы (--s2). Полосы одного бойца — это одна вещь, а не две; восьмёрка разводила их в две отдельные. */ .fg-side .fg-vitals { gap: 4px; } .fg-side--me .fg-vitals { align-items: flex-end; } .fg-side--foe .fg-vitals { align-items: flex-start; } /* ЧИСЛО ВЫВЕДЕНО ИЗ ПОЛОСЫ (замечание владельца 12.08.2026: «выглядит слишком просто и дёшево»). Прежде «150 / 150» сидело тёмной таблеткой ПОВЕРХ цветной заливки, и плашка спорила с полосой: две плотные фигуры на шестнадцати точках высоты. Теперь у подписи, полосы и числа по своему месту, и каждое занято одним делом: Жизнь [▓▓▓▓▓▓▓▓▓▓░░░░] 150 / 150 Число стоит рядом, а не сверху, поэтому полоса остаётся ЧИСТОЙ: по ней читают долю, по числу — точное значение, и одно другому больше не мешает. Разметку это не трогает. `.bar-text` по-прежнему лежит внутри `.bar` (её рисует bar() из public/core.js, файл общий с Профилем и Популярным), но здесь она вынесена наружу абсолютным размещением. Ради этого с полосы сняты `position: relative` и `container-type` — оба делали её containing block’ом, и число обрезалось бы её же `overflow: hidden`. */ /* ОСНОВНАЯ РАСКЛАДКА — ДВА ЭТАЖА: сверху подпись и число, снизу полоса во всю ширину. Она стоит основной, а не запасной, нарочно: работает при любой ширине, а полосе отдаёт ВСЁ, что есть. Строка в одну линию (подпись · полоса · число) включается ниже, и только когда места и правда хватает на всех троих. Жизнь 150 / 150 [▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░] Высоты заданы числами — и этажей, и полос. Иначе строка бойца росла бы на полточки от того, какое число в подписи, и «дышала» бы от раунда к раунду. Жизнь: 16 + 2 + 11 = 29. Запал: 15 + 2 + 6 = 23. */ .fg-vital { width: 100%; /* 330, а не 260: в один ряд число отнимает у полосы 74 точки, и без прибавки полоса стала бы короче собственной подписи. Место есть — тело бойца на 1280 шириной 424 точки. */ max-width: 330px; position: relative; display: grid; /* Ширина клетки под число — числом, а не содержимым: клетка `auto` делала бы полосы у сторон разной длины («150 / 150» против «84 / 84» — разница в 20 точек), а их положено сравнивать одним взглядом. 74 точки — замер самого длинного числа: «150 / 150» кеглем 15 жирным, моноширинными цифрами, 71,1. */ --fg-num: 74px; --fg-bar-h: 11px; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 16px var(--fg-bar-h); align-items: center; gap: 2px 6px; height: 29px; } /* ЖИЗНЬ И ЗАПАЛ РАЗЛИЧАЮТСЯ НЕ ТОЛЬКО ЦВЕТОМ. Жизнь важнее — она и подана заметнее: полоса вдвое толще (11 против 6), число на две ступени крупнее (15 против 13 при 700 и 600), подпись чернилами --ink против --ink-soft. Цепляемся за класс заливки: своего признака у `.fg-vital` в разметке нет. */ .fg-vital:has(.bar-fill.energy), .fg-vital:has(.bar-fill.mp) { height: 23px; --fg-bar-h: 6px; } /* Клетки названы поимённо — и столбец, и СТРОКА. Строка обязательна: у соперника подпись стоит в последнем столбце, а полоса раньше неё, то есть «назад» по ходу расстановки, и без явной строки полоса уезжала этажом ниже — полосы сторон вставали на разные уровни. Ровно та кривизна, которую ведущий уже выравнивал однажды. Подпись — в одну строку всегда: перенос растил бы строку бойца ровно там, где ей расти запрещено. */ .fg-vital-name { grid-column: 1; grid-row: 1; font-size: 12px; line-height: 16px; white-space: nowrap; } /* Два класса, а не один: `.fg-vital-name { color: var(--dim) }` из public/dtf-theme.css грузится ПОЗЖЕ этого файла и при равном весе побеждает — и обе подписи выходили одинаково бледными. Здесь Жизнь говорит в полный голос (--ink, 18,88:1 на белой карточке), Запал вполголоса (--ink-soft, 5,77:1). */ .fg-vital .fg-vital-name { color: var(--ink); } .fg-vital:has(.bar-fill.energy) .fg-vital-name, .fg-vital:has(.bar-fill.mp) .fg-vital-name { color: var(--ink-soft); } .fg-vital > .bar { grid-column: 1 / -1; grid-row: 2; } /* Сторона соперника зеркальна: подпись у внешнего края, число — у середины. Числа обеих сторон встают рядом с разделителем «ПРОТИВ» и потому сравниваются взглядом, не бегая по всей ширине окна. */ .fg-side--foe .fg-vital { grid-template-columns: minmax(0, 1fr) max-content; } .fg-side--foe .fg-vital-name { grid-column: 2; grid-row: 1; text-align: right; } .fg-side--foe .fg-vital > .bar { grid-column: 1 / -1; } /* ── Число рядом с полосой ─────────────────────────────────────────────────── */ /* Цифры моноширинные (tabular-nums): 150 → 149 → 99 не должно дёргать строку. Число стоит у своего края первого этажа — у своего бойца справа, у соперника слева, — и потому всегда рядом со своей полосой. */ .fg-vital .bar-text { position: absolute; top: 0; bottom: auto; left: auto; right: 0; height: 16px; width: auto; max-width: none; transform: none; display: flex; align-items: center; justify-content: flex-end; padding: 0; background: none; border-radius: 0; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: bold; line-height: 16px; letter-spacing: 0; text-shadow: none; /* Одна строка и только одна. Ровно на этом спотыкалась приёмка: подпись ложилась в два этажа, второй уезжал под нижний край, и от трёхзначной Жизни на экране оставалось «102 /». Теперь у числа своё место рядом с полосой, запрет на перенос и никакой обрезки — оба этажа исключены по устройству, а не по счастливому стечению ширин. */ white-space: nowrap; overflow: visible; } .fg-side--foe .fg-vital .bar-text { left: 0; right: auto; justify-content: flex-start; } .fg-vital:has(.bar-fill.energy) .bar-text, .fg-vital:has(.bar-fill.mp) .bar-text { height: 15px; font-size: 13px; font-weight: 600; line-height: 15px; color: var(--ink-soft); } /* ТЕСНО: подпись и число делят один этаж и с каждой отнятой точкой сходятся. Ступени взяты по замеру самого длинного числа «150 / 150» рядом с самой длинной подписью «Жизнь» (39,2): кегль 15 жирный — 71,1, вдвоём 110,3 → нужно 114 и больше; кегль 13 жирный — 62,7, вдвоём 101,9 → нужно 105 и больше; кегль 12 полужирный — 57,6, вдвоём 96,8 → нужно 98 и больше. Спрашиваем ШИРИНУ ПОЛОС, а не окна: при 561 точке окна полосам достаётся 148, при 375 — 114,5, при 320 — 232, и по окну эти ступени не расставить. Кегли — из четырёх, какие на этом экране разрешены (12, 13, 15, 17). */ @container fgv (max-width: 113px) { .fg-vital .bar-text { font-size: 13px; } .fg-vital:has(.bar-fill.energy) .bar-text, .fg-vital:has(.bar-fill.mp) .bar-text { font-size: 12px; } } @container fgv (max-width: 104px) { .fg-vital .bar-text, .fg-vital:has(.bar-fill.energy) .bar-text, .fg-vital:has(.bar-fill.mp) .bar-text { font-size: 12px; font-weight: 600; } } /* ── Одна строка вместо двух этажей ────────────────────────────────────────── */ /* Когда полосам достаётся 312 точек и больше, подпись, полоса и число встают в ОДНУ строку: строка бойца от этого ниже на 16 точек, а полосе всё равно остаётся не меньше 180 (312 − 46 подпись − 74 число − два зазора по 6). Черта проведена по полосе, а не по красоте: ниже неё один ряд обходится слишком дорого. При 218 точках (окно 700) в один ряд полосе досталось бы 86 вместо 218, при 148 (окно 561) — 16 вместо 148. Доля Жизни по такой полосе не читается, а читать её — единственное, зачем полоса нужна. */ @container fgv (min-width: 312px) { .fg-vital { grid-template-columns: 46px minmax(0, 1fr) var(--fg-num); grid-template-rows: auto; gap: 6px; height: 20px; } .fg-vital:has(.bar-fill.energy), .fg-vital:has(.bar-fill.mp) { height: 16px; } .fg-vital-name { font-weight: bold; } .fg-vital:has(.bar-fill.energy) .fg-vital-name, .fg-vital:has(.bar-fill.mp) .fg-vital-name { font-weight: normal; } .fg-vital > .bar { grid-column: 2; grid-row: 1; } .fg-side--foe .fg-vital { grid-template-columns: var(--fg-num) minmax(0, 1fr) 46px; } .fg-side--foe .fg-vital-name { grid-column: 3; } .fg-side--foe .fg-vital > .bar { grid-column: 2; } /* Число занимает свою клетку целиком и прижато к полосе. */ .fg-vital .bar-text { top: 0; bottom: 0; height: auto; width: var(--fg-num); justify-content: flex-start; font-size: 15px; line-height: 20px; } .fg-side--foe .fg-vital .bar-text { justify-content: flex-end; } .fg-vital:has(.bar-fill.energy) .bar-text, .fg-vital:has(.bar-fill.mp) .bar-text { height: auto; font-size: 13px; line-height: 16px; } } /* ── Объём полосы ──────────────────────────────────────────────────────────── */ /* Полоса должна читаться как ЖЁЛОБ С ЗАЛИВКОЙ, а не как закрашенный прямоугольник. Три вещи, и все три — тенями, без переливов и без блеска: • внутренняя грань сверху и тонкий кант по кругу — дорожка утоплена; • тонкая тень у основания — полоса лежит на карточке, а не врисована в неё; • у заполненной части плотнее край (см. ::after ниже). Первые две достались и общей полосе (public/dtf-theme.css) — она стоит в Профиле и в Популярном, и объём ей нужен тот же. А высота, край и след живут только здесь: там внутри полосы по-прежнему стоит число, и ни утончать её, ни рисовать поверх нельзя. */ .fg-vital .bar { /* Оба свойства сняты нарочно: `position: relative` (public/styles.css) и `container-type: inline-size` (public/dtf-theme.css) делают полосу containing block’ом для абсолютной подписи, и подпись обрезалась бы `overflow: hidden` при выносе наружу. */ position: static; container-type: normal; /* Одна клетка на всех: след, заливка и край лежат друг на друге и не двигают друг друга. Порядок отрисовки — порядок разметки: след (::before), заливка (.bar-fill), край (::after). */ display: grid; grid-template: 100% / 100%; height: var(--fg-bar-h); border-radius: 999px; /* Дорожка та же, что у общей полосы (#d6dade). Темнее её не делаем нарочно: заливки тут светлыми не назовёшь, и каждая ступень затемнения дорожки ОТНИМАЕТ у них контраст — зелёная #2f9e44 к #d6dade даёт 2,45:1, а к #ccd2d8 уже 2,26:1. Глубину даёт тень, а не краска. */ background: #d6dade; box-shadow: inset 0 1px 2px rgba(15, 22, 30, .22), inset 0 0 0 1px rgba(15, 22, 30, .08), 0 1px 1px rgba(15, 22, 30, .10); overflow: hidden; } .fg-vital .bar-fill { grid-area: 1 / 1; height: 100%; /* Грани горизонтальные: заливка едет transform: scaleX() (public/motion.css), и вертикальные линии от этого не толстеют и не худеют. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(15, 22, 30, .14); } /* ПЛОТНЫЙ КРАЙ ЗАПОЛНЕННОЙ ЧАСТИ. Рисуется отдельным слоем и НЕ участвует в scaleX: полоска в 4 точки стоит там, где кончается заливка, и не растягивается вместе с ней. Позиция — доля --fill, ту же долю читает public/motion.css. При пустой полосе край гаснет: тёмная риска на пустом жёлобе врала бы. Край не только про объём — он ЧИНИТ КОНТРАСТ ГРАНИЦЫ. Заливка сама по себе отделяется от дорожки слабо (зелёная 2,45:1, янтарная 1,61:1 при норме 3:1 для указателей), и это свойство палитры, а не этой переделки. Затемнение на 38% поднимает крайние точки заливки до 3,4…5,3:1 — то есть граница «сколько осталось» стала различима там, где раньше не была. */ .fg-vital .bar::after { content: ''; grid-area: 1 / 1; background-image: linear-gradient(90deg, rgba(15, 22, 30, 0), rgba(15, 22, 30, .38)); background-repeat: no-repeat; background-size: 4px 100%; background-position: calc(var(--fill, 1) * 100%) 0; opacity: clamp(0, calc(var(--fill, 1) * 12), 1); } /* ── След упавшей Жизни ────────────────────────────────────────────────────── */ /* Сколько сняли — видно, не читая числа: за уходящей вниз полосой остаётся бледный след прежнего значения и гаснет за четыре десятых секунды. Устройство: --fg-ghost повторяет --fill, но с задержкой и переходом, поэтому отстаёт. Слой лежит ПОД заливкой, и видна ровно разница между старым и новым значением. Прозрачность считается из той же разницы: догнал — исчез. При лечении след уходит в минус и обнуляется, то есть не показывается вовсе. */ @property --fg-ghost { syntax: ''; inherits: true; initial-value: 1; } .fg-vital { --fg-ghost: var(--fill, 1); transition: --fg-ghost 420ms ease-out 90ms; } .fg-vital .bar::before { content: ''; grid-area: 1 / 1; transform-origin: left center; transform: scaleX(var(--fg-ghost, 1)); background: rgba(229, 72, 77, .55); opacity: clamp(0, calc((var(--fg-ghost, 1) - var(--fill, 1)) * 8), 1); } .fg-vital:has(.bar-fill.energy) .bar::before, .fg-vital:has(.bar-fill.mp) .bar::before { background: rgba(11, 93, 215, .40); } /* Эффекты — одной строкой без переноса: перенос менял бы высоту строки бойца, а она обязана стоять на месте. Что не влезло, видно целиком по наведению. */ .fg-effects { grid-column: 1 / -1; /* Всегда ПОСЛЕДНЯЯ строка карточки. У соперника лицо и тело меняются местами через order, и строка эффектов с порядком по умолчанию уезжала в НАЧАЛО: она занимала первый ряд сетки и опускала имя с полосами на 25 точек. Из-за этого полосы Жизни у сторон стояли на разных уровнях — ровно та кривизна, на которую пожаловался владелец. */ order: 3; display: flex; gap: 4px; overflow: hidden; /* Место под строку эффектов отведено всегда — пустая она или полная. Так карточка бойца держит одну и ту же высоту весь бой. */ height: 17px; } .fg-side--foe .fg-effects { justify-content: flex-end; } /* Ровно 17 точек в высоту — столько же, сколько отведено пустой строке эффектов. Иначе карточка бойца дышала бы на три точки каждый раунд. */ .fg-effect { display: inline-flex; align-items: center; height: 17px; font-size: 12px; line-height: 15px; padding: 0 6px; color: var(--ink); background: var(--fg-tile); border: 1px solid var(--fg-tile-line); border-radius: var(--radius); white-space: nowrap; } .fg-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; } .fg-round-line { font-size: 12px; font-weight: bold; color: var(--ink); white-space: nowrap; } .fg-vs-word { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; } /* ── Часы хода (живой бой) ─────────────────────────────────────────────────── */ .fg-clock { text-align: center; min-height: 20px; } .fg-clock .bar { max-width: 260px; margin: 3px auto 0; height: 8px; } .fg-secs { font-size: 13px; font-weight: bold; color: var(--ink); } .fg-secs.is-hot { color: var(--blood-ink, var(--blood)); } .fg-wait { font-size: 13px; color: var(--ink-soft); } .fg-wait.is-hot { color: var(--blood-ink, var(--blood)); font-weight: bold; } /* Занавес: мгновение между последним ударом и экраном итога. */ .fg-curtain { text-align: center; font-size: 13px; font-weight: bold; color: var(--blood-ink, var(--blood)); } /* ── Стол выбора: зоны слева, плитки справа ────────────────────────────────── */ /* «Рядом», а не «внизу», — и есть главная правка. Прежде приёмы начинались на 1816-й точке телефонного экрана, серии на 2632-й, напитки на 3690-й, и за каждым ходом приходилось опускаться и подниматься обратно. */ /* Три части, два столбца: слева зоны, под ними свёрнутые счётчики, справа во всю высоту приёмы. Счётчики убраны налево не для красоты, а по замеру: на 1280 столбец зон высотой 165 точек стоял рядом со столбцом приёмов высотой 279, и полсотни точек слева пустовали — ровно столько не хватало, чтобы кнопка хода уместилась в экран в бою по наказу. */ .fg-deck { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px 14px; align-items: start; } .fg-zones { grid-column: 1; grid-row: 1; } .fg-folds { grid-column: 1; grid-row: 2; } /* Приёмы и раскрытый набор стоят В ОДНОЙ И ТОЙ ЖЕ КЛЕТКЕ, потому что показан всегда ровно один из них. */ .fg-tiles, .fg-open { grid-column: 2; grid-row: 1 / span 2; } /* Подсказка — отдельной нижней строкой во всю ширину стола. */ .fg-tips { grid-column: 1 / -1; grid-row: 3; } /* РАСКРЫТЫЙ НАБОР ВСТАЁТ НА МЕСТО СЕТКИ ПРИЁМОВ. Прежде он разворачивался ПОД своей строкой-счётчиком, а строки эти лежат в левом столбце, ниже зон. Замер приёмки 12.08.2026 (1280×800, нулевая прокрутка): нажатие на «Напитки · 30 банок» ставило сетку банок на 789,3-ю точку при окне в 800 и липкой полосе с 716-й — видно НОЛЬ плиток из десяти, то есть нажал и на экране не изменилось ничего. Свободного места под столом на этом экране нет вовсе (21,5 точки), а вот справа лежат приёмы — и пока человек выбирает банку, приёмы ему не нужны: в одном ходу идёт либо приём, либо банка. Поэтому набор занимает их место, а не ищет себе новое. Зоны удара и блока при этом НЕ прячутся ни на секунду: блок выбирают каждый ход. */ .fg-deck:has(.fg-open-body) .fg-tiles { display: none; } /* Пустой слот не должен занимать ни точки и не должен ловить нажатия. */ .fg-open:not(:has(.fg-open-body)), .fg-tips:not(:has(.fg-tip-body)) { display: none; } .fg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .fg-col { min-width: 0; } .fg-col-title { font-size: 12px; font-weight: bold; color: var(--ink); padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid var(--fg-line); } /* Зона удара и блока: строка ровно 26 точек — колонки и держатся ровными. */ .fg-pick { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px; font-size: 13px; color: var(--ink); border-radius: var(--radius); cursor: pointer; } .fg-pick input { flex: 0 0 auto; margin: 0; } .fg-pick input:disabled { cursor: default; } .fg-pick:has(input:checked) { background: var(--fg-tile); box-shadow: inset 0 0 0 1px var(--gold-dim); } .fg-pick:has(input:disabled) { color: var(--ink-soft); cursor: default; } /* ── Сетка плиток ──────────────────────────────────────────────────────────── */ /* СВОЕЙ ПРОКРУТКИ ТУТ БОЛЬШЕ НЕТ. Раньше здесь стояло max-height: clamp(180px, calc(100vh - 510px), 320px); overflow-y: auto; и это была подмена: прокрутка никуда не делась, её убрали в рамку, где её вдобавок не видно. Замер на живом бою: на 1280×800 в окошке 290 точек лежало содержимое на 1440 — целиком было видно ШЕСТЬ плиток из тридцати четырёх; на 375×812 в окошке 252 точки лежало 2609. Вычитаемое в той формуле вдобавок было выдумано (510 и 560): любая новая строка над сеткой ломала расчёт молча. Теперь вычитать нечего — высоту держит само содержимое, а помещается оно потому, что за раз показан один набор из трёх (см. .fg-folds). */ .fg-tiles, .fg-open { min-width: 0; } .fg-open-body { min-width: 0; } /* Обводки у раскрытого набора нет: он и так виден тем, что занял целый столбец. Обводка нужна только клавиатуре — её даёт :focus-visible ниже. */ .fg-open-body:focus { outline: none; } .fg-open-body:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; } /* Свёрнутые Серии и Напитки — ровно две строки-счётчика, без нутра. На широком экране они друг под другом в левом столбце, на телефоне — плечом к плечу в одну строку. Раскрытие живёт отдельно (.fg-open) и потому не может ни раздвинуть эти строки, ни утащить их вниз. */ .fg-folds { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .fg-folds > .fg-group { flex: 1 1 200px; min-width: 0; } @media (min-width: 901px) { .fg-folds { flex-direction: column; } .fg-folds > .fg-group { flex: 0 0 auto; } } .fg-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: bold; color: var(--ink); padding-bottom: 3px; margin-bottom: 6px; border-bottom: 1px solid var(--fg-line); } .fg-group-tools { font-weight: normal; color: var(--ink-soft); } /* ── Строка-счётчик свёрнутого набора ──────────────────────────────────────── */ /* «Серии · готовы 3 из 9», «Напитки · 10 банок» — и она же кнопка. В свёрнутом виде на ней стоит ровно то, чего нельзя не знать: сколько есть и что уже выбрано на этот ход. Высота 28 точек: на телефоне до неё дотягиваются пальцем (там ниже стоит 40). Рамка держит 3,13:1 к белому — это орган управления, и его край обязан быть виден. Текст #111 на #f5f5f5 — 17,4:1, подпись #606060 — 5,9:1. */ .fg-fold { display: flex; align-items: center; gap: 0; width: 100%; height: 28px; padding: 0 8px; text-align: left; font: inherit; font-size: 12px; color: var(--ink); background: var(--fg-tile); border: 1px solid var(--fg-tile-line); border-radius: var(--radius); cursor: pointer; } .fg-fold.is-flat { cursor: default; color: var(--ink-soft); } .fg-fold:hover:not(.is-flat) { border-color: var(--gold-dim); } .fg-fold-name { font-weight: bold; flex: 0 0 auto; } .fg-fold-count { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* «показать» / «свернуть» — словом, а не значком: значок пришлось бы толковать, а слово читается и глазом, и диктором. */ .fg-fold-sign { flex: 0 0 auto; color: var(--gold-dim); } /* Разделитель точкой — настоящим знаком (см. .fg-cost-sep о том же). Поля тут потому, что строка — flex, а в ней браузер срезает пробелы по краям ячеек. */ .fg-fold-sep { flex: 0 0 auto; margin: 0 6px; color: var(--ink-soft); } .fg-fold.is-open { background: none; border-color: var(--gold-dim); } /* ── Подсказка нажатием ────────────────────────────────────────────────────── */ /* ПОДСКАЗКА СТОИТ НИЖЕ СЕТКИ, А НЕ НАД НЕЙ. До 12.08.2026 она разворачивалась под заголовком набора — то есть НАД плитками — и стоила 102 точки, опуская сетку на 110. Замер приёмки: на 1280×800 из пятнадцати приёмов три уходили под липкую полосу насмерть и три наполовину, на 1280×900 — три насмерть, и намёка на спрятанное не было. Теперь у подсказки нижняя строка стола (.fg-tips): что бы она ни заняла, приёмы над ней не двигаются ни на точку. Три строки идут ОДНОЙ СТРОКОЙ-ПОТОКОМ, а не тремя абзацами: во всю ширину стола (1056 точек) они укладываются в две строки вместо шести, и вся подсказка стоит около полусотни точек вместо ста двух. */ .fg-tip-slot { min-width: 0; } .fg-tip-body { padding: 6px 8px; font-size: 12px; line-height: 17px; color: var(--ink); background: var(--fg-tile); border-left: 3px solid var(--gold-dim); border-radius: var(--radius); } /* Обводка нужна только клавиатуре: мышью её и так видно, куда нажали. */ .fg-tip-body:focus { outline: none; } .fg-tip-body:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; } .fg-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fg-tip-name { font-weight: bold; } .fg-tip-close { flex: 0 0 auto; font: inherit; font-size: 12px; color: var(--gold-dim); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; } /* Строки подсказки текут одна за другой. Зазор между ними — настоящим полем, а не пробелом: пробел в потоке съедается переносом. */ .fg-tip-line { margin-right: 14px; } .fg-tip-line b { font-weight: bold; } .fg-tip-tail { color: var(--ink-soft); } .fg-grid { display: grid; /* 205 точек в столбце — не на глаз, а по замеру самой длинной строки: самое длинное имя приёма или серии — «Токсичный комментарий», 170,5; самая длинная цена приёма — «Запал 12 · Отсрочка 4 раунда», 175. Сколько столбцов из этого выйдет, решает не окно, а ШИРИНА СТОЛБЦА ПЛИТОК, и она на столе упёрта в потолок: `.page` в public/styles.css не шире 1120 точек, значит окно боя — 1088, арена — 1056, а на плитки после столбца зон (300) и зазора (14) остаётся РОВНО 742 при любом окне от 1152 и шире. 742 — это три столбца по 243,33, а не четыре: прежняя запись «на 1280 помещается четыре, пятнадцать приёмов укладываются в четыре ряда» замером не подтвердилась (замер 11.08.2026: 3 столбца, 5 рядов). */ grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 6px; } /* Коробка для запроса о ширине (@container ниже). Меряем не окно, а то самое место, что досталось сетке: между окном и сеткой стоят чужие поля и потолок `.page`, и выдуманное вычитаемое из окна снова разъехалось бы молча — ровно так, как разъехалось `calc(100vh - 510px)` у прежней высоты. Коробка одна на всех: и приёмы, и раскрытый набор рисует panelInner, а у него сетка всегда лежит в .fg-group-body. */ .fg-group-body { container-type: inline-size; container-name: fg-tiles; } /* Плитка и кнопка «?» рядом: кнопку в кнопку вложить нельзя, поэтому обе лежат в общей обёртке. Обёртка — ячейка сетки, плитка растянута на неё целиком, поэтому все плитки ряда по-прежнему одной высоты. */ .fg-tile-box { position: relative; display: flex; min-width: 0; } /* Плитка выбора: ДВА РЯДА, а третий — только там, где он влезает (см. ветку «суть на плитке» ниже). первый — имя (переносится, но не режется); второй — ЦЕНА числами, а если приёма сейчас нет — причина отказа; третий — СУТЬ приёма одной строкой, целиком и без многоточия. Высота одна на всю сетку, поэтому сетка не ездит от каждого щелчка. Что с плитки ушло и куда: • «готов» — нигде. Это было молчаливое согласие, а стояло оно под каждой из тридцати четырёх плиток и стоило экрану полторы сотни точек. • «взгляд» («5–8 урона мимо брони») — в подсказку «?» и в title, а с 12.08.2026 ещё и обратно на плитку, но только в высоком окне. Причина та же, по какой его убирали: в две строки он не помещается, а третью строку экран боя может себе позволить не всегда. */ .fg-tile { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 17px 16px; align-content: center; gap: 1px 10px; min-height: 45px; /* Справа оставлено место под кнопку «?»: она стоит поверх угла плитки. */ padding: 5px 24px 5px 8px; text-align: left; font: inherit; color: var(--ink); background: var(--fg-tile); border: 1px solid var(--fg-tile-line); border-radius: var(--radius); cursor: pointer; overflow: hidden; } .fg-tile:hover:not(:disabled) { border-color: var(--gold-dim); } .fg-tile:disabled { cursor: default; opacity: 1; } /* Имя НЕ РЕЖЕТСЯ: длинное переносится на вторую строку. Прежде оно стояло в одну строку с многоточием, и на телефоне обрывались одиннадцать имён из тридцати четырёх — «Токсичный комментарий» просил 170 точек при выданных 129, «Кофе с нотками превосходства» — 211 при тех же 129. */ .fg-tile-name { grid-column: 1 / -1; grid-row: 1; font-size: 13px; font-weight: bold; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Суть приёма. У приёмов и серий она СПРЯТАНА ПО УМОЛЧАНИЮ и открывается веткой в конце файла; у БАНОК стоит всегда — имя напитка о его действии не говорит ровным счётом ничего, а лежат банки в раскрытии, которое человек открыл сам. Многоточие оставлено страховкой: там, где строку показывают, она по замеру влезает целиком, но если словарь однажды напишет фразу длиннее всех нынешних — пусть лучше оборвётся хвост, чем разъедется сетка. */ .fg-tile-glance { grid-column: 1 / -1; grid-row: 3; font-size: 12px; line-height: 16px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fg-grid:not(.fg-grid--drink) .fg-tile-glance { display: none; } /* Цена — числами со своими подписями, второй строкой. */ .fg-tile-cost { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; font-size: 12px; color: var(--ink-soft); line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; } .fg-cost-part b { color: var(--ink); font-weight: bold; } /* Разделитель между частями цены — НАСТОЯЩИЙ ЗНАК в разметке, а не зазор в стилях: зазор видит глаз, но не видит чтение с экрана, и диктор выговаривал «Подсечка Запал4Отсрочка1 раунд». Поля тут нужны потому, что цена — это flex-строка, а в ней браузер обрезает пробелы по краям своих же ячеек. */ .fg-cost-sep { margin: 0 4px; color: var(--ink-soft); } /* Состояние встаёт НА МЕСТО ЦЕНЫ — в ту же клетку второй строки. Обе разом fight.js на плитку не ставит, поэтому наложиться им не на что. */ .fg-tile-state { grid-column: 1 / -1; grid-row: 2; font-size: 12px; line-height: 16px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* У банок строк четыре: имя, цена, суть и состояние. Суть тут не лишняя — по имени напитка не догадаешься, что он делает; а состояние («осталось 3 банки») нужно вместе с ценой. ИМЕНИ ОТДАНО ДВА РЯДА, А НЕ ОДИН. Прежде под имя было выдано 17 точек — одна строка, — и четыре имени из десяти обрезались по вертикали: «Кофе с нотками превосходства», «Ноль сахара, ноль пощады», «Двойной эспрессо навынос», «Банка нарисованных ягод» просили по 32 точки при выданных 17 (замер 12.08.2026, 1280×800). Два ряда — 32 точки — берут все десять целиком. СУТИ ОТДАНА ВСЯ ШИРИНА ПЛИТКИ. Прежде у неё, как и у имени, было отнято 24 точки справа под кнопку «?» — и восемь строк из десяти обрывались многоточием (самая длинная, «соперник 2 раунда без уворотов», просит 215 точек при выданных 172). «?» стоит только в верхнем углу и достаёт лишь до первых двух строк — им поле и оставляем, а суть и состояние идут во всю ширину. В столбце раскрытого набора (243,33 точки, то есть 225,33 под текстом) самая длинная суть встаёт целиком. */ .fg-grid--drink .fg-tile { grid-template-rows: 32px 16px 16px 15px; min-height: 92px; padding-right: 8px; } .fg-grid--drink .fg-tile-name, .fg-grid--drink .fg-tile-cost { padding-right: 16px; } .fg-grid--drink .fg-tile-state { grid-column: 1 / -1; grid-row: 4; } /* Столбец раскрытого набора не уже 230: под суть в нём остаётся 212… нет, по замеру 742 точки места дают три столбца по 243,33 и 225,33 под текстом — против нужных 215. Ставим порог 230, чтобы четвёртый столбец (185 точек) не появился и суть не обрезалась снова. */ .fg-grid--drink { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Красным пишем только запрет, и он тут же говорит, чего именно не хватает. */ .fg-tile.is-stop .fg-tile-state { color: var(--blood-ink, var(--blood)); } .fg-tile.is-wait .fg-tile-state { color: var(--ink); } /* Выбранная плитка. Синий — тот же, каким на этом экране помечено выбранное вообще (кнопка «Вперёд!», нажатая зона): белое на #0b5dd7 держит 5,9:1. */ .fg-tile.is-picked { color: #fff; background: var(--gold-dim); border-color: var(--gold-dim); } .fg-tile.is-picked .fg-tile-name, .fg-tile.is-picked .fg-cost-part b { color: #fff; } .fg-tile.is-picked .fg-tile-cost, .fg-tile.is-picked .fg-cost-sep, .fg-tile.is-picked .fg-tile-glance, .fg-tile.is-picked .fg-tile-state { color: rgba(255, 255, 255, .88); } /* Кнопка подсказки. Стоит поверх правого верхнего угла плитки, место под неё отведено полем самой плитки — значит, она ничего не закрывает. #606060 на #f5f5f5 — 5,9:1, то есть больше нужных для органа управления 3:1. */ .fg-tip { position: absolute; top: 1px; right: 1px; width: 24px; height: 24px; font: inherit; font-size: 12px; font-weight: bold; line-height: 1; color: var(--ink-soft); background: none; border: 0; border-radius: var(--radius); cursor: pointer; } .fg-tip:hover { color: var(--gold-dim); } .fg-tile.is-picked ~ .fg-tip { color: #fff; } /* ── СУТЬ НА ПЛИТКЕ: третья строка там, где она влезает целиком ─────────────── */ /* Название приёма о действии не говорит ничего: «Скриншот в личку» — это что? Суть («снимает с соперника все приёмы») лежит в словаре и раньше стояла на плитке, но её убрали, потому что рядом с ценой она обрывалась на «соп…». Возвращаем — но ровно там, где она встаёт ЦЕЛИКОМ и никого не выталкивает. ДВА УСЛОВИЯ, И ОБА ИЗ ЗАМЕРА, а не из круглого числа. 1. ШИРИНА. Самая длинная суть — «соперник 2 раунда бьёт слабее на 2»: 214,92 точки шрифтом плитки (12px system-ui; тем же текстом Arial даёт 202,46, Helvetica — 204,54, то есть системный шрифт и есть худший случай). Плитке под неё нужно 214,92 + 8 поля слева + 8 справа + 2 рамки = 232,92 — но ставить порог впритык к замеру нельзя: на 233 запас выходит 0,08 точки, и любой другой шрифт или другое округление обрежут хвост. Поэтому берём то, что стол ДАЁТ на самом деле: сетке достаётся 742 (потолок `.page` в public/styles.css — 1120, окно боя — 1088, арена — 1056, минус столбец зон 300 и зазор 14), это три столбца по 243,33, под суть в них 225,33 — запас 10,41 точки, то есть 4,6 %. Отсюда и два числа ниже: столбец не уже 242 и коробка не уже 740 (две точки вниз от замеренных 742 — на случай дробной ширины). Почему именно ТРИ столбца, а не один: в двух столбцах пятнадцать приёмов ложатся в восемь рядов, восемь рядов просят 136 точек роста, и окно под них нужно высотой 1091 — обещанных ниже 900 тут не хватит (замер на 1000×1000). А меряем мы не окно, а место, доставшееся сетке (@container выше): между окном и сеткой лежат чужие поля и тот самый потолок. Место справа под кнопку «?» при этом переезжает с ПЛИТКИ на её первые две строки: «?» шириной 24 стоит только в верхнем углу, и второй, и третьей строке она не мешает — а суть без этих 24 точек не поместилась бы (209,33 против 214,92). 2. ВЫСОТА. Третья строка стоит 17 точек на плитку (16 строка + 1 зазор). Столбцов на столе три, значит пятнадцать приёмов — это пять рядов, то есть 5 × 17 = 85 точек роста. А в окне 1280×800 свободных под столом всего 21,5 (в бою по наказу — 8,7: там сверху ещё строка про наказ). Не влезает, и подвинуть тут нечего: кнопка хода липкая, она бы просто накрыла собой два нижних ряда приёмов, и «видно все пятнадцать» кончилось бы. Поэтому суть просят ещё и по высоте окна: в тренировке хватает 864, в бою по наказу — 887, порог — 900 (замер 12.08.2026). Ниже 900 всё остаётся ровно как было, и суть читают по кнопке «?». Ширина 901 в том же запросе — это не про место, а про РАСКЛАДКУ: до 900 стол выбора складывается в одну колонку (см. @media в конце файла), и считать ряды там надо заново. Телефона это не касается вовсе. Банки (.fg-grid--drink) сюда не входят: у них суть стоит всегда и своим, четвёртым рядом. Отказ безопасен: браузер, который не знает @container, всю ветку пропустит — и экран останется ровно таким, каким был до 12.08.2026. */ @media (min-width: 901px) and (min-height: 900px) { @container fg-tiles (min-width: 740px) { /* 242 — нижний предел столбца: под суть в нём остаётся 224, против нужных 214,92. Ниже он не опустится, даже если стол однажды станет шире и в него влезет лишний столбец. */ .fg-grid:not(.fg-grid--drink) { grid-template-columns: repeat(auto-fill, minmax(242px, 1fr)); } /* 63 = 17 + 16 + 16 строк, два зазора по 1, поля 5 + 5 и рамка 1 + 1. Число одно на всю сетку — плитки остаются одной высоты. */ .fg-grid:not(.fg-grid--drink) .fg-tile { grid-template-rows: 17px 16px 16px; min-height: 63px; padding-right: 8px; } /* Место под «?» — только тем строкам, до которых она достаёт. */ .fg-grid:not(.fg-grid--drink) .fg-tile-name, .fg-grid:not(.fg-grid--drink) .fg-tile-cost, .fg-grid:not(.fg-grid--drink) .fg-tile-state { padding-right: 16px; } .fg-grid:not(.fg-grid--drink) .fg-tile-glance { display: block; } } } /* Счётчики серий: пять чисел одной строкой над сеткой. */ .fg-series { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 6px; } .fg-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; cursor: help; } .fg-count-name { margin-right: 4px; font-size: 12px; } .fg-count b { color: var(--ink); font-size: 12px; } /* ── Ход ───────────────────────────────────────────────────────────────────── */ /* КНОПКА ХОДА ЛИПНЕТ К НИЗУ ЭКРАНА. Прежде она просто стояла под столом выбора, и вот что из этого выходило: на 375×812 до неё было 378 точек прокрутки (в бою по наказу — 417), а на 1280×800 в бою ПО НАКАЗУ её нижний край приходился на 803-ю точку при экране в 800 — срезано на три точки, и виновата была та самая врезка про наказ, которой нет в тренировке. Одно правило решает оба случая разом и, главное, решает их НАВСЕГДА: сколько бы строк ни прибавилось выше, кнопка останется у нижнего края, пока на экране виден бой. Ниже своего места она при этом не опускается — то есть на широком экране, где всё и так помещается, ничего не меняется вовсе. Заливка обязательна: под липкой полосой проезжает стол выбора, и без заливки плитки просвечивали бы сквозь кнопку. А ЛЕЖИТ В ПОЛОСЕ ТОЛЬКО ТО, ЧЕМ ХОДЯТ КАЖДЫЙ ХОД. Полоса стоит у нижнего края весь бой, и всё, что в неё положено, отнято у стола выбора навсегда. На 375×812 в ней было 141 точка — сводка в две строки, «Вперёд!» во всю ширину и ещё ряд из трёх мелких кнопок, — и она накрывала собой ВСЕ ПЯТЬ кнопок блока разом (их верх 679,5 при полосе с 671-й), а блок выбирают каждый ход. Поэтому автобой и «Сдаться» уехали НАД полосу (.fg-go-aside): они про весь бой сразу, а не про ближайший ход, и держать их у большого пальца незачем. */ .fg-go { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; padding-bottom: 6px; background: var(--bark, #fff); border-top: 1px solid var(--fg-line); } /* Автобой и сдача — над полосой, справа: они не спорят с «Вперёд!» за место. */ .fg-go-aside { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } /* НА ШИРОКОМ ЭКРАНЕ эти две кнопки ничего не стоят вовсе: в полосе хода справа пустует полтысячи точек («Вперёд!» и «сбить настрой» вместе просят 231 при 1056), и кнопки встают туда, ничего не отодвигая. В потоке они прибавили бы к арене 42 точки, а на 1280×800 у неё свободных всего 21,5 — и полоса начала бы липнуть там, где раньше просто стояла. Опора — сама арена; слой эффектов (public/vfx/arena-vfx.js) от этого не страдает: он лежит на body и держится за окно просмотра, а не за арену. */ @media (min-width: 901px) { .fg-arena { position: relative; } .fg-go-aside { position: absolute; right: 0; bottom: 12px; z-index: 3; } } /* Пересказ хода. Высота задана числом, а не «сколько получится»: строка растёт по мере выбора, и без этого кнопка «Вперёд!» ездила бы вниз на два десятка точек ровно тогда, когда её собираются нажать. */ .fg-move { height: 17px; font-size: 12px; color: var(--ink-soft); text-align: center; } .fg-move-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* В ряду хода осталось двое: «Вперёд!» и «сбить настрой». Обёртки .fg-go-small больше нет вовсе — вместе с ней перестали действовать и два чужих правила из public/adaptive.css, которые растягивали её на всю ширину. */ .fg-go-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .fg-auto.is-on, .fg-morale.is-on { color: #fff; background: var(--gold-dim); border-color: var(--gold-dim); } .fg-give-up { color: var(--blood-ink, var(--blood)); } /* ── Лог боя ───────────────────────────────────────────────────────────────── */ .fg-log { max-height: 300px; overflow-y: auto; padding-right: 4px; } .fg-round { margin: 8px 0 4px; font-size: 12px; font-weight: bold; color: var(--ink); border-bottom: 1px solid var(--fg-line); } .fg-round:first-child { margin-top: 0; } .fg-line { display: flex; align-items: baseline; gap: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.45; border-left: 3px solid transparent; } .fg-line.is-me { border-left-color: var(--life); } .fg-line.is-foe { border-left-color: var(--blood); } .fg-line.is-tactic { border-left-color: var(--gold-dim); } .fg-line.is-finish { font-weight: bold; color: var(--blood-ink, var(--blood)); border-left-color: var(--blood-ink, var(--blood)); } /* Номер шага раунда: движок играет их по порядку, номер этот порядок и держит. Ширина под номер отведена заранее — иначе строки прыгали бы на десятом шаге. */ .fg-step { flex: 0 0 auto; min-width: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Длинное слово (ник, ссылка) переносится, а не уезжает за край панели. */ .fg-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .fg-dmg { flex: 0 0 auto; font-weight: bold; color: var(--blood-ink, var(--blood)); } .fg-heal { flex: 0 0 auto; font-weight: bold; color: #1c6b2c; } .fg-empty { padding: 10px 4px; font-size: 13px; color: var(--ink-soft); text-align: center; } /* Вторая строка отказа: что делать и когда отпустит. */ .fg-idle-note { max-width: 520px; margin: 0 auto; padding: 8px 12px 2px; font-size: 13px; line-height: 1.5; color: var(--ink); text-align: center; } /* ── Итог боя ──────────────────────────────────────────────────────────────── */ .fg-result { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Полосу итога перекрашивает public/dtf-theme.css (тихая заливка, тёмные чернила) — и это его право: полоса видна на всех экранах игры одинаково. Здесь она задана на случай, если оформление DTF отключат: белое на #1c6b2c даёт 5,1:1, на #a42d32 — 5,9:1, на #5c5c5c — 7,0:1. */ .fg-banner { padding: 6px 26px; font-size: 17px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; border-radius: var(--radius); } .fg-banner.win { color: #fff; background: #1c6b2c; } .fg-banner.lose { color: #fff; background: #a42d32; } .fg-banner.draw { color: #fff; background: #5c5c5c; } .fg-faces { display: flex; align-items: center; gap: 16px; } .fg-face-mini { text-align: center; font-size: 13px; color: var(--ink); max-width: 150px; } .fg-face-mini > div { word-break: break-all; } .fg-face-mini .muted { font-size: 12px; } .fg-versus-word { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; } .fg-rewards { font-size: 13px; color: var(--ink); text-align: center; } .fg-rating-move { font-size: 13px; color: var(--ink); } .fg-rating-move.is-up b { color: #1c6b2c; } .fg-rating-move.is-down b { color: var(--blood-ink, var(--blood)); } .fg-rating-move.is-flat { color: var(--ink-soft); font-size: 12px; } .fg-score { font-size: 12px; color: var(--ink-soft); } .fg-loot-box { width: 100%; max-width: 460px; padding: 8px 10px; background: var(--fg-tile); border: 1px solid var(--fg-tile-line); border-radius: var(--radius); } .fg-loot-title { font-size: 12px; font-weight: bold; color: var(--ink); margin-bottom: 4px; } .fg-loot { font-size: 13px; color: var(--ink); line-height: 1.5; } .fg-medals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } /* ── Свёрнутая врезка экрана итога ─────────────────────────────────────────── */ /* Последние два островка прозы на этом экране свёрнуты одним и тем же приёмом: одна строка с числами на виду, разбор — в раскрытии. • урезанная награда — было 383 знака в четырёх абзацах и 189 точек; • «что такое бой по наказу» — 397 знаков в трёх абзацах и 154 точки. Из-за них кнопка «Ещё раз» уезжала на 1069-ю точку телефонного экрана. Числа при этом не спрятаны: они ровно в той единственной строке, которая осталась на виду («Награда срезана: +39 вместо +65, +3 вместо +5 — второй бой с ним за сутки»). Раскрытие тут своё, браузерное (
), а не как на столе выбора: экран итога точечно не перерисовывается, и хранить состояние в коде незачем. Имя нарочно НЕ .fg-note: такой класс уже занят в public/dtf-theme.css (файл чужой и грузится позже этого), и там он выкрашен в кровь — вся врезка вышла бы красной. */ .fg-fold-note { width: 100%; max-width: 460px; padding: 6px 10px; background: var(--fg-tile); border-radius: var(--radius); } .fg-fold-note > summary { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--ink); cursor: pointer; } /* Своя пометка вместо браузерного треугольника: `display: flex` у summary его гасит, а без неё строка не выглядит раскрываемой. Слово, а не значок, — по тому же правилу, что и «показать» у счётчиков. */ .fg-fold-note > summary::after { content: 'подробнее'; flex: 0 0 auto; color: var(--gold-dim); } .fg-fold-note[open] > summary::after { content: 'свернуть'; } .fg-fold-note-line { flex: 1 1 auto; min-width: 0; } .fg-fold-note-body { margin-top: 6px; } .fg-fold-note p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--ink); } .fg-fold-note p:last-child { margin-bottom: 0; } .fg-fold-note-hint { color: var(--ink-soft); } /* Урезанная награда — единственная врезка, о которой человек и правда должен споткнуться: число в награде меньше обещанного. Ей и кант, и цвет. */ .fg-fold-note--cut { border-left: 3px solid var(--blood-ink, var(--blood)); } .fg-fold-note--cut > summary { color: var(--blood-ink, var(--blood)); font-weight: bold; } /* Ссылка в Справку — только на экране итога (в бою уход равен сдаче). */ .fg-help-line { font-size: 12px; text-align: center; } .fg-rematch { max-width: 460px; padding: 6px 10px; font-size: 12px; text-align: center; color: var(--blood-ink, var(--blood)); background: var(--fg-tile); border-radius: var(--radius); } .fg-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; } /* ── Просмотр записи ───────────────────────────────────────────────────────── */ .fg-replay-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 6px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--fg-line); } .fg-replay-head .muted { font-size: 12px; } .fg-replay-note { font-size: 12px; text-align: center; color: var(--ink-soft); } .fg-replay-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* ── Тесный экран ──────────────────────────────────────────────────────────── */ /* На 375 всё то же самое, только столбцы становятся строками. Порядок нарочно такой: бойцы → зоны → плитки → «Вперёд!». Владелец просил поднять зоны над сгибом — с 826-й точки они уходят к 200-й. */ @media (max-width: 900px) { /* Один столбец, и порядок идёт по разметке: бойцы → зоны → приёмы (или раскрытый набор) → счётчики Серий и Напитков → подсказка → «Вперёд!». */ .fg-deck { grid-template-columns: minmax(0, 1fr); gap: 10px; } .fg-zones, .fg-tiles, .fg-open, .fg-folds, .fg-tips { grid-column: 1; grid-row: auto; } /* ПОДСКАЗКА НА ТЕЛЕФОНЕ ЛИПНЕТ НАД ПОЛОСОЙ ХОДА. В разметке она стоит последней строкой стола — там, где она никого не двигает; но столб на телефоне вытянут почти на две тысячи точек, и лежала бы она за краем экрана: нажал «?» — и на экране опять ничего. Липкость решает оба вопроса разом: сетка приёмов не съезжает НИ НА ТОЧКУ (в потоке подсказка по-прежнему ниже неё), а прочесть её можно не сходя с места. Отступ снизу — ровно высота полосы хода: заедь подсказка под неё, её бы и не было видно. Полоса на телефоне занимает 80 точек (рамка 1, поля 6 и 4, сводка 17, зазор 4, «Вперёд!» 48). */ .fg-tips:has(.fg-tip-body) { position: sticky; bottom: 86px; z-index: 3; } /* Заливка сплошная: под липкой подсказкой проезжают плитки. */ .fg-tips .fg-tip-body { background: var(--bark, #fff); box-shadow: 0 0 0 1px var(--fg-line), 0 -2px 8px rgba(0, 0, 0, .12); } } @media (max-width: 560px) { /* Рейтинг и уровень экипировки в бою не решают ничего, а место занимают: на телефоне место дороже. Строка не удалена из разметки — она нужна широкому экрану и чтению с экрана диктором. */ .fg-meta { display: none; } /* Средний столбец «Раунд N — против» съедал бы у каждого бойца по полсотни точек, а полосам Жизни и Запала оставалось бы по семьдесят. Поэтому номер раунда переезжает СТРОКОЙ ВЫШЕ, во всю ширину, а бойцы делят место поровну и остаются одной строкой каждый — как и просил владелец. */ .fg-versus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; } .fg-vs { grid-column: 1 / -1; order: -1; flex-direction: row; gap: 8px; padding: 0; } .fg-vs-word { display: none; } /* НА ТЕЛЕФОНЕ СТРОКА СКЛАДЫВАЕТСЯ В ДВА ЭТАЖА: сверху подпись и число, снизу полоса во всю ширину — но раскладку эту теперь выбирают сами полосы по своей ширине (@container fgv в начале файла), а не окно. Ширина окна тут врала: при 561 полосам достаётся меньше, чем при 375. */ /* ДВА СТОЛБЦА, а не один. В один столбец пятнадцать приёмов вытягиваются на семьсот с лишним точек; в два — на пятьсот. Ширины плитки при этом хватает ровно на то, ради чего затевалось: имя переносится второй строкой и НЕ РЕЖЕТСЯ. Прежде на телефоне обрывались одиннадцать имён из тридцати четырёх. */ .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } /* ЖЁСТКИЕ РЯДЫ, КАК НА ШИРОКОМ ЭКРАНЕ. Прежде тут стояло `auto auto` — и плитки выходили разной высоты: пять по 61 точке и десять по 77 (замер 12.08.2026, 375×812). Сетка от этого пляшет: имя, влезшее в одну строку, поднимает свою плитку, а соседка остаётся низкой, и ряды идут ступеньками. Теперь ряды заданы числом, и все пятнадцать плиток ровно по 77 точек. Имени тут остаётся 149 точек, а самое длинное просит 171 — значит, две строки, 32 точки. Цена («Запал 12 · Отсрочка 4 раунда», 175 точек) в одну строку тоже не влезает и потому переносится по частям — ей те же 32. Обрывать её нельзя: «Запал 12 · Отсроч…» — это уже не цена. Место под «?» отнимает только строка имени: остальным строкам она не мешает, кнопка стоит в верхнем углу. */ .fg-tile { grid-template-rows: 32px 32px; min-height: 77px; padding: 5px 7px; } .fg-tile-name { -webkit-line-clamp: 2; padding-right: 22px; } .fg-tile-cost { flex-wrap: wrap; white-space: normal; } .fg-tile-state { white-space: normal; overflow-wrap: anywhere; } /* У банок и «взгляд» переносится, а не режется: восемь строк из десяти («соперник 2 раунда без уворотов» — 195 точек при выданных 149) иначе обрывались бы на полуслове. Ряды и тут заданы числом — по той же причине, по какой они заданы у приёмов: имя ТРИ ряда (48), цена один (16), суть два (32), состояние два (32). Итого 128 точек на всякую банку, и ни одна не выше и не ниже соседки. Почему имени три, а не два: столбец тут 150 точек, под именем — 128 (22 отняты у него кнопкой «?»), и «Банка нарисованных ягод» ложится в три строки, а не в две (замер 12.08.2026, 375×812). В два ряда она обрезалась бы по вертикали — ровно то, за что этот набор и вернули на доработку. */ .fg-grid--drink { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fg-grid--drink .fg-tile { grid-template-rows: 48px 16px 32px 32px; min-height: 143px; padding-right: 7px; } .fg-grid--drink .fg-tile-name { padding-right: 22px; -webkit-line-clamp: 3; } .fg-grid--drink .fg-tile-cost { padding-right: 0; } .fg-grid--drink .fg-tile-glance { white-space: normal; } /* Строка-счётчик и кнопка подсказки — под палец: 40 точек, как у зон. */ .fg-fold { height: 40px; } .fg-tip { width: 28px; height: 28px; } /* ПЕРЕСКАЗ ХОДА — ОДНА СТРОКА, А НЕ ДВЕ. Вторая строка стоила полосе 17 точек, а полоса эта закрывала собой кнопки блока; целиком пересказ есть по наведению (title), а что выбрано — видно и по самим плиткам с зонами. */ .fg-move { height: 17px; } .fg-move-text { display: block; -webkit-line-clamp: none; white-space: nowrap; line-height: 17px; } /* ЛИПКАЯ ПОЛОСА ХОДА НА ТЕЛЕФОНЕ: 80 точек вместо 141. Считаем: рамка 1 + поле сверху 6 + сводка 17 + зазор 4 + ряд «Вперёд!» и «сбить настрой» 48 + поле снизу 4 = 80. Столу выбора это оставляет 92,5 точки (окно 812, стол начинается на 583,5, зоны занимают 136), и нижняя кнопка блока (её низ — 719,5) впервые оказывается ВЫШЕ полосы, а не под ней. Автобой и «Сдаться» стоят над полосой (.fg-go-aside). Вес с запасом: зазор у .fg-go задаёт ещё и public/dtf-theme.css, а ширину кнопок — public/adaptive.css, и оба грузятся позже этого файла. */ .fg-arena .fg-go { gap: 4px; padding-top: 6px; padding-bottom: 4px; } .fg-arena .fg-go-row { gap: 4px; flex-wrap: nowrap; } /* «Вперёд!» забирает всё, что осталось от «сбить настрой» (137 точек): 335 − 137 − 4 = 194 точки — вдвое больше, чем нужно слову. */ .fg-arena .fg-go-row > .btn { width: auto; flex: 1 1 auto; min-width: 0; } .fg-arena .fg-go-row > .fg-morale { flex: 0 0 auto; } .fg-arena .fg-go-aside .btn { flex: 0 0 auto; } .fg-faces { flex-direction: column; gap: 8px; } .fg-log { max-height: 240px; } } /* Уговор с public/adaptive.css (файл чужой, правит его сосед и грузится он ПОЗЖЕ этого). Там записан прежний вид арены: карточка бойца с полями, зоны по одной в строку. Оба правила были верны для старой раскладки и мешают новой, поэтому здесь стоят два веса потяжелее — и только они: • у строки бойца полей нет вовсе, она и так одна строка; • зоны остаются в два столбца даже на телефоне. Высоту нажималки (min-height: 40px у .fg-pick) при этом НЕ трогаем — пальцем в неё попадать надо, и сосед прав; два столбца по 40 точек занимают 200 точек вместо 400 и как раз поэтому влезают над сгибом. */ @media (max-width: 480px) { .fg-arena .fg-side { padding: 0; } .fg-deck .fg-choices { grid-template-columns: 1fr 1fr; gap: 4px 8px; } } /* ── Зоны на телефоне: две строки таблеток вместо двух столбцов ────────────── */ /* Замер: два столбца по пять строк занимали 235 точек — почти треть экрана ушла на десять переключателей. Пять таблеток в строку занимают 40, и обе зоны вместе укладываются в 132: сто точек возвращается столу выбора. Разметка при этом та же самая — те же