*{margin:0;padding:0;border:0;}
body{
    margin:0 auto;
    max-width:480px;
    background-color:#000000;
    font-size:medium;
    color:#CCC;
    text-shadow:0 1px 5px black;
    font-family:arial, verdana, tahoma, sans-serif;}

h1 {font-size:125%;}
h2 {font-size:115%;}

a:link,a:visited{text-decoration:underline;color:#31b0d8;}
a:hover{color:#3eccf8;}
a img{border:0;}
ul,li{list-style:none;}
img{vertical-align:baseline;}

.main {background:#0c3441 url('../images/bg.png'); padding: 0 4px;}
.evnt {background:#1a3744 url('../images/bg_l.png')}
.ntfy {background:#162624 url('../images/bg_ntf.png')}

.mini {text-shadow:none;}
.mini .main {background-image:none;}
.mini .evnt {background-image:none;}
.mini .ntfy {background-image:none;}

input, select {
    font-size: medium;
}

em {font-style:normal;}

/* common */
.flr{float:right;}
.fll{float:left;}
.clb{clear:both;}
.nwr{white-space:nowrap;}
.wwr{word-wrap:break-word;}
.bld{font-weight:bold;}
.nobld{font-weight:normal !important;}
.hr{border-bottom:1px dotted #40838f;margin:5px 0;}
.ln{border-top:1px solid #091a1d; border-bottom:1px solid #164b53;}
.hrt{border-bottom:1px dotted #40838f;padding-top:5px;}
.hrb{border-bottom:1px dotted #40838f;padding-bottom:5px;}
.vabtm-2 {vertical-align:-2px;}
.p5{padding:5px !important;}
.pb5 {padding-bottom:5px !important;}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}

.m5{margin:5px !important;}
.m10{margin:10px !important;}
.mb5{margin-bottom:5px !important;}
.mt0{margin-top:0px !important;}
.mt5{margin-top:5px !important;}
.ml5{margin-left:5px !important;}
.mr5{margin-right:5px !important;}
.mauto {
    margin:auto;
}

.btn{background-color:#0f2d33;border-radius:6px;border:1px solid;border-color:#234b52 #0d2125 #0d2125 #234b52;}
.btng{background:#357752 url('../images/bg_g.png');border-radius:6px;border:1px solid;border-color:#266a3e #0a1913 #0a1913 #266a3e;color:white !important;}
.btnr{background:#651d24 url('../images/bg_r.png');border-radius:6px;border:1px solid;border-color:#513024 #140205 #140205 #513024;color:white !important;}
.btnbr{background-color:#174577;border-radius:6px;border:1px solid;border-color:#285688;}
.btnn {background:#495659;}


.tmsg{text-align:center;padding:5px;margin-top:5px;}
.tmsg img{width:16px;height:16px;vertical-align:middle;}
.vab img,.vam img{vertical-align:bottom;width:16px;height:16px;}
.vam img{vertical-align:middle;}
.bl{display:block;}
.cntr{text-align:center;}
.abstr{position:absolute;right:0;top:0;z-index:5;}
.r4{right:4px;}
.t2{top:2px;}
.txtal{text-align:left !important;}
.txtar{text-align:right;}
.mw50{max-width:50%;}
.inbl{
    display:inline-block !important;
//display:inline;
//zoom:1;}
.mainImg {
    text-align:center;
    padding:5px 0 0 0 ;
}


/* header begin */
.hdr{padding:8px 4px 0 4px;background:#0c3441 url('../images/bg.png');}

.hdr .ttl{
    float:left;
    display:block;
    max-width:63%;
    line-height:1.1;}
.mini .hdr .ttl img {display:none;}
.cash{
    display:block;
    color:white;
    font-size:80%;
    text-align:center;
    word-wrap:break-word;
    padding-top:5px;
}
.hdr .cntr {
    font-size:80%;
}
/* toolbar */
.tlbr{padding:5px 5px 2px;}
.tlbr img{vertical-align:middle;}
.tlbr a{margin-right:2%;}
/*.mini .tlbr a img{width:24px;height:24px;}*/
/*.tlbr img:hover{background-color:#275587;border-radius:4px;}*/


/* progress bars*/
.lvlPrgbr {
    padding:0 4px;
}
.lvlPrgbr .prgbr{
    background-color: #290000;
    border-top: 1px solid #335E66;
    margin: 6px 0 2px 0;
}
.lvlPrgbr .prg{background:#DC9B36;height:3px;}

.qstPrgbr, .upPrgbr{border-top:1px solid #043264; border-bottom:1px solid #285688;font-size: 0;}

/*.qstPrgbr .prg{background:#0cceff;background-image:url('/images/bg_pgrs_b.png');height:3px;}
.upPrgbr .prg{background:#0cceff;background-image:url('/images/bg_pgrs_g.png');height:3px;}*/

/* Battle page */

.battle {
    width:92%;
    margin:10px auto 0 auto;
    border-bottom:1px dotted #40838f;
}
.brute {
    width:92%;
    margin:10px auto 0 auto;
}

.blhdr,a.blhdr{
    position:relative;
    display:block;
    padding:0px;
}

a.blhdr:hover {background-color:#275587;}

.blbdy{margin:4px;position:relative; line-height:1.1;}
.blbdy .blogo{width:40px;height:40px;padding:0 4px 0 0;float:left;}
.blbdy .blst{margin-left:47px;text-shadow:none; text-decoration:none;}
.blbdy .blst .link{text-decoration:underline;}
.blbdy .blst .link:hover{color:#3ECCF8;}
.blbdy img{width:12px;height:12px;}

.brute .blbdy .blogo{width:70px;height:123px;padding:0 4px 0 0;float:left;}
.brute .blbdy .blst{margin-left:77px;text-shadow:none; text-decoration:none; line-height:1;}

.brute .btn {
    padding:5px 0;
    margin-top:5px;
    color:#CCC;
    text-decoration:none;
    display:block;
    width:47%;
    text-align:center;
}
.brute .btnr:hover {
    background:#772331 url(../images/bg_r2.png);
}
.brute .btng:hover {
    background:#772331 url(../images/bg_g2.png);
}
.brutef .blbdy {
    margin:4px 0;
}
.brutef .blbdy .blogo{width:40px;height:40px;padding:0 4px 0 0;float:left;}
.brutef .blbdy .blst{margin-left:47px;text-shadow:none; text-decoration:none;}

.brutef .prg-bar {
    display:block;
    margin-top:5px;
    margin-left:47px;
    height:5px;
    background:#2b2b2b;
    border:solid 1px;
    border-color:#4a4a4a #272727 #030b0c #2b2b2b;
}
.brutef .prg-bar span {
    float:left;
}
.prg-green {
    background:#23d423 url(../images/prg-green.gif) left top repeat-x;
    height:5px;
}
.prg-red {
    background:#ff3e0c  url(../images/prg-red.gif) left top repeat-x;
    height:5px;
}
.abilitys {
    margin-left:48px;
    padding-top:2px;
    width:50%;
    height:16px;
    line-height:0;
}
.damage {
    float:right;
    color:#D66;
    font-size:80%;
    padding:2px 3px 0 0;
}
.heal {
    float:right;
    color:#23d423;
    font-size:80%;
    padding:2px 3px 0 0;
}
/*Item*/
.item {
    text-align:left;
}
.ibdy{margin:4px;position:relative;}
.ibdy .ilogo{width:40px;height:40px;padding:0 4px 0 0;float:left;}
.ibdy .ilst{margin-left:47px;text-shadow:none; text-decoration:none;}
.ibdy .ilst .link{text-decoration:underline;}
.ibdy .ilst .link:hover{color:#3ECCF8;}
.ibdy img{width:12px;height:12px;}
/*menu*/
.w50 {
    width:50% !important;
}
.w70 {
    width:70% !important;
}
.w90 {
    width:92% !important;
    margin:auto;
}
.menu {
    text-align:center;
    width:92%;
    margin:10px auto;
}
.menu .btn{
    padding:5px 0;
    color:#CCC;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:47%;
}
.mini .menu .btn {width:48%;font-weight:normal;padding:4px 0;}
.menu .btn:hover {
    background:#0c262b;
}
.menu .btng:hover {
    background:#398259 url(../images/bg_g2.png);
}
.menu .btnr:hover {
    background:#772331 url(../images/bg_r2.png);
}
.menu .btnn:hover {
    background:#495659;
}
.mini .menu .full {
    width:auto;
}
.menu a.full{
    width:99%;
}
.menu a .info{
    font-weight:normal;
}


/* footer */
.ftr{
    text-align:center;
    width:92%;
    margin:10px auto;
    padding:5px;
    height:32px;}
.mini .ftr{width:96%;margin:2px auto;}
.ftr img{width:16px;height:16px;vertical-align:middle;}
.ftr a{
    padding:5px 0;
    color:#CCC;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:47%;}
.mini .ftr a {width:48%;font-weight:normal;padding:4px 0;}
.ftr a:hover{background:#275587;}
div.footer{
    text-align:center;
    margin:10px 0 5px;
    font-size:80%;
    color:#999;}


.evnt{
    text-align:center;
    border:2px solid #234b52;
    padding:3px;margin:3px 0;
    background-color:#1a3744;
    border-radius:4px;
    margin:auto;
}
.evnt a{
    display:inline;
}


a.cnfrm {margin:10px auto;width:60%;}



/* from original css */
.btni{background-color:#036;border-radius:6px;border: 1px solid #043264;border-right-color:#285688;border-bottom-color:#285688;}
.nd{text-decoration:none;}

/* rating */
table.rtg {width:100%;line-height:0.9;border-spacing:0 1px;border-bottom:1px solid #40838F;}
table.rtg td{border-top:1px solid #40838F;}
table.rtg tr.odd{background:#0f2d33;}
table.rtg .my .num a{color:#FEF78C;}
table.rtg .name{color:#31B0D8;}
table.rtg .hgh{font-size:80%;}
table.rtg a{display:block;text-decoration:none;}
table.rtg .usr a:hover{background:#0C262B;}
table.rtg tr:hover{background:#0C262B;}
table.rtg td.num{vertical-align:middle;text-align:center;font-weight:bold;border-right:1px solid #043264;font-size:110%;}
table.rtg td.num a{color:#31B0D8;padding:0 10px;}
table.rtg td.usr a{padding:5px 0 6px 10px;}
table.rtg td.usr{width:100%;border-left:1px solid #40838F;}
table.rtg td.sum{vertical-align:middle;text-align:center;font-weight:normal;border-left:1px solid #40838f;font-size:100%;}
table.rtg td.sum a {color:white; padding:0 10px;}
table.rtg .my .name {
    color:#FEF78C;
    font-weight:bold;
}
table.rtg .my .sum a {
    color:#FEF78C;
}


table.rtgh{width:100%;border:1px solid #40838F;margin-bottom:4px;border-spacing:0;border-radius:5px;font-size:80%; margin-top:5px;}
table.rtgh td{width:33%;text-align:center;font-weight:bold;}
table.rtgh td.mdl{width:34%;border-left:1px solid #40838F;border-right:1px solid #40838F;}

table.rtgh td.td20{width:20%;text-align:center;font-weight:bold;padding:3px;}
table.rtgh td.mdl20{width:20%;border-left:1px solid #40838F;}
table.rtgh td.td50{width:50%;text-align:center;font-weight:bold;padding:3px;}
table.rtgh td.rgtbl {border-left:0;}
table.rtgh td.td50l {border-right:1px solid #40838F;}

table.rtgh a{display:block;color:#CCC;text-decoration:none;}
table.rtgh span.ptd{display:block;background:#0F2D33;}
table.rtgh .lft a,table.rtgh .lft span.ptd{border-radius:5px 0 0 5px;}
table.rtgh .rgt a,table.rtgh .rgt span.ptd{border-radius:0 5px 5px 0;}
table.rtgh a:hover{background:#0C262B;}
table.rtgh td .ptd{padding:3px 0;}

.pgn {padding:5px 0;text-align:center;}
.pag, a.pag {border:1px solid #40838f;padding:5px 9px;margin:1px;color:#CCC;text-decoration:none;background:#0f2d33;}
a.pag:hover, span.pag {background:#0c262b;color:#FFFFFF;}

table.rtg .userimg {
    float:left;
    height:40px;
    width:40px;
    padding:3px 3px 3px 0;
}
table.rtg .userimg img {
    width:40px;
    height:40px
}
table.rtg .champion_info {
    margin-left:45px;
    font-weight:bold;
    padding-top:3px;
    line-height:1 !important;
}
table.rtg td.champion a {
    padding:2px 0 3px 10px;
}
table.rtgh .rttrb {
    padding-bottom:0;
}
table.rtgh .rttrb table.rtgh {
    border:0;
    margin-bottom:0;
    margin-top:0;
}
table.rtgh .rttrb table.rtgh td{border-top:1px solid #40838f}
/* Forum */
ul.frm li a{
    text-decoration:none;
    border-top:1px solid #285688;
    margin-bottom:1px;
    line-height:1;}
ul.frm li.odd a{background: #174577;}
ul.frm li a:hover{background:#275587;}

.msgs a.sndr{
    text-decoration:none;
    border-top:1px solid #285688;
    background:#174577;
    padding:2px 5px;
    margin-bottom:2px;}
.msgs a.sndr:hover{background:#275587;}
.msgs li {padding-bottom:5px;}
.msgs a {color:#FFDF8C;}
.msgs a:hover {color:#DFBF6C;}

.ovh{word-wrap:break-word;overflow-x:hidden;}
/* Forum End */

.vndr a {color:#EEE;}
.vndr a:hover {color:#CCC;}

.small{font-size:80%;}
.amount{color:#FF9;}
.white {color:white;}
.health {color:#FF9999;}
.notify {color:#FFF559;}
.energy {color:#9999FF;}
.money {color:#CC9900;}
.minor {color:#999;}
.major {color:#DD6666;}
.info {color:#6FCD72;}
.link {color:#31B0D8;}
.admin {color:#00D0FF;}
.moderator {color:#FF9;}
.level {color:#7cfc00;}
.buff {color:cyan;}
.sale {color:#ee96ff;}
a.buff {color:cyan;}
a.buff:hover {color:#00DDDD;}
a.white {color:#EEE;}
a.white:hover {color:#CCC;}
a.info {color:#6FCD72;}
a.info:hover {color:#6FCD72;}
a.major {color:#DD6666;}
a.major:hover {color:#BD4646;}
a.minor, .minor a {color:#999;}
a.minor:hover, .minor a:hover {color:#777;}
a.link, .user a {color:#FFDF8C;}
a.link:hover, .user a:hover {color:#DFBF6C;}
a.amount{color:#FF9;}
a.amount:hover {color:#DD7;}
a.sale{color:#ee96ff;}
a.sale:hover {color:#C187FD;}
.itemGood {color:#6FCD72;}
.itemBad {color:chocolate;}
.waiting {color:#9999FF;}
.spaces {color:#FF6600;}
.odnoklassniki {color:#CCFF99;}
.mailru {color:#3232CC;}
.mailrucatalog {color:#3232CC;}
.nick{color:#FFF559;}
a.active {color:#00D0FF;}

li.feedbackPanelERROR {color:#D66;text-align:center;display:block;padding:5px;border:2px solid #234B52;background-color:#0f2d33;border-radius:4px; width:92%; margin:4px auto 0 auto;}
li.feedbackPanelINFO {color:#FFF559;text-align:center;display:block;padding:5px;border:2px solid #234B52;background-color:#0f2d33;border-radius:4px; width:92%;  margin:4px auto 0 auto;}

.sz32 {width: 32px;height: 32px;}
.sz50 {width: 50px;height: 50px;}

.rm{border-radius:6px;border: 1px solid #285688;}

.ntfy {
    text-align:center;
    border:1px solid #234b52;
    padding:10px 5px;
    margin:15px auto;
    border-radius:4px;
}
.ntfy .ln{border-top: 1px solid #184678;border-bottom:1px solid #4775A7;}

.ntfy a {
    color:#FFF559;
}
.ntfy a:hover {
    color:#fef78c;
}
.hint{color:#999;margin:5px;text-align:center;font-size:80%;text-shadow:none;}

.nshd{text-shadow:none;}
.tdn, .tdn a{text-decoration:none !important;}
.tdu, .tdu a{text-decoration:underline !important;}

.btn60 a, a.btn60{width:60%;margin:10px auto;}
.btn80 a, a.btn80{width:80%;margin:10px auto;}

.rstat .fll, .rstat .flr {max-width:50%;}
.rstat .flr {text-align:right;}
.rstat .fll {text-align:left;}


input, textarea, select {padding:2px;margin:5px 0;border-radius:4px;}
.submit{padding:5px 20px;margin:10px 0;border-radius:4px; background: #398259 url(../images/bg_g2.png); color:#fff;border: 1px solid; border-color: #3B8868 #27664C #27664C #3B8868; text-shadow: 0 1px 5px black; font-weight:bold;}


.menu .menu {width:97%; }
.menu .ntfy {padding:5px;}
.menu .menu .btn {width:48%;}
.menu .menu .btn:hover {
    color:#cccccc;
}
.menu .menu a.full {width:99%;}
.menu .ntfy a.bl {text-decoration:none;}


/*Skin gray */
body.skin1 {
    background:#303030;
    color:#fff;
}
.skin1 .main {
    background:#373737 url(../images/bg_1.png);
}
.skin1 .hdr {
    background:#373737 url(../images/bg_1.png);
}
.skin1 .evnt {
    background:#3c3b3b url(../images/bg_l_1.png);
    border-color:#646464;
}
.skin1 .btn {
    background-color:#252525;
    border-color:#565555 #414141 #414141 #565555
}

.skin1 .menu .btn {
    color:#fff;
}
.skin1 .menu .btn:hover {
    background-color:#2a2a2a;
}
.skin1 .ntfy {
    background:#4c4c4c url(../images/bg_ntf_1.png);
    border-color:#818282;
}
.skin1 .hr {border-color:#818282;}
.skin1 .hrt{border-bottom-color:#818282;}
.skin1 .hrb{border-bottom-color:#818282;}

.skin1 .lvlPrgbr .prgbr {
    border-top-color:#646464;
}
.skin1 li.feedbackPanelERROR {border-color:#818282;background-color:#4c4c4c;}
.skin1 li.feedbackPanelINFO {border-color:#818282;background-color:#4c4c4c;}

.skin1 .battle {
    border-bottom-color:#818282;
}
.skin1 table.rtgh span.ptd {
    background-color:#1b1b1b;
}

.skin1 table.rtg tr.odd {
    background-color:#444444;
}
.skin1 table.rtg {border-bottom-color:#818282;}
.skin1 table.rtg td{border-top-color:#818282;}
.skin1 table.rtg td.usr{border-left-color:#818282;}
.skin1 table.rtg td.sum{border-left-color:#818282;}
.skin1 table.rtgh{border-color:#818282;}
.skin1 .pag, .skin1 a.pag {border-color:#818282;background:#444444;}
.skin1 a.pag:hover, .skin1 span.pag {background:#2f2f2f;}
.skin1 table.rtg .usr a:hover{background:#2f2f2f}
.skin1 table.rtg tr:hover{background:#2f2f2f;}
.skin1 table.rtgh a:hover{background:#2f2f2f;}
.skin1 table.rtgh td.td50l {border-right-color:#818282;}
.skin1 table.rtgh .rttrb table.rtgh td {border-top-color:#818282;}
.skin1 table.rtgh td.mdl20 {border-left-color:#818282;}


.skin1 table.rtg .name {color:#fff;}
.skin1 table.rtg td.num a {color:#fff;}
.skin1 table.rtg .my .num a {color:#FEF78C;}
.skin1 table.rtg .my .sum a {color:#FEF78C;}
.skin1 table.rtg .my .name {color:#FEF78C;}

.skin1 .ln {border-bottom-color:#646464;}


/*Skin Red */
body.skin2 {
    background:#000000;
    color:#fff;
}
.skin2 .main {
    background:#1a0000 url(../images/bg_2.png);
}
.skin2 .hdr {
    background:#1a0000 url(../images/bg_2.png);
}
.skin2 .evnt {
    background:#3c3b3b url(../images/bg_l_2.png);
    border-color:#610b0b;
}
.skin2 .btn {
    background-color:#350707;
    border-color:#565555 #414141 #414141 #565555
}
.skin2 .menu .btn {
    color:#fff;
}
.skin2 .menu .btn:hover {
    background-color:#3c0808;
}
.skin2 .ntfy {
    background:#1b0202 url(../images/bg_ntf_2.png);
    border-color:#610b0b;
}
.skin2 .hr {border-color:#610b0b;}
.skin2 .hrt{border-bottom-color:#610b0b;}
.skin2 .hrb{border-bottom-color:#610b0b;}

.skin2 .lvlPrgbr .prgbr {
    border-top-color:#3c0808;
}
.skin2 li.feedbackPanelERROR {border-color:#610b0b;background-color:#1b0202;}
.skin2 li.feedbackPanelINFO {border-color:#610b0b;background-color:#1b0202;}

.skin2 .battle {
    border-bottom-color:#610b0b;
}
.skin2 table.rtgh span.ptd {
    background-color:#380707;
}
.skin2 table.rtg tr.odd {
    background-color:#290606;
}
.skin2 table.rtg {border-bottom-color:#610b0b;}
.skin2 table.rtg td{border-top-color:#610b0b;}
.skin2 table.rtg td.usr{border-left-color:#610b0b;}
.skin2 table.rtg td.sum{border-left-color:#610b0b;}
.skin2 table.rtgh{border-color:#610b0b;}
.skin2 .pag, .skin2 a.pag {border-color:#610b0b;background:#290606;}
.skin2 a.pag:hover, .skin2 span.pag {background:#380707;}
.skin2 table.rtg .usr a:hover{background:#380707}
.skin2 table.rtg tr:hover{background:#380707;}
.skin2 table.rtgh a:hover{background:#380707;}
.skin2 table.rtgh td.td50l {border-right-color:#610b0b;}
.skin2 table.rtgh .rttrb table.rtgh td {border-top-color:#610b0b;}
.skin2 table.rtgh td.mdl20 {border-left-color:#610b0b;}
.skin2 table.rtg .name {color:#fff;}
.skin2 table.rtg td.num a {color:#fff;}
.skin2 table.rtg .my .num a {color:#FEF78C;}
.skin2 table.rtg .my .sum a {color:#FEF78C;}
.skin2 table.rtg .my .name {color:#FEF78C;}
.skin2 table.rtg td.num {border-right:0;}
.skin2 table.rtg td.usr {border-left-color:#610b0b;}


/* ======================================================
   VOYNY MAFII — общий мобильный дизайн
   Дальше можно подключать эти классы в любых файлах,
   чтобы не писать дизайн заново на каждой странице.
====================================================== */
:root{
    --mf-bg:#070707;
    --mf-card:#11100f;
    --mf-card2:#171413;
    --mf-border:#3b3020;
    --mf-gold:#d8ad63;
    --mf-gold2:#f3d28a;
    --mf-red:#b9251f;
    --mf-red2:#e44336;
    --mf-text:#e8dfcf;
    --mf-muted:#9a9284;
    --mf-green:#6cc36d;
}
html{background:#050505;}
body{
    max-width:480px;
    min-width:240px;
    background:#050505;
    color:var(--mf-text);
}
body .main{
    min-height:100vh;
    padding:0 8px 82px;
    background:
        radial-gradient(circle at 18% 0%, rgba(177,35,28,.24), transparent 28%),
        radial-gradient(circle at 82% 0%, rgba(195,136,52,.20), transparent 28%),
        linear-gradient(180deg,#070707 0%,#0d0b0a 40%,#050505 100%);
}
a:link,a:visited{color:#e4bc72;text-decoration:none;}
a:hover{color:#fff0b6;}
.hr{border-bottom:1px solid rgba(216,173,99,.18);margin:7px 0;}
.ttl,.page-title{display:block;text-align:center;color:#f4dfad;font-weight:bold;letter-spacing:.4px;margin:8px 0;text-transform:uppercase;}
.btn,.mf-btn{
    background:linear-gradient(180deg,#25211c,#11100f);
    border:1px solid rgba(216,173,99,.35);
    border-radius:9px;
    color:var(--mf-text)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.35);
}
.mf-btn{display:inline-block;padding:9px 12px;font-weight:bold;text-align:center;}
.mf-btn-red{background:linear-gradient(180deg,#d94336,#8c1715);border-color:#ef665b;color:#fff!important;}
.mf-btn-green{background:linear-gradient(180deg,#477d26,#244d16);border-color:#71a74c;color:#fff!important;}
.mf-panel{
    margin:9px 0;
    padding:10px;
    background:linear-gradient(180deg,rgba(29,26,23,.96),rgba(10,10,10,.96));
    border:1px solid rgba(216,173,99,.26);
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.mf-panel-title{font-weight:bold;color:#f0cf87;text-transform:uppercase;margin-bottom:7px;}
.mf-muted{color:var(--mf-muted);font-size:12px;}
.mf-logo-title{
    text-align:center;
    font-family:Georgia,'Times New Roman',serif;
    color:#f2dfba;
    font-size:25px;
    line-height:1;
    letter-spacing:2px;
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(229,44,35,.28),0 2px 0 #000;
}
.mf-logo-title span{color:#d8342d;}
.mf-hero{
    position:relative;
    overflow:hidden;
    margin:8px 0 10px;
    min-height:245px;
    border-radius:14px;
    border:1px solid rgba(216,173,99,.28);
    background:#080808 url('/images/start_image.jpg') center/cover no-repeat;
    box-shadow:0 12px 26px rgba(0,0,0,.48);
}
.mf-hero:before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.75)),linear-gradient(90deg,rgba(134,72,12,.45),transparent 45%,rgba(122,7,18,.45));
}
.mf-hero-content{position:relative;z-index:1;padding:18px 10px 14px;text-align:center;}
.mf-hero .mf-logo-title{font-size:30px;margin-top:18px;}
.mf-tagline{margin:8px auto;color:#d0c3ad;font-size:13px;max-width:320px;}
.mf-warline{display:flex;align-items:center;gap:6px;margin:28px 0 16px;}
.mf-side{flex:1;padding:8px 5px;background:rgba(10,10,10,.64);border:1px solid rgba(216,173,99,.25);border-radius:10px;}
.mf-side b{display:block;color:#f0c36e;font-size:16px;letter-spacing:.5px;}.mf-side.red b{color:#e6453d}.mf-vs{font:bold 18px Georgia;color:#f2d387;}
.mf-start{display:block;width:70%;max-width:260px;margin:0 auto 8px;padding:12px 5px;border-radius:10px;background:linear-gradient(180deg,#e04b3d,#8a1513);border:1px solid #f06b5d;color:#fff!important;text-transform:uppercase;font-weight:bold;box-shadow:0 0 18px rgba(209,35,25,.35);}
.mf-count{text-align:center;color:#77d174;font-size:12px;margin-top:5px;}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;}
.mf-grid .mf-btn{display:block;padding:10px 6px;}
.mf-grid .full{grid-column:1/-1;}
.mf-battle-link{display:flex;align-items:center;gap:9px;padding:9px;border-radius:1px;background:linear-gradient(180deg,#191716,#0b0b0b);border:1px solid rgba(216,173,99,.22);margin:7px 0;color:var(--mf-text)!important;}
.mf-battle-link img{width:42px;height:42px;border-radius:1px;object-fit:cover;border:1px solid rgba(216,173,99,.25)}
.mf-battle-link b{display:block;color:#f1c878;}.mf-battle-link small{display:block;color:#9e968a;line-height:1.25;}
.mf-auth-card{margin:14px auto;max-width:420px;}
.mf-form label{display:block;color:#d7bd81;font-size:12px;margin:9px 0 3px;text-transform:uppercase;}
.mf-form input,.mf-form select,.mf-form textarea{
    width:100%;box-sizing:border-box;padding:10px 9px;margin:0;
    background:#0a0a0a;color:#eee;border:1px solid rgba(216,173,99,.35);border-radius:9px;outline:none;
}
.mf-form button{width:100%;margin-top:12px;padding:11px;border-radius:10px;background:linear-gradient(180deg,#d94336,#8b1614);border:1px solid #f0675d;color:#fff;font-weight:bold;text-transform:uppercase;}
.error,.ok{margin:8px 0;padding:9px;border-radius:9px;text-align:center;}.error{background:#351010;border:1px solid #8f2d2d;color:#ffd0d0}.ok{background:#113516;border:1px solid #428747;color:#caffce}
/* Нижнее меню */
.mf-bottom-space{height:72px;}
.mf-bottom-nav{
    position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50;
    width:100%;max-width:480px;box-sizing:border-box;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
    background:linear-gradient(180deg,rgba(23,21,19,.98),rgba(6,6,6,.98));
    border-top:1px solid rgba(216,173,99,.35);
    box-shadow:0 -8px 24px rgba(0,0,0,.55);
}

.mf-bottom-nav a{position:relative;display:block;text-align:center;padding:8px 2px 7px;color:#b9b0a2!important;font-size:11px;text-decoration:none;text-transform:uppercase;}
.mf-bottom-nav a.active{color:#fff0bd!important;background:linear-gradient(180deg,rgba(183,37,31,.35),rgba(0,0,0,0));}
.mf-bottom-nav img{display:block;width:24px;height:24px;margin:0 auto 3px;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
.mf-badge{position:absolute;top:4px;right:20%;min-width:16px;height:16px;line-height:16px;border-radius:9px;background:#c22a23;color:#fff;font-size:10px;font-weight:bold;border:1px solid #ff6a5e;}
.mf-footer-links{margin:10px 0;text-align:center;color:#8f8678;font-size:12px;}.mf-footer-links a{margin:0 5px;}
@media(max-width:340px){.mf-logo-title{font-size:21px}.mf-hero .mf-logo-title{font-size:25px}.mf-bottom-nav a{font-size:10px}.mf-bottom-nav img{width:21px;height:21px}.mf-grid{gap:6px}}
.mf-footer-links{margin:10px 0;text-align:center;color:#8f8678;font-size:12px;}.mf-footer-links a{margin:0 5px;}
@media(max-width:340px){.mf-logo-title{font-size:21px}.mf-hero .mf-logo-title{font-size:25px}.mf-bottom-nav a{font-size:10px}.mf-bottom-nav img{width:21px;height:21px}.mf-grid{gap:6px}}
}
/* Боковой фон для игры Войны Мафий */
/* ===== БОКОВОЙ ФОН ВОЙНЫ МАФИЙ ===== */

/* ===================================
   ВОЙНЫ МАФИЙ - БОКОВОЙ ФОН
=================================== */

html{
    background:#000;
}

body{
    margin:0 auto;
    max-width:100% !important;

    background:
        linear-gradient(
            rgba(0,0,0,.65),
            rgba(0,0,0,.65)
        ),
        url('/images/start_image.jpg') center top no-repeat fixed;

    background-size:cover;
}

/* Центральный блок игры */
.main{
    width:100%;
    max-width:480px;

    margin:0 auto;

    min-height:100vh;

    background:
        linear-gradient(
            180deg,
            rgba(8,8,8,.96),
            rgba(15,12,10,.98)
        ) !important;

    border-left:2px solid #0f8ca8;
    border-right:2px solid #9d1f1f;

    box-shadow:
        0 0 30px rgba(0,0,0,.9),
        0 0 60px rgba(0,0,0,.8);
}

/* Чтобы шапка была по ширине игры */
.mafia-top{
    max-width:480px !important;
}

/* Телефон */
@media(max-width:520px){

    body{
        background:#050505 !important;
    }

    .main{
        border-left:none;
        border-right:none;
        box-shadow:none;
    }
}