/* Notes: docs/client-notes/styles.md */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

html {
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    min-height: 100%;
    min-height: 100svh;
    /*
     * scrollbar-gutter: stable убран.
     *
     * Он резервировал полосу под полосу прокрутки СПРАВА (до 15 точек),
     * и из-за этого рамка локации сидела неровно: середина страницы
     * уезжала влево, рамка слева уходила под обрез, а справа
     * оставалась полоска фона. Игра телефонная, там полоса
     * прокрутки плавающая и места не занимает, а ровная рамка важнее
     * микро-сдвига на большом экране.
     */
    overflow-x: clip;
}

body {
    overscroll-behavior: none;
    touch-action: manipulation;
    overflow-x: clip;
    max-width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.game-body {
    display: block;
    max-width: 480px;
    min-width: 320px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56px;
}

.game-body_battle {
    min-height: 100vh;
    min-height: 100svh;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.game-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(200, 172, 112, 0.88);
    padding: 0 4px 56px;
}

.game-overlay > * {
    max-width: 480px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

.game-overlay .block105,
.game-overlay .block05,
.game-overlay .block22 {
    background-color: transparent;
}

.game-overlay .hr_chat,
.game-overlay .hr_01 {
    background-color: rgba(167, 147, 109, 0.45);
}

.game-overlay .clan_svodka_boi {
    background-color: transparent;
}

.game-overlay .clanturblock {
    background-color: rgba(201, 184, 146, 0.55);
}

.game-overlay .clanturblock:hover,
.game-overlay .clanturblock:checked {
    background-color: rgba(221, 202, 159, 0.75);
}

.game-overlay .shopminiblock {
    background-color: rgba(201, 172, 113, 0.55);
}

.game-overlay .shopminiblock:hover,
.game-overlay .shopminiblock:checked {
    background-color: rgba(221, 202, 159, 0.75);
}

/*
 * В бою раздел поверх занимает весь экран, и нижнее меню страницы под ним
 * прячется. А вот в оконном режиме (`has-okno`) главная видна за рамкой,
 * и её меню с часами прятать нельзя: именно так при первом заходе в
 * охоту снизу "пропадало время" — часы не ломались, их скрывало это
 * старое боевое правило.
 */
body.has-overlay:not(.has-okno) #gameBody .footlinetime,
body.has-overlay:not(.has-okno) #gameBody .footlmenut,
body.has-overlay:not(.has-okno) #gameBody .footrmenut {
    display: none;
}

/* ------------------------------------------------------------------ */
/* ОХОТА ОКНОМ ПОВЕРХ ГЛАВНОЙ                                          */
/*                                                                     */
/* Тот же слой .game-overlay, но рамкой по центру: главная с локацией   */
/* остаётся видна за затемнением. Разбор в javascript/shell.js.         */
/* ------------------------------------------------------------------ */

.game-overlay_okno {
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Отступов нет. Раньше снизу стояло 8vh "под нижнее меню", и верх
     * окна уезжал под панель. Окно просто по центру.
     */
    padding: 0;
    background-color: transparent;
    /* Прокрутку ведёт сама рамка, иначе окно уезжало бы вместе со списком. */
    overflow: hidden;
}

/*
 * Затемнение не доводим до самого низа: нижнее меню с часами — часть
 * главной, а не фон окна, и затемнённое время читалось как поломка.
 */
.okno-fon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 6vh;
    bottom: 6svh;
    background-color: rgba(0, 0, 0, 0.45);
}

/*
 * Только место под содержимое, без своего вида.
 *
 * Раньше здесь была вторая, квадратная рамка: светлая подложка #e8d5a9,
 * тёмный кант и тень. Внутри неё игра рисует свой свиток (блоки
 * block101-block109 с картинками краёв), и выходила рамка в рамке -
 * свиток лежал в светлом квадрате. Подложку, кант, скругление и тень
 * убрал: остаётся сам свиток, как в игре. Геометрию (ширину, высоту,
 * прокрутку) не трогаю - она держит окно по середине экрана.
 */
.game-overlay_okno > .okno-karta {
    position: relative;
    z-index: 2;
    width: 94%;
    max-width: 420px;
    min-width: 0;
    max-height: 88vh;
    max-height: 88svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    /* Отступов нет вовсе: края и поля даёт сам свиток внутри. */
    padding: 0;
    box-sizing: border-box;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Заголовок "-Охота-" страницы: в окне он шапка свитка. */
.game-overlay_okno .okno-telo h3,
.game-overlay_okno .okno-telo .headmenu,
.game-overlay_okno .okno-telo b:first-child {
    display: block;
    margin: 0 0 6px;
    text-align: center;
}

/* Список мобов — отдельным полем внутри свитка, со своей гранью. */
.game-overlay_okno .okno-telo .tablehov {
    border-radius: 4px;
}

.game-overlay_okno .okno-telo .hr_01 {
    margin: 2px auto;
    border: 0;
    border-top: 1px solid rgba(107, 74, 28, 0.28);
    width: 94%;
}

/* Последняя черта перед кнопкой "Текущие бои" в рамке лишняя. */
.game-overlay_okno .okno-telo .hr_01:last-of-type {
    display: none;
}

.game-overlay_okno .okno-telo .button_alt_00 {
    margin: 8px auto 2px;
}

/*
 * Крестик вынесен из потока (был sticky + float): в потоке он отжимал
 * первые строки списка влево, и список стоял не по середине рамки.
 */
.okno-zakryt {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    margin: 0;
    line-height: 24px;
    text-align: center;
    color: #3b2a10;
    font-size: 15px;
    background-color: #d9b779;
    border: 1px solid #6b4b1f;
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.okno-zakryt:active {
    background-color: #7a5a22;
    color: #f2e2bd;
}

/*
 * Стрелка возврата в магазине: такая же круглая метка, как крестик, только
 * в левом верхнем углу рамки. Не в потоке - иначе сдвигала бы первые строки
 * содержимого.
 */
.okno-nazad {
    /*
     * Место у кнопки постоянное и считается от экрана, а не от рамки (fixed,
     * а не absolute): рамка разной высоты и ещё прокручивается, и кнопка
     * уезжала бы вверх вместе с содержимым. Правый низ - туда достаёт
     * большой палец правой руки, не перехватывая телефон.
     *
     * Отступ снизу с запасом под полоску жестов телефона (safe-area).
     */
    position: fixed;
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    /*
     * Выше всего окна (1100) и его затемнения: раньше кнопка оказывалась за
     * фоном рамки и выглядела притушенной, а на длинных списках её вовсе
     * не было видно. Теперь она лежит поверх всего, в том числе поверх
     * карточки предмета, если тот окажется под ней.
     */
    z-index: 2147483000;
    opacity: 1;
    width: 52px;
    height: 52px;
    margin: 0;
    line-height: 48px;
    text-align: center;
    color: #3b2a10;
    font-size: 28px;
    background-color: #d9b779;
    border: 2px solid #6b4b1f;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.okno-nazad:active {
    background-color: #7a5a22;
    color: #f2e2bd;
}

/*
 * Нижнее меню страницы охоты внутри окна не нужно: за окном осталось меню
 * главной, а два ряда кнопок друг под другом сбивали бы с толку. Скрываем
 * весь набор сразу: отдельные классы пропускали кнопки "Назад" и "Меню",
 * и они на миг показывались в рамке, пока оболочка их не уберёт.
 */
.game-overlay_okno .footlinetime,
.game-overlay_okno .footlmenut,
.game-overlay_okno .footrmenut,
.game-overlay_okno .footlmenub,
.game-overlay_okno .footrmenub,
.game-overlay_okno .footbcs,
.game-overlay_okno .fblmenu,
.game-overlay_okno .fbrmenu,
.game-overlay_okno .timefooter {
    display: none !important;
}

/*
 * Кнопки "Назад"/"Меню" добавляются на страницу скриптом после отрисовки
 * и живут вне рамки. В оконном режиме их не показываем вовсе: управление
 * остаётся у главной снизу и у крестика окна.
 */
body.has-okno .LButtonStyle,
body.has-okno .RButtonStyle {
    display: none !important;
}

/*
 * Меню главной держим выше слоя окна, иначе его затеняло бы вместе с
 * временем: слой окна — 1100, а меню штатно 1000-1001.
 */
body.has-okno #gameBody .footlinetime,
body.has-okno #gameBody .footlmenut,
body.has-okno #gameBody .footrmenut {
    z-index: 1150;
}

/*
 * ДУЭЛИ В ОКНЕ.
 *
 * Список разделов "Бои" и его подразделы пользуются общей раскладкой
 * .menuSpisok из default_v_1_0.css, где есть боковые отступы под полный экран.
 * Внутри рамки они дают двойной отступ, поэтому снимаем их только здесь,
 * не трогая общие сти��и игры (та же раскладка у магазина и настроек).
 */
.game-overlay_okno .menuSpisok {
    padding: 0;
    margin: 2px auto 6px;
}

/*
 * В рамке остаётся только список режимов.
 *
 * Пояснения под списком ("Начать поединок: бой один на один...", разбор
 * видов турнира) растягивали свиток почти на весь экран. Прячем их
 * ТОЛЬКО в окне, а не вырезаем из файлов: прямой заход на страницу
 * и старые клиенты по-прежнему показывают описания как раньше.
 */
/*
 * К старым селек��орам добавлены те же, но внутри свитка, который
 * оболочка теперь строит сама (okno-svitok-telo, см. oknoSvitokObernut
 * в javascript/shell.js). После обёртки текст стал глубже, и старое
 * `.okno-telo > p` больше не совпадало - ра��бор видов турнира
 * снова полез в окно на полэкрана.
 */
.game-overlay_okno .menuPoyasnenie,
.game-overlay_okno .okno-telo > p,
.game-overlay_okno .okno-telo > div > p,
.game-overlay_okno .okno-svitok-telo > p,
.game-overlay_okno .okno-svitok-telo > div > p,
.game-overlay_okno .okno-svitok-telo > center > p {
    display: none;
}

/* Заголовок раздела ("Бои") в рамке лишний: список говорит сам за себя. */
.game-overlay_okno .menuZagolovok {
    display: none;
}

/*
 * Кнопки подразделов ("Текущие", "Напасть", "отказаться", "Вмешаться")
 * в разны�� файл��х писались то <div>, то <button>. В рамке ровняем только
 * отступы, цвет и размер остаются игровые.
 */
.game-overlay_okno .okno-telo > center > .button_alt_01,
.game-overlay_okno .okno-telo > center > button.button_alt_01,
.game-overlay_okno .okno-telo > div > center > .button_alt_01,
.game-overlay_okno .okno-telo > div > center > button.button_alt_01 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin: 4px auto;
    text-align: center;
}

/*
 * СВИТОЧНЫЙ ВИД ИТО����ОВ БОЯ (полный экран).
 *
 * Окном итоги показать нельзя: приходят они из боя, главной за ними
 * нет. Поэтому совпадает только вид: та же бумага и рамка, что у окон
 * выбора противника. Класс stranica-svitok ставит оболочка по адресу
 * страницы, чтобы те же бло��и на других страницах остались прежними.
 */
/*
 * Сама страница итогов собирается в карточку по середине экрана, а не
 * растекается на всю высоту: ширина та же, что у окон выбора
 * противника (420px), снизу остаётся место под меню и часы.
 */
/*
 * Слой итогов боя: та же геометрия, что у окон выбора противника —
 * карточка по середине экрана, место под меню и часами свободно.
 * Слой ниже окон (1100) и выше обычного содержимого.
 */
.svitok-sloj {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 9vh;
    padding: 8px 0 9svh;
    box-sizing: border-box;
    pointer-events: none;
}

.svitok-karta {
    pointer-events: auto;
    width: 94%;
    max-width: 420px;
    max-height: 82vh;
    max-height: 82svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.svitok-karta .table_block2 {
    width: 100%;
    table-layout: fixed;
    margin: 0 auto;
}

.svitok-karta .button_alt_00 {
    width: 94% !important;
    max-width: 320px;
    margin: 10px auto 0;
}

/*
 * Итоги боя: тоже без своей рамки.
 *
 * Здесь подложка с кантом ставилась прямо на середину свитка (block105),
 * и поверх игровых краёв получался светлый квадрат. Оставляю игровой фон
 * бумаги из default_v_1_0.css (#c4ae7f) и только небольшие отступы,
 * чтобы строки не липли к краям свитка.
 */
.svitok-karta .block105 {
    /* Фон и отступы - в разделе "БУМАГА СВИТКА" в конце файла. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * Картинки краёв свитка (img/block_1/*.png) раньше здесь гасились
 * (`background: none`), потому что вид делала квадратная рамка на block105.
 * Рамку убрали - возвращаем игровые края, чтобы итоги боя выглядели
 * просто свитком, без коробки вокруг.
 */

/*
 * Своей рамки у ��к��а больше нет, значит бумага должна быть у самого
 * свитка: block105 больше НЕ гасим в прозрачность, остаётся игровой
 * цвет бумаги #c4ae7f из default_v_1_0.css. Прозрачными делаем только
 * вторые подложки внутри раздел��в.
 */
/*
 * А вот вторые подложки гасить в прозрачность больше нельзя.
 *
 * Целые разделы вёрстаны на `block05`/`block22`, а не на `block105`:
 * Стена славы (huntb/tur/slava.php), клановые и завершённые турниры
 * (huntb/clantur/index.php). Пока у окна была своя карточка, фон давала она,
 * и прозрачность здесь была к месту. Карточки нет - и списки имён легли
 * прямо на картинку локации и кнопки переходов, читать их стало невозможно.
 *
 * Обёртка в свиток (oknoSvitokObernut) такие страницы не спасала:
 * своя таблица-свиток у них есть, второй не нужен - нужна была бумага.
 * Цвета игровые, из default_v_1_0.css: block05 - #c4ae7f, block22 - #D3C6A3.
 */
/*
 * Заливки здесь не задаём: вся бумага собрана в разделе
 * "БУМАГА СВИТКА" в конце файла.
 */

/*
 * Середина свитка (block105) задаётся в разделе "БУМАГА СВИТКА"
 * в конце файла.
 */

/*
 * Свиток, который оболочка строит сама вокруг простого текста
 * (описание турнира, "Текущие бои"): см. oknoSvitokObernut в
 * javascript/shell.js. Ширина во всё окно, боковые отступы
 * table_block2 в окне лишние.
 */
.game-overlay_okno .okno-svitok {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Текст не должен липнуть к краям бумаги. */
.game-overlay_okno .okno-svitok-telo {
    padding: 4px 8px 6px;
}

/* Пустые отбивки "<br>" в конце разделов внутри окна лишние. */
.game-overlay_okno .okno-telo > br:last-child {
    display: none;
}

/* ------------------------------------------------------------------ */
/* СПРОС "АТАКОВАТЬ МОБА?" ПОВЕРХ СПИСКА                          */
/* ------------------------------------------------------------------ */

.okno-vopros {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    box-sizing: border-box;
}

.okno-vopros-karta {
    width: 100%;
    max-width: 300px;
    padding: 12px 10px 10px;
    box-sizing: border-box;
    text-align: center;
    background-color: #f6e7c1;
    border: 2px solid #6b4a1c;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.okno-vopros-text {
    margin-bottom: 10px;
    color: #3b2a10;
    font-size: 14px;
    line-height: 1.3;
}

.okno-vopros-knopki {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/*
 * Кнопки берут общий вид игры (button_alt_00), здесь только равная ширина,
 * чтобы "Да" и "Нет" не были разными из-за длины слова.
 */
.okno-vopros-knopki .button_alt_00 {
    flex: 0 1 110px;
    min-width: 0;
    margin: 0;
    padding: 5px 8px;
    font-size: 13px;
    line-height: 1.2;
}

/* Плавный уход в бой после "Да": окно гаснет и чуть отъезжает. */
.game-overlay_okno.okno-uhod {
    pointer-events: none;
}

.game-overlay_okno.okno-uhod > .okno-karta {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 200ms ease, transform 200ms ease;
}

.game-overlay_okno.okno-uhod > .okno-fon {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Выход окна: та же картинка в обра��ную сторону, при появлении. */
@keyframes okno-vhod {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.game-overlay_okno:not(.okno-uhod) > .okno-karta {
    animation: okno-vhod 160ms ease-out;
}

.okno-vopros-karta {
    animation: okno-vhod 140ms ease-out;
}

canvas.canvas_snow {
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.game-hud {
    position: relative;
    z-index: 99999;
    padding-top: 1px;
}

.game-hud[hidden] {
    display: none;
}

.game-hud__frame {
    margin: 0 auto;
    border-spacing: 0;
    height: 40px;
    max-width: 100%;
}

.game-hud__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-family: var(--game-font);
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.game-hud__cell {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.game-hud__cell[hidden] {
    display: none;
}

.game-hud__ico {
    display: block;
    height: auto;
    flex: none;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.location img,
.ramka_dvig img {
    height: auto;
}

/*
 * Загрузка как в старом java-клиенте: весь экран затемняется, в центре
 * крутится значок с подписью "Загрузка..." (анимация внутри /img/zagruzka.gif).
 * Раньше это была светлая полоска внизу, поверх кнопок "назад" -
 * её можно вернуть, забрав старое правило из docs/zagruzka.md.
 */
img.loading {
    /*
     * Щит ЛОВИТ нажатия, а не пропускает их сквозь себя.
     * Раньше тут стояло pointer-events: none - экран был затемнён, но
     * кнопки под затемнением продолжали работать: можно было ударить,
     * уйти в другой раздел, нажать то же самое второй раз. Пока щит
     * висит - играть нельзя.
     */
    pointer-events: auto;
    cursor: progress;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 1200;

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    /* сам гиф рисуется по центру в своём размере, без растягивания */
    object-fit: none;
    object-position: center center;
    overflow: hidden;

    box-sizing: border-box;
    border: none;
    background-color: rgba(18, 13, 7, 0.55);
}

/*
 * Щит внутри окна (поиск противника, поиск жертвы для грабежа).
 * Тот же значок, что и в общей загрузке, но без подписи и без затемнения:
 * крутится всё время, пока идёт поиск, кнопка "отказаться" остаётся видной.
 */
/* ------------------------------------------------------------------ */
/* ОКНА ПОИСКА (дуэль, открытый поиск, грабёж)                    */
/*                                                                     */
/* По просьбе владельца здесь ничего лишнего: ни свитка-рамки, ни  */
/* крестика - только вращающийся щит, строка состояния и         */
/* маленькая кнопка "Отказаться", как в старом клиенте.            */
/* Класс okno-poisk вешает сама страница поиска (см. huntb/...).      */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* СПИСКИ БОЙЦОВ (турниры, земли)                                   */
/*                                                                     */
/* Своё имя выделяли тегом <b>. Игровой пиксельный шрифт в жирном   */
/* начертании шире, из-за этого строка с нашим именем расползалась: */
/* уровень [21] уезжал на следующую строку, а у чужих бойцов      */
/* всё стояло ровно. Теперь выделяем цветом - ширина не меняется.  */
/* ------------------------------------------------------------------ */

.spisok_imya {
    font-weight: normal;
    white-space: nowrap;
}

.spisok_ya {
    color: #8a3e0c;
}

.game-overlay_okno.okno-poisk > .okno-karta {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.okno-poisk .okno-zakryt {
    display: none;
}

.poisk {
    text-align: center;
}

/* Строка "Идет поиск противника N.." лежит поверх картинки города,
   поэтому светлый текст с тёмной обводкой - читается на любом фоне. */
.poisk .info {
    margin: 2px auto 8px;
    color: #fff6dd;
    font-size: 17px;
    text-shadow: -1px -1px 0 #2a1c08, 1px -1px 0 #2a1c08,
                 -1px 1px 0 #2a1c08, 1px 1px 0 #2a1c08,
                 0 2px 3px rgba(0, 0, 0, 0.6);
}

/* Кнопка маленькая: ширина по тексту, а не на всю строку. */
/* Кнопка маленькая (ширина по тексту) и в общей коричневой гамме игры:
   цвета взяты у .button_alt_01 из style/default_v_1_0.css, оранжевого больше нет. */
.poisk_otkaz {
    display: inline-block;
    min-width: 0;
    width: auto;
    margin: 0 auto;
    padding: 7px 20px;
    color: #f4d9a4;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    background-color: #704a1d;
    background-image: none;
    border: 2px solid #4a2f10;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.poisk_otkaz:active {
    background-color: #4a2f10;
}

.loading_v_okne {
    display: block;
    width: 76px;
    height: 76px;
    margin: 4px auto 2px;
    pointer-events: none;
}

#zamer {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 74%;
    z-index: 1300;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.82);
    color: #ffe9a8;
    font-size: 10px;
    line-height: 1.35;
    font-family: monospace;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    word-break: break-all;
}

#zamer .zamerRow {
    color: #c9b98a;
    font-size: 9px;
}

@keyframes shellLoaderRun {
    from { background-position: -45% 0; }
    to   { background-position: 145% 0; }
}

.canvas_snow,
.snowConteiner {
    pointer-events: none !important;
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.game-body [onclick] {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.game-body [onclick]:active {
    opacity: 0.85;
}

.is-busy {
    animation: shellBusyWait 0.9s ease-in-out infinite;
}

@keyframes shellBusyWait {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

.grabSearch {
    overflow: hidden;
    margin: 8px auto;
    max-width: 320px;
    padding: 10px 10px 9px;
    border: 2px solid #663300;
    border-radius: 4px;
    background-color: #C4AE7F;
    color: #3b2a12;
    text-align: center;
}

.grabSearchTitle {
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #a7936d;
}

.grabSearchAlley {
    position: relative;
    height: 46px;
    margin: 9px 0 7px;
    border: 1px solid #6b5a33;
    border-radius: 3px;
    background-color: #1d160f;
    background-image: repeating-linear-gradient(90deg,
            rgba(240, 220, 174, 0.07) 0 26px,
            rgba(0, 0, 0, 0) 26px 28px),
        repeating-linear-gradient(180deg,
            rgba(240, 220, 174, 0.07) 0 14px,
            rgba(0, 0, 0, 0) 14px 16px);
    overflow: hidden;
}

.grabSearchBeam {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38%;
    background-image: linear-gradient(90deg,
            rgba(255, 233, 168, 0) 0%,
            rgba(255, 233, 168, 0.42) 50%,
            rgba(255, 233, 168, 0) 100%);
    animation: grabBeamRun 1.8s ease-in-out infinite;
}

@keyframes grabBeamRun {
    0%   { left: -38%; }
    50%  { left: 100%; }
    100% { left: -38%; }
}

.grabSearchSteps {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.grabSearchSteps i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #f0dcae;
    opacity: 0.18;
    animation: grabStepGlow 1.8s ease-in-out infinite;
}

.grabSearchSteps i:nth-child(2) { animation-delay: 0.25s; }
.grabSearchSteps i:nth-child(3) { animation-delay: 0.5s; }
.grabSearchSteps i:nth-child(4) { animation-delay: 0.75s; }

@keyframes grabStepGlow {
    0%, 60%, 100% { opacity: 0.18; transform: scale(1); }
    20%           { opacity: 1;    transform: scale(1.45); }
}

.grabSearchWord {
    min-height: 18px;
    font-size: 13px;
    color: #5d4826;
}

.grabSearchTihoTut {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid #a7936d;
    font-size: 12px;
    color: #5d4826;
}

/* ------------------------------------------------------------------ */
/* БУМАГА СВИТКА                                                  */
/*                                                                     */
/* Сначала зали��ки были сняты вовсе - содержимое просвечивало. */
/* Потом бумагу вернули с `background-clip: content-box` - фон шёл   */
/* только под текстом, и по бокам оставались прозрачные кантики. */
/*                                                                     */
/* Сейчас `border-box`: бумага заливает блок целиком, а отступы   */
/* только отбивают текст от краёв. Сужение по контуру даёт сам   */
/* свиток: валики сверху и снизу шире самого полотна.            */
/* За края заливка не выйдет: тело лежит МЕЖДУ боковыми колонками */
/* свитка (block104 / block106), а не поверх них.                     */
/*                                                                     */
/* Цвета игровые, из default_v_1_0.css. Боевой полный экран не трогаем:*/
/* правила только для окна и для свитка итогов боя.              */
/* ------------------------------------------------------------------ */

.game-overlay.game-overlay_okno .block105,
.game-overlay.game-overlay_okno .okno-svitok-telo,
.svitok-karta .block105 {
    background-color: #c4ae7f;
    /* Заливка на всю площадь блока - прозрачных кантиков нет. */
    background-clip: border-box;
    /* Отступы только для текста, на заливку они не влияют. */
    padding: 4px 8px 6px;
    box-sizing: border-box;
}

/* Вторые подложки внутри бумаги: те же правила, свой игровой цвет. */
.game-overlay.game-overlay_okno .block05 {
    background-color: #c4ae7f;
    background-clip: border-box;
    padding: 2px 6px 4px;
    box-sizing: border-box;
}

.game-overlay.game-overlay_okno .block22 {
    background-color: #D3C6A3;
    background-clip: border-box;
    padding: 2px 6px 4px;
    box-sizing: border-box;
}

/*
 * Сводки боёв, кнопки клановых турниров и полоски сортировки в
 * магазине лежат ВНУТРИ бумаги - за края не выходят, а без фона
 * надписи терялись.
 */
.game-overlay.game-overlay_okno .clan_svodka_boi {
    background-color: #e8cf99;
}

.game-overlay.game-overlay_okno .clanturblock {
    background-color: #c9b892;
}

.game-overlay.game-overlay_okno .clanturblock:hover,
.game-overlay.game-overlay_okno .clanturblock:checked {
    background-color: #ddca9f;
}

.game-overlay.game-overlay_okno .shopminiblock {
    background-color: #c9ac71;
}

.game-overlay.game-overlay_okno .shopminiblock:hover,
.game-overlay.game-overlay_okno .shopminiblock:checked {
    background-color: #ddca9f;
}

/* Разделительные черты внутри бумаги - игровой цвет, без просвета. */
.game-overlay.game-overlay_okno .hr_chat {
    background-color: #e8cf99;
}