body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: black; }
#renderCanvas { width: 100%; height: 100%; touch-action: none; outline: none; }
#uiLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.screen { pointer-events: auto; background: rgba(0, 0, 0, 0.85); border: 2px solid lime; padding: 20px; display: none; }
.visible { display: block; }

h1 { color: lime; font-family: "Courier New", Courier, monospace; font-size: 48px; margin: 0 0 20px 0; text-transform: uppercase; text-shadow: 0 0 10px lime; }
p { color: lime; font-family: "Courier New", Courier, monospace; font-size: 24px; margin: 10px 0; }
button { background: black; color: lime; border: 2px solid lime; font-family: "Courier New", Courier, monospace; font-size: 24px; padding: 10px 20px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
button:hover { background: lime; color: black; }

#hud { position: absolute; top: 10px; left: 10px; color: lime; font-family: "Courier New", Courier, monospace; font-size: 18px; text-align: left; pointer-events: none; }

#crosshair { 
    position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; 
    transform: translate(-50%, -50%); pointer-events: none;
}
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: lime; }
#crosshair::before { top: 9px; left: 0; width: 20px; height: 2px; }
#crosshair::after { top: 0; left: 9px; width: 2px; height: 20px; }

#radarCanvas {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 150px;
    height: 150px;
    border: 2px solid #0f0;
    border-radius: 50%;
    background-color: rgba(0, 20, 0, 0.5);
    z-index: 10;
}