/*
 * Нижняя панель и боковые колонны меню.
 *
 * Значения сверены с эталоном (mmobitva.ru, style/foot.css). Там классы
 * переименованы в nav-*, у нас остались старые имена, потому что на них
 * завязаны скрипты в system/header.php (footGo, newfootL, newfootR,
 * menuOnOff) и разметка в system/foot/foot.php. Переименование ничего не
 * добавило бы к виду, поэтому взяты только значения. Соответствие имён:
 *
 *   .footlinetime          = .nav-bar
 *   .timefooter            = .nav-bar__time
 *   .footbcs               = .nav-surface
 *   .footlmenut/.footrmenut= .nav-drawer--left/--right
 *   .footlmenub/.footrmenub= .nav-drawer__item
 *   .fblmenu/.fbrmenu      = .nav-drawer__row--left/--right
 */
body {
    margin: 0 auto;
}

/*
 * ПАНЕЛИ ПРИЖАТЫ К НИЗУ С ОГЛЯДКОЙ НА СИСТЕМНУЮ ПОЛОСУ.
 *
 * В шапке страницы теперь стоит viewport-fit=cover - он нужен, чтобы игра
 * занимала весь экран телефона, без полей по краям. Обратная сторона: страница
 * заезжает и ПОД системную полосу жестов внизу Android, а панель с "Меню",
 * часами и "Доп" прижата ровно к этому краю - её бы полосой и перекрыло.
 *
 * env(safe-area-inset-bottom) - это высота той самой полосы, о которой сообщает
 * сам телефон. Где полосы нет (кнопочная навигация, обычный браузер, компьютер),
 * значение равно нулю, и панель стоит точно там же, где стояла раньше.
 */
.footlinetime {
    z-index: 1000;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 100%;
    border-spacing: 0;
    /*
     * У эталона колонки панели сомкнуты (border-collapse). Без этого двойные
     * границы соседних ячеек складывались и полосы выходили толще эталонных.
     */
    border-collapse: collapse;
}

/*
 * Общая подложка панели и кнопок меню.
 *
 * Шрифт - Roboto, как у эталона. Раньше стоял GameFont (это тот же
 * mobitva.ttf, декоративный с засечками): из-за него надписи "Меню", "Доп" и
 * все пункты колонны выглядели совсем иначе, чем на эталоне, и казались
 * крупнее при том же размере.
 *
 * Границу здесь НЕ задаём: у эталона она описана отдельно для рядов колонны и
 * для строки времени, иначе рамка появлялась там, где её нет.
 */
/*
 * ==== РАЗМЕР ПАНЕЛИ ЗАДАЁТСЯ ЗДЕСЬ, А НЕ СКРИПТОМ ====
 *
 * Раньше высоту и шрифт панели назначал resizer() в system/header.php: он
 * писал их прямо в атрибут style каждой ячейки, считая от высоты окна. Из-за
 * этого панель постоянно меняла размер при переходах - то мельче, то огромная.
 * Причин было две, и обе лечатся переносом расчёта в стили.
 *
 * 1. Опорная высота в скрипте работала как трещотка: она росла, когда окно
 *    становилось выше (браузер спрятал адресную строку при прокрутке), но
 *    обратно НЕ опускалась. Панель раздувалась и такой оставалась, а при
 *    следующей полной загрузке опорная высота бралась заново - какой окно
 *    оказалось в тот миг, такой и панель. Отсюда разный размер каждый раз.
 *
 * 2. resizer() объявлен в system/header.php, а из 112 разделов, подключающих
 *    подвал, шапку не подключают 55 - профиль, чат, вся охота и бои. Там
 *    вызов в конце подвала не находил функцию, и ячейки оставались вообще без
 *    размера, то есть по содержимому.
 *
 * svh - это "маленькая" высота окна: она отмерена от состояния, когда адресная
 * строка ПОКАЗАНА, и потому неподвижна. Прокрутка, всплытие клавиатуры в чате,
 * появление и уход адресной строки её не меняют - в отличие от vh и dvh. Значит
 * панель считается один раз браузером и больше не дёргается никогда.
 *
 * Порядок строк важен: старые браузеры без svh (Android WebView до 108,
 * Safari до 15.4) не понимают вторую строку и остаются на vh - там панель
 * ведёт себя как прежде, но хотя бы одинаково во всех разделах.
 *
 * Числа те же, что считал скрипт: высота 6% высоты окна, шрифт - 0.32 от
 * высоты кнопки, то есть 1.92% окна. Вид панели не меняется, меняется только
 * её постоянство.
 */
.footbcs {
    text-align: center;
    color: #ddca9f;
    background-color: #633300;
    font-family: "Roboto", sans-serif;
    height: 6vh;
    height: 6svh;
    font-size: 1.92vh;
    font-size: 1.92svh;
}

/*
 * Высота кнопки для полосы загрузки (style/shell.css, img.loading).
 *
 * Полоса лежит на кнопке "Назад" и обязана совпадать с ней по высоте. Раньше
 * это число присылал resizer() через setProperty, теперь оно объявлено рядом с
 * самой высотой - одним источником для обоих.
 */
:root {
    --footBtnH: 6vh;
    --footBtnH: 6svh;
}

.footlmenut {
    z-index: 1001;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 40%;
    border-spacing: 0;
    border-collapse: collapse;
}

.footrmenut {
    z-index: 1001;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    right: 0;
    width: 40%;
    border-spacing: 0;
    border-collapse: collapse;
}

.footlmenub,
.footrmenub {
    width: 100%;
}

/*
 * Строка времени в середине панели: сверху полоса 2 пикселя, по бокам ничего.
 */
.footlinetime .timefooter {
    border: none;
    border-top: 2px solid black;
    background-color: #633300;
}

/*
 * Нижний ряд колонны - это сама кнопка "Меню" / "Доп", она в одну линию с
 * панелью, поэтому полоса только сверху и потолще.
 */
.footlmenut tr:last-child .footlmenub,
.footrmenut tr:last-child .footrmenub {
    border: none;
    border-top: 2px solid black;
    background-color: #633300;
}

/*
 * Раскрытые пункты колонны обведены тонкой рамкой со всех сторон.
 * Скругления у эталона нет - раньше стояло border-radius: 4px, из-за чего
 * пункты выглядели отдельными плашками, а не сплошным столбцом.
 */
.footlmenut tr:not(:last-child) .footlmenub,
.footrmenut tr:not(:last-child) .footrmenub {
    border: 1px solid black;
}

.footlmenut tr:not(:last-child) .footlmenub:hover,
.footrmenut tr:not(:last-child) .footrmenub:hover {
    background-color: #774400;
    cursor: pointer;
}

.footlmenut tr:last-child .footlmenub:not(:empty):hover,
.footrmenut tr:last-child .footrmenub:not(:empty):hover {
    background-color: #774400;
    cursor: pointer;
}

/* По времени не щёлкают, поэтому подсветки и пальца у него нет. */
.footlinetime .timefooter:hover {
    background-color: #633300;
    cursor: default;
}

.footlmenut tr:last-child .footlmenub:empty:hover,
.footrmenut tr:last-child .footrmenub:empty:hover {
    background-color: #633300;
    cursor: default;
}

/*
 * Надписи "Меню" и "Доп" прижаты к своим краям, как у эталона, а не по центру.
 */
.footlmenut tr:last-child .footlmenub {
    text-align: left;
    padding-left: 15px;
}

.footrmenut tr:last-child .footrmenub {
    text-align: right;
    padding-right: 15px;
}

/*
 * Колонна закрыта до первого нажатия.
 *
 * Раньше начальное состояние задавали только скрипты, и до их запуска колонна
 * успевала мигнуть раскрытой. jQuery при .show() ставит свой стиль прямо на
 * элемент, поэтому это правило открытию не мешает.
 */
.fblmenu,
.fbrmenu {
    display: none;
}