/* ============================================
   Родная деревня — Game Theme "Lush Meadow"
   ============================================ */

/* === RESET === */
img {
    border: 0;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul, li {
    list-style: none outside none;
    border: 0 none;
    margin: 0;
    padding: 0;
}

input, textarea {
    font: medium Arial, Helvetica, sans-serif;
    border-radius: 6px;
    border: 2px solid #4a7a3a;
    background-color: #1a2e1a;
    color: #e8dcc0;
    padding: 6px 8px;
}

input:focus, textarea:focus {
    border-color: #6db84a;
    outline: none;
    box-shadow: 0 0 6px rgba(109, 184, 74, 0.3);
}

p { margin: 0; }

a {
    color: #f0c060;
    transition: color 0.15s;
}
a:hover { color: #ffe090; }
a > img { border: 0; }

/* === BASE === */
html {
    min-height: 100%;
    background-color: #0a1a0a;
}

body {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #0a1a0a;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(30, 80, 30, 0.25) 0%, transparent 70%);
    color: #ddd5c0;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    min-height: 100vh;
}

/* === LAYOUT === */
.main-wrap {
    position: relative;
    margin: 0 auto;
    min-width: 360px;
    max-width: 420px;
    text-align: center;
    width: 100%;
}

.main_content {
    position: relative;
    overflow: hidden;
    border-left: 1px solid #1a3018;
    border-right: 1px solid #1a3018;
    background-color: #152015;
    background-image:
        linear-gradient(180deg, rgba(20, 50, 20, 0.4) 0%, transparent 200px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    padding-bottom: 20px;
}

/* === DISPLAY & LAYOUT UTILS === */
.d-b { display: block !important; }
.d-ib { display: inline-block !important; }
.f-l { float: left; }
.f-r { float: right; }
.fr { float: right; }
.cl, .clb { clear: both; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-rb { right: 0; bottom: 0; }
.center { text-align: center !important; }
.abs-center { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.m-0-auto { margin: 0 auto; }

/* === MARGINS === */
.mt-3 { margin-top: 3px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-9 { margin-top: -23px; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mr-3 { margin-right: 3px !important; }
.mr-5 { margin-right: 5px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-50 { margin-right: 50px !important; }
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-35 { margin-left: 35px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-45 { margin-left: 45px !important; }
.ml-50 { margin-left: 50px !important; }
.ml-55 { margin-left: 55px !important; }
.ml-80 { margin-left: 80px !important; }
.margin-5 { margin: 5px !important; }

/* === PADDINGS === */
.pb-5 { padding-bottom: 5px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pad_bottom_m { padding-bottom: 4px; }
.pad_bottom_dm { padding-bottom: 8px; }
.pad_top_dm { padding-top: 8px; }
.pad_top_m { padding-top: 4px; }
.pad_top_s { padding-top: 2px; }
.pad_right_vb { padding-right: 80px; }
.pd-t-2 { padding-top: 2px; }
.pd-t-5 { padding-top: 5px; }
.pd-t-10 { padding-top: 10px; }
.pd-t-12 { padding-top: 6px; }
.pd-l-5 { padding-left: 5px; }
.pd-r-5 { padding-left: 5px; }
.pd-b-10 { padding-bottom: 10px; }

/* === SIZING === */
.bws { width: 93%; }
.bss { width: 46%; }
.bw-150 { width: 150px; }
.w-150 { }
.wide { width: 100%; }

/* === TEXT === */
.nowrap { white-space: nowrap; }
.va-m { vertical-align: middle; }
.va-b { vertical-align: bottom; }
.va-m-parent:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.no-und, .no-und:hover { text-decoration: none; }
.cur { cursor: pointer; }
.trans-50 { opacity: 0.5; }
.txt-left { text-align: left !important; }
.txt-right { text-align: right; }
.txt-c { text-align: center; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }

.txt-sm { font-size: 11px; }
.txt-md { font-size: 13px; }
.txt-lg, .font-sm { font-size: 15px; }
.txt-mg { font-size: 14pt; }
.txt-hg, .font-big { font-size: 24px; }
.small { font-size: 80%; }
.smallfont { font-size: small; }
.bold { font-weight: bold; }
.norm { font-weight: normal; }
.normal { font-weight: normal !important; }
.med { font-size: medium !important; }

/* === TEXT COLORS === */
.major-txt {
    color: #ffe599;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.major-minor { color: #ddd; }
.minor { color: #9aaa90; }
.light-txt { color: #ffe599; }
.reg-txt { color: #ddd5c0; }
.white { color: #e8e8e8; }
a.white:hover { color: #f5f5f5; }
.warning { color: #ff8c33; }
.action_color { color: #e08030; }
.txt-lightgrey { color: #CFCFCF; }
.txt-darkgreen { color: #4abe4a !important; }
.txt-yellow, yellow { color: #ffe599; }
.txt-hglt { background-color: #5a6a20; }
.uniquecategory { color: #e060d0; }
.actime { color: #ffffcc; }
.sdw { text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }

/* === LINKS === */
.orange-link {
    color: #f0a848;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.orange-link:hover { color: #ffc070; }

.txt-brown { color: #a0b090; }
.link-brown { color: #a0b090; }
.link-brown:hover { color: #c0d0b0; }
.link-brown.link-dotted { text-decoration: none; border-bottom: dotted 1px #a0b090; }

a.green-link { color: #5cc84e; }
a.green-link:hover { color: #78e06a; }

.link-grey { color: #a0a0a0; }
.link-grey:hover { color: #c0c0c0; }
.link-grey-dark { color: #6b6b6b; }
.link-grey-dark:hover { color: #8b8b8b; }

.link-blue { color: #70c0e0; }
.link-blue:hover { color: #90d8f0; }
a.link-blue { color: #70c0e0; }
a.link-blue:hover { color: #90d8f0; }

.link-purple { color: #b0a8e0; }
.link-purple:hover { color: #c8c0f0; }

.link-plain { color: #d0b020; text-decoration: none; }
.link-plain:hover { color: #e8c830; }
.link-warning { color: #ff8c33; }
.link-warning:hover { color: #ffa050; }

a.usrlink { color: #ffe599; }
a.usrlink:hover { color: #ffd060; }
a.link_adver { color: #80a8f0; }
a.link_adver:hover { color: #90b8ff; }

/* === IMAGE SIZES === */
.i-sm { display: inline-block; width: 16px; }
.i-smx { display: inline-block; width: 10px; }
.i-m { display: inline-block; width: 20px; }
.i-m24 { display: inline-block; width: 24px; height: 24px; }
.i-mx { display: inline-block; width: 32px; }
.i-b { display: inline-block; width: 38px; }
.i-hg { display: inline-block; width: 42px; }
.img-bl { display: inline-block; }
.img-a { width: 48px; }
.img-md { width: 32px; }
.img-mdx { width: 20px; }
.img-sm { width: 16px; }
.img-smx { width: 12px; }
.i-place { float: left; display: inline-block; margin-right: 10px; }
.i-sectn { width: 100%; max-width: 120px; height: 70px; }
.i-plus { width: 16px; }

/* === HEADER === */
.header {
    position: relative;
    color: #e8e0c8;
    padding-bottom: 4px;
}

.hdr-panel {
    position: relative;
    padding: 6px 10px 4px;
    z-index: 1;
    background: linear-gradient(180deg, #0d2010 0%, transparent 100%);
}

.hdr-panel > span {
    position: relative;
    z-index: 1;
}

.hdr-bkg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: repeat-x;
    background-position: bottom;
    z-index: 0;
}

.headspan {
    margin-right: 12px;
    font-weight: bold;
    font-size: 14px;
}

.head-lvl {
    padding: 4px 10px;
    text-align: center;
}

.exp-p {
    display: inline-block;
    padding: 0 4px;
    position: relative;
    top: -4px;
    font-size: 13px;
}

/* === FOOTER === */
.footer { color: #7a8a70; }

/* === DIVIDERS === */
.event-delim {
    border-top: 1px solid rgba(80, 120, 60, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    margin: 10px 30px;
}

.event-delim-g {
    border-top: 1px solid #6a8a30;
    border-bottom: 1px solid #1a2a10;
    margin: 10px 30px;
}

.list-delim {
    border-top: 1px solid #0a1a08;
    border-bottom: 1px solid #2a3a20;
    margin-top: 12px;
    margin-bottom: 12px;
}

.msg-delim {
    border-top: 1px solid #0a1a08;
    border-bottom: 1px solid #2a3a20;
    margin-top: 5px;
    margin-bottom: 5px;
}

.prod_delim {
    border-top: 1px dashed #4a6a3a;
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
}

.fac-prod-sel-delim {
    border-top: 1px dashed #3a5a30;
    display: block;
    margin-top: 4px;
    margin-bottom: 8px;
}

.delim-dashed {
    border-top: 1px dashed #3a6a50;
    margin-top: 5px;
    margin-bottom: 5px;
}

.con-delim {
    background: linear-gradient(90deg, transparent, #2a4a24 30%, #2a4a24 70%, transparent);
    height: 1px;
    margin-bottom: 12px;
    margin-top: 12px;
}
.con-delim-t { margin-top: 4px !important; }
.con-delim-b { margin-bottom: 4px !important; }
.con-delim-hr { text-align: center; margin-top: -25px; padding-top: 5px; }

/* === BLOCKS & CARDS === */
.block {
    position: relative;
    text-align: left;
    margin: 0 8px 12px;
    padding: 0 8px;
}

.block .ac { text-align: left; }

.block3 {
    position: relative;
    text-align: left;
    padding: 0 5px;
}

.block-tight {
    position: relative;
    text-align: left;
    margin: 0 4px 4px;
    padding: 0 5px;
}

.stor-block {
    position: relative;
    text-align: left;
    padding: 0 5px;
}

.blk-centrimg { text-align: center; }

.blk-leftimg {
    padding-left: 58px;
    min-height: 50px;
}
.blk-leftimg .mainpic { position: absolute; left: 0; top: 0; }
.blk-leftimg.blk-leftimg-md { padding-left: 50px; min-height: 44px; }
.blk-leftimg.blk-leftimg-prod { padding-left: 68px; }
.blk-leftimg.blk-leftimg-mdx { padding-left: 34px; min-height: 24px; }
.blk-leftimg.pl-blk-leftimg-prod { padding-left: 68px; }
.blk-leftimg-factory { padding-left: 68px; min-height: 44px; }

.blk-ambar {
    padding: 6px;
    margin: 0 4px 10px;
    background-color: #1a3018;
    border-radius: 8px;
    border: 1px solid #2a4a24;
}

.blk-extend {
    padding: 6px;
    margin: 0 4px 10px;
    background-color: #2a3a1a;
    border-radius: 8px;
    border: 1px solid #3a5a28;
}

/* === PICTURE WRAPPERS === */
.pic-wrap {
    display: inline-block;
    overflow: hidden;
    border: 1px solid #3a6a2a;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pic-wrap img { display: block; border-radius: 4px; }

.pl-pic-wrap-prod {
    padding: 3px;
    height: auto;
    width: 54px;
    vertical-align: middle;
    text-align: center;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 2px solid #3a6a2a;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pl-pic-wrap-prod img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}

.pic-wrap-prod {
    padding: 3px;
    height: auto;
    width: 42px;
    vertical-align: middle;
    text-align: center;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 2px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pic-wrap-prod img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.tree-pic-wrap {
    display: inline-block;
    overflow: hidden;
    padding: 2px;
    background: #1a2a18;
    border-radius: 4px;
}
.tree-pic-wrap img { display: block; }

/* === PICTURE FRAMES === */
.pic-n-frame {
    display: inline-block;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 2px solid #3a6a2a;
    border-radius: 8px;
    padding: 3px;
    margin-right: 2px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.pic-n-frame img { border-radius: 5px; }
.pic-n-frame-active {
    background-color: #1a3a18 !important;
    border: solid 1px #30a030 !important;
    box-shadow: 0 0 6px rgba(48, 160, 48, 0.3);
}

.pic-frame {
    width: 26px;
    height: 26px;
    line-height: 26px;
    position: relative;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 1px solid #3a6a2a;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pic-frame img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 4px; }

.pic-frame2 {
    display: inline-block;
    position: relative;
    background-color: #1a2a18;
    border: solid 1px #3a6a2a;
    border-radius: 6px;
}
.pic-frame2 img { margin: auto; }
.pic-frame-active { background-color: #2a3a18; }
.pic-frame .pml { margin-left: 20px; }

.pic-frame-crops {
    width: 38px;
    height: 38px;
    line-height: 38px;
    position: relative;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 1px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pic-frame-crops img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 5px; }

.pic-frame-delailed {
    width: 42px;
    height: 42px;
    padding: 2px;
    position: relative;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 2px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.pic-frame-delailed img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 5px; }

.pic-frame-inqueue {
    width: 26px;
    height: 26px;
    line-height: 26px;
    position: relative;
    background: linear-gradient(135deg, #162a14 0%, #0e1e0c 100%);
    border: 1px solid #2a4a24;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pic-frame-inqueue img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.pic-frame-inqueue2 {
    width: 50px;
    height: 54px;
    line-height: 54px;
    position: relative;
    background: linear-gradient(135deg, #1e3a1a 0%, #122410 100%);
    border: 2px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.pic-frame-inqueue2 img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.pc-empty {
    background: linear-gradient(to bottom, #3d4d3d 0%, #4a5a4a 50%, #5a6a5a 100%);
    border: solid 1px #6a7a6a;
}
.pc-ready {
    background: linear-gradient(to bottom, #6a8a20 0%, #4a6a14 50%, #3a5a22 100%);
    border: solid 1px #80a020;
}
.pw-inact { border: solid 1px #8a9a8a; }

.box-lght { }
.highlight { box-shadow: 0 3px 12px 0 rgba(100, 200, 60, 0.2); }

.prod-icon {
    border: 1px solid #4a7a30;
    width: 96px;
    border-radius: 10px;
}

/* === SECTION HEADERS === */
.ac-title-bg {
    background: linear-gradient(180deg, #2a4a20 0%, #1e3818 50%, #1a3015 100%);
    border: 1px solid #3a6a2a;
    border-radius: 6px;
    height: auto;
    margin-bottom: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 200, 0.1);
}
.ac-title-l {
    background: none;
}
.ac-title-r {
    background: none;
}

.act-title {
    display: block;
    color: #ffe599;
    padding: 4px 16px;
    height: auto;
    line-height: 22px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-bottom: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.act-title .at-hint { color: #c0d0a0; padding-top: 2px; }
a.act-title:hover { color: #fff0b0; text-decoration: none; }
a.act-title { text-decoration: none; }
.act-title a { text-decoration: none; }

.act-title-a {
    display: block;
    color: white;
    padding: 4px 16px;
    height: auto;
    line-height: 22px;
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* === MAIN TITLE === */
.main-title-bg {
    background: linear-gradient(180deg, #2e5524 0%, #1e3a18 50%, #193214 100%);
    border: 1px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 200, 0.12);
}
.main-title-l {
    background: none;
}
.main-title-r {
    background: none;
}

.main-title-a {
    color: #ffe599;
    display: block;
    line-height: 28px;
    padding: 4px 16px;
    height: auto;
    font-size: 13pt;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    box-shadow: none;
}
.main-title-wide { height: 33px !important; }
a.main-title-a { text-decoration: none; }

.delim-title {
    padding: 2px 8px;
    border: 2px solid #2a4a24;
    border-radius: 6px;
    background-color: #1a2a18;
}

/* === PROGRESS BARS === */
.prgt-wrap {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.prg-w-global {
    width: 80%;
    margin: 0 auto;
}

.prg-table {
    width: 100%;
    border-collapse: collapse;
}
.prg-table td.prgt { padding: 0; }

.barBgStExp {
    background: #0a1508;
    width: 99%;
    height: 12px;
    border-radius: 6px;
    border: 1px solid #000;
    background: linear-gradient(to bottom, #3a4a3a 0%, #0a1508 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.barStExp {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #b080e0 0%, #6030a0 100%);
    box-shadow: 0 0 6px rgba(140, 80, 200, 0.4);
}

.barStYellowExp {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #e8e070 0%, #8a8020 100%);
    box-shadow: 0 0 4px rgba(200, 200, 60, 0.3);
}

.barStRedExp {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #f04040 0%, #801818 100%);
    box-shadow: 0 0 4px rgba(240, 60, 60, 0.3);
}

.barBgStFillExp {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background-repeat: repeat-x;
    background-size: 40px 40px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

.barBgStFillTightExp {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

.barFillExp {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    animation: progress 1.5s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, transparent 75%, transparent);
}

.barStaticFillExp {
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

/* Storage progress bars */
.wide_prg_tab td.prg { width: 100%; }

.ware_first {
    background: linear-gradient(180deg, #060e05 0%, #0a1a08 100%);
    border: 1px solid #1a2a16;
    height: 8px;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ware_wide {
    height: 18px !important;
}

.prg-count {
    position: absolute;
    top: -1px;
    font-size: 12px;
    text-align: center;
    color: #ffd040;
    left: 0; right: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Progress bar fills */
.expprg_sdw { background: linear-gradient(180deg, #0d1e0a 0%, #0a160a 100%); border: 1px solid #1a2a16; border-radius: 6px; height: 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.expprg_sdw-l { background: none; height: 12px; }
.expprg_sdw-r { background: none; height: 12px; padding: 3px 4px 0; }
.exp-frst { background: linear-gradient(180deg, #0a1408 0%, #050e04 100%); height: 6px; vertical-align: middle; border-radius: 3px; }
.exp_scnd { background: linear-gradient(180deg, #e8d860 0%, #c8b840 50%, #d8c850 100%); height: 100%; border-radius: inherit; }
.exp_thrd { background: linear-gradient(180deg, #9040d0 0%, #7020b0 50%, #8030c0 100%); height: 100%; border-radius: inherit; }
.exp_scnd2 { background: linear-gradient(180deg, #d04020 0%, #a03018 50%, #b83820 100%); height: 8px; border-radius: 4px; }
.exp_scnd2_ware { height: 18px; border-radius: 4px; }
.exp_scnd2-2 { background: linear-gradient(180deg, #40a830 0%, #308a20 50%, #389828 100%); height: 8px; border-radius: 4px; }
.exp_scnd2-2_ware { height: 18px; border-radius: 4px; }
.exp-blue {
    background: linear-gradient(to bottom, rgba(110, 179, 244, 1) 0%, rgba(10, 119, 213, 1) 50%, rgba(106, 175, 232, 1) 100%);
    height: inherit;
    border-radius: inherit;
}
.exp-wd-md { height: 12px; }

/* === BUTTONS === */
.btn-main {
    display: inline-block;
    background: linear-gradient(to bottom, #3a8a20 0%, #50a830 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: white;
    border: solid 1px #50b830;
    border-radius: 6px;
    padding: 12px 16px;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    transition: all 0.15s;
}
.btn-main:hover {
    color: white;
    border-color: #60d040;
    background: linear-gradient(to bottom, #40a028 0%, #58b838 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(80, 180, 50, 0.2);
}

.btn {
    cursor: pointer;
    display: inline-block;
    background: linear-gradient(to bottom, #3a8a20 0%, #50a830 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: white;
    border: solid 1px #50b830;
    text-shadow: 0 -1px 0 #1a4008;
    border-radius: 4px;
    padding: 4px 10px;
    text-decoration: none;
    transition: all 0.15s;
}
.btn:hover {
    color: white;
    border-color: #60d040;
    background: linear-gradient(to bottom, #40a028 0%, #58b838 100%);
}
.btn-disabled {
    background: #4a5a4a;
    border: none;
    pointer-events: none;
    opacity: 0.6;
}

.btnm {
    display: inline-block;
    color: #ffe6b0;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13pt !important;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.btnm a:hover { color: white; }
.back-btnm { padding: 6px !important; }
.btn-wide { padding: 8px; }
.btn-lwide { padding: 6px; }

.btn-gold {
    display: inline-block;
    background: linear-gradient(to bottom, #a04818 0%, #c87050 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: white;
    border: solid 1px #c87050;
    text-shadow: 0 -1px 0 #4a2810;
    border-radius: 4px;
    padding: 3px 6px;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-gold:hover { color: white; border-color: #e08860; }

.btn-goldmain {
    display: inline-block;
    background: linear-gradient(to bottom, #a87020 0%, #d89030 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 0 -1px 0 #4a3010;
    color: white;
    border: solid 1px #d0b010;
    border-radius: 4px;
    padding: 6px 6px;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-goldmain:hover {
    color: white;
    border-color: #e0d020;
    background: linear-gradient(to bottom, #c08828 0%, #d89030 100%);
}

.btn-gray-tight {
    display: inline-block;
    background: linear-gradient(to bottom, #3a4a38 0%, #506848 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    color: white;
    text-shadow: 0 -1px 0 #1a3010;
    border: solid 1px #5a8a50;
    border-radius: 4px;
    padding: 4px 10px;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-gray-tight:hover { color: white; border-color: #70a868; }

.btn-gray {
    display: inline-block;
    background: linear-gradient(to bottom, #3a4a38 0%, #506848 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    text-shadow: 0 -1px 0 #1a3010;
    color: white;
    border: solid 1px #5a8a50;
    border-radius: 4px;
    padding: 5px 8px;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-gray:hover { color: white; border-color: #70a868; }

/* Wood buttons */
.btn-wood {
    padding: 0;
    border: 1px solid #3a6a2a;
    border-radius: 8px;
    background: linear-gradient(180deg, #2e5524 0%, #1e3a18 50%, #193214 100%);
    color: #FFE6B0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 200, 0.1);
    transition: all 0.15s;
}
.btn-wood:hover { background: linear-gradient(180deg, #3a6a2e 0%, #2a4e22 50%, #1e3a18 100%); color: #fff0c0; }
.btn-wood .span:hover { color: #fff0c0; }
.btn-wood-l {
    background: none;
}
.btn-wood-r {
    background: none;
}

.backwide { margin-left: 50px; margin-right: 50px; }
.main-btn-mr { margin-left: 30px; margin-right: 30px; }

.blt {
    background-color: #d03820;
    color: white;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: bold;
}

/* === FACTORY & PRODUCTION PANELS === */
.pansd-fac {
    margin: 4px 0;
    padding: 10px 4px;
    background-color: #1a2a18;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pansd-fac2 {
    margin: 0;
    padding: 10px;
    background-color: #152518;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.fac-i {
    margin: 3px;
    padding: 5px 5px;
    border-left: 3px solid #3a6a30;
    border-radius: 6px;
    vertical-align: top;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.15s;
}
.fac-i:hover { background: rgba(255, 255, 255, 0.04); }

.fac-hand { position: absolute; top: -5px; left: -5px; }

.crop-sel-btn {
    display: inline-block;
    padding: 4px 3px 4px 5px;
    border-radius: 6px;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.15);
}

.prod-queue {
    margin-left: 28px;
    margin-right: 28px;
}
.queue-c-img { margin-left: 48px; }
.prod-select { margin-left: 5px; margin-right: 5px; text-align: center; }

/* === EVENT PANEL === */
.event-panel-wr { background: #152518; }
.event-panel {
    background: radial-gradient(ellipse at center, rgba(100, 180, 60, 0.15) 0%, rgba(100, 180, 60, 0) 60%);
    border: 1px solid #4a8a30;
    border-bottom-color: #a07020;
    border-radius: 8px;
    padding: 8px 8px;
    margin: 8px 8px;
    color: #ffe599;
    background-color: #1a2a18;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* === FORM PANEL === */
.form-panel {
    background: linear-gradient(to bottom, #1a2a18 60%, #0a1a08 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid #3a6a28;
    border-radius: 6px;
    padding: 6px 4px;
    margin: 4px 4px;
    color: #ffe599;
}

.reg_panel { padding-top: 15px; text-align: center; }

/* === GENERAL PANELS === */
.pansd {
    margin: 5px;
    padding: 4px;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    background-color: #152518;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pansd-l { padding-top: 4px !important; }
.pansd-ct { border-bottom: 1px solid #2a4a24; }
.pansd-c {
    margin: 2px 0;
    padding: 6px;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    background-color: #1a2a18;
}

.pansd-giftevent {
    margin: 5px;
    padding: 4px;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    background-color: #1a2a18;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.pansd-comm { }
.pansd-no {
    margin: 4px 0;
    padding: 10px;
    background-color: #1a2a18;
    border: 1px solid #2a4a24;
    border-radius: 8px;
}

.pansd_w {
    margin: 5px;
    border-bottom: solid 1px #2a4a24;
}
.f-pansd_w {
    margin: 5px;
    background-color: #152518;
    border-top: solid 1px #2a4a24;
    border-bottom: solid 2px #2a4a24;
}
.pansd_w2 {
    margin: 5px;
    background-color: #1a2a18;
    border-bottom: solid 1px #2a4a24;
}
.pansd_w2-c {
    margin: 5px;
    background-color: #1a2a18;
    border-left: solid 1px #2a4a24;
    border-right: solid 1px #2a4a24;
    border-bottom: solid 1px #2a4a24;
}
.pansd_w3 {
    margin: 5px;
    background-color: #1a2a18;
}
.br-b { border-bottom: solid 1px #2a4a24; }
.cn-fr { padding-left: 10px; padding-right: 10px; }

.pan {
    margin: 4px 0;
    padding: 10px;
    background-color: #1a2a18;
    border: 1px solid #3a6a28;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panbotd { border-bottom: none; }
.pand { border-bottom: none; border-left: none; border-right: none; }

.panfr {
    margin: 4px 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #152518;
    border: 1px solid #3a6a28;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.panbot { }

/* === AVAILABILITY === */
.unavailable {
    opacity: 0.35;
    filter: alpha(opacity=35);
    top: 0; left: 0;
}
.avail-lvl { color: #8a9a80; }
.zc { color: #e07060; }
.dis { color: white; }
.crops-inprogress-txt { position: relative; top: -7pt; }

/* === BUILDING SELECTION === */
.build_sel_wrap {
    margin: 8px;
    padding: 10px;
    background-color: #152518;
    border: 2px solid #2a4a24;
    border-radius: 8px;
    background: radial-gradient(ellipse at center, rgba(100, 180, 60, 0.1) 0%, rgba(100, 180, 60, 0) 60%);
    background-color: #152518;
}
.build_sel { text-align: left; padding: 12px 8px !important; }
.build_sel_cont { margin-left: 80px; }
.build_sel .icon { border-radius: 8px; margin-right: 10px !important; }

/* === STORAGE === */
.prod_panel { background-color: #1a2a18; padding: 4px; border-radius: 4px; }
.stor-ctod { display: inline-block; }
.f_prod { display: inline-block; }
.f_prod_s { margin-bottom: 10px; display: inline-block; }
.prod_c { color: #d0c090; text-align: center; }
.prod_ware { margin-left: 70px; }
.stor-ct { margin-right: 10px; display: inline-block; color: white; }
.other_pr { text-align: center; }

.item_tab { display: block; margin: 0 2px; padding: 0; }
.item_tab td.t_obj { vertical-align: top; }
.item_tab td.t_left {
    vertical-align: top;
    background-color: #e8f0cc;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.item_tab td.t_right {
    width: 100%;
    vertical-align: top;
    background-color: #e8f0cc;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

/* === AC-S (Action Spans) === */
.ac-s { margin-left: 2px; margin-right: 2px; }

/* === BADGES === */
.nume {
    top: -5px;
    left: 45px;
    position: absolute;
    display: inline-block;
    background-color: #40b030;
    color: white;
    border-radius: 4px;
    padding: 0 5px 1px;
    border-top: solid 1px #208010;
    border-left: solid 1px #208010;
    border-bottom: solid 2px #0a0a0a;
    border-right: solid 1px #0a0a0a;
    z-index: 2;
    font-size: 11px;
    font-weight: bold;
}
.underconstr { top: 0; left: 40px; position: absolute; display: inline-block; padding: 0 4px 1px; z-index: 2; }

/* === ORDERS === */
.n-order-board {
    background: linear-gradient(135deg, #2a4520 0%, #1e3818 50%, #1a3015 100%);
    position: relative;
    border: 2px solid #3a6a2a;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,200,0.08), 0 2px 6px rgba(0,0,0,0.4);
}
.n-board {
    background: linear-gradient(135deg, #22381c 0%, #1a2e16 50%, #152812 100%);
    position: relative;
    border: 2px solid #2a4a20;
    border-radius: 6px;
}
.board-deco {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, 0.35) 100%);
}

.order {
    position: relative;
    text-align: center;
    display: inline-block;
    background: linear-gradient(105deg, #fff9ba 77%, #d1cc99 100%);
    margin: 10px 2px;
    min-width: 80px;
    color: black;
    border: 1px solid #6a5a30;
    border-bottom: 2px solid #1a1510;
    border-radius: 2px;
    vertical-align: top;
}

.special-order {
    position: relative;
    text-align: center;
    display: inline-block;
    background: linear-gradient(105deg, #bae7ff 77%, #99bdd1 100%);
    margin: 10px 2px;
    min-width: 80px;
    color: black;
    border: 1px solid #4a6a80;
    border-bottom: 2px solid #1a1518;
    border-radius: 2px;
    vertical-align: top;
}
.special-order .order-corner { padding: 8px 12px; }

.orderdetail { text-align: center; margin: 10px 2px; vertical-align: top; padding-bottom: 10px; }
.order-light { background: radial-gradient(ellipse at center, rgba(30, 87, 153, 1) 0%, rgba(41, 34, 24, 0.4) 55%, rgba(41, 34, 24, 0) 92%); }
.order .order-corner { padding: 8px 12px; }
.order .orm, .special-order .orm { color: #39be2e; }
.order a.pr-l, .order a.pr-l:hover, .special-order a.pr-l, .special-order a.pr-l:hover { text-decoration: none; color: #c5a600; }
.order .title, .special-order .title { color: #81432a; }
.order img.pr, .special-order img.pr { width: 24px; margin-left: 5px; margin-top: 5px; }
.order .ready, .special-order .ready { width: 12px; }
.order img.pin, .special-order img.pin { width: 9px; position: absolute; top: 2px; left: 5%; }
.order img.pin-r, .special-order img.pin-r { width: 9px; position: absolute; top: 2px; left: 50%; }
.order .order-check, .special-order .order-check { position: absolute; top: 75%; left: 70%; }
.order img.done, .special-order img.done { width: 20px; position: absolute; top: -15px; left: 15px; }
.pr-wrap { text-align: center; display: inline-block; position: relative; }
.stor-pr { padding: 20px 10px; text-align: left; }

/* Orders 2 */
.orders-board2 { text-align: left; margin-left: 2px; margin-right: 2px; padding-top: 5px; }
.order2 {
    position: relative;
    text-align: left;
    background: #1a2a18;
    margin: 12px 5px;
    padding: 10px 12px;
    min-width: 100px;
    border: 1px solid #2a4a24;
    border-bottom: 2px solid #0a1508;
    vertical-align: top;
    border-radius: 4px;
}
.order2 .orm { color: #39be2e; }
.order2 a.pr-l, .order a.pr-l:hover, .special-order a.pr-l:hover { text-decoration: none; color: #c5a600; }
.order2 img.pr { width: 24px; margin-left: 5px; margin-top: 5px; }
.order2 .ready { position: absolute; left: 24px; top: 0; width: 12px; }
.order2 img.pin { width: 9px; position: absolute; top: -15px; left: -3px; }
.order2 img.done { width: 20px; position: absolute; top: -15px; left: 15px; }
.order2 .pr-wrap { text-align: center; display: inline-block; position: relative; }
.order2 .con { margin-left: 58px; }

/* === LOTS & MARKETPLACE === */
.crops-lot { padding: 15px; display: inline-block; }
.lot-num {
    margin-top: 4px;
    background: #fff9ba;
    padding: 2px;
    color: black;
    border-radius: 8px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.lot-num.need_help { background: #F0AAAA; }
.lot-num.helped { background-color: #BEF0AA; }
.lot-num2 { background: #fff9ba; padding: 2px; color: black; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.lot-num3 { background: #152518; padding: 2px; border-radius: 8px; }
.lot-num-s { background: #fff9ba; padding: 5px 10px; color: black; border-radius: 8px; border-right: 1px solid #000; border-bottom: 1px solid #000; }
.lotsel { padding: 6px; margin: 0 5px; display: inline-block; }
.storagewrap { margin-left: 15px; margin-right: 15px; }

.lotok-base { display: inline-block; position: relative; background: linear-gradient(135deg, #2a4520 0%, #1e3818 100%); border: 1px solid #3a6a2a; border-radius: 6px; margin: 10px; vertical-align: middle; }
.lotok-empty { }
.lotok-price { position: relative; top: 0; left: 10px; padding: 2px; display: inline-block; transform: rotate(-7deg); }
.lotok-news-price { position: relative; top: 0; left: 10px; padding: 2px; display: block; transform: rotate(-7deg); }
.lotok-spec-price { background: #ce0000; padding: 2px; color: white; border-right: 1px solid #6e0303; border-bottom: 1px solid #6e0303; }
.old-price { display: block; height: 100%; left: 12px; position: absolute; top: 2px; width: 100%; z-index: 5; text-decoration: line-through; }
.unavailable-lotok { position: relative; top: 0; padding: 2px; display: inline-block; }
.lotok-body { padding: 4px 12px 5px; }
.lotok-sold { display: inline-block; position: absolute; left: 8px; top: 5px; transform: rotate(-7deg); }
.lotok-count { display: inline-block; position: absolute; left: 8px; top: 5px; }
.lotok-full { }
.lot { margin-top: 5px; margin-left: 5px; border: 0; }
.lotok-empty-plus { display: inline-block; position: absolute; left: 16px; top: 10px; padding: 3px 2px; }
.lotok-plus-price { display: inline-block; position: absolute; left: 16px; top: 52px; color: #ffe599; }
.lot-pd { padding-top: 25px; padding-bottom: 3px; }
.lotok-empty-sign { display: inline-block; position: relative; left: 0; top: -32px; padding: 3px 2px; transform: rotate(-7deg); }
.lot-prev-count { display: inline-block; position: relative; left: 8px; top: -15px; }
.lotok-news-count { display: inline-block; position: absolute; top: 0; left: 0; z-index: 5; }
.lotok-adv { position: absolute; left: -15px; top: 55px; padding: 2px; display: inline-block; }
.lot-price-prev { left: 10px; }

.good-prev { display: inline-block; position: relative; text-align: center; vertical-align: top; }
.good-prev-desc { display: inline-block; position: relative; text-align: left; vertical-align: top; }

.l-top { border-top: 2px solid #3a6a2a; }
.l-right { border-right: 2px solid #3a6a2a; }
.l-bottom { border-bottom: 2px solid #2a4a20; }
.l-left { border-left: 2px solid #2a4a20; }
.c-left-bot { border-bottom-left-radius: 6px; }
.c-right-bot { border-bottom-right-radius: 6px; }

.exbtn-wrap { display: inline-block; position: relative; margin-left: 10px; }
.buyplus { position: absolute; width: 28px; top: -5px; left: -7px; z-index: 3; }
.buybtn { background-color: #2a4a20; color: white; border-radius: 4px; border-top: solid 1px #4a7a3a; margin-left: 8px; padding: 2px 2px 2px 15px; }
.under-rel { margin-top: -35px; }
.amb-check { display: inline-block; margin-left: 10px; }

/* === ADS === */
.itemad_wrap { display: inline-block; vertical-align: middle; max-width: 100px; }
.itemad { width: 95px; background-color: #0a1a08; color: #8a9a80; padding: 0; text-align: center; }
.adver_title { background-color: #0a1a08; }
.itemad-usr { overflow: hidden; text-overflow: ellipsis; padding: 2px 4px; background-color: #152518; }
.itemad-body { padding: 0 8px; }

/* === SPINBOX === */
.input-spinbox { width: 50px; border: 2px solid #4a7a3a; border-radius: 6px; }
.spinel-enabled img { cursor: pointer; }
.spinbox-minus { display: inline-block; padding: 10px 30px 10px 0; }
.spinbox-minus .ig { display: inline-block; width: 32px; height: 32px; background: #1a2a18; border: 2px solid #3a6a2a; border-radius: 50%; line-height: 28px; text-align: center; font-size: 20px; color: #ffe599; cursor: pointer; }
.spinbox-minus .ig::after { content: '\2212'; }
.spinbox-minus .ig-d { opacity: 0.3; cursor: default; }
.spinbox-plus .ig { display: inline-block; width: 32px; height: 32px; background: #1a2a18; border: 2px solid #3a6a2a; border-radius: 50%; line-height: 28px; text-align: center; font-size: 20px; color: #ffe599; cursor: pointer; }
.spinbox-plus .ig::after { content: '+'; }
.spinbox-plus .ig-d { opacity: 0.3; cursor: default; }
.spinbox-plus { display: inline-block; padding: 10px 0 10px 30px; }

/* === HINTS === */
.block-nectar { font-size: 13px; }
.factory-smart-hint { font-size: 13px; color: #a0b890; }
.smart-hint { font-size: 13px; color: #a0b890; }

/* === PROFILES === */
.prof-empty-pan { padding: 6px; }
.prof-darken { background-color: #0a1a08; margin-top: 3px; padding: 6px; border-radius: 4px; }
.prof-farm-img { display: block; margin: 0; padding: 0; }
.prof-farm { display: inline-block; }
.sb { background-color: #152518; }
.prof-pan {
    margin-top: 3px;
    padding: 8px;
    background-color: #0a1a08;
    border: 2px solid #2a4a24;
    text-align: center;
    border-radius: 8px;
}

/* === ACHIEVEMENTS === */
.achieve_o {
    margin: 5px;
    padding: 4px;
    border: 1px solid #2a4a24;
    border-radius: 8px;
    background-color: #152518;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.achieve_go { margin: 4px 0; background-color: #1a2a18; border: 1px solid #2a4a24; border-radius: 8px; }
.achieve_p { padding: 4px; }
.achieve_gp { padding: 8px; }
.clpan { margin: 5px; background-color: #1a2a18; border: 1px solid #2a4a24; border-radius: 8px; }

/* === MENU & NAVIGATION === */
.menu-save-label { display: inline-block; position: relative; left: 10px; }
.menu-save-dia { position: relative; }
.menu-save { display: inline-block; padding-right: 8pt !important; position: relative; left: 12px; top: -2px; }
.btn-confirm { display: inline-block; padding-left: 8px; padding-right: 8px; }
.req-tool { display: inline-block; margin: 4px; margin-bottom: 8px; }

.submenu { margin-top: 10px; margin-bottom: 10px; }
.subbut {
    background-color: #1a2a18;
    border: 1px solid #2a4a24;
    padding: 6px 20px;
    border-radius: 4px;
    transition: all 0.15s;
}
.subbut:hover { background-color: #1a3040; border-color: #30a0d0; }
.subbut-activ { background-color: #1a2a40; border: 1px solid #40b0e0; padding: 6px 20px; border-radius: 4px; }

/* === TABS === */
.tabsblock { border-radius: 6px; padding: 2px; display: block; }
.tabsblock .tab { display: inline-block; padding: 4px 4px; border-radius: 4px; }
.tabsblock .tab .txt { color: white; }
.tabsblock .tab a.lnk { color: white; text-decoration: none; }
.tabsblock .tab-hover:hover { background-color: #1a3040; }
.tabsblock .active { background-color: #1a2a40; }

/* === ONLINE LIST === */
.onl { color: #6aaa80; }
.onl-it { padding: 6px 5px; }
.even { background-color: #1a2a18; }
.line-ind { }
.a-u-link, .a-lgt { color: #d0d8b0; }
a.a-u-link { color: #c8d0a0; }
a.a-lgt { color: #d8e0a8; }
a.a-lgt:hover { color: #e8f0b8; }
a.a-u-link:hover { color: #d8e0a8; }
.fc2 { color: #d8e0a8; }
.online { background-color: #20a020; border-radius: 4px; color: #fff; display: inline-block; padding: 0 5px; font-size: 11px; }
.offline { display: inline-block; padding: 0 5px; color: #555; border-radius: 4px; background-color: #ccc; font-size: 11px; }
.flipped { transform: scaleX(-1); }

/* === PAGER === */
.pagerlight { text-align: center; }
.pagerlight a.pag, .pagerlight a.pag:visited {
    display: inline-block;
    border: 1px solid #3a6a28;
    color: #c8d0a0;
    margin: 1px;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
}
.pagerlight span.pag { display: inline-block; border: 1px solid #50a838; padding: 5px 10px; color: #fff; border-radius: 4px; background: rgba(80, 168, 56, 0.15); }
.pagerlight a.pag:hover { border-color: #50a838; color: #fff; }

/* === FORUM === */
a.f-subj-it { display: block; margin: 1px 0; padding: 6px 5px; border-top: 1px solid #2a4020; text-decoration: none !important; transition: background 0.15s; }
a.f-subj-it:hover { background-color: #1a2a30; text-decoration: none !important; }
a.f-subj-it span.bl { color: #f0c060; display: block; }
a.f-subj-it span.com { display: block; text-decoration: none !important; }
a.f-subj-it .l-tl { margin-left: 30px; }
a.f-subj-it .t-stl { margin-left: 20px; }
.f-even { background-color: #1a2a18; border-top: 1px solid #2a4020; }
.comm-par { border-spacing: 0 1px; line-height: 0.9; width: 100%; }
.comm-par .num { font-size: 110%; font-weight: bold; text-align: center; vertical-align: middle; padding: 0 10px; }
.comm-par td { border-top: 1px solid #2a4020; }
.comm-par tr.odd { background-color: #1a2a18; }
.comm-par tr.even { background-color: #152518; }
.f-par-it { width: 100%; padding: 4px 4px 4px 10px; }
.f-usrinf { margin-left: 5px; }
.f-mcor { padding-left: 5px; padding-right: 5px; }

/* === MAIL === */
.mymailmsg { padding-top: 5px; padding-bottom: 10px; border-top: 1px solid #2a4020; }
.mymailmsg .eml-graylink { color: #ffe599 !important; }
.mymailmsg .bold { color: #ffe599 !important; }
.mailmsg .threadpost { color: #ccc !important; }
.mailmsg { padding-top: 5px; padding-bottom: 10px; background-color: #1a2a18; border-top: 1px solid #2a4020; margin: 1px 0; }
a.eml-graylink { color: #ccc; }
a.eml-graylink:hover { color: #ddd; }

/* === GRAYSCALE FILTER === */
img.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* === MISC COMPONENTS === */
.content-block-left { margin: 0 2px 0; padding: 4px 7px 5px; }
.content-block {
    margin: 0 4px 4px;
    padding: 4px 7px 5px;
    background: #1a2a18;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

.m-deco-l, .m-deco-r { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.m-deco-l { background: linear-gradient(90deg, rgba(10, 30, 10, 0.4) 0%, transparent 30px); }
.m-deco-r { background: linear-gradient(270deg, rgba(10, 30, 10, 0.4) 0%, transparent 30px); }

.bg-wood { background: linear-gradient(180deg, #2a4a20 0%, #1e3818 100%); }
.woodback { background: linear-gradient(180deg, #1e3818 0%, #152a12 100%); }

.boxsdw { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.sdw-out { box-shadow: 4px 1px 8px rgba(0, 0, 0, 0.5); }

.compact-view { margin-left: 30px; margin-right: 30px; }
.pic-c-wrap { display: inline-block; border-radius: 4px; overflow: hidden; border: solid 1px #4a7a30; background: #1a2a18; margin: 4px; height: 48px; line-height: 48px; position: relative; width: 48px; }
.pic-main-wrap { display: inline-block; height: 60px; position: relative; width: 60px; }
.pic-c-wrap img { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; display: block; }

/* === FORMS === */
.cnfd {
    background-color: #e0e8d0;
    border: 1px solid #4a7a3a;
    border-radius: 6px;
    color: #1a2a18;
    font-size: medium;
    margin: 0;
    padding: 4px;
}
.frm-delim { margin-top: 8px; margin-bottom: 8px; border-bottom: 1px solid #2a4020; }
.frm-d-l, .frm-d-r { }
.frm-d-r { background-position: 100% -1px; }
.db-d { border-width: 2px !important; }

/* === SELECTED STATE === */
a.selected { border: 1px solid #80c040 !important; background-color: #2a4a28 !important; color: white; }
.minicollink {
    margin-top: 5px; margin-bottom: 5px;
    border: 1px solid #3a5a2a;
    background-color: #1a2a18;
    border-radius: 6px;
    padding: 5px 10px;
    display: inline-block;
    text-decoration: none;
    margin-right: 10px;
    transition: all 0.15s;
}
.minicollink:hover { border-color: #4a7a3a; }

/* === AMOUNTS === */
.amount-rad {
    padding: 6px;
    margin: 5px;
    display: inline-block;
    background-color: #152518;
    border: 1px solid #3a6a28;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

/* === MISC UTILITIES === */
.fline { padding: 2px 4px; }
.sline { background-color: #1a2a18; }
.atmoimg { position: relative; margin-top: 8px; }
.atmoborder { border: 2px solid #6a8a50; border-radius: 5px; }
.blocks { display: block; }
.bc_bottom { border-bottom: 2px solid #3a6a28; }
.bc_top { border-top: 2px solid #3a6a28; }
.b-r-2 { border-radius: 2px; }
.buxs_intext { position: relative; top: 3px; }
.q_i { position: relative; top: 2px; }
.cai { margin-left: 56px; }
.hidden { display: none; }
.lh20 { line-height: 28px; }
.boldval { font-weight: bold; color: #40a0e0; }
.gw { border: 1px solid #4a7a30; }
.gameobj { display: inline-block; padding: 2px; margin: 4px 6px; vertical-align: top; }
.minicol { }
.t-highlight { color: #90e070; font-weight: bold; }

/* === SHORT ORDERS === */
.short-order {
    display: inline-block;
    background-color: #1a2a18;
    border: 1px dashed #3a6a2a;
    border-right: 2px solid;
    border-left: 2px solid;
    padding: 4px 3px 4px 5px;
    border-radius: 6px;
    margin: 4px;
}
.short-order-p { display: inline-block; }

.to-main {
    border: 1px solid #2a4a24;
    border-radius: 8px;
    margin: 5px;
    padding: 4px;
    background-color: #1a2a18;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* === COLORS === */
.choco { color: chocolate; }
.crystal { color: white; }
.gray, .gray-el { color: #a0a0a0; }
.pink { color: #fea9ff; }
.pinklink { color: #b56dff; }
.pinklink:hover { color: #c88bf8; }
.dustPink { color: #9c509c; }
.dustCyan { color: #71bdbd; }
.tomato { color: tomato; }
.cool-blue { color: rgb(71, 234, 255); }
.red { color: #ff4444; }
.lime { color: #aaf7b8; }
.lgreen { color: #a1fa7d; }
.green-major { color: #6fcd72; }
.tomato-major { color: #dd6666; }
.blue { color: #70ddff; }
.green { color: #50c840; }
.yellow { color: #ffe080; }
.whitegray, .t { color: #dadada; }
.cyan { color: cyan; }

/* === USER ROLES === */
.tmd, a.md { color: #90ee90; }
.tadm { color: #8fc7de; }
.md { color: #83b37d; }
a.md { color: #83b37d; }
a.md:hover { color: #a5e19d; }
a.md-l { color: #a9e5a1; }
a.md-l:hover { color: #bbffb2; }
a.adm-l { color: #aad5f2; }
a.adm-l:hover { color: #b2e0ff; }
.adm { color: #7d9db3; }
a.adm { color: #7d9db3; }
a.adm:hover { color: #a0bfd5; }
a.bluelink { color: #86e6ff; }
.bluelink:hover { color: #a3faff; }
.usercol { color: #b0ca90; }
a.admlink, a.admlink:visited { color: #b060d0; text-decoration: underline; }
a.admlink:hover { color: #c080e0; }
a.mdlink, a.mdlink:visited { color: #4D94D5; text-decoration: underline; }
a.mdlink:hover { color: #376996; }
a.usrlink, a.usrlink:visited { color: #5BB35B; text-decoration: underline; }
a.usrlink:hover { color: #40c040; }

/* === MESSAGES === */
.newmsg { background-color: #d03820; color: white; border-radius: 4px; padding: 2px 5px; position: relative; left: -38px; top: -5px; font-size: 11px; font-weight: bold; }
.repc { color: #87CEFA; }
.threadpost { margin: 5px 10px 0; color: #e0e8c0; }

/* === PRICES === */
.price-img { margin-left: 72px; }
.price-point { position: relative; display: block; margin: 1px 0; padding: 6px 5px; border-top: 1px solid #2a4020; text-decoration: none !important; }
.blback { background-color: #1a2a18; padding: 6px 5px; border-radius: 4px; }
.shop-point { position: relative; display: block; margin: 1px 0; padding: 6px 5px; text-decoration: none !important; }
.price-mark { position: absolute; top: 64px; left: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.price-mark2 { position: absolute; top: 64px; left: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.price-mark3 { position: absolute; top: 64px; left: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.price-mark4 { position: absolute; top: 62px; left: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* === FISHING LEVELS === */
.flvl { background-color: #1a2a18; padding: 14px 10px; border: 1px solid #3a5a30; border-radius: 6px; }
.flvl-en { border-color: #30a030; background-color: #1a3018; }
.fstar { position: relative; }
.fstar .lv { position: absolute; top: 30px; left: 4px; }
.fwidget, .hwidget { margin: 0 auto; max-width: 360px; }
.stars-pfr { padding-bottom: 2px; }
.rcrate { position: relative; }
.rcrate-img { position: absolute; top: 17px; left: 9px; margin: 5px; background-color: #fff9ba; width: 40px; border-radius: 4px; border-bottom: 1px solid #000; border-right: 1px solid #000; padding: 2px; }
.rcrate-img.need_help { background-color: #F0AAAA !important; }
.rcrate-img.helped { background-color: #BEF0AA !important; }
.rcrate-con { display: inline-block; position: relative; }

/* === MENUS === */
.b-menu { background-position: left center; background-repeat: repeat-x; }
a.b-menu-l { text-decoration: none; }
.b-menu-b { padding: 0; }

/* === BANNERS === */
.banrec { padding: 6px 5px; border-top: 1px solid #2a4020; }
.s-ln { padding: 6px 5px; border-top: 1px solid #2a4020; }

/* === NEWSPAPER === */
.newspaper-dotted { border-style: dotted; }
.newspaper-dashed { border-style: dashed; }
.newspaper-double { border-style: double; }
.gold-wrap { border: 2px solid #6a8a50; }
.goldoffer { height: 134px; border-style: dashed; border-color: gold !important; }
.new-l { display: inline-block; }
.new-i { display: block; transform: rotate(-7deg); margin-top: -6px; }
.rt2 { top: -2px; }
.visitor_offer { margin-left: 68px; }

/* === SPECIAL === */
.special_boost { background-color: #1a3040; }

/* === ANIMATIONS === */
@-webkit-keyframes progress { to { background-position: 30px 0; } }
@-moz-keyframes progress { to { background-position: 30px 0; } }
@keyframes progress { to { background-position: 30px 0; } }

/* === CSS3 PROGRESS BAR (LARGE) === */
.barBg {
    background: #0a1a08;
    width: 100%; height: 20px;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.bar {
    width: 60%; height: 20px; border-radius: 4px;
    background: linear-gradient(to bottom, #c0c820 0%, #c06020 100%);
}
.barFill {
    width: 100%; height: 20px; border-radius: 4px;
    animation: progress 1.5s linear infinite;
    background-repeat: repeat-x; background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, transparent 75%, transparent);
}
.barStaticFill {
    width: 100%; height: 20px; border-radius: 4px;
    background-repeat: repeat-x; background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}
.barBgSt {
    background: #0a1508; width: 100%; height: 20px; border-radius: 4px; border: 1px solid #000;
    background: linear-gradient(to bottom, #3a4a3a 0%, #0a0a0a 100%);
}
.barSt {
    height: 20px; border-radius: 4px;
    background: linear-gradient(to bottom, #e8e070 0%, #5a5020 100%);
}
.barStRed {
    height: 20px; border-radius: 4px;
    background: linear-gradient(to bottom, #f04040 0%, #801818 100%);
}
.barBgStFill {
    width: 100%; height: 20px; border-radius: 4px;
    background-repeat: repeat-x; background-size: 40px 40px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}
.barBgStFillTight {
    width: 100%; height: 20px; border-radius: 4px;
    background-repeat: repeat-x; background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

.he8 { height: 8px !important; }

/* === PROGRESS BASE === */
.progressBaseWrap {
    background: #0a1508; width: 100%; height: 4px; display: inline-block;
    border-radius: 4px; border: 1px solid #000;
    background: linear-gradient(to bottom, #3a4a3a 0%, #0a0a0a 100%);
}
.progressBaseBody {
    width: 100%; height: 4px; border-radius: 4px;
    background-repeat: repeat-x; background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, transparent 75%, transparent);
}
.progressBaseBar {
    width: 60%; height: 4px; border-radius: 4px;
    background: linear-gradient(to bottom, #c0c820 0%, #c06020 100%);
}
.progressBaseBarFill {
    width: 100%; height: 4px; border-radius: 4px;
    background-repeat: repeat-x; background-size: 30px 30px;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.12) 75%, transparent 75%, transparent);
}

/* === PETS === */
.petwr { position: relative; }
.petfd { position: absolute; top: 28px; left: 40px; }
.petfd-bx { border: 1px solid #2a3a20; }
.petfd-bx-2 { border: 1px solid #2a3a20; }
.petfd-bx-3 { border: 1px solid #1a2a18; background-color: #1a2a18; }
.decoricon { border: 2px solid #ccc; }
.round20 { border-radius: 30px; }
.round15 { border-radius: 15px; }
.avabrd { border: 1px dashed #3a5a2a; display: inline-block; }

/* === MINI GAMES === */
.minigame-targets-body { position: relative; text-align: center; display: inline-block; width: 300px; }
.minigame-targets { position: relative; left: -16px; }

/* === FISHING === */
.fishing-table { width: 100%; height: 50px; }
.fishing-table td { width: 33%; height: 50px; text-align: center; }
.fishing-table td.left { text-align: left !important; }
.fishing-table td.right { text-align: right !important; }
.fishing-back { background: url("/Content/img/fishing/process/water-back.png") repeat-x; width: 100%; height: 58px; }
.fishing-front { position: absolute; top: -50px; background: url("/Content/img/fishing/process/water-front.png") repeat-x; width: 100%; height: 58px; }
.fishing-table .poplovok { display: inline-block; position: relative; top: -20px; width: 17px; height: 32px; background-image: url("/Content/img/fishing/process/pop.png"); background-size: contain; }
.fishing-table td.right .poplovok { right: 20px; }
.fishing-table td.left .poplovok { left: 20px; }

/* === NEW YEAR === */
.newYearTree { width: 220px; }
.newYearDecorator { width: 42px; height: 42px; }
.newYearGift { width: 45px; height: 45px; }
.elka { background: url("/Content/img/NewYear/elka.png") no-repeat; background-size: contain; width: 220px; height: 293px; position: relative; display: inline-block; }

/* === RIVER BUILDING === */
.riverbuilding-pic-frame { background-color: #1a2a18; border: 1px solid #3a6a2a; border-radius: 6px; height: 54px; position: relative; width: 54px; display: inline-block; }
.riverbuilding-pic-frame img { position: absolute; left: 4px; top: 3px; }
.emptyslot { font-size: 8pt; }
.riverbuilding-line { min-height: 58px; }

/* === WEDDINGS === */
.wedding-ringItem { position: relative; display: block; margin: 1px 0; padding: 10px 5px 6px 5px; border-top: 1px solid #2a4020; text-decoration: none !important; }
.wedding-ringItem.-bought_False { }
.wedding-ringItem.-bought_True { background-color: #1a2a18; }
.weddingRing { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.weddingRing.ring1 { left: 9px; top: 21px; }
.weddingRing.ring2 { left: 15px; top: 21px; }
.weddingRing.ring3 { left: -7px; top: 19px; }
.weddingRing.ring4 { left: 0; top: 15px; }
.weddingRing.ring5 { left: 11px; top: 20px; }
.rays-hg { margin: auto; position: relative; top: -14px; width: 80px; height: 80px; background: url("/Content/img/rays-w.png"); background-size: contain; }
.rays { margin: auto; position: relative; top: 0; left: 8px; width: 50px; height: 50px; }
.rays.ring1 { background: url("/Content/img/rays-g.png"); background-size: contain; }
.rays.ring2 { background: url("/Content/img/rays-b.png"); background-size: contain; }
.rays.ring3 { background: url("/Content/img/rays-r.png"); background-size: contain; }
.rays.ring4 { background: url("/Content/img/rays-g.png"); background-size: contain; }
.rays.ring5 { background: url("/Content/img/rays-w.png"); background-size: contain; }
.ringMark3 { position: absolute; bottom: 18px; left: 9px; }
.ringMark5 { position: absolute; bottom: 18px; left: 16px; }

/* === COMMUNITY === */
.comm_gerb { position: relative; display: inline-block; }
.comm_gerb_und { position: absolute; top: 100px; left: -10px; display: block; }

/* === PREMIER LIST === */
.premierListRecord { position: relative; height: 25px; }
.premierListRecordLeft { left: 5px; position: absolute; top: 3px; bottom: 0; margin: auto; }
.premierListRecordRight { right: 5px; position: absolute; top: 6px; bottom: 0; margin: auto; }