/* ========================================
   BASIC
======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;

    background-color: #0b0c12;

    color: #eeeeF5;

    font-family:
        'Gill Sans',
        'Gill Sans MT',
        Calibri,
        'Trebuchet MS',
        sans-serif;
}


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

.navbar {
    background-color: #11121b;

    color: #eeeeF5;

    min-height: 65px;

    padding: 10px 20px;

    border: 1px solid #292a38;

    border-radius: 10px;

    display: flex;
    align-items: center;
}


/* ========================================
   LOGO
======================================== */

.logo {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 20px;
    font-weight: bold;
}

.logo-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #4c43b8;

    border-radius: 7px;
}

.logo b {
    color: #8c7cff;
}


/* ========================================
   NAVIGATION
======================================== */

.nav-tabs {
    display: flex;

    margin-left: 30px;

    gap: 4px;
}

.nav-btn {
    background-color: transparent;

    color: #8c8e9e;

    border: none;

    padding: 9px 15px;

    border-radius: 6px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition: 0.15s;
}

.nav-btn:hover {
    background-color: #191a25;

    color: #eeeeF5;
}

.nav-btn.active {
    background-color: #292a3a;

    color: white;
}


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

.header-right {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #858797;

    font-size: 13px;
}

.online-dot {
    width: 8px;
    height: 8px;

    background-color: #48d597;

    border-radius: 50%;
}


/* ========================================
   MAIN
======================================== */

.container {
    max-width: 1050px;

    margin: 0 auto;

    padding-top: 40px;
}


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

.page-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;
}

.page-header h1 {
    margin: 0 0 6px;

    font-size: 30px;
}

.page-header p {
    margin: 0;

    color: #858797;

    font-size: 14px;
}


/* ========================================
   PLAYER COUNT
======================================== */

.player-count {
    text-align: right;
}

.player-count strong {
    font-size: 24px;
}

.player-count span {
    display: block;

    color: #77798a;

    font-size: 10px;

    text-transform: uppercase;
}


/* ========================================
   TIER SECTION
======================================== */

.tier-section {
    background-color: #12131c;

    border: 1px solid #292b39;

    border-radius: 10px;

    margin-bottom: 30px;

    padding: 10px;
}


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

.section-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 10px 14px;
}

.section-header h2 {
    margin: 0 0 4px;

    font-size: 19px;
}

.section-header p {
    margin: 0;

    color: #77798a;

    font-size: 12px;
}

.section-tag {
    background-color: rgba(124, 112, 255, 0.12);

    color: #9288ff;

    padding: 6px 9px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: bold;
}


/* ========================================
   PLAYER LIST
======================================== */

.players {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


/* ========================================
   PLAYER CARD
======================================== */

.player-card {
    display: grid;

    grid-template-columns:
        40px
        55px
        1fr
        160px
        80px;

    align-items: center;

    gap: 10px;

    min-height: 70px;

    padding: 7px 10px;

    background-color: #191a25;

    border: 1px solid #292b39;

    border-radius: 7px;

    transition: 0.15s;
}

.player-card:hover {
    background-color: #20212d;

    border-color: #3a3c4d;
}


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

.rank {
    text-align: center;

    color: #676979;

    font-weight: bold;
}

.player-card:first-child .rank {
    color: #f4c95d;
}


/* ========================================
   AVATAR
======================================== */

.avatar {
    width: 48px;
    height: 48px;

    background-color: #20222e;

    border: 2px solid #353746;

    border-radius: 6px;

    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;

    display: block;

    image-rendering: pixelated;
}


/* ========================================
   PLAYER INFO
======================================== */

.player-info h3 {
    margin: 0 0 3px;

    color: #f1f1f6;

    font-size: 24px;
}

.player-status {
    color: #696b7a;

    font-size: 13px;
}


/* ========================================
   TIER BADGE
======================================== */

.tier-badge {
    width: 135px;

    padding: 6px 8px;

    border: 1px solid;

    border-radius: 6px;

    text-align: center;

    background-color: rgba(0, 0, 0, 0.12);
}

.tier-badge span {
    display: block;

    font-size: 9px;

    opacity: 0.75;

    text-transform: uppercase;
}

.tier-badge strong {
    font-size: 13px;
}


/* ========================================
   SCORE
======================================== */

.score {
    text-align: right;

    padding-right: 5px;
}

.score strong {
    display: block;

    font-size: 18px;

    color: #ffffff;
}

.score span {
    color: #666878;

    font-size: 9px;
}


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

footer {
    text-align: center;

    padding: 20px;

    color: #555766;

    font-size: 11px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 750px) {

    body {
        padding: 10px;
    }

    .navbar {
        flex-wrap: wrap;

        gap: 8px;
    }

    .nav-tabs {
        margin-left: 0;

        order: 3;

        width: 100%;
    }

    .nav-btn {
        flex: 1;
    }

    .header-right {
        display: none;
    }

    .container {
        padding-top: 25px;
    }

    .player-card {
        grid-template-columns:
            30px
            45px
            1fr
            75px;
    }

    .tier-badge {
        width: 75px;
    }

    .score {
        display: none;
    }

    .avatar {
        width: 40px;
        height: 40px;
    }
}


@media (max-width: 500px) {

    .page-header h1 {
        font-size: 24px;
    }

    .section-tag {
        display: none;
    }

    .player-info h3 {
        font-size: 13px;
    }

    .player-card {
        gap: 6px;

        padding: 6px;
    }

}
/* ========================================
   GAMEMODE DROPDOWN
======================================== */

.gamemode-dropdown {
    position: relative;
    display: inline-block;
}

.gamemode-menu {
    display: none;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;

    min-width: 160px;

    padding: 6px;

    background-color: #282943;

    border: 1px solid #3a3b50;
    border-radius: 8px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);

    z-index: 9999;
}

.gamemode-menu.show {
    display: block;
}

.gamemode-nav-button {
    display: block;

    width: 100%;

    padding: 9px 12px;

    border: none;
    border-radius: 6px;

    background: transparent;

    color: #e7e7e7;

    text-align: left;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;
}

.gamemode-nav-button:hover {
    background-color: #383864;
}

.player-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
}

.player-edition {
    color: #8c7cff;
    font-weight: 600;
    text-transform: uppercase;
}

.player-status {
    color: #77798a;
}

.player-status::before {
    content: "•";
    margin-right: 8px;
    color: #4b4d5c;
}

/* ========================================
PLAYER SEARCH
======================================== */

.player-search {
margin-left: 20px;

display: flex;
align-items: center;

width: 210px;
height: 36px;

background-color: #191a25;

border: 1px solid #292a38;

border-radius: 7px;

transition: 0.15s;

}

.player-search:focus-within {
border-color: #4c43b8;

background-color: #1d1e2a;

}

.search-icon {
margin-left: 10px;

color: #77798a;

font-size: 19px;

line-height: 1;

}

.player-search input {
width: 100%;

padding: 8px 10px;

background: transparent;

border: none;
outline: none;

color: #eeeeF5;

font-family: inherit;
font-size: 13px;

}

.player-search input::placeholder {
color: #666878;
}

/* ========================================
MOBILE SEARCH
======================================== */

@media (max-width: 750px) {

.player-search {
    order: 2;

    margin-left: 0;

    width: 100%;

    flex: 1 1 100%;
}


}

/* ========================================
   PLAYER PROFILE
======================================== */

.profile-back-button {
    margin-bottom: 20px;

    padding: 9px 14px;

    background-color: #191a25;

    border: 1px solid #292b39;

    border-radius: 7px;

    color: #bfc0cc;

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;

    transition: 0.15s;
}

.profile-back-button:hover {
    background-color: #222330;

    color: white;

    border-color: #3a3c4d;
}


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

.profile-header {
    display: flex;

    align-items: center;

    gap: 22px;

    padding: 25px;

    margin-bottom: 20px;

    background-color: #12131c;

    border: 1px solid #292b39;

    border-radius: 10px;
}

.profile-avatar {
    width: 96px;
    height: 96px;

    border-radius: 10px;

    border: 2px solid #3a3c4d;

    background-color: #20222e;

    image-rendering: pixelated;
}

.profile-info h1 {
    margin: 0 0 5px;

    font-size: 32px;
}

.profile-edition {
    display: block;

    color: #8c7cff;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;
}

.profile-overall-tier {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding: 8px 12px;

    width: fit-content;

    background-color: #191a25;

    border: 1px solid #292b39;

    border-radius: 6px;
}

.profile-overall-tier span {
    color: #77798a;

    font-size: 9px;

    font-weight: bold;
}

.profile-overall-tier strong {
    font-size: 16px;
}


/* ========================================
   PROFILE SECTIONS
======================================== */

.profile-overall,
.profile-modes {
    padding: 20px;

    margin-bottom: 20px;

    background-color: #12131c;

    border: 1px solid #292b39;

    border-radius: 10px;
}

.profile-overall h2,
.profile-modes h2 {
    margin: 0 0 15px;

    font-size: 18px;
}


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

.profile-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}

.profile-stat {
    padding: 15px;

    background-color: #191a25;

    border: 1px solid #292b39;

    border-radius: 7px;
}

.profile-stat span {
    display: block;

    margin-bottom: 5px;

    color: #77798a;

    font-size: 10px;

    text-transform: uppercase;
}

.profile-stat strong {
    color: white;

    font-size: 22px;
}


/* ========================================
   GAMEMODE GRID
======================================== */

.profile-mode-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}

.profile-mode-card {
    display: grid;

    grid-template-columns:
        1fr
        70px
        80px;

    align-items: center;

    gap: 10px;

    min-height: 58px;

    padding: 10px 12px;

    background-color: #191a25;

    border: 1px solid #292b39;

    border-radius: 7px;
}

.profile-mode-name {
    color: #eeeeF5;

    font-size: 14px;

    font-weight: 600;
}

.profile-mode-tier {
    text-align: center;

    font-size: 15px;
}

.profile-mode-score {
    text-align: right;

    color: #77798a;

    font-size: 10px;
}

.profile-mode-card.untested {
    opacity: 0.45;
}

.profile-mode-untested {
    grid-column: 2 / 4;

    text-align: right;

    color: #666878;

    font-size: 11px;
}


/* ========================================
   PROFILE MOBILE
======================================== */

@media (max-width: 600px) {

    .profile-header {
        padding: 18px;

        gap: 15px;
    }

    .profile-avatar {
        width: 70px;
        height: 70px;
    }

    .profile-info h1 {
        font-size: 24px;
    }

    .profile-stat-grid {
        grid-template-columns: 1fr;
    }

    .profile-mode-grid {
        grid-template-columns: 1fr;
    }

    .profile-mode-card {
        grid-template-columns:
            1fr
            60px
            70px;
    }

}