*{padding:0;margin:0}
html,body{font-family:Tahoma,Geneva,sans-serif;padding:0;margin:0;width:100%;height:100%;background-image:url(img/__back.png)}
#game{position:relative;margin:0 auto;border:0px solid #777;box-sizing:border-box;max-width:992px;width:100%;height:100%;max-width:991px}
@media screen and (max-width: 576px) {#game{width:320px}}
#logo{color:#fff;font-size:21px;letter-spacing:0.5em;text-shadow:#111 1px 1px 0,#ccc -1px -1px 0,#ccc -1px 1px 0,#ccc 1px -1px 0}
#loading{position:absolute;margin:0 auto;top:50px;width:100%;text-align:center;font-weight:bold;font-size:20px;color:#111;font-size:14px;text-transform:uppercase;letter-spacing:10px}
#loading::after{content:'';display:block;position:absolute;top:26px;background:#555;width:100%;height:2px;animation:loading 1s infinite}
#loading::before{content:'';display:block;position:absolute;top:25px;width:100%;height:2px;border:1px solid #aaa}
@keyframes loading{0%{width:0%;left:0;right:auto}49%{width:100%;left:0;right:auto}50%{width:100%;right:0;left:auto}51%{width:100%;right:0;left:auto}100%{width:0%;right:0;left:auto}}
#modal{display:block;position:fixed;width:320px;height:150px;top:50px;left:50%;margin-left:-150px;z-index:10}
#modal::before{content:'';display:block;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.7);z-index:9}
#modal div{position:absolute;text-align:center;width:100%;height:auto;background:#fff;border:3px solid #333;border-radius:5px;padding:10px;box-sizing:border-box;z-index:10}
#modal p{text-align:center;margin-bottom:10px;font-size:1.2em}
#modal a{cursor:pointer;position:relative;display:inline-block;width:40%;margin:10px 5% 0;padding:10px;box-sizing:border-box;text-align:center;background:#a3a;color:#fff}
#heropanel{display:flex;padding:10px;flex-flow:wrap;justify-content:center;width:320px;margin:0 auto;box-sizing:border-box}
#heropanel>*,#enemypanel .enemy>*{background-size:contain;background-repeat:no-repeat;width:10%;height:32px;padding-left:32px;line-height:32px;font-size:13px;font-weight:bold;box-sizing:border-box}
#heropanel .top{display:flex;width:100%;justify-content:space-around;padding:0}
#heropanel .top a{cursor:pointer;text-align:center}
#heropanel .part{background-image:url(img/_p_part.png)}
#heropanel .coin{background-image:url(img/_p_coin.png)}
#heropanel .level{background-image:url(img/_p_level.png)}
#heropanel .move{background-image:url(img/_p_move.png)}
#heropanel .hp,#enemypanel .hp{background-image:url(img/_p_hp.png)}
#heropanel .power,#enemypanel .power{background-image:url(img/_p_power.png)}
#heropanel .defence,#enemypanel .defence{background-image:url(img/_p_defence.png)}
#heropanel>*{width:25%}
#heropanel .hp{width:37.5%}
#heropanel .power{width:37.5%}
#enemypanel{width:320px;margin:0 auto;box-sizing:border-box}
#enemypanel .name{cursor:pointer;font-size:10px;user-select:none}
#enemypanel .enemy{display:flex;padding:5px;flex-flow:wrap;justify-content:center;box-sizing:border-box}
#enemypanel .enemy{width:100%}
#enemypanel .enemy>*{width:25%}
#proportion{position:relative;margin:0 auto;background:#fff;border:1px solid #333;overflow:hidden}
#proportion *{position:absolute;border:2px solid #4d9262;box-sizing:border-box}
#proportion .black{background:#333}
#proportion a{cursor:pointer;background-size:contain}
#proportion .distance{border-color:#000;border-style:dashed;border-width:2px;background-repeat:no-repeat}
#proportion .aggressor{border-color:#a00;border-style:dashed;border-width:2px}
#proportion .move{background:#aaf;opacity:0.5}
#proportion .move:hover{opacity:0.2}
#proportion .map{background-image:url(img/_back.png)}
#proportion .map.green{background-position:0 -64px}
#proportion .map.tree{background-position:-32px -32px;background-color:#4d9262}
#proportion .hero{z-index:1}
#proportion a .hpm,#proportion a .hp{position:absolute;top:0;left:0;background:#000;width:100%;height:3px;border:0;z-index:1}
#proportion a .hp{background:#a00}
#log{font-size:10px;padding:10px;font-weight:bold;width:320px;margin:0 auto;box-sizing:border-box}
#log r{color:#a00}
#log b{color:#00a}
#log g{color:#0a0}
#log f{color:#a0a}
#lobby div{width:100%;text-align:center;padding:10px 0}
#lobby big{display:block;font-size:1.4em}
#lobby .footer{font-size:0.8em}
#lobby .logo{font-size:1.6em;text-transform:uppercase;text-align:center;padding:10px 0 0;letter-spacing:10px;}
#lobby .version{font-size:0.75em;color:#777;padding:0 0 10px}
#lobby .progress{display:flex;width:100%;justify-content:center;overflow:hidden}
#lobby .progress div{width:auto;padding:5px;min-width:90px}
#lobby .achievements{display:flex;flex-direction:column;width:320px;margin:0 auto;font-size:14px}
#lobby .achievements div{position:relative;width:auto;padding:10px 0;padding-left:70px;background-position:30px;background-repeat:no-repeat;background-size:contain}
#lobby .achievements .sword{background-image:url(img/_s_sword.png)}
#lobby .achievements .bow{background-image:url(img/_s_bow.png)}
#lobby .achievements .staff{background-image:url(img/_s_staff.png)}
#lobby .achievements div:not(.active):after{content:'✖';position:absolute;top:6px;left:6px;color:#a00;font-size:22px;text-shadow:#fff 1px 1px 0,#fff -1px -1px 0,#fff -1px 1px 0,#fff 1px -1px 0}
#lobby .achievements div.active:after{content:'✔';position:absolute;top:6px;left:6px;color:#0a0;font-size:22px;text-shadow:#fff 1px 1px 0,#fff -1px -1px 0,#fff -1px 1px 0,#fff 1px -1px 0}
.info{width:100%;color:#111;font-size:1.2em;height:100%;overflow-y:auto}
.info .title{font-size:1.4em;text-transform:uppercase;text-align:center;padding:10px 0;color:#a0a}
.info .btnBig{cursor:pointer;margin:10px auto;padding:10px 30px;border:2px solid #a0a;color:#a0a;display:block;max-width:300px;font-size:1em;text-transform:uppercase;font-weight:bold;text-align:center;box-sizing:border-box}
.info .vk{max-width:300px;display:flex;margin:0 auto;justify-content:center}
.info .vk a{padding:8px 16px;margin:0 3px;cursor:pointer;text-align:center;background:#5181b8;border:0;border-radius:4px;font-size:12.5px;display:inline-block;white-space:nowrap;outline:0;line-height:15px;text-decoration:none;color:#fff;box-sizing:border-box}
.info .btn{cursor:pointer;margin:10px auto;padding:10px 30px;border:2px solid #a0a;color:#a0a;display:block;max-width:300px;width:auto;font-size:14px;text-transform:uppercase;font-weight:bold;text-align:center}
.info .text{font-size:16px}
.info .text img{width:32px;vertical-align:middle}
#shop{margin:0 auto;height:100%}
#shop>.coin{background-size:contain;width:50px;background-repeat:no-repeat;background-image:url(img/_p_coin.png);padding-left:42px;margin:0 auto;height:46px;line-height:46px;font-weight:bold}
.item{display:flex;position:relative;margin:10px auto;border:0px solid #333;max-width:300px}
.item .left{width:75px;min-width:75px;padding:5px;border-right:0px solid #333}
.item .right{font-size:12px;padding:5px;width:100%}
.item .coin{cursor:pointer;background-size:contain;background-repeat:no-repeat;background-position:right;padding-right:26px;padding-left:10px;background-image:url(img/_p_coin.png);line-height:26px;width:auto;margin:5px auto;border:2px solid #333;color:#333;display:inline-block;font-size:14px;font-weight:bold}
.item .action{cursor:pointer;padding:5px 10px;width:auto;margin:5px auto;border:2px solid #333;color:#333;display:inline-block;font-size:12px;font-weight:bold}
.item.use_en:after{content:'Activety';position:absolute;top:26px;left:0px;color:#a00;font-size:22px;transform:rotate(-45deg);text-shadow:#fff 1px 1px 0,#fff -1px -1px 0,#fff -1px 1px 0,#fff 1px -1px 0}
.item.use_ru:after{content:'Активно';position:absolute;top:26px;left:0px;color:#a00;font-size:22px;transform:rotate(-45deg);text-shadow:#fff 1px 1px 0,#fff -1px -1px 0,#fff -1px 1px 0,#fff 1px -1px 0}
#proportion .animat{position:absolute;display:block;width:36px;height:36px;line-height:36px;font-size:18px;text-align:center;font-weight:bold;font-style:normal;color:#a00;z-index:1;border:0;transition:all 0.1s ease 0s}
#proportion .animat{text-shadow:#fff 1px 1px 0,#fff -1px -1px 0,#fff -1px 1px 0,#fff 1px -1px 0}
#proportion .animat.vamp{color:#0a0;margin-top:-20px}
#audio{cursor:pointer;position:absolute;display:block;width:32px;height:32px;top:10px;left:50%;margin-left:165px;background-image:url(img/sound-on.png)}
#audio.off{background-image:url(img/sound-off.png)}