body { margin: 0; overflow: hidden; background: #87ceeb; font-family: 'Segoe UI', sans-serif; }
  #ui { position: absolute; top: 20px; left: 20px; z-index: 10; pointer-events: none; color: white; text-shadow: 2px 2px #000; }
  #hp-bar-outer { width: 250px; height: 20px; background: rgba(0,0,0,0.5); border: 2px solid #000; }
  #hp-bar-inner { width: 100%; height: 100%; background: #00ff44; transition: width 0.1s; }
  #game-over {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); color: white;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100; text-align: center;
  }
  #retry-btn { padding: 15px 30px; font-size: 20px; cursor: pointer; background: #00ff44; border: none; font-weight: bold; border-radius: 5px; margin-top: 20px; }
  #crosshair { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; }
  #crosshair::before { content: ''; position: absolute; top: 11px; left: 0; width: 24px; height: 2px; background: #ff0000; }
  #crosshair::after { content: ''; position: absolute; top: 0; left: 11px; width: 2px; height: 24px; background: #ff0000; }