html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: Georgia, serif; }
canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #f6e3b4; text-shadow: 0 2px 4px #000; }
#prompt { position: absolute; bottom: 18%; width: 100%; text-align: center; font-size: 26px; letter-spacing: 2px; }
#info { position: absolute; top: 12px; left: 16px; font-size: 14px; opacity: .8; }
#speed { position: absolute; bottom: 16px; right: 20px; font-size: 18px; }
#start { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(40, 15, 5, .6); color: #f6e3b4; cursor: pointer; text-shadow: 0 3px 6px #000; }
#start h1 { font-size: 72px; letter-spacing: 12px; margin: 0; }
#cross { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; border: 2px solid #f6e3b4; border-radius: 50%; opacity: .8; }
#hp { position: absolute; bottom: 16px; left: 20px; width: 220px; height: 14px; border: 2px solid #f6e3b4; background: rgba(0,0,0,.4); }
#hp div { height: 100%; width: 100%; background: #c0392b; }
#kills { position: absolute; bottom: 38px; left: 20px; font-size: 18px; }
#flash { position: absolute; inset: 0; box-shadow: inset 0 0 160px 40px #a00; opacity: 0; }