html, body {
  margin: 0;
  height: 100%;
  background: #0c0f08;
  overflow: hidden;
  font-family: monospace;
}
#game { display: block; width: 100vw; height: 100vh; cursor: crosshair; }
#hud {
  position: fixed; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none; z-index: 10;
}
#hp { display: flex; align-items: center; gap: 8px; color: #cfd8b0; font-size: 14px; text-shadow: 1px 1px 0 #000; }
#hpbar { width: 220px; height: 14px; border: 2px solid #3a4020; background: #1a1d10; }
#hpfill { height: 100%; width: 100%; background: #7fa030; }
#kills { color: #cfd8b0; font-size: 14px; text-shadow: 1px 1px 0 #000; }
#hint {
  position: fixed; bottom: 8px; left: 0; right: 0; text-align: center;
  color: #5a6640; font-size: 12px; pointer-events: none; z-index: 10; text-shadow: 1px 1px 0 #000;
}
#overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(8, 10, 5, .85); color: #d8e0b8; text-align: center;
}
#overlay[hidden] { display: none; }
#overlay h1 { color: #c04030; font-size: 32px; letter-spacing: 3px; margin: 0; }
#overlay button {
  padding: 10px 24px; background: #3a4020; color: #e8eec8;
  border: 2px solid #6a7a30; font-family: monospace; font-size: 16px; cursor: pointer;
}
#overlay button:hover { background: #4a5330; }