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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#111;
    color:white;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

#app{
    width:100%;
    height:100%;
    position:relative;
}

.screen{
    display:none;
    width:100%;
    height:100%;
}

.screen.active{
    display:flex;
}

#gameScreen{
    justify-content:center;
    align-items:center;
    background:#202020;
}

#gameCanvas{
    background:#444;
    width:min(100vw,480px);
    height:min(100vh,800px);
    border:4px solid #fff;
    display:block;
}

button{
    cursor:pointer;
    border:none;
    outline:none;
}

h1,h2,h3{
    text-align:center;
}

label{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin:10px;
}

input[type="checkbox"]{
    width:20px;
    height:20px;
}

.hidden{
    display:none !important;
}

.center-column{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.flex{
    display:flex;
}

.overlay{
    display:none;
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:1000;
}

.overlay.active{
    display:flex;
}

.backBtn{
    margin-top:20px;
}