/* CS 1.6 MOTD uyumlu surum: flex, grid, CSS degiskeni ve clip-path kullanmaz. */
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    min-width: 760px;
    min-height: 480px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #ecf7f5;
    background: #071113;
    font-family: Arial, Helvetica, sans-serif;
}

button {
    font-family: Arial, Helvetica, sans-serif;
}

.screen-noise {
    display: none;
}

.topbar {
    position: relative;
    height: 58px;
    padding: 7px 15px;
    overflow: hidden;
    background: #0b2024;
    border-bottom: 2px solid #43cbbb;
}

.brand {
    float: left;
    width: 220px;
    height: 44px;
}

.brand-mark {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    color: #071113;
    background: #58e0ce;
    border: 2px solid #b8fff5;
    line-height: 36px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

.brand b {
    display: block;
    padding-top: 5px;
    color: #ffffff;
    font-size: 17px;
    letter-spacing: 2px;
}

.brand small {
    display: block;
    margin-top: 2px;
    color: #58e0ce;
    font-size: 8px;
    letter-spacing: 1px;
}

.instruction {
    position: absolute;
    top: 21px;
    left: 235px;
    right: 225px;
    color: #9fb7b6;
    text-align: center;
    font-size: 11px;
}

.instruction b {
    color: #ffffff;
}

.instruction i {
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 12px;
    vertical-align: middle;
    background: #466264;
}

.account {
    float: right;
    width: 210px;
    padding-top: 2px;
    text-align: right;
}

.account > span {
    display: block;
    overflow: hidden;
    color: #9fb7b6;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
}

.account strong {
    display: block;
    color: #efc46a;
    font-size: 21px;
    line-height: 24px;
}

.account strong small {
    color: #c6d4d3;
    font-size: 9px;
}

.buy-layout {
    position: relative;
    height: 420px;
    padding: 8px 12px 6px;
    overflow: hidden;
    background: #081518;
}

.weapon-board {
    float: left;
    width: 83%;
    height: 100%;
    overflow: hidden;
}

.column {
    float: left;
    width: 24.2%;
    height: 100%;
    margin-right: .8%;
    overflow: hidden;
}

.category-title,
.equipment-head {
    height: 25px;
    margin: 0 0 4px;
    padding: 0 7px;
    overflow: hidden;
    color: #ffffff;
    background: #177e76;
    border-left: 4px solid #64e5d6;
    line-height: 25px;
    font-size: 9px;
    font-weight: bold;
}

.category-title span,
.equipment-head b {
    float: left;
}

.category-title small,
.equipment-head small {
    float: right;
    color: #b9ded9;
    font-size: 7px;
    font-weight: normal;
}

.category-title.compact {
    height: 22px;
    margin-top: 5px;
    line-height: 22px;
}

.weapon-card,
.armor-card {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #eef8f6;
    background: #11282c;
    border: 1px solid #355156;
    cursor: pointer;
    outline: none;
}

.weapon-card {
    height: 61px;
    margin-bottom: 4px;
    text-align: center;
}

.weapon-card:hover,
.weapon-card.selected,
.armor-card:hover,
.armor-card.selected {
    background: #1c4a49;
    border-color: #61dfd0;
}

.weapon-card.owned,
.armor-card.owned {
    background: #3e3520;
    border-color: #e9bd61;
}

.weapon-card img {
    display: block;
    width: 94%;
    height: 42px;
    margin: 1px auto 0;
    object-fit: contain;
    border: 0;
}

.weapon-info {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 3px;
    height: 13px;
    overflow: hidden;
    line-height: 13px;
}

.weapon-info b {
    float: left;
    color: #ffffff;
    font-size: 8px;
    text-transform: uppercase;
}

.weapon-info em {
    float: right;
    color: #efc46a;
    font-size: 8px;
    font-style: normal;
}

.weapon-state {
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 4;
    display: none;
    padding: 2px 4px;
    color: #17160e;
    background: #efc46a;
    font-size: 7px;
    font-weight: bold;
}

.owned .weapon-state {
    display: block;
}

.refund-hint {
    display: none;
}

.equipment {
    float: right;
    width: 17%;
    height: 100%;
    padding-left: 8px;
    overflow: hidden;
    border-left: 1px solid #31484c;
}

.equipment-head {
    height: 25px;
    line-height: 25px;
}

.armor-card {
    height: 91px;
    margin-bottom: 5px;
    text-align: center;
}

.armor-card b {
    display: block;
    margin-top: 1px;
    color: #ffffff;
    font-size: 9px;
}

.armor-card em {
    display: block;
    margin-top: 2px;
    color: #efc46a;
    font-size: 8px;
    font-style: normal;
}

.armor-icon {
    display: block;
    width: auto;
    height: 51px;
    max-width: 78px;
    margin: 3px auto 0;
    object-fit: contain;
    border: 0;
}

.shield {
    display: block;
    width: 48px;
    height: 49px;
    margin: 8px auto 0;
    color: #071113;
    background: #59decf;
    border: 5px solid #1d736c;
    line-height: 39px;
    font-size: 0;
    font-weight: bold;
}

.shield:after {
    content: "25";
    font-size: 14px;
}

.shield.heavy {
    background: #efc46a;
    border-color: #8e5b2d;
}

.shield.heavy:after {
    content: "50";
}

.selection-panel {
    height: 91px;
    margin-top: 6px;
    padding: 7px 8px;
    overflow: hidden;
    background: #102529;
    border: 1px solid #355156;
    border-top: 3px solid #ff5569;
}

.selection-panel span {
    color: #91aaa9;
    font-size: 7px;
}

.selection-panel b {
    display: block;
    margin-top: 9px;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
}

.selection-panel p {
    margin: 8px 0 0;
    color: #efc46a;
    font-size: 9px;
}

footer {
    position: relative;
    height: 36px;
    padding: 0 14px;
    overflow: hidden;
    background: #050e10;
    border-top: 1px solid #31484c;
    line-height: 36px;
}

.status {
    float: left;
    color: #b8c9c7;
    font-size: 10px;
}

.status i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    background: #58e0ce;
}

.status.pending i {
    background: #efc46a;
}

.status.success {
    color: #aaffd4;
}

.status.success i {
    background: #54e49b;
}

.status.error {
    color: #ffc1ca;
}

.status.error i {
    background: #ff5569;
}

.legend {
    float: right;
    color: #78908f;
    font-size: 8px;
}

.legend b {
    padding: 3px 5px;
    color: #ffffff;
    border: 1px solid #536b6c;
}

.fatal {
    width: 500px;
    margin: 80px auto;
    padding: 28px;
    color: #ffffff;
    text-align: center;
    background: #102529;
    border: 1px solid #ff5569;
}

.fatal-mark {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    color: #ffffff;
    background: #ff5569;
    line-height: 54px;
    font-size: 34px;
}

.fatal h1 {
    margin: 0 0 12px;
    font-size: 21px;
}

.fatal p {
    color: #bfd0ce;
    font-size: 13px;
}

.fatal .fallback {
    color: #efc46a;
}

@media screen and (min-height: 540px) {
    .buy-layout {
        height: 438px;
    }
}