body, html { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: sans-serif; }
canvas { display: block; width: 100vw; height: 100vh; }

#ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; }

#crosshair {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; background: white; border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

#health-container {
    position: absolute; bottom: 30px; left: 30px;
    width: 300px; height: 15px; background: rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.8);
    transform: skewX(-15deg);
}

#health-bar { width: 100%; height: 100%; background: #00ffaa; transition: width 0.2s, background 0.2s; }

#menu {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); color: white;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; pointer-events: auto;
}

#menu h1 { font-size: 4rem; margin-bottom: 0; letter-spacing: 5px; }
#menu p { color: #aaa; margin-top: 10px; }