*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{

overflow:hidden;
background:#111;
color:white;

}

canvas{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;

}

#ui{

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

min-height:100vh;
min-height:100dvh;

gap:25px;

}

h1{

font-size:clamp(20px,5vw,42px);
    text-align:center;
    padding:0 15px;

}

#title{

    font-size:clamp(22px,5vw,40px);
    max-width:900px;
    text-align:center;
    min-height:0;
    padding:0;

}

#timer{

font-size:clamp(40px,10vw,70px);

color:gold;

}

#score{

font-size:clamp(18px,4vw,28px);

}

#progress{

font-size:clamp(16px,4vw,24px);

}

.buttons{

display:flex;

gap:40px;

}

button{

cursor:pointer;

font-size:clamp(16px,4vw,28px);

padding:12px 20px;

border:none;

border-radius:10px;

transition:.2s;

}

select{
    font-size:18px;
    padding:10px;
    border-radius:10px;
}

@media (max-width:768px){

    #ui{
        gap:15px;
        padding:15px;
    }

    .buttons{
        flex-direction:column;
        width:100%;
        gap:15px;
    }

    button{
        width:100%;
    }

    select{
        width:100%;
        max-width:400px;
        height:50px;
    }

}

button:hover{

transform:scale(1.05);

}

#bad{

background:#d62828;

color:white;

}

#good{

background:#2a9d8f;

color:white;

}

#start{

background:#3f37c9;

color:white;

}

button:disabled{
    opacity:0.4;
    cursor:default;
    transform:none;
}