* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
    margin: 0;
    background-color: #0a0e15;
    color: #d7dbe0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    overflow-x: hidden;
}
a { color: #f1c94a; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    width: 100%; max-width: 1400px; margin: 0 auto; padding: 8px;
}
.clearfix { overflow: hidden; zoom: 1; }

table.leaderboard { width: 100%; border-collapse: collapse; }
table.leaderboard th {
    background-color: #131a24;
    color: #6f8bb3;
    font-size: 9px;
    text-transform: uppercase;
    padding: 4px 4px;
    text-align: center;
    border-bottom: 1px solid #1b2129;
}
table.leaderboard td {
    padding: 2px 4px;
    text-align: center;
    border-bottom: 1px solid #161c25;
    vertical-align: middle;
}
table.leaderboard tr.even { background-color: #0d1219; }
table.leaderboard td.nick { text-align: left; font-weight: bold; color: #e7ecef; }
table.leaderboard td.place { font-weight: bold; color: #7c8896; width: 24px; }
table.leaderboard th:nth-child(1), table.leaderboard td:nth-child(1) { width: 24px; }
table.leaderboard th:nth-child(2), table.leaderboard td:nth-child(2) { width: 130px; }
table.leaderboard th:nth-child(3), table.leaderboard td:nth-child(3) { width: 55px; }
table.leaderboard th:nth-child(5), table.leaderboard td:nth-child(5) { width: 45px; }
table.leaderboard th:nth-child(6), table.leaderboard td:nth-child(6) { width: 45px; }
table.leaderboard th:nth-child(7), table.leaderboard td:nth-child(7) { width: 70px; }
table.leaderboard th:nth-child(8), table.leaderboard td:nth-child(8) { width: 55px; }
table.leaderboard th:nth-child(9), table.leaderboard td:nth-child(9) { width: 55px; }
table.leaderboard td.place.medal1 { color: #f1c94a; }
table.leaderboard td.place.medal2 { color: #c7ccd1; }
table.leaderboard td.place.medal3 { color: #d98a4a; }
table.leaderboard td.kills { color: #5fcf6a; font-weight: bold; }
table.leaderboard td.deaths { color: #e2564f; font-weight: bold; }

.bar-row { display: table; width: 100%; }
.bar-row > * { display: table-cell; vertical-align: middle; }
.bar-track {
    width: 70px;
    height: 10px;
    background-color: #161d27;
    border: 1px solid #1b2129;
    overflow: hidden;
}
.bar-track.hs { width: 40px; }
.bar-fill { display: block; height: 100%; }
.bar-num { padding-left: 6px; color: #e7ecef; font-size: 10px; font-weight: bold; white-space: nowrap; text-align: left; }

.avatar {
    display: inline-block;
    width: 20px; height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #1b2330;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 9px;
    color: #9aa5b3;
    vertical-align: middle;
    overflow: hidden;
}
.steam-icon { display: inline-block; position: relative; top: -2px; }
.steam-icon svg { vertical-align: middle; }
.avatar img, .avatar-lg img, .avatar-xl img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.flag { vertical-align: middle; margin-right: 2px; }

.footer { padding: 6px 4px; overflow: hidden; zoom: 1; }
.pages { float: left; }
.search { float: right; }
.pages a { display: inline-block; padding: 3px 8px; margin-right: 3px; color: #8b93a1; border: 1px solid #1b2129; }
.pages a.active { color: #0a0e15; background-color: #f1c94a; border-color: #f1c94a; }

.search form { display: inline-block; vertical-align: middle; margin: 0; }
.lang-switch { display: inline-block; vertical-align: middle; margin-right: 8px; }
.lang-switch a { display: inline-block; padding: 3px 8px; margin-left: 3px; color: #8b93a1; border: 1px solid #1b2129; border-radius: 3px; font-size: 10px; font-weight: bold; }
.lang-switch a.active { color: #0a0e15; background-color: #f1c94a; border-color: #f1c94a; }

.rank-grid { display: table; width: 100%; table-layout: fixed; border-spacing: 2px 0; margin-bottom: 2px; }
.rank-grid-item { display: table-cell; width: 20%; text-align: center; vertical-align: top; padding: 3px 2px; border-radius: 6px; }
.rank-grid-item.locked { opacity: 0.35; }
.rank-grid-item.current { background-color: #1b2330; box-shadow: 0 0 8px rgba(241, 201, 74, .3); }
.rank-grid-name { font-size: 8px; color: #8b93a1; margin-top: 2px; line-height: 1.15; }
.rank-grid-item.current .rank-grid-name { color: #f1c94a; font-weight: bold; }
.rank-grid-item.reached .rank-grid-name { color: #c7ccd1; }
.search input { background-color: #131a24; border: 1px solid #1b2129; color: #d7dbe0; padding: 4px 6px; vertical-align: middle; }
.search button { background-color: #f1c94a; border: none; color: #0a0e15; font-weight: bold; padding: 4px 10px; cursor: pointer; vertical-align: middle; }

/* profile */
.profile-header {
    display: table; width: 100%; border-spacing: 10px 0;
    background-color: #131a24; padding: 8px 10px;
    border: 1px solid #1b2129; border-radius: 8px;
}
.profile-header > * { display: table-cell; vertical-align: middle; }
.profile-header .avatar-lg {
    width: 42px; height: 42px; line-height: 42px; text-align: center;
    background-color: #1b2330; border-radius: 6px; font-weight: bold; color: #9aa5b3;
    overflow: hidden;
    border: 1px solid rgba(79, 182, 224, .5); box-shadow: 0 0 8px rgba(79, 182, 224, .2);
}
.avatar-xl {
    display: inline-block;
    width: 90px; height: 90px; line-height: 90px; text-align: center;
    background-color: #1b2330; border: 1px solid rgba(79, 182, 224, .5); border-radius: 10px;
    box-shadow: 0 0 12px rgba(79, 182, 224, .2);
    font-weight: bold; font-size: 28px; color: #9aa5b3;
    overflow: hidden;
}
.profile-header .name { font-size: 16px; font-weight: bold; color: #fff; white-space: nowrap; }
.profile-header .meta { font-size: 11px; color: #8b93a1; white-space: nowrap; }
.btn { padding: 6px 10px; font-size: 11px; font-weight: bold; border-radius: 3px; white-space: nowrap; }
.btn-outline { border: 1px solid #f1c94a; background-color: #f1c94a; color: #0a0e15; }
.btn-solid { background-color: #4fb6e0; color: #0a0e15; }
.btn-gold.btn-solid { background-color: #f1c94a; color: #0a0e15; }
.btn-green.btn-outline { border: 1px solid #5fcf6a; background-color: #5fcf6a; color: #0a0e15; }
.btn-green.btn-solid { background-color: #5fcf6a; color: #0a0e15; }
.btn svg { vertical-align: middle; margin-right: 4px; }
.spacer { width: 100%; }
.side-badge { text-align: right; font-size: 10px; color: #8b93a1; }
.side-badge .b { color: #f1c94a; font-weight: bold; }

.identity-layout { display: table; width: 100%; border-spacing: 8px 0; margin-top: 8px; }
.identity-layout > * { display: table-cell; vertical-align: top; }
.identity-photo-cell { width: 220px; }
.stacked-btns .btn { display: block; margin-bottom: 6px; }
.stacked-btns .btn:last-child { margin-bottom: 0; }

.rank-row { margin-top: 8px; }
.panels.rank-row { display: block; }
.rank-row-clear { display: block; clear: both; height: 0; font-size: 0; line-height: 0; }
.panels.rank-row > .panel { display: block; float: left; width: 49%; min-height: 88px; box-sizing: border-box; }
.panels.rank-row > .panel.rank-card { margin-right: 2%; }
.rank-card-row { display: table; width: 100%; }
.rank-card-row > * { display: table-cell; vertical-align: middle; }
.rank-icon-lg { width: 52px; padding-right: 12px; }
.rank-card-info { width: 100%; padding-right: 12px; }
.rank-card-title { font-size: 13px; font-weight: bold; color: #f1c94a; margin-bottom: 4px; text-shadow: 0 0 8px rgba(241, 201, 74, .55); overflow: hidden; zoom: 1; }
.rcm-kaldi-top { float: right; font-size: 11px; color: #5fcf6a; text-shadow: 0 0 8px rgba(95, 207, 106, .55); }
.rank-card-meta { overflow: hidden; zoom: 1; font-size: 10px; color: #8b93a1; margin-top: 5px; }
.rank-card-meta .rcm-left { float: left; padding-right: 10px; font-weight: bold; color: #e2564f; text-shadow: 0 0 8px rgba(226, 86, 79, .55); }
.rank-card-meta .rcm-right { float: right; font-weight: bold; color: #2de0f0; text-shadow: 0 0 8px rgba(45, 224, 240, .55); }
.rank-card-meta b { color: #e7ecef; }
.rank-next-preview { width: 60px; text-align: center; }
.rank-icon-frame { display: inline-block; padding: 4px; border-radius: 10px; border: 2px solid #f1c94a; background-color: #0d1420; }
.rank-card-info .track { height: 10px; background-color: #2de0f0; border: 1px solid #1b2129; position: relative; }
.rank-card-info .track .fill { position: absolute; left: 0; top: 0; height: 100%; background-color: #f1c94a; overflow: hidden; white-space: nowrap; }
.xp-stripe { display: inline-block; width: 5px; height: 100%; background-color: #c99b1e; margin-right: 5px; }
.xp-stripe-alt { background-color: #fff2b8; }
.progress-marker { position: absolute; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #e2564f; margin-left: -5px; }
.progress-marker-end { position: absolute; right: 0; bottom: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #5fcf6a; margin-right: -5px; }

.stat-row { display: table; width: 100%; border-spacing: 6px 0; margin-top: 6px; table-layout: fixed; }
.stat-box {
    display: table-cell; width: 12.5%; box-sizing: border-box;
    background-color: #131a24; text-align: center; padding: 6px 4px 5px;
    border: 1px solid #1b2129; border-radius: 8px;
}
.stat-icon { text-align: center; margin-bottom: 2px; opacity: .9; }
.stat-icon svg { vertical-align: middle; }
.stat-lbl { font-size: 9px; font-weight: bold; color: #6f8bb3; text-transform: uppercase; letter-spacing: .3px; }
.stat-val { font-size: 15px; font-weight: bold; margin: 2px 0 4px; }

.panels { display: table; width: 100%; border-spacing: 8px 0; margin-top: 6px; }
.panels > .panel { display: table-cell; width: 50%; }
.panel { background-color: #131a24; padding: 8px 10px; border: 1px solid #1b2129; border-radius: 8px; }
.panel.panel-full { margin-top: 6px; }
.panel-title { margin: 0 0 6px; padding: 0; font-size: 10px; font-weight: bold; color: #6f8bb3; text-transform: uppercase; letter-spacing: .3px; line-height: 13px; }
.panel-title .title-bar { display: inline-block; width: 3px; height: 13px; background-color: #4fb6e0; margin-right: 8px; border-radius: 1px; vertical-align: middle; }
.panel-title .title-underline { display: block; width: 56px; height: 2px; margin-top: 4px; background-color: #4fb6e0; }
.panel-title .panel-icon-badge { margin-right: 6px; }
.weapon-row { overflow: hidden; zoom: 1; padding: 5px 0; border-bottom: 1px solid #1b2129; }
.weapon-row span:first-child { float: left; }
.weapon-row b, .weapon-row > span + span { float: right; }
.weapon-row:last-child { border-bottom: none; }

.weapon-item { display: table; width: 100%; padding: 10px 0; border-bottom: 1px dashed #262d3a; }
.weapon-item > * { display: table-cell; vertical-align: middle; }
.weapon-item:last-child { border-bottom: none; }
.game-row { display: table; width: 100%; padding: 6px 0; border-bottom: 1px dashed #262d3a; }
.game-row > * { display: table-cell; vertical-align: middle; }
.game-row:last-child { border-bottom: none; }
.game-row .w-name { font-size: 12px; }
.w-rank { width: 24px; font-size: 11px; font-weight: bold; color: #6f8bb3; }
.w-rank-1 { color: #f1c94a; }
.w-rank-2 { color: #c7ccd1; }
.w-rank-3 { color: #d98a4a; }
.w-icon {
    width: 64px; height: 16px; text-align: center; color: #8b93a1;
}
.w-icon svg { vertical-align: middle; }
.w-name { width: 100%; color: #f1c94a; font-weight: bold; font-size: 12px; text-transform: uppercase; padding-left: 8px; }
.w-kills { font-weight: bold; color: #e7ecef; font-size: 13px; text-align: right; white-space: nowrap; }
.w-kills span { font-weight: normal; color: #8b93a1; font-size: 10px; margin-left: 3px; text-transform: lowercase; }

.activity-grid { overflow: hidden; zoom: 1; }
.activity-box {
    display: table; width: 48%; float: left; margin: 0 4% 6px 0;
    background-color: #0d1219; border: 1px solid #1b2129; border-radius: 8px; padding: 5px 8px;
}
.activity-box.no-gap { margin-right: 0; }
.activity-box > * { display: table-cell; vertical-align: middle; }
.activity-icon { width: 20px; }
.activity-icon svg { width: 16px; height: 16px; }
.activity-lbl { font-size: 9px; color: #6f8bb3; text-transform: uppercase; letter-spacing: .2px; }
.activity-val { font-size: 12px; font-weight: bold; margin-top: 1px; }

.panel-vote-inline { margin-top: 6px; padding-top: 6px; border-top: 1px solid #1b2129; }


.modal-box { width: 320px; max-width: 90vw; background-color: #131a24; border: 1px solid #1b2129; border-radius: 10px; padding: 16px 18px; }
.modal-box-wide { width: 360px; }
.modal-badges { margin-top: 12px; padding-top: 12px; border-top: 1px solid #1b2129; }
.modal-close { cursor: pointer; color: #8b93a1; font-size: 16px; line-height: 1; float: right; }
.modal-row { display: table; width: 100%; padding: 4px 0; border-bottom: 1px solid #1b2129; font-size: 11px; color: #8b93a1; }
.modal-row > * { display: table-cell; vertical-align: middle; }
.modal-row > b { text-align: right; }
.row-label { color: #8b93a1; white-space: nowrap; width: 1%; }
.row-label svg { color: #6f8bb3; vertical-align: middle; margin-right: 8px; }

.icon-badge {
    display: inline-block; text-align: center;
    width: 24px; height: 24px; line-height: 24px; border-radius: 50%;
}
.icon-badge svg { vertical-align: middle; }
.panel-icon-badge {
    display: inline-block; text-align: center;
    width: 20px; height: 20px; line-height: 20px; border-radius: 6px;
    background-color: #4fb6e022; color: #4fb6e0;
}
.panel-icon-badge svg { vertical-align: middle; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: #8b93a1; margin-left: 6px; vertical-align: middle; }
.status-dot.online { background-color: #5fcf6a; }
.modal-row:last-child { border-bottom: none; }
.modal-row b { color: #e7ecef; }
.modal-actions { text-align: right; margin-top: 12px; }
.modal-actions .btn { margin-left: 8px; }

.vote-item { padding: 5px 0; border-bottom: 1px dashed #262d3a; }
.vote-item:last-child { border-bottom: none; }
.vi-head { overflow: hidden; zoom: 1; font-size: 12px; color: #e7ecef; font-weight: bold; }
.vi-head span:first-child { float: left; }
.vi-stars { float: right; letter-spacing: 1px; }
.vs-filled { color: #f1c94a; }
.vs-empty { color: #2a3140; }
.vi-comment { font-size: 11px; color: #8b93a1; margin-top: 3px; }
.vi-date { font-size: 10px; color: #4c5563; margin-top: 2px; }

#vote-picker { text-align: center; margin: 16px 0 8px; font-size: 24px; }
.star-pick { cursor: pointer; color: #262d3a; display: inline-block; margin: 0 4px; }
.star-pick.active { color: #f1c94a; }
#vote-thanks { display: none; text-align: center; color: #5fcf6a; font-size: 11px; margin-bottom: 8px; }

.featured-badge { display: table; width: 100%; border-spacing: 12px 0; background-color: #0d1219; border: 1px solid #2a2f1e; border-radius: 8px; padding: 12px 14px; }
.featured-badge > *:not(.fb-watermark) { display: table-cell; vertical-align: middle; }
.featured-badge-hero {
    position: relative; overflow: hidden; padding: 6px 12px;
    border-color: #f1c94a66; box-shadow: 0 0 10px rgba(241, 201, 74, .1);
    background-color: #0d1219;
    background-image: linear-gradient(90deg, #14161f, #0d1219);
}
.fb-watermark {
    position: absolute; right: 12px; top: 50%; margin-top: -12px;
    font-size: 20px; font-weight: 900; letter-spacing: 1px;
    color: rgba(241, 201, 74, .06); white-space: nowrap;
}
.fb-hero-icon {
    width: 34px; height: 34px; text-align: center; line-height: 34px; font-size: 0;
    color: #f1c94a; background-color: #f1c94a1a; box-shadow: 0 0 8px rgba(241, 201, 74, .3);
}
.fb-hero-icon svg { width: 15px; height: 15px; vertical-align: middle; }
.fb-hero-name { font-size: 12px; margin-bottom: 1px; }
.fb-hero-banner { width: 1px; white-space: nowrap; padding-right: 12px; }
.fb-hero-banner img { vertical-align: middle; max-width: none; display: block; }
.badge-card {
    display: table; width: 100%; border-spacing: 12px 0;
    background-color: #0d1219; border: 1px solid #1b2129; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 8px;
}
.badge-card > * { display: table-cell; vertical-align: middle; }
.badge-card:last-child { margin-bottom: 0; }
.badge-card.earned { border-color: #2f6b3f; }
.bc-icon {
    width: 36px; height: 36px; text-align: center; line-height: 36px;
    background-color: #131a24; border-radius: 8px; color: #f1c94a;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.bc-icon svg { vertical-align: middle; }
.bc-earned-tag { color: #5fcf6a; }
.bc-earned-tag svg { vertical-align: middle; margin-right: 4px; }
.badge-card.earned .bc-icon { color: #5fcf6a; }
.bc-body { width: 100%; }
.bc-name { font-weight: bold; color: #e7ecef; font-size: 13px; }
.bc-desc { font-size: 11px; color: #8b93a1 !important; margin-top: 2px; }
.bc-progress-track { height: 6px; border-radius: 3px; background-color: #161d27; margin-top: 6px; overflow: hidden; }
.bc-progress-fill { height: 100%; background-color: #a081ea; background-image: linear-gradient(90deg, #a081ea, #6a4fc9); }
.badge-card.earned .bc-progress-fill { background-color: #7fe08a; background-image: linear-gradient(90deg, #7fe08a, #3fae4a); }
.bc-meta { font-size: 10px; color: #6f8bb3; margin-top: 4px; }
.bc-action { width: 1%; white-space: nowrap; text-align: right; }
.bc-action form { margin: 0; }
.bc-action button { cursor: pointer; }

.badge-grid { display: table; width: 100%; border-spacing: 6px 0; margin-bottom: 3px; table-layout: fixed; }
.badge-grid-card {
    display: table-cell; width: 33.3%;
    background-color: #0d1219; border: 1px solid #1b2129; border-radius: 6px;
    padding: 4px 4px; text-align: center; vertical-align: top;
}
.badge-grid-card.active { border-color: #f1c94a; }
.badge-grid-card .bgc-icon {
    width: 22px; height: 22px; margin: 0 auto 3px; text-align: center; line-height: 22px;
    background-color: #131a24; border-radius: 6px; color: #f1c94a;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.badge-grid-card .bgc-icon svg { width: 11px; height: 11px; vertical-align: middle; }
.badge-grid-card.active .bgc-icon { color: #f1c94a; }
.bgc-name { font-weight: bold; color: #e7ecef; font-size: 11px; }
.bgc-banner { margin: 0 0 2px; }
.bgc-desc { font-size: 9px; color: #8b93a1 !important; margin-top: 1px; min-height: 12px; }
.bgc-date { font-size: 8px; color: #6f8bb3; margin: 1px 0 2px; }
.bgc-date svg { vertical-align: middle; margin-right: 3px; }
.badge-grid-card form { margin: 0; }
.badge-grid-card button { width: 100%; cursor: pointer; }
.badge-grid-card.progress-card { position: relative; border-color: #1b2129; }
.badge-grid-card.progress-card.earned { border-color: #2f6b3f; }
.badge-grid-card.progress-card .bgc-icon { color: #f1c94a; }
.badge-grid-card.progress-card.earned .bgc-icon { color: #5fcf6a; }
.badge-grid-card.progress-card .bc-progress-track { margin: 5px 0 0; height: 4px; }
.badge-grid-card.progress-card.earned .bc-progress-fill { background-color: #7fe08a; background-image: linear-gradient(90deg, #7fe08a, #3fae4a); }
.pc-active-tag { position: absolute; top: 10px; right: 10px; font-size: 9px; }
.weapon-row .w-name { color: #f1c94a; font-weight: bold; }
.badge-chip-row { display: block; clear: both; width: 100%; }
.badge-chip { display: inline-block; background-color: #1b2330; border: 1px solid #333; color: #cba3f7; padding: 3px 8px; border-radius: 12px; font-size: 11px; margin: 2px 2px 2px 0; white-space: nowrap; }
.badge-chip svg, .badge-chip img { vertical-align: middle; margin-right: 3px; }
.badge-chip-banner { background-color: transparent; border: none; padding: 0; }
.badge-chip-banner img { margin-right: 0; }

.panel-head { display: table; width: 100%; margin: 0; }
.panel-head > * { display: table-cell; vertical-align: top; }
.panel-head .panel-title { margin: 0; padding: 0; width: 100%; }
.panel-head-actions { text-align: right; white-space: nowrap; }
.panel-head-actions .btn { margin-left: 6px; }
.badge-head-actions { position: relative; top: -3px; }
.btn-xs { padding: 3px 8px; font-size: 10px; }

.panel-vote { text-align: center; }
.rating-row { display: table; width: 100%; }
.rating-row > * { display: table-cell; vertical-align: middle; }
.rating-row .dist-bars { width: 1%; }
.rating-row-main { text-align: center; }
.panel-vote-inline .rating-row-main { text-align: left; }
.star-row { position: relative; width: 106px; height: 18px; display: inline-block; }

.dist-bars { display: table; height: 36px; border-spacing: 4px 0; }
.dist-bar-col { display: table-cell; vertical-align: bottom; width: 14px; text-align: center; }
.dist-bar { width: 100%; background-color: #4fb6e0; border-radius: 2px 2px 0 0; }
.dist-bar-col span { display: block; font-size: 8px; color: #6f8bb3; margin-top: 2px; }

.vs-global { font-size: 10px; color: #8b93a1; }
.vs-global span { margin-right: 8px; }
.star-row .stars-bg, .star-row .stars-fg { position: absolute; top: 0; left: 0; white-space: nowrap; }
.star-row .stars-bg svg, .star-row .stars-fg svg { display: inline-block; margin-right: 4px; }
.star-row .stars-bg svg { fill: #262d3a; }
.star-row .stars-fg { overflow: hidden; }
.star-row .stars-fg svg { fill: #f1c94a; }
.vote-score { font-size: 13px; color: #e7ecef; font-weight: bold; }
.vote-score span { font-weight: normal; color: #8b93a1; }