html,body{
margin:0;
height:100%;
overflow:hidden;
background:#05070b;
font-family:Arial
}
canvas{display:block;width:100%;height:100%}
#hud{
position:fixed;
top:15px;
left:15px;
z-index:5;
color:white;
border:2px solid cyan;
padding:12px;
background:#001522cc;
border-radius:15px
}
#crosshair{
position:fixed;
left:50%;
top:50%;
z-index:5;
color:#00ffff;
font-size:32px
}
#mobileControls{
display:none;
position:fixed;
bottom:20px;
left:0;
right:0;
z-index:10;
justify-content:space-between;
padding:20px
}
.stick{
width:110px;
height:110px;
border-radius:50%;
border:2px solid cyan;
background:#001522aa;
display:flex;
align-items:center;
justify-content:center
}
.stick span{
width:45px;
height:45px;
border-radius:50%;
background:#00ffff
}
@media(max-width:700px){
#mobileControls{display:flex}
}

#searchBar{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
z-index:20;
display:flex;
width:min(90%,600px);
}
#searchBar input{
flex:1;
padding:14px;
border-radius:25px 0 0 25px;
border:1px solid cyan;
}
#searchBtn{
border-radius:0 25px 25px 0;
}
#theme{
position:fixed;
right:20px;
top:20px;
z-index:20;
}
.light canvas{filter:brightness(1.3)}
.dark canvas{filter:brightness(.7)}