/* Notes: docs/client-notes/styles.md */
/*
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%;}

.battle_top_slot{
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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));
}
.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;
}
.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; }
}
@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}

#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;
    /*
     * Рамка боя растёт ровно так же, как рамка локации на главной
     * (.ramka_dvig в default_v_1_0.css) - иначе при входе в бой рамка
     * на глазах уменьшается. Бойцы живут в холсте внутри, так
     * что масштабируются вместе с ней (сверх FIG в render.js).
     * margin-bottom держит место под выросший низ, иначе арена
     * легла бы на кнопки ударов.
     */
    transform: scale(1.06);
    transform-origin: top center;
    margin-bottom: 4%;
}
.label_table{
    margin: auto;border-spacing: 0;max-width: 100%;height: 100%;
}  
.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{
    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;}

.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;
}

/*
 * Пункт "Автобой" во всплывающем меню боя (левый угол подвала,
 * см. huntbattle в system/foot/foot.php). Включённый горит золотом, чтобы
 * было видно состояние, не открывая меню. Подпись меняет hud.js.
 */
.footlmenub.foot-auto-battle.is-on{
    color: #f0c060;
}