/*
 * Knife Duel Top 10 — Dark Competitive Dashboard
 * CS 1.6 MOTD Compatible
 * Aesthetic: dark, sharp, gaming, professional
 */

/* ==================== BASE ==================== */

body {
    margin: 0;
    padding: 0;
    background: #08090d;
    color: #8b8fa3;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* ==================== LAYOUT ==================== */

.kd-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #0b0d13;
}

/* ==================== ACCENT BAR ==================== */

.kd-accent-bar {
    height: 3px;
    background: #1e2130;
    border-bottom: 1px solid #262a3a;
    font-size: 0;
    line-height: 0;
}

.kd-accent-bar-btm {
    height: 3px;
    background: #1e2130;
    border-top: 1px solid #262a3a;
    font-size: 0;
    line-height: 0;
}

/* ==================== HEADER ==================== */

.kd-head {
    text-align: center;
    padding: 32px 16px 28px 16px;
    background: #0d0f17;
    border-bottom: 1px solid #1a1d2b;
}

.kd-head-glass {
    padding: 2px;
    background: #11131d;
    border: 1px solid #1e2232;
}

.kd-head-inner {
    padding: 26px 30px 22px 30px;
    background: #0f111a;
    border: 1px solid #161a28;
}

.kd-head h1 {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #e2e4ea;
    letter-spacing: 5px;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Divider */
.kd-hdiv {
    width: 40px;
    height: 0;
    margin: 14px auto;
    border: 0;
    border-top: 2px solid #262a3a;
    font-size: 0;
    line-height: 0;
    padding: 0;
}

.kd-head p {
    margin: 6px 0 0 0;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #555b70;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.kd-head b {
    color: #c0c4d0;
    font-size: 12px;
    font-weight: 700;
}

/* ==================== SEPARATOR ==================== */

.kd-sep {
    height: 0;
    border-top: 1px solid #1a1d2b;
    border-bottom: 1px solid #0d0f18;
    font-size: 0;
    line-height: 0;
}

/* ==================== TABLE ==================== */

.kd-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column Headers */
.kd-table thead th {
    background: #0d0f17;
    color: #555b70;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 4px 12px 4px;
    border-bottom: 2px solid #1e2232;
    border-top: 1px solid #1e2232;
    text-align: center;
}

.th-rank { width: 60px; }
.th-name { text-align: left; padding-left: 18px; }
.th-stat { width: 58px; }
.th-kd   { width: 68px; }

/* ==================== TABLE ROWS ==================== */

.kd-table tbody td {
    padding: 0;
    height: 54px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #141722;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

.td-rank { width: 56px; padding: 0 4px; }
.td-name { text-align: left; padding-left: 16px; }
.td-stat { width: 56px; padding: 0 3px; }
.td-kd   { width: 66px; padding: 0 3px; }

.kd-row {
    background: #0d0f17;
}

.kd-row-alt {
    background: #11131d;
}

/* ==================== TOP 3 ROWS ==================== */

.kd-row.top1 {
    background: #0c111a;
    border-left: 4px solid #f0c040;
    border-top: 1px solid #1a1f2e;
    border-bottom: 1px solid #1a1f2e;
}

.kd-row.top2 {
    background: #0c1018;
    border-left: 4px solid #8899b4;
    border-top: 1px solid #181d2a;
    border-bottom: 1px solid #181d2a;
}

.kd-row.top3 {
    background: #0e1018;
    border-left: 4px solid #d4855e;
    border-top: 1px solid #191d28;
    border-bottom: 1px solid #191d28;
}

/* ==================== RANK BADGE ==================== */

.rk {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    background: #181b28;
    color: #6b6f82;
    border: 1px solid #232738;
}

.rk-gold {
    background: #1e1a10;
    color: #f0c040;
    border: 1px solid #3d3520;
}

.rk-silver {
    background: #151a20;
    color: #8899b4;
    border: 1px solid #2a3040;
}

.rk-bronze {
    background: #1e1412;
    color: #d4855e;
    border: 1px solid #3d2820;
}

/* ==================== MEDAL ==================== */

.medal {
    display: block;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 3px;
}

.medal-gold   { color: #f0c040; }
.medal-silver { color: #8899b4; }
.medal-bronze { color: #d4855e; }

/* ==================== PLAYER CELL ==================== */

.plr {
    height: 56px;
    line-height: 56px;
}

/* Avatar */
.plr-ava {
    float: left;
    width: 40px;
    height: 40px;
    margin-top: 8px;
    margin-right: 14px;
}

.plr-ava img {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid #222638;
    background: #181b28;
}

.ava-gold img   { border: 2px solid #f0c040; }
.ava-silver img { border: 2px solid #8899b4; }
.ava-bronze img { border: 2px solid #d4855e; }

/* Flag */
.plr-flag {
    vertical-align: middle;
    margin-right: 8px;
}

.plr-flag img {
    width: 18px;
    height: 12px;
    vertical-align: middle;
    border: 1px solid #222638;
}

.f-badge {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    color: #555b70;
    background: #181b28;
    border: 1px solid #222638;
}

/* Player Name */
.plr-name {
    vertical-align: middle;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #c8ccd8;
}

.nm-gold {
    color: #f0c040;
    font-size: 14px;
    font-weight: 700;
}

.nm-silver {
    color: #a0b4d0;
    font-size: 13px;
    font-weight: 700;
}

.nm-bronze {
    color: #d4956e;
    font-size: 13px;
    font-weight: 700;
}

/* Online Dot */
.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    vertical-align: middle;
    background: #10b981;
    border: 1px solid #059669;
    border-radius: 50%;
}

.dot-off {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    vertical-align: middle;
    background: #ef4444;
    border: 1px solid #b91c1c;
    border-radius: 50%;
}

/* ==================== STATS ==================== */

.st {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.st-w  { color: #34d399; }   /* Wins    */
.st-l  { color: #f87171; }   /* Losses  */
.st-kd { color: #fbbf24; }   /* K/D     */
.st-wr { color: #a78bfa; }   /* Winrate */
.st-hs { color: #fb7185; }   /* HS      */
.st-sb { color: #fb923c; }   /* Stab    */
.st-sl { color: #facc15; }   /* Slash   */
.st-d  { color: #94a3b8; }   /* Duels   */
.st-ls { color: #6b7280; font-size: 11px; font-weight: 500; } /* Last Seen */

/* ==================== FOOTER ==================== */

.kd-foot {
    text-align: center;
    padding: 0;
    background: #0d0f17;
    border-top: 1px solid #1a1d2b;
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #555b70;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.kd-foot .c {
    color: #8b8fa3;
    font-weight: 700;
}

.kd-foot-inner {
    padding: 16px 16px 14px 16px;
}

/* ==================== EMPTY ==================== */

.kd-empty {
    text-align: center;
    padding: 60px 20px;
    background: #0b0d13;
    color: #555b70;
}

.kd-empty h2 {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #8b8fa3;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.kd-empty p {
    font-size: 12px;
    color: #555b70;
}

/* ==================== ERROR ==================== */

.kd-error {
    text-align: center;
    padding: 40px 20px;
    background: #130d0d;
    color: #f87171;
}

.kd-error h2 {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #f87171;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}