/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - RACING
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.racing-page {
    position: relative;

    width: 100%;
    min-height: 100vh;
    height: 100vh;

    overflow: hidden;

    background:
        url('/assets/images/racing-bg.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.racing-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.82)
        );

    backdrop-filter: blur(2px);
}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.racing-content {
    position: relative;

    z-index: 2;

    padding:
        140px
        60px
        60px;

    height: 100vh;

    overflow: hidden;    
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.racing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 60px;
}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.racing-title {
    color: #FFFFFF;

    font-size: 56px;
    font-weight: 900;

    letter-spacing: 2px;
}

/*
|--------------------------------------------------------------------------
| SUBTITLE
|--------------------------------------------------------------------------
*/

.racing-subtitle {
    margin-top: 10px;

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

    font-size: 16px;
    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| PLAYER
|--------------------------------------------------------------------------
*/

.racing-player {
    padding:
        18px
        24px;

    border-radius: 22px;

    background:
        rgba(10, 10, 10, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.06);
}

/*
|--------------------------------------------------------------------------
| PLAYER NAME
|--------------------------------------------------------------------------
*/

.racing-player-name {
    color: #FFFFFF;

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

/*
|--------------------------------------------------------------------------
| PLAYER LEVEL
|--------------------------------------------------------------------------
*/

.racing-player-level {
    margin-top: 6px;

    color: #FF3434;

    font-size: 13px;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| MAIN
|--------------------------------------------------------------------------
*/

.racing-main {
    display: grid;

    grid-template-columns:
        1.2fr
        420px;

    gap: 40px;

    align-items: center;
}

/*
|--------------------------------------------------------------------------
| CAR
|--------------------------------------------------------------------------
*/

.racing-car-wrapper {
    position: relative;

    height: 420px;

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

    border-radius: 36px;

    background:
        rgba(10, 10, 10, 0.62);

    border:
        1px solid rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(6px);
}

/*
|--------------------------------------------------------------------------
| PANEL
|--------------------------------------------------------------------------
*/

.racing-panel {
    padding: 30px;

    border-radius: 32px;

    background:
        rgba(10, 10, 10, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);
}

/*
|--------------------------------------------------------------------------
| PANEL TITLE
|--------------------------------------------------------------------------
*/

.racing-panel-title {
    color: rgba(255, 255, 255, 0.42);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}

/*
|--------------------------------------------------------------------------
| CAR NAME
|--------------------------------------------------------------------------
*/

.racing-car-name {
    margin-top: 12px;

    color: #FFFFFF;

    font-size: 34px;
    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| STATS
|--------------------------------------------------------------------------
*/

.racing-stats {
    margin-top: 34px;

    display: flex;
    flex-direction: column;

    gap: 18px;
}

/*
|--------------------------------------------------------------------------
| STAT
|--------------------------------------------------------------------------
*/

.racing-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        18px
        20px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.03);
}

/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.racing-stat-label {
    color: rgba(255, 255, 255, 0.52);

    font-size: 13px;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| VALUE
|--------------------------------------------------------------------------
*/

.racing-stat-value {
    color: #FFFFFF;

    font-size: 16px;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| START BUTTON
|--------------------------------------------------------------------------
*/

.racing-start-button {
    width: 100%;
    height: 64px;

    margin-top: 34px;

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

    gap: 14px;

    border: none;
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #FF3434,
            #FF2020
        );

    color: #FFFFFF;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.22s ease;

    box-shadow:
        0 0 24px rgba(255, 52, 52, 0.22);
}

.racing-start-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 34px rgba(255, 52, 52, 0.32);
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .racing-main {
        grid-template-columns: 1fr;
    }

    .racing-content {
        padding:
            120px
            20px
            40px;
    }

    .racing-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }
}

/*
|--------------------------------------------------------------------------
| DISABLE PAGE SCROLL
|--------------------------------------------------------------------------
*/

body.racing-active {
    overflow: hidden;
}



/*
|--------------------------------------------------------------------------
| LANE
|--------------------------------------------------------------------------
*/

.race-lane {

    height: 220px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,.45);

    border:
        1px solid rgba(255,255,255,.05);

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| CAR SCALE
|--------------------------------------------------------------------------
*/

.race-lane .layered-car {

    width: 520px;

    max-width: 90%;
}