/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 01.07.2019, 0:27:36
    Author     : niko
*/
#battle_butt{text-align: center;max-height: 64px}
#img_battle_butt{width: 75%;}

/*
 * Пустая полоска между рамкой боя и кнопками удара.
 *
 * Сверено с живым эталоном при окне 393x601: рамка боя кончается на 273,
 * кнопки удара начинаются на 317, сумка - на 400. Разницу в 42 точки там
 * занимает кнопка автобоя (6 зазор + 32 сама кнопка + 4 зазор).
 *
 * У нас автобоя нет, и без этой полоски кнопки прижимались к самой рамке -
 * стояли на 275 вместо 317, то есть на 42 точки выше эталона, и вся сумка
 * вместе с ними. Держим полоску пустой: кнопки встают ровно как в эталоне,
 * а место остаётся свободным под нужную кнопку на будущее.
 *
 * Высота задана целиком, без внешних отступов: у первого ребёнка отступ
 * сверху слипся бы с родителем и уехал за пределы блока, сдвинув заодно
 * всё содержимое.
 */
.battle_top_slot{
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Кнопка автобоя.
 *
 * Вид под гамму игры (тёплое дерево нижней панели), но заметная: тёмная
 * капсула с молнией слева. Высота 32 точки, чтобы с зазорами уложиться в
 * полоску 42 точки и не сдвинуть кнопки удара.
 *
 * Два состояния:
 *   выкл  - спокойная коричневая капсула;
 *   вкл   - класс is-on: янтарная заливка и мягко пульсирующее свечение,
 *           сразу видно, что боец бьётся сам. Пульс делает @keyframes.
 */
/*
 * ==== КНОПКА ОБЪЁМНАЯ, И НАЖАТИЕ ВИДНО СРАЗУ ====
 *
 * Раньше кнопка была плоской капсулой, а на нажатие отвечала сдвигом на одну
 * точку - заметить это нельзя, и игрок не понимал, попал он по ней или нет.
 * Отсюда "будто нажал" и попытки нажать второй раз.
 *
 * Объём делает "борт" под кнопкой: тёмная кромка снизу (box-shadow без
 * размытия) плюс светлый блик сверху внутри. Нажатая кнопка уезжает на всю
 * высоту борта, и борт исчезает - кнопка буквально утапливается. 4 точки хода
 * видны даже боковым зрением.
 *
 * Отклик обязан быть мгновенным, поэтому состояний два и оба без задержки:
 *   :active   - от самого браузера, срабатывает по касанию, без участия JS;
 *   .is-press - его ставит панель на pointerdown, чтобы вид не отставал, даже
 *               если браузер задержит :active (так делают мобильные Safari).
 * transition НЕ включаем для transform: любое сглаживание тут - это и есть та
 * самая "анимация нажатия позже", о которой шла речь.
 *
 * touch-action и tap-highlight убирают подарки мобильных браузеров: подсветку
 * серым квадратом и ожидание второго тапа для распознавания двойного нажатия
 * (те самые ~300 мс задержки).
 */
.auto-battle-btn{
    position: relative;
    height: 32px;
    padding: 0 16px 0 12px;
    display: inline-flex;
    align-items: center;
    /*
     * Ширина закреплена, содержимое по центру. Надпись меняется на "Автобой вкл"
     * и обратно, а без запаса кнопка на каждом переключении дёргалась бы в
     * ширину - на глаз это читается как подпрыгивание всей верхней полосы.
     * Запаса хватает на длинное слово, поэтому размер не меняется никогда.
     */
    min-width: 132px;
    justify-content: center;
    gap: 6px;
    border: 1px solid #6d4a24;
    border-radius: 16px;
    background: linear-gradient(180deg, #6b4926 0%, #432d17 100%);
    color: #f0e2c8;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    /* борт снизу + внутренние блик и тень - это и есть объём */
    box-shadow:
        0 4px 0 #2a1c0d,
        0 5px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 231, 186, 0.35),
        inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.auto-battle-btn:active,
.auto-battle-btn.is-press{
    /* уехала на высоту борта: борт съеден, тень прижата - кнопка утоплена */
    transform: translateY(4px);
    box-shadow:
        0 0 0 #2a1c0d,
        0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.45);
}
/* молния слева - рисуем формой, без картинки и без эмодзи */
.auto-battle-btn__spark{
    width: 9px;
    height: 15px;
    background: #d8a640;
    clip-path: polygon(60% 0, 0 58%, 42% 58%, 34% 100%, 100% 38%, 55% 38%);
    transition: background 0.2s, filter 0.2s;
}
.auto-battle-btn__label{
    letter-spacing: 0.3px;
}
/* включена: янтарная заливка и пульс, но борт остаётся - кнопка всё так же объёмная */
.auto-battle-btn.is-on{
    border-color: #f0c060;
    background: linear-gradient(180deg, #d9942f 0%, #a06712 100%);
    color: #fff6e2;
    animation: autoBattlePulse 1.1s ease-in-out infinite;
}
.auto-battle-btn.is-on .auto-battle-btn__spark{
    background: #fff2c4;
    filter: drop-shadow(0 0 3px rgba(255, 236, 170, 0.9));
}
/*
 * ==== ЗАПЕРТА НА ВХОДЕ (первые полсекунды боя, класс is-lock от панели) ====
 *
 * Запрет нужен: на входе кнопка успевала поймать тап, долетевший с прошлого
 * экрана, и автобой включался будто сам. Но раньше запертая кнопка выглядела
 * почти обычной - слегка притушенной, - поэтому нажатие в эти полсекунды
 * пропадало молча, и это читалось как "кнопка не работает".
 *
 * Теперь запрет ВИДЕН, и показан он тем же языком, которым кнопка говорит про
 * нажимаемость: у неё пропадает борт. Плоская кнопка не выглядит нажимаемой -
 * ровно то, что нужно сказать. Плюс серая заливка и приглушённая искра: три
 * признака сразу, ни один не спутать с обычным видом.
 */
.auto-battle-btn.is-lock{
    cursor: default;
    animation: none;
    pointer-events: none;
    color: #a1937d;
    border-color: #4e4033;
    background: linear-gradient(180deg, #4a4038 0%, #332c25 100%);
    /* борта нет: кнопка плоская, то есть сейчас не нажимается */
    box-shadow:
        inset 0 1px 0 rgba(255, 231, 186, 0.12),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(4px);
}
.auto-battle-btn.is-lock .auto-battle-btn__spark{
    background: #6f6252;
    filter: none;
}
/*
 * ==== ЖДЁМ ОТВЕТА СЕРВЕРА (класс is-wait) ====
 *
 * Состояние уже переключено и показано - игрок видит результат своего нажатия
 * сразу. Признак ожидания говорит лишь "команда в пути": кнопка чуть притушена
 * и медленно дышит. Важно, что она НЕ заперта - если игрок передумал, он может
 * нажать снова, не дожидаясь ответа.
 *
 * Ожидание обычно длится один опрос и незаметно. Видно его только когда сеть
 * подтормаживает, - а это как раз тот случай, когда игроку и нужно понимать,
 * что нажатие принято и ничего жать заново не надо.
 */
.auto-battle-btn.is-wait{
    animation: autoBattleWait 0.9s ease-in-out infinite;
}
.auto-battle-btn.is-wait .auto-battle-btn__spark{
    animation: autoBattleWait 0.9s ease-in-out infinite;
}
@keyframes autoBattleWait{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.72; }
}
/*
 * Пульс свечения. Борт (0 4px 0) повторён в каждом кадре: анимация box-shadow
 * заменяет тень целиком, и без него включённая кнопка теряла объём и на глаз
 * "проваливалась" сама собой, будто её нажали.
 */
@keyframes autoBattlePulse{
    0%, 100%{
        box-shadow:
            0 4px 0 #4a2f0c,
            0 0 7px rgba(240, 192, 96, 0.55),
            inset 0 1px 0 rgba(255, 245, 210, 0.5),
            inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    }
    50%{
        box-shadow:
            0 4px 0 #4a2f0c,
            0 0 15px rgba(240, 192, 96, 0.95),
            inset 0 1px 0 rgba(255, 245, 210, 0.5),
            inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    }
}
/* нажатая перебивает пульс: утопленная кнопка не может светить бортом */
.auto-battle-btn.is-on:active,
.auto-battle-btn.is-on.is-press{
    animation: none;
}
#battle_hover:hover{opacity: 0.7}

/*
 * Место под картинки резервируется заранее, до их загрузки.
 *
 * Зачем. У этих картинок в стилях задана только ширина (в процентах), а
 * высота - нет. Пока файл не загружен, браузер не знает его пропорций и
 * считает высоту нулевой, а в момент появления картинки раздвигает вёрстку.
 * Замер холодной загрузки показывал из-за этого россыпь мелких сдвигов
 * содержимого подряд, кадр за кадром, пока прибывали файлы: только кнопок
 * боя в каркасе девять штук.
 *
 * Как работает. aspect-ratio задаёт соотношение сторон, поэтому высота
 * вычисляется из ширины сразу при разборе страницы - место занято с самого
 * начала, и появление картинки уже ничего не сдвигает. Значения взяты из
 * настоящих размеров файлов, так что вид не меняется:
 *   кнопки боя  96x77
 *   фон локации 480x328
 */
#img_battle_butt{aspect-ratio: 96 / 77;}
.layer6{aspect-ratio: 480 / 328;}
.location_battle{
    text-align: center;
    z-index: 1;
    margin: auto;
    position: relative;
    padding: 0; 
    overflow: hidden;
}
.label_table{
    margin: auto;border-spacing: 0;max-width: 100%;height: 100%;
}  
/*
 * Табличка с именем бойца в бою - тот же свиток, что и в верхней панели.
 *
 * Здесь стояли logo_l/logo_c/logo_r.svg - упрощённая калька, из-за которой
 * табличка выглядела плоской полоской. Взяты родные растровые .png с округлым
 * пергаментом, как и в верхней панели, чтобы вид не разнился.
 *
 * Валикам задана ширина в пикселях, ровно их собственная (14 при высоте 32).
 * Раньше было 10% от таблички: доля от переменной ширины то сминала рисунок,
 * то растягивала. Полотно между ними размножается по горизонтали, поэтому
 * тянется на любую длину имени без искажения.
 */
.label_name_l{
    width: 14px;
    min-width: 14px;
    background-image: url("/img/logo_svg/logo_l.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0;
}
.label_name_c{
    /* Полотно растягивается, а не размножается - иначе тёмные края полоски
       стыкуются и дают штрихи через каждые 14 пикселей. Подробнее - в
       комментарии у .lth_01c в default_v_1_0.css. */
    background-image: url(/img/logo_svg/logo_c.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.label_name_r{
    width: 14px;
    min-width: 14px;
    background-image: url("/img/logo_svg/logo_r.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0;
}
.bagBorder_1{
    width: 100%;
    background-color: #663300;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
}
.bagBorder_2{
    width: 100%;
    background-color: #9a6733;
    border-color: #c2c08e;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
}
.ico_poyas{
    position: relative;
    text-align: center;
}
#shield_1{
    max-width: 100%;
    margin: auto;
    background-image: url(/images/GOL_app_shield.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 200% 100%;
}
.number_pos{
    position: absolute;
    width: 100%;
    color: black;
    bottom: 0px;
}
.layer0{z-index: 0;position: absolute;left: 0;top: 0;}

/*
 * Слоёв бойцов (#layer1/#layer2 и картинки .layer1_1/.layer2_1) больше нет:
 * оба бойца рисуются в холст .layer3_1. Подход и уход соперника - это сдвиг
 * внутри холста, а не сдвиг слоя, поэтому положение бойца задаёт не CSS.
 */
.layer3{z-index: 3;position: absolute;width: 100%;height: 100%;}
.layer3_1{top: 0;left: 0;right: 0;position: absolute;width: 100%;height: 98%;}

.layer4{z-index: 4;position: absolute;width: 100%;height: 98%;}
.layer5{z-index: 5;position: absolute;left: 0;top: 0;}
.layer6{z-index: 6;width: 100%;position: relative;}
.layer7{z-index: 7;position: absolute;left: 1%;top: 0px;height: 15%;}
.layer8{z-index: 8;position: absolute;right: 1%;bottom: 0px;height: 15%;}
.layer9{z-index: 9;position: absolute;left: 0;top: 0;}
.layer10{z-index: 10;position: absolute;left: 0;top: 0;}
.layer11{z-index: 11;position: absolute;left: 0;top: 0;}

.LifeL{
    top: 16%;
    left: 8%;
    height: 6%;
    position: absolute;
}   
.LifeR{
    top: 16%;
    right: 8%;
    height: 6%;
    position: absolute;
}