/*
    K3PESH HQ Landing Page CSS
*/

:root {

    --k3-red:
        #ff3f4f;

    --k3-red-bright:
        #ff6673;

    --k3-red-soft:
        rgba(
            255,
            63,
            79,
            0.18
        );

    --k3-blue:
        #7ab8ff;

    --k3-green:
        #00ff9f;

    --k3-panel:
        rgba(
            7,
            9,
            13,
            0.92
        );
}


/*BACKGROUND*/

.k3-landing-body {

    background-color:#07090d;
}


/*LOGO*/

.k3-landing-body
#background_logo {

    min-height:
        clamp(
            170px,
            24vw,
            360px
        );

    filter:
        drop-shadow(
            0 0 18px
            rgba(
                255,
                63,
                79,
                0.45
            )
        );
}


.k3-landing-body
#landing-logo-img {

    width:
        min(
            820px,
            75vw
        );

    height:
        auto;

    image-rendering:
        auto;
}


.k3-landing-body
#mobile-background-logo img {

    width:
        min(
            70vw,
            360px
        );

    filter:
        drop-shadow(
            0 0 15px
            rgba(
                255,
                63,
                79,
                0.45
            )
        );
}


/*TITLES*/

.k3-hq-kicker {

    margin-bottom:
        10px;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size:
        0.72rem;

    font-weight:
        bold;

    letter-spacing:
        4px;

    text-transform:
        uppercase;
}


.k3-landing-body
#hero-section h2,
.k3-landing-body
#faq-panel h1 {

    color:
        var(--k3-red-bright);

    text-shadow:
        0 0 18px
        rgba(
            255,
            63,
            79,
            0.72
        );
}


.k3-landing-body
.hero-subtitle {

    color:
        rgba(
            226,
            232,
            240,
            0.84
        );
}


/*MAIN ACTIONS*/

.k3-landing-body
.portal-btn {

    border-color:
        rgba(
            255,
            255,
            255,
            0.16
        );

    background:
        rgba(
            10,
            12,
            17,
            0.94
        );

    box-shadow:
        inset 0 0 20px
        rgba(
            255,
            63,
            79,
            0.035
        );
}


.k3-landing-body
.portal-btn.primary {

    border-color:
        var(--k3-red);

    color:
        var(--k3-red-bright);

    background:
        rgba(
            255,
            63,
            79,
            0.09
        );

    box-shadow:
        inset 0 0 20px
        rgba(
            255,
            63,
            79,
            0.08
        );
}


.k3-landing-body
.portal-btn span {

    color:
        var(--k3-blue);
}


.k3-landing-body
.portal-btn:hover {

    border-color:
        var(--k3-red);

    box-shadow:
        0 0 22px
            rgba(
                255,
                63,
                79,
                0.32
            ),
        inset 0 0 22px
            rgba(
                255,
                63,
                79,
                0.07
            );
}


.k3-landing-body
.portal-btn.disabled {

    opacity:
        0.42;

    cursor:
        not-allowed;
}


/*ACCOUNT PANEL*/

.k3-landing-body
#account-panel {

    border-color:
        rgba(
            255,
            63,
            79,
            0.38
        );

    background:
        rgba(
            7,
            9,
            13,
            0.9
        );

    box-shadow:
        0 0 20px
        rgba(
            255,
            63,
            79,
            0.13
        );
}


.k3-landing-body
#account-status,
.k3-landing-body
.account-name {

    color:
        var(--k3-red-bright);

    text-shadow:
        0 0 10px
        rgba(
            255,
            63,
            79,
            0.7
        );
}


.k3-landing-body
#account-btn {

    border-color:
        rgba(
            255,
            63,
            79,
            0.72
        );

    color:
        var(--k3-red-bright);

    background:
        rgba(
            255,
            63,
            79,
            0.08
        );
}


/*LEADERBOARDS*/

.k3-landing-body
#leaderboard-ai-btn,
.k3-landing-body
#leaderboard-pvp-btn {

    border-color:
        var(--k3-red);

    color:
        var(--k3-red-bright);

    background:
        rgba(
            255,
            63,
            79,
            0.08
        );
}


.k3-landing-body
#leaderboard-content {

    border-color:
        rgba(
            255,
            63,
            79,
            0.75
        );

    background:
        rgba(
            7,
            9,
            13,
            0.985
        );

    box-shadow:
        0 0 32px
        rgba(
            255,
            63,
            79,
            0.25
        );
}


/*PROMO CARDS*/

.k3-landing-body
#promo-grid {

    max-width:
        1250px;

    margin-left:
        auto;

    margin-right:
        auto;
}


.k3-landing-body
.promo-card {

    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-color:
        rgba(
            255,
            63,
            79,
            0.24
        );

    background:
        rgba(
            7,
            9,
            13,
            0.9
        );

    box-shadow:
        0 0 18px
        rgba(
            255,
            63,
            79,
            0.08
        );
}


.k3-promo-heading {

    margin-bottom:
        14px;

    color:
        var(--k3-red-bright);

    font-weight:
        bold;

    font-size:
        0.95rem;

    letter-spacing:
        3px;

    text-shadow:
        0 0 10px
        rgba(
            255,
            63,
            79,
            0.45
        );
}


/*FAQ / DATABASE*/

.k3-landing-body
#faq-panel {

    border-color:
        rgba(
            255,
            63,
            79,
            0.45
        );

    background:
        rgba(
            7,
            9,
            13,
            0.96
        );

    box-shadow:
        0 0 28px
            rgba(
                255,
                63,
                79,
                0.16
            ),
        inset 0 0 24px
            rgba(
                122,
                184,
                255,
                0.035
            );
}


.k3-landing-body
.faq-item h2 {

    color:
        var(--k3-red-bright);
}


.k3-landing-body
#back-home-btn {

    border-color:
        var(--k3-red);

    color:
        var(--k3-red-bright);

    background:
        rgba(
            255,
            63,
            79,
            0.08
        );
}


/*PROFILE*/

.k3-landing-body
#profile-content {

    border-color:
        rgba(
            255,
            63,
            79,
            0.7
        );

    background:
        rgba(
            7,
            9,
            13,
            0.985
        );

    box-shadow:
        0 0 32px
        rgba(
            255,
            63,
            79,
            0.24
        );
}


.k3-landing-body
#profile-rank-card {

    border-color:
        rgba(
            255,
            63,
            79,
            0.3
        );

    background:
        rgba(
            255,
            63,
            79,
            0.035
        );
}


.k3-landing-body
#profile-rank-title,
.k3-landing-body
#profile-rank-name {

    color:
        var(--k3-red-bright);
}


/*AUTH / HISTORY*/

.k3-landing-body
#auth-content,
.k3-landing-body
#history-content {

    border-color:
        rgba(
            255,
            63,
            79,
            0.7
        );

    background:
        rgba(
            7,
            9,
            13,
            0.985
        );

    box-shadow:
        0 0 30px
        rgba(
            255,
            63,
            79,
            0.23
        );
}


/*MOBILE */

@media
(max-width: 920px) {

    .k3-landing-body
    #portal-actions {

        width:
            100%;

        max-width:
            560px;

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .k3-landing-body
    .portal-btn {

        min-height:
            86px;
    }


    .k3-landing-body
    .k3-hq-kicker {

        padding-left:
            10px;

        padding-right:
            10px;

        letter-spacing:
            2px;
    }
}


@media
(max-width: 600px) {

    .k3-landing-body
    #hero-section h2 {

        font-size:
            clamp(
                1.8rem,
                10vw,
                3rem
            );

        letter-spacing:
            2px;
    }


    .k3-landing-body
    .hero-subtitle {

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .k3-landing-body
    .promo-card {

        min-height:
            150px;
    }
}

/*General interactive controls*/

.k3-landing-body button:not(.portal-btn) {

    border:
        1px solid
        rgba(
            255,
            63,
            79,
            0.68
        );

    background:
        rgba(
            18,
            8,
            11,
            0.96
        );

    color:
        #ff6673;

    font-family:
        inherit;

    box-shadow:
        inset 0 0 14px
            rgba(
                255,
                63,
                79,
                0.06
            ),
        0 0 8px
            rgba(
                255,
                63,
                79,
                0.08
            );

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.k3-landing-body button:not(.portal-btn):hover {

    border-color:
        #ff5362;

    background:
        rgba(
            255,
            63,
            79,
            0.11
        );

    color:
        #ffffff;

    box-shadow:
        0 0 14px
            rgba(
                255,
                63,
                79,
                0.28
            ),
        inset 0 0 15px
            rgba(
                255,
                63,
                79,
                0.09
            );
}


.k3-landing-body button:not(.portal-btn):active {

    transform:
        translateY(1px);

    background:
        rgba(
            255,
            63,
            79,
            0.17
        );
}


.k3-landing-body button:disabled {

    opacity:
        0.42;

    cursor:
        not-allowed;

    box-shadow:
        none;
}


/*PROFILE RANK NAVIGATION*/

.k3-landing-body
#profile-rank-prev-btn,

.k3-landing-body
#profile-rank-next-btn {

    width:
        48px;

    height:
        48px;

    padding:
        0;

    border:
        1px solid
        rgba(
            255,
            63,
            79,
            0.72
        );

    background:
        rgba(
            255,
            63,
            79,
            0.06
        );

    color:
        #ff6673;

    font-size:
        1rem;

    box-shadow:
        inset 0 0 14px
            rgba(
                255,
                63,
                79,
                0.07
            );
}


.k3-landing-body
#profile-rank-prev-btn:hover,

.k3-landing-body
#profile-rank-next-btn:hover {

    background:
        rgba(
            255,
            63,
            79,
            0.14
        );

    color:
        #ffffff;

    box-shadow:
        0 0 15px
        rgba(
            255,
            63,
            79,
            0.3
        );
}


/*CLOSE BUTTONS*/

.k3-landing-body
#profile-close-btn,

.k3-landing-body
#leaderboard-close-btn,

.k3-landing-body
#history-close-btn,

.k3-landing-body
#auth-login-close-btn,

.k3-landing-body
#auth-register-close-btn {

    border:
        1px solid
        rgba(
            255,
            63,
            79,
            0.75
        );

    background:
        rgba(
            255,
            63,
            79,
            0.07
        );

    color:
        #ff6673;

    box-shadow:
        0 0 12px
        rgba(
            255,
            63,
            79,
            0.18
        );
}

.k3-landing-body
#profile-close-btn:hover,

.k3-landing-body
#leaderboard-close-btn:hover,

.k3-landing-body
#history-close-btn:hover,

.k3-landing-body
#auth-login-close-btn:hover,

.k3-landing-body
#auth-register-close-btn:hover {

    background:
        rgba(
            255,
            63,
            79,
            0.14
        );

    color:
        #ffffff;

    box-shadow:
        0 0 15px
        rgba(
            255,
            63,
            79,
            0.3
        );
}


/*PROFILE COUNTRY CONTROLS*/

.k3-landing-body
#profile-country-change-btn,

.k3-landing-body
#profile-country-save-btn,

.k3-landing-body
#profile-country-cancel-btn {

    border-color:
        rgba(
            255,
            63,
            79,
            0.62
        );

    background:
        rgba(
            255,
            63,
            79,
            0.055
        );

    color:
        #ff7a84;
}


/*SELECTS / INPUTS*/

.k3-landing-body input,

.k3-landing-body select {

    border:
        1px solid
        rgba(
            255,
            63,
            79,
            0.42
        );

    background:
        rgba(
            4,
            6,
            9,
            0.95
        );

    color:
        #e9edf3;

    outline:
        none;

    box-shadow:
        inset 0 0 12px
        rgba(
            255,
            63,
            79,
            0.04
        );
}


.k3-landing-body input:focus,

.k3-landing-body select:focus {

    border-color:
        #ff5362;

    box-shadow:
        0 0 12px
            rgba(
                255,
                63,
                79,
                0.18
            ),
        inset 0 0 12px
            rgba(
                255,
                63,
                79,
                0.055
            );
}


/*LEADERBOARD TABS / ACTIONS*/

.k3-landing-body
.leaderboard-tab {

    border-color:
        rgba(
            255,
            63,
            79,
            0.42
        );

    background:
        rgba(
            255,
            63,
            79,
            0.035
        );

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );
}


.k3-landing-body
.leaderboard-tab.active {

    border-color:
        #ff5362;

    color:
        #ff6673;

    background:
        rgba(
            255,
            63,
            79,
            0.12
        );

    box-shadow:
        0 0 12px
        rgba(
            255,
            63,
            79,
            0.16
        );
}


/*PROFILE RANK DISPLAY*/

.k3-landing-body
#profile-rank-card {

    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                63,
                79,
                0.018
            ),
            rgba(
                255,
                63,
                79,
                0.07
            ),
            rgba(
                255,
                63,
                79,
                0.018
            )
        );
}


.k3-landing-body
#profile-rank-img {

    filter:
        drop-shadow(
            0 0 10px
            rgba(
                255,
                63,
                79,
                0.2
            )
        );
}