/*==================================================
    FPS GAME
    Index.css
==================================================*/

/*=========================
Background Video
=========================*/

#backgroundVideo{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

}

.overlay{

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        rgba(5,10,20,.65),

        rgba(0,0,0,.88)

    );

    z-index:-2;

}

/*=========================
Main Container
=========================*/

.container{

    width:80%;

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}

/*=========================
Logo
=========================*/

#logo{

    width:120px;

    margin-bottom:25px;

    animation:logoFloat 4s ease-in-out infinite;

    filter:

        drop-shadow(0 0 25px rgba(0,183,255,.6));

}

.container h1{

    font-size:64px;

    letter-spacing:6px;

    color:#ffffff;

    margin-bottom:12px;

    text-shadow:

        0 0 10px #00b7ff,

        0 0 30px #00b7ff;

}

.container p{

    color:#c8d4e3;

    font-size:18px;

    margin-bottom:35px;

}

/*=========================
Progress
=========================*/

.progress{

    width:520px;

    max-width:90%;

    height:18px;

    background:#1b2433;

    border-radius:30px;

    overflow:hidden;

    margin-bottom:15px;

}

.progress-bar{

    width:0;

    height:100%;

    background:

        linear-gradient(

            90deg,

            #00b7ff,

            #00ff88

        );

    transition:.25s;

}

#loadingText{

    font-size:16px;

    color:#00ff88;

    margin-bottom:30px;

}

/*=========================
System Info
=========================*/

.system{

    width:520px;

    max-width:90%;

    display:grid;

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

    gap:12px;

    padding:20px;

    margin-bottom:35px;

    border-radius:15px;

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(15px);

}

.system div{

    color:#d7dde5;

    text-align:left;

}

.system span{

    color:#00b7ff;

    font-weight:bold;

}

.keyboard-info{

    margin-top:25px;

    text-align:center;

    color:#9db5cf;

    font-size:13px;

    line-height:2;

    letter-spacing:1px;

    opacity:.9;

}

/*=========================
Buttons
=========================*/

.buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

    margin-bottom:25px;

}

.buttons button{

    min-width:180px;

    padding:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    color:#fff;

    transition:.25s;

}

#playButton{

    background:

        linear-gradient(

            135deg,

            #00d084,

            #00ff88

        );

}

#settingButton{

    background:

        linear-gradient(

            135deg,

            #00b7ff,

            #0066ff

        );

}

#exitButton{

    background:

        linear-gradient(

            135deg,

            #ff4b5c,

            #c62828

        );

}

.buttons button:hover{

    transform:translateY(-3px);

    box-shadow:

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

}

.buttons button:disabled{

    opacity:.5;

    cursor:not-allowed;

}

/*=========================
Version
=========================*/

.version{

    margin-top:10px;

    color:#9fb3c9;

    font-size:14px;

}

.version span{

    color:#00ff88;

}

/*=========================
Splash Screen
=========================*/

#splash{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#05080f;

    z-index:9999;

}

#splash h2{

    margin-top:25px;

    color:#00b7ff;

    letter-spacing:2px;

}

/*=========================
Spinner
=========================*/

.spinner{

    width:90px;

    height:90px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid #00b7ff;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

/*=========================
Animations
=========================*/

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.container{

    animation:fadeIn .8s ease;

}

/*=========================
Responsive
=========================*/

@media(max-width:992px){

    .container h1{

        font-size:48px;

    }

    .system{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    #logo{

        width:140px;

    }

    .buttons{

        flex-direction:column;

        width:100%;

        max-width:360px;

    }

    .buttons button{

        width:100%;

    }

}

@media(max-width:480px){

    .container{

        padding:20px;

    }

    .container h1{

        font-size:34px;

        letter-spacing:2px;

    }

    .container p{

        font-size:15px;

    }

    .progress{

        width:100%;

    }

    .system{

        width:100%;

    }

}