html, body { margin: 0; height: 100%; overflow: hidden; background: #111; color: #eee; font: 15px/1.4 system-ui, sans-serif; }
canvas#game { display: block; width: 100vw; height: 100vh; cursor: none; }
#hud { position: fixed; top: 16px; left: 16px; display: grid; gap: 6px; text-shadow: 0 1px 2px #000; pointer-events: none; }
#hud .bar { width: 240px; height: 14px; background: #0009; border: 1px solid #fff4; border-radius: 3px; overflow: hidden; }
#hp { height: 100%; width: 100%; background: linear-gradient(90deg, #b3261e, #e5533d); transition: width .15s; }
#ammo { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
#crosshair { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #ffffffcc; border-radius: 50%; pointer-events: none; }
#crosshair::after { content: ""; position: absolute; left: 9px; top: 9px; width: 4px; height: 4px; background: #fff; border-radius: 50%; }
#overlay { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: #000b; cursor: pointer; }
#overlay h1 { margin: 0 0 .3em; font-size: 56px; letter-spacing: .06em; }
#overlay h1 span { color: #e5533d; font-size: .6em; }
#overlay .keys { opacity: .7; }
[hidden] { display: none !important; }