/* ==========================================
   FOR DRIVE - MAIN STYLESHEET
   PART 1
   ========================================== */


/* ==========================================
   RESET
   ========================================== */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html,
body {

    width:100%;
    height:100%;

    font-family:'Inter',sans-serif;

    background:#090b10;

    color:white;

    overflow-x:hidden;

}


html {

    scroll-behavior:smooth;

}
#mobileStartButton {


    position:fixed;


    left:50%;

    top:50%;


    transform:
    translate(-50%,-50%);


    padding:20px 50px;


    font-size:28px;


    font-family:Arial;


    border:none;


    border-radius:15px;


    background:#00d4ff;


    color:black;


    z-index:9999;


}


/* ==========================================
   VARIABLES
   ========================================== */

:root {


    --bg:#090b10;

    --bg2:#11151d;

    --card:rgba(255,255,255,.05);

    --border:rgba(255,255,255,.08);


    --primary:#00d4ff;

    --primary-hover:#00fff2;


    --text:#ffffff;

    --text2:#b9c3d0;


    --shadow:
    0 15px 40px rgba(0,0,0,.45);


    --radius:18px;


    --transition:.3s ease;


}



/* ==========================================
   BACKGROUND
   ========================================== */


body::before {


    content:"";


    position:fixed;

    inset:0;


    background:

    radial-gradient(
        circle at top left,
        #00d4ff15,
        transparent 30%
    ),

    radial-gradient(
        circle at bottom right,
        #00d4ff10,
        transparent 35%
    );


    z-index:-2;


}



body::after {


    content:"";


    position:fixed;

    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.02) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.02) 1px,
        transparent 1px
    );


    background-size:50px 50px;


    z-index:-1;


}



/* ==========================================
   SCROLLBAR
   ========================================== */


::-webkit-scrollbar {

    width:10px;

}


::-webkit-scrollbar-track {

    background:#0a0c12;

}


::-webkit-scrollbar-thumb {

    background:var(--primary);

    border-radius:30px;

}



/* ==========================================
   UNITY LOADING SCREEN
   ========================================== */
#loading-screen {

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:black;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    color:white;

    font-size:30px;

}

#unity-loading {

    display:none;

    position:absolute;

    inset:0;

    background:#000;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}


  #loading-bar {
    width: 300px;
    max-width: 80%;
    height: 12px;

    background: rgba(0, 30, 60, 0.7);
    border: 1px solid #00aaff;
    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 0 5px #00aaff,
        0 0 10px #00aaff,
        0 0 20px rgba(0, 170, 255, 0.7);
}

#loading-progress {
    width: 0%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #0066ff,
        #00aaff,
        #00eaff
    );

    border-radius: 10px;

    box-shadow:
        0 0 5px #00aaff,
        0 0 10px #00aaff,
        0 0 20px #00d9ff,
        0 0 35px #00aaff;

    transition: width 0.15s ease;
}

#loading-text {
    color: #00d9ff;

    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;

    margin-bottom: 15px;

    text-shadow:
        0 0 5px #00aaff,
        0 0 10px #00aaff,
        0 0 20px #00aaff;
}




@keyframes loadingGlow {


    from {


        box-shadow:

        0 0 10px #00ffff,

        0 0 20px #008cff;


    }



    to {


        box-shadow:

        0 0 20px #00ffff,

        0 0 50px #008cff,

        0 0 80px #00ffff;


    }


}



/* ==========================================
   UNITY WEBGL
   ========================================== */


.play-page {

    margin-top:90px;

    width:100%;

    height:calc(100vh - 90px);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


#unity-container {

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}


#unity-canvas {

    width:100%;

    height:100%;

    display:block;

}





/* ==========================================
   NAVBAR
   ========================================== */


header {


    position:fixed;


    top:0;


    left:0;


    width:100%;


    z-index:1000;


    backdrop-filter:blur(12px);


    background:
    rgba(10,10,15,.65);


    border-bottom:
    1px solid rgba(255,255,255,.06);


}




.navbar {


    max-width:1300px;


    margin:auto;


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:18px 30px;


}



.logo {


    font-family:'Orbitron',sans-serif;


    font-size:32px;


    font-weight:900;


    color:var(--primary);


    letter-spacing:3px;


    text-shadow:
    0 0 15px var(--primary);


}



.nav-links {


    display:flex;


    list-style:none;


    gap:35px;


}




.nav-links a {


    text-decoration:none;


    color:white;


    font-weight:500;


    transition:var(--transition);


}



.nav-links a:hover {


    color:var(--primary);


    text-shadow:
    0 0 10px var(--primary);


}



.mobile-menu {


    display:none;


    font-size:32px;


    cursor:pointer;


}



/* ==========================================
   HERO
   ========================================== */


.hero {


    height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    position:relative;


    overflow:hidden;


    background:


    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.75)
    ),

    url("../images/hero.jpg")
    center/cover;


}



.hero-overlay {


    position:absolute;


    inset:0;


    background:

    radial-gradient(
        circle,
        #00d4ff10,
        transparent 65%
    );


}



.hero-content {


    position:relative;


    z-index:5;


    text-align:center;


    max-width:900px;


    padding:20px;


}



.hero h1 {


    font-family:'Orbitron';


    font-size:82px;


    letter-spacing:8px;


    color:white;


    text-shadow:


    0 0 15px #00d4ff,

    0 0 45px #00d4ff;


    animation:
    heroGlow 3s infinite alternate;


}



@keyframes heroGlow {


    from {

        text-shadow:

        0 0 10px #00d4ff,

        0 0 25px #00d4ff;

    }


    to {


        text-shadow:

        0 0 20px #00fff2,

        0 0 60px #00fff2;

    }


}



.hero h2 {


    color:var(--primary);


    font-size:30px;


    margin:20px 0;


}



.hero p {


    color:var(--text2);


    font-size:19px;


    line-height:1.8;


    margin-bottom:40px;


}



/* ==========================================
   BUTTONS
   ========================================== */


.hero-buttons {


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.btn {


    padding:16px 34px;


    border-radius:50px;


    text-decoration:none;


    color:white;


    font-weight:600;


    transition:var(--transition);


}



.btn-primary {


    background:var(--primary);


    color:black;


    box-shadow:

    0 0 20px rgba(0,212,255,.35);


}



.btn-primary:hover {


    background:var(--primary-hover);


    transform:translateY(-5px);


}



.btn-secondary {


    border:

    2px solid var(--primary);


}



.btn-secondary:hover {


    background:var(--primary);


    color:black;


    transform:translateY(-5px);


}
/* ==========================================
   SECTIONS
   ========================================== */


.section {

    max-width:1300px;

    margin:auto;

    padding:110px 30px;

}



.dark {

    background:var(--bg2);

    border-radius:25px;

    margin-top:40px;

    margin-bottom:40px;

}



.section-title {

    text-align:center;

    font-size:42px;

    font-family:'Orbitron';

    color:var(--primary);

    margin-bottom:60px;

}



/* ==========================================
   FEATURES
   ========================================== */


.features-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



.feature-card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    backdrop-filter:blur(12px);

    box-shadow:var(--shadow);

    transition:var(--transition);

}



.feature-card:hover {

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:
    0 0 25px rgba(0,212,255,.25);

}



.feature-card h3 {

    color:var(--primary);

    font-size:24px;

    margin-bottom:20px;

}



.feature-card p {

    color:var(--text2);

    line-height:1.7;

}



/* ==========================================
   PLAY PAGE
   ========================================== */


.player-info {

    margin:30px 0;

}



.player-info h3 {

    color:var(--text2);

}



.player-info p {

    font-size:28px;

    color:white;

    font-family:'Orbitron';

}



.play-description {

    color:var(--text2);

    line-height:1.8;

    margin-bottom:35px;

}



.play-button {

    display:inline-block;

    font-size:20px;

    padding:18px 50px;

}



/* ==========================================
   LOGIN PAGE
   ========================================== */


.login-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:120px 20px 40px;

}



.login-card {


    width:100%;


    max-width:460px;


    background:
    rgba(20,24,32,.90);


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


    border-radius:20px;


    padding:40px;


    backdrop-filter:blur(16px);


    box-shadow:
    0 20px 60px rgba(0,0,0,.45);


}



.login-card h1 {


    text-align:center;


    font-family:'Orbitron';


    color:var(--primary);


    margin-bottom:10px;


}



.login-card p {


    text-align:center;


    color:var(--text2);


    margin-bottom:30px;


}



.input-group {


    display:flex;


    flex-direction:column;


    margin-bottom:20px;


}



.input-group label {


    color:var(--text2);


    margin-bottom:8px;


}



.input-group input {


    padding:15px;


    border-radius:10px;


    border:

    1px solid rgba(255,255,255,.08);


    background:#161b22;


    color:white;


    font-size:16px;


}



.input-group input:focus {


    outline:none;


    border-color:var(--primary);


}



.login-btn {


    width:100%;


}



.login-footer {


    margin-top:25px;


    text-align:center;


    color:var(--text2);


}



.login-footer a {


    color:var(--primary);


    text-decoration:none;


}



#loginMessage {


    margin-top:20px;


    text-align:center;


    font-weight:600;


}



/* ==========================================
   ACCOUNT PAGE
   ========================================== */


.account-card {


    width:100%;


    max-width:900px;


    background:
    rgba(20,24,32,.90);


    border:

    1px solid rgba(255,255,255,.08);


    border-radius:20px;


    padding:40px;


    backdrop-filter:blur(16px);


}



.account-card h1 {


    text-align:center;


    font-family:'Orbitron';


    color:var(--primary);


    margin-bottom:40px;


}



.profile-info {


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;


}



.profile-box {


    background:var(--card);


    border:

    1px solid var(--border);


    border-radius:15px;


    padding:25px;


    text-align:center;


}



.profile-box h3 {


    color:var(--primary);


    margin-bottom:15px;


}



.profile-box p {


    color:white;


    font-size:20px;


}



.account-actions {


    display:flex;


    justify-content:center;


    gap:20px;


    margin-top:40px;


    flex-wrap:wrap;


}



/* ==========================================
   LEADERBOARD
   ========================================== */


.leaderboard-page {


    min-height:100vh;


    padding:140px 30px 80px;


    text-align:center;


}



.leaderboard-page h1 {


    font-family:'Orbitron';


    color:var(--primary);


    font-size:48px;


}



.leaderboard-container {


    max-width:1000px;


    margin:auto;


    background:var(--card);


    border-radius:20px;


    overflow:hidden;


}



table {


    width:100%;


    border-collapse:collapse;


}



thead {


    background:#11151d;


}



th {


    padding:20px;


    color:var(--primary);


    font-family:'Orbitron';


}



td {


    padding:18px;


    color:white;


    border-top:

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


}



tbody tr:hover {


    background:

    rgba(0,212,255,.08);


}



/* ==========================================
   DOWNLOAD PAGE
   ========================================== */


.download-page {


    min-height:100vh;


    padding:140px 30px 80px;


    text-align:center;


}



.download-page h1 {


    font-family:'Orbitron';


    color:var(--primary);


    font-size:48px;


}



.download-grid {


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));


    gap:30px;


}



.download-card {


    background:var(--card);


    border:

    1px solid var(--border);


    border-radius:20px;


    padding:40px;


    transition:var(--transition);


}



.download-card:hover {


    transform:translateY(-10px);


    border-color:var(--primary);


}



.download-card h2 {


    color:var(--primary);


}



.download-card p {


    color:var(--text2);


    line-height:1.7;


}



.version {


    color:white!important;


}



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


footer {


    margin-top:60px;


    padding:60px 20px;


    text-align:center;


    background:#08090d;


    border-top:

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


}



.footer-content h2 {


    font-family:'Orbitron';


    color:var(--primary);


}



.footer-content p {


    color:var(--text2);


    margin:8px;


}



/* ==========================================
   RESPONSIVE
   ========================================== */


@media(max-width:900px){


    .nav-links {

        display:none;

    }


    .mobile-menu {

        display:block;

    }



    .hero h1 {

        font-size:56px;

    }



    .section-title {

        font-size:34px;

    }



    .unity-wrapper {

        width:95%;

        height:70%;

    }


}



@media(max-width:600px){


    .hero h1 {

        font-size:42px;

        letter-spacing:3px;

    }



    .hero p {

        font-size:16px;

    }



    .btn {

        width:100%;

        text-align:center;

    }



    .hero-buttons {

        flex-direction:column;

    }



    .navbar {

        padding:18px;

    }



    .login-card {

        padding:25px;

    }


}